The S-Docs template editor provides a powerful interface for creating attractive, data-driven documents. S-Docs templates are written in HTML, and the template editor provides two options for editing: a WYSIWYG editor and an HTML source editor. Changes made in one editor will be reflected in the other editor. For example, if you make text bold in the WYSIWYG editor, the text will be enclosed in <strong> tags in the source editor. Likewise, enclosing text in the source editor in <strong> tags would lead to bold text being displayed in the WYSIWYG editor.

The Template Body Tab

This is the template body tab of the S-Docs template editor.

Dev Guide - Template Editor (1)

An S-Doc template has a header, footer, and body, much like an MS Word document. Opening the template body tab reveals an editor for your template. Below are explanations of the components of this template editor. Note that you can hover over every button in the toolbar of the template editor for a very short description of that button’s function.

1) This is the WYSIWYG editor. This takes up the majority of the page; the WYSIWYG editor is the large, blank white area in the above image. WYSIWYG is an acronym for What You See Is What You Get, which perfectly describes the nature of this editor; you can create a template from scratch in this editor and when you generate the document down the road, it should appear very the same as the content appears in the WYSIWYG editor. Use the tools in the toolbar to edit the content in this editor.

2) The “Source” button switches from the WYSIWYG editor to the source editor. S-Docs templates are stored in HTML. When you make changes in the WYSIWYG editor, the background source updates automatically to reflect those changes. While simple and intuitive, WYSIWYG editor does not support the same level of template customization that the source editor does. Clicking “Source” will switch to the source editor, allowing you to edit the HTML that represents your template. Note that you cannot use any of the buttons in the toolbar in the source editor; they are reserved for use in the WYSIWYG editor. Below is an example of a template in the WYSIWYG editor:

Dev Guide - Template Editor (2)

Here is that same template in the source editor:

Dev Guide - Template Editor (3)

3) This is the “Maximize” button. Clicking it will make the template editor full-screen.

4) This is the “Show Blocks” button. Clicking it will display the types of HTML tags that content is displayed in. In the following example, the information is between stored in <div> tags. Here it is with “Show Blocks” turned off:

Dev Guide - Template Editor (4)

And here it is with show blocks turned on, exposing the DIV’s:

Dev Guide - Template Editor (5)

5) These are tools for cutting, copying, and pasting. There are three different kinds of pastes: Paste simply pastes whatever is copied to the clipboard, Paste Text pastes plain text with the formatting and images of the original source removed, and Paste from Word will accurately paste content copied from MS Word.

6) These are the “Undo” and “Redo” tools. Use them to undo or redo previous actions.

7) These are the “Find” and “Replace” tools. Use Find to find words within your editor, and use Replace to replace all occurences of a certain word/string with a different word/string.

8) These are the “Insert” tools. Use them to insert images, tables, hyperlinks, and page breaks.

9) This is the “Styles” menu. You can select text in your document and then select a style from the “Styles” menu to apply that style to the selected text.

10) This is the “Format” menu. You can select text in your document and then select a style from the “Format” menu to apply that format to the selected text.

11) This is the “Font” menu. Use it to change the font of selected text.

12) This is the “Size” menu. Use it to change the size of selected text.

13) These are the font color controls. Use them to to change the color of font, as well as its background color.

14) These are text formatting tools. Use them to make text bold, italic, underlined, stricken-through, or to remove all formatting of the selected text.

15) These are list tools. Use them to create ordered or unordered lists, and to increase or decrease the indentation of these lists.

16) These are alignment tools. Use them to change the alignment of text on the page.

17) This is the “Line Height” menu. You can use it to select the amount of spacing between a specific line.

The HTML code in the source editor will automatically update at every change made to reflect the changes made in the WYSIWYG editor using the tools listed above.

The Header and Footer Tabs

The header tab and the footer tab are identical, with the obvious exception that the header tab can be used to add headers to your template and the footer tab can be used to add footers to your template. Here is the header tab:

Dev Guide - Template Editor (6)

Opening “Header on First Page” or “Header on Remaining Pages” will reveal the same editor discussed above in “The Template Body Tab”. You can use it to design your template header/footer in the exact same way that you design your template body. If you would like to have the same header/footer on every page, design your header/footer in the “Header/Footer on First Page” editor, and make sure the “Use First Page Header/Footer for All Pages” checkbox under “Header/Footer on Remaining Pages” is checked.

Dev Guide - Template Editor (7)

If you would like the first page to have its own header/footer, and for all remaining pages to share a different header/footer, uncheck this box and edit the header/footer for the first page in the “Header/Footer on First Page” tab, and edit the header/footer for all remaining pages in the “Header/Footer on Remaining Pages” tab.

The Page Settings Tab

The page settings tab contains controls for the width, height, and margins of the page. You can select inches, centimeters, or pixels as your unit of measurement and adjust the dimensions of the page and margins as you wish.

Dev Guide - Template Editor (8)

The Document Options Tab

Attachment Options:

By default, generated S-Docs are named something like SD-0001.pdf. In the attachment options menu, you can change the name of generated S-Docs to whatever you’d like. You can even use fields. For example, setting “Proposal For {!Opportunity.Account.Name}” as the output file format might result in the generated S-Doc being Proposal For John Smith.pdf rather than the default SD-0019.pdf.

There’s also a checkbox to delete related attachments upon S-Doc deletion. By default, any file that is generated in the 'Notes and Attachments' related list is automatically deleted when the S-Docs record that created it is deleted. This is a clean-up measure. You can uncheck this box if you want to preserve all attachments regardless of linked record deletes.

Other Options:

Always make sure to check the “Template contains international characters (Unicode fonts)” box if your template contains international characters; otherwise, they may not display. Similarly you can set the Unicode Enforcement Level to “Strict” if your Unicode characters are displaying in your templates but not your generated documents. The other three checkboxes provide options to automatically attach related case articles to outbound emails, to show otherwise hidden warning messages during document generation, and to change the number of versions of your template that S-Docs will save.

Dev Guide - Template Editor (9)

The Email Settings Tab

The email settings tab contains fields that can be used to control the behavior and defaults when this template is emailed. This tab contains several notes and examples explaining how you can leverage this functionality.

Dev Guide - Template Editor (10)

The Auto-Create Task Tab

The auto-create task tab can be used to have your template automatically generate a Salesforce task whenever a document is generated using that template. To enable this functionality, check the “Enable Auto-Task creation for this for this template”. This tab contains several notes and examples explaining how you can leverage this functionality.

Dev Guide - Template Editor (11)

The Configure Contact Lookup Tab

The configure contact lookup tab allows you to have the S-Docs engine dynamically search your base record to find all related contact records whenever a document is generated using this template (this is done by interrogating all lookup fields on your base object for links to either the Contact object or the Account object).

All contacts records found during this search are then added to a picklist. This picklist is used during the last step that allows a user to choose which contact(s) they want to email the documents to.

Additionally, another feature leverages this picklist of related contacts. S-Docs allows you to place special tags such as - {{!}} into your template. If used, the user will be presented with an additional step during the document generation process. That step enables a user to chose a particular related contact from this same picklist. The data from the chosen contact will then be merged back into the document.

The list of related objects (on the right) can expand the picklist of available contact records. Additional related objects (such as junction objects) can be included for the S-Docs engine to search during the document generation process. Any contact records found will be added to the picklist and therefore will be available for both emailing and merging functionality as explained above.

Note: all of the above info is included in this tab as a convenient review.

Dev Guide - Template Editor (12)