Create Template Content

by Community Manager on ‎08-13-2015 01:36 PM - edited on ‎05-24-2017 09:24 PM by Community Manager

OVERVIEW

To begin using the template editor, you'll need to create template content. Each piece of Template Content acts as a component that you can insert into your Quote Template. 

 

SETUP

  1. Click the Template Content tab.
  2. Click New.
  3. Select the content type and click Continue
    • HTML: Select this option for any combination of dynamic fields, such as merge fields or formatted text (i.e. bold, bullets, etc.). This uses an enhanced WYSIWYG editing toolbar to automatically insert the correct HTML tags in your content.
    • Line Items: Select this option to create a placeholder for the table that lists the Quote Line items. You do not have to reformat this table in your template content. The columns in the Line Columns related list of your Quote Template still determine which attributes to display in this table. Note that there must be at least two columns in order for the Quote to render.
    • Quote Terms: See Creating Quote Term Template Content for more information on creating template content for dynamic quote terms and conditions.
    • Custom: Select this option to use a Visualforce component in the Custom Source field that you want to display in this section of your quote template. You'll need to enter the full URL for the Visualforce page that generates this content, using the following format (page name should end with the "c__" prefix):      https://c.<instance>.force.com/apex/c__OptivTemplateSectionComponent. The VisualForce component needs to be compatible with XML (specifically XSL-FO) to be compatible with Steelbrick document output.
    • Template Bottom: Select this option to use our standard bottom content for the quote template, including notes, dates and final signature information.
    • Template Top: Select this option to use our standard top content for the quote template, including logo, street address and ship to/bill to details, by default.
  4. Enter a Name for the content. This name will be used on the Section and Quote Template.
  5. Choose a Font Family, Text Color (6 character hexadecimal. ie. 000000 is Black and FFFFFF is White), and Font Size to be displayed.
  6. Enter your template content in the text editor section. An overview of text editing functions is provided below.
  7. Click Save.

 

TEMPLATE CONTENT EDITOR

template content editor.png

 

The template content editor provides a variety of functions for content editing, each represented by an icon. The positioning of these icons may change based on your browser size. For the purpose of this walkthrough, we will be using the icon layout of the above picture. 

 

 

TABLES IN QUOTE TEMPLATES

Tables in Quote Templates require additional markup if you want the Table's borders to display when viewing a Quote; setting the border size to a certain number will cause the borders to be visible in template content view, but not when viewing the Quote with that template.

 

Table borders are made visible by editing the HTML for the table cell size & style in the Source editor.

  1. Select the Source editor button and navigate the HTML to find your table. This can be done quickly by doing a text search (control-F or command-F) for text in one of your table's cells.
  2. Find the <td> tags for the cells you wish to edit. They should look similar to this:
    • table.png
  3. The above code is valid but only sets the color of the border - you'll need to give it a width and style. Change the HTML to the following:
    • <td style="border: 1px solid rgb(102, 102, 102)">
  4. The "border" CSS property is short for "width style color", allowing users to set all three at once. Increasing the number to the left of px will increase the size of your border.

 

STANDARD TEMPLATE CONTENT MARKUP FIELDS

Any of the fields below will convert into the corresponding object listed under Description.

Field Starts With Description
!companyLogo This is a standard field that references the logo on the Quote Template.
!template. This references all fields related to the SteelBrick CPQ Quote Template object.
!quote. This references all fields related to the SteelBrick CPQ Quote object.
!primaryContact. This references all fields related to the Primary Contact on the SteelBrick CPQ Quote object.
!salesRep. This references all fields related to the Sales Rep on the SteelBrick CPQ Quote object.
!document. This is a standard field that represents the version only.

 

 

Image Fields in Template Content

Caution:Documents will not generate if any of your Template Content contains an image formula that directs to an non-functional URL. We recommend image formula logic that doesn't return a non-functional URL if the image ID is invalid. 

 

 

Tip: In order to view non-Quote fields on the Quote Template, you will need to create a formula or workflow rule to move this information, for example Account and Opportunity information, onto the Quote object.

Tip: To insert a merge field in the Markup field, follow this format: {!quote.SBQQ__ExpirationDate__c}. The first word indicates that the field resides on the Quote object. Remove the "SBQQ__" term if the field is a custom field and was not part of the SteelBrick CPQ managed package. Finally, if you paste the field name from a browser or word processing application, click the HTML button in the formatting toolbar to make sure format tags were not inserted within the merge text field.

Tip: If you'd like an image to span the entire page of an HTML Template Content section, set the image width to 540px. The image height will auto-format.

Note: If you are using Professional Edition, add the Raw Markup field to your Template Content page layout.

  • Quote Documents render Rich Text from Merge fields if they contain underlines, strikethroughs, or numbered lists
  • Hyperlinks can utilize readable and clickable text (not just the URLs)
  • Line Item Group titles display in the correct font family setting (not just Helvetica)
  • HTML template content text without font tags picks up the font family settings on the template
  • HTML text with font tags displays that font
  • Quote documents inherit formatting from Quote Terms settings
  • Montserrat font is not supported in italic
  • Arial font is not supported in bold & italic

HTML limitations & suggested alternatives

Comments
by hjones
on ‎02-02-2016 07:31 PM

Are there any standard date literals available for the markup fields (ie. TODAY)?  Or would I need to create a formula on the Quote object to get today's date on a quote document?

by pdxanthony
on ‎02-18-2016 02:54 PM
Why is this spitting out a string literal: {!quote.SBQQ__ListAmount__c-quote.SBQQ__NetAmount__c}? Does standard visualforce not work on this object or am I missing something obvious in the markup? Seems like we should have access to the VF function/operators here.
by CMac
on ‎02-29-2016 11:55 AM

We need double line spacing for some paragraphs.

How is this performed in the SB PDF rendering?  The standard HTML tags do not work.

by ob
on ‎03-23-2016 11:45 AM

Echoing CMac, the HTML "line-height" property does not work — it shows up in the editor, but not in generated docuemnts. How can we adjust line height in our documents??

by Community Manager
on ‎04-07-2016 11:09 AM

Under "To Create Template Content" updated section #4 Custom

by BMayotte
‎05-20-2016 07:35 PM - edited ‎06-01-2016 10:19 AM

<strong>text</strong> does not work.

It will populate in my preview editor, but never on the quote preview.

Anyone else run into this issue?

Found Reason:
Arial Font only font that supports special characters like ballot boxes.
Arial Font can not be set bold or italic.

....
sigh

by wsupinski
on ‎06-15-2016 12:44 PM

I second the comment by hjones above. Please respond.

by Community Manager
on ‎06-15-2016 12:52 PM

Pleaes create quote fields to display whatever dates you want on the template.  

by ckamin
on ‎07-30-2016 08:36 PM

Is there an easy way to display formatted tables? I can't get cell or table borders or background fill to display in an HTML section with any combination of HTML and/or CSS markup. I can only get plain, left-aligned text to render. Do you really need XML in a VF component in order to accomplish this basic task?

by BMayotte
on ‎08-01-2016 10:21 AM

@ckamin I had these same issues when I first started using tables in steelbrick.

The soltuion is build the tables slowly adding one component at a time until you find the HTML that breaks the table.

Once you get a feel for it, it goes much faster. The first tables you set up can lead to a hair pulling experience. 

by ckamin
on ‎08-01-2016 11:16 AM

@BMayotte Thanks for the follow-up. Can you offer me any suggestions or raw code that you've found allow you to format tables with shading, borders, and centered text? I tried dozens of different formats and the only tag I can get to work in/on the table is Bold text.

by BMayotte
‎08-01-2016 11:43 AM - edited ‎08-01-2016 11:47 AM
<p style="text-align: center;">&#160;</p>

<table align="center" cellborder="10" style="border:10px;width:500px;">
	<tbody>
		<tr>
			<td style="width: 40px;">&#160;</td>
			<td style="padding: 5px; border: 2px solid black; font-family: arial, sans-serif; font-size: 10.5px; color: rgb(255, 255, 255); text-align: center; background-color: rgb(102, 102, 102);"><span style="font-family:helvetica,sans-serif;"><strong>STEP 1</strong></span></td>
			<td style="padding: 5px; border: 2px solid black; font-family: arial, sans-serif; font-size: 10.5px; color: rgb(255, 255, 255); text-align: center; background-color: rgb(102, 102, 102);"><span style="font-family:helvetica,sans-serif;"><strong>Section Title</strong></span></td>
			<td style="width: 40px;">&#160;</td>
		</tr>
		<tr>
			<td>&#160;</td>
			<td style="padding: 5px; border: 2px solid black; font-family: arial, sans-serif; font-size: 10.5px; text-align: center;"><span style="font-family:helvetica,sans-serif;">Day 1</span></td>
			<td style="padding: 5px; border: 2px solid black; font-family: arial, sans-serif; font-size: 10.5px; text-align: center;"><span style="font-family:helvetica,sans-serif;">Test Text</span></td>
			<td>&#160;</td>
		</tr>
	</tbody>
</table>

<p>&#160;</p>

 

@ckamin This is a very simple table that you can work off of that has worked in our quote template. Feel free to add rows and columns. I have two  extra border cells to help with formatting.

The one issue you will see with the formatter is the number of spans input. I always take my tables into sublime text and remove the extra spans. This is typically what has caused loading errors for me.

by felixguinet
on ‎08-08-2016 12:41 PM

Hi guys,

 

Can you help me understand how  Lookup fields  are handled?  

 

I created a custom field  "Shipping Contact" on the Quote object  (type: lookup to contact,  id = Shipping_Contact__c ). Now in the Quote template,  I used :   {!quote.Shipping_Contact__c.Name}   but it doesn't render the name of this contact.  

 

I see that SteelBrick  has defined its own  syntax for  primaryContact  and for salesRep  which are the other 2 lookups on the SteelBrick Quote object.   Is it possible to define our own  syntax,  in which case I would add   shippingContact pointing to  my field Shipping_Contact__c ?

 

Thanks!

 

 

by ckamin
on ‎08-08-2016 12:45 PM

@felixguinet

 

I think you'll need a formula field on the Quote object of type "Text" that directly pulls in the name of the Contact referenced in the Lookup field.

by felixguinet
on ‎08-08-2016 01:20 PM

@ckamin  yes that is going to be a workaround,  creating one formula per field.  To avoid creating 4 formulas fields if I want the first name, last name, phone and email  of the contact,   I'm trying to concatenate them in 1 formula.  Right now,  the last problem I have is with the line break.    Salesforce wants BR() tag in the formula  while  SteelBrick PDF generator breaks when the tag is used in formula.

 

by ckamin
on ‎08-08-2016 01:43 PM

The tag for a line break in a SteelBrick HTML section should just be this:

 

<br />

by felixguinet
on ‎08-08-2016 02:04 PM

@ckamin

 

Alright so after multiple trys and errors and an helpful Salesforce Knownledge Article (#000006240) , here is the solution to concatenate multiple Contact fields in a formula. BR() is the right instruction, but there is a problem with BR() and Email field which ends up making a big portion of the formula displayed underlined (not just the email) and SteelBrick PDF engine not liking it.

 

Shipping_Contact__r.FirstName & " " & Shipping_Contact__r.LastName & BR() & Shipping_Contact__r.Phone & BR() &
HYPERLINK("mailto:"& Shipping_Contact__r.Email, Shipping_Contact__r.Email)

 

Renders properly on the PDF: 

 

John Walsh

+123 21 30 01 00

john.walsh@example.com

by kzaharias1
on ‎09-02-2016 01:43 PM

Is there a way to create a word wrap on a table cell that is likely to be longer than my cell (i.e. long email addresses)?  I tried adding in a "word-wrap: break-word;" but that didn't work.

by purumahay
on ‎01-03-2017 12:36 PM

How to add a verbiage on exiting quote template depending upon selection of product like if sotware selected for 1 or 3 year and discount is less than 42%, then only show verbiage otherwise not.

by John
on ‎05-05-2017 11:16 AM

Is anyone else having an issue with <span> rendering as <p>?

I'm trying to add white anchor tags for docusign but when I change the relevant text to white it does so by adding a <span> class but those span classes when rendered in the actual document create new lines/

I've tried <font> tags but it looks like anything in that doesn't get rendered at all. 

Relevant code (note is part of a table):

 

<tr>
			<td style="text-align: left; vertical-align: top; border: 1px solid rgb(102, 102, 102); padding: 1px 0px 1px 2px;"><strong>Billing Address (if different than Physical Address):</strong><br />
			&#160;</td>
			<td style="text-align: left; vertical-align: top; border: 1px solid rgb(102, 102, 102); padding: 1px 0px 1px 2px;">
			<p><strong>Purchase Order Information:</strong><br />
			PO required on invoice: Yes <span style="color:#FFFFFF;display:inline-block;">/POY/ </span>or &#160;No <span style="color:#FFFFFF;display:inline-block;">/PON/</span></p>

			<p>if yes, PO #: <span style="color:#FFFFFF;display:inline-block;">/PO#/</span></p>
			</td>
</tr>


Note the preview looks exactly how I want it to look with Yes {white anchor tag} or No {white anchor tag} on the same line:
preview_in-line.png

But when rendered it moves everything to its own line (again looks like whatever rendering code is being used by Salesforce CPQ replaces <span> with <p> and ignore the display:inline-block style:
rendered.png
I'm at my wits end on how to get this formatted correctly. Would appreciate any tips in the right direction.