The basis of online templates (Legacy) (Remove)

Introduction

Document template defines how the outcome document will look and what data will be displayed there. One online template file can include several document templates for different purposes.

Document template is actually constructed by HTML and CSS. Dynamo allow the creating of template without manual coding editing or advanced web knowledge. Basic understanding of HTML and CSS is beneficial to create a sophisticated document layout.

Elements and Styles

Elements and Styles are the fundamental of online document. In HTML, element is an individual component which gives structure to a document or a website. Paragraphs, headings, tables, images, links, spans are all elements. Some elements can contain other elements while others cannot. For example, in a table element, there are multiple sub-elements such as table header, table body, rows, columns, and cells. In one table cell, there can be multiple paragraph. On a contrary, an image element cannot contain any other elements in it.

Selected element and parent elements are displayed in the breadcrumbs. The elements those have blue color in the breadcrumbs contain dynamic attribute.

Styles are used to define the visual presentation of the document. You can edit the default styles for the whole template or create custom styles for specific need.

Default Style: When a default style is changed, it will affect every element with same type in the template. For example, if all first level headings should have same colour, that can be controlled from the Heading 1 element style. Applying custom style to an element to change it's look.

Custom Style: In another hand if a heading needs to have different colour, a custom style can be created and associated to that specific heading element. Custom styles can be associated with any number of elements. However style can have different effects depending on the element type, e.g. text alignment doesn’t have effect on inline elements. If there is no custom style applied to an element, it will take the default style.

Create and edit styles with Style Editor. The style editor allows to change the value of the style properties without manually writing the codes. The change will be updated to CSS automatically.

Dynamic Content

Dynamic content is the essential of document generation. The most common dynamic contents are merged fields from Salesforce. Another type of dynamic content is conditional content, such as hiding a paragraph or a sentence based on some criteria. Any template element can be dynamic by setting it’s Content or If attribute or both. Attributes can be typed in manually, or set through Data Source.

Dynamic Content from Salesforce fields

Dynamic text based on a condition in Salesforce

Combination of conditional and dynamic content

Nested Dynamic Content

When there are dynamic content in both parent element and child element, the content or condition in parent element will rule the result. This function offers you the flexibility to create the template for advanced requirement, in which information will be presented dynamically depends on multiple set of conditions or multi-level of sub data. However, if there is conflict between dynamic content of parent element and child element. the parent element will override the dynamic content of the child element and display the result differently than you expect.

Examples: Multiple conditions

You want to show one paragraph conditionally based on the Opportunity Amount. The whole paragraph will be showed if the Amount is more than 100 000. However, some sentences in the paragraph will be either showed or hidden depends on different ranges. In the image, both paragraph and span have blue color, indicating there are dynamic content in both of them. The Dynamic Attributes of each element is below

The result in a document for an Opportunity with the Amount more than 100 000 will be:

Examples: Conflict in multiple conditions

Similar to the previous example, this time we change the condition to display the whole paragraph only when the Amount is more than 400 000 and remain the conditions for both Sentence a) and b)

The document won't show any paragraph, even though the Opportunity Amount is more than 200 000, which is qualified for the condition in Sentence b)

Viewing the template structure

To see which elements have been using in a template and their structure, select the Show Blocks button on the editing toolbar.

The elements will be showed in the template:

When the template has grouped elements, the group will also visible:

Key learning:

Elements are the main components to structure the content. Styles define the visual of the content.
Custom styles will override the design of an element. If there is any style property not defined in the custom style , the element will take value for that property from the default style.
When there is conflict in nested elements:
- Conflict in styling, the style of the child element will override the style of parent element ( to enable customization in visual design in detail when required)
- Conflict in dynamic content: the content or condition in parent element will rule over the child element (to ensure the compliance in logic)

How to add conditional content