1. Documill Support
  2. Tag/Command References (old)
  3. HTML Template

Menu

HTML CORE

Follow

Provides the basic logic elements and attributes of HTML templates.

Take note that all of the logic attributes here have a priority value. If a single element has several different attributes on it, the higher priority attributes take effect first. 

The logic elements and attributes of this library may only be used in HTML documents, which are the body content of Online templates and can also serve as Forms.

checked

A logic attribute for setting or removing the "checked" attribute on an HTML element.

The value of this attribute is interpreted as a Boolean value. If the value resolves into true, the "checked" attribute is set. Otherwise the attribute is not set, or removed if the host element currently has it.

This attribute has a priority of 15.

Examples

The checked attribute doesn't do much in other elements besides input elements of the type "checkbox". If its value resolves into true, the checkbox will appear as checked, otherwise not. 

<input name="checked" type="checkbox" dyn-checked="initiallyChecked"/>
class

A logic attribute for setting the "class" attribute on an HTML element.

The host element's "class" is set to whatever String the value resolves into.   

This attribute has a priority of 15.

content

A logic attribute that brings text or document content into its host element.

The resolved value may be a File, an Online template Part, a String, or any other kind of value that then gets converted into a String.

  • If the value is a File, the file is expected to be a HTML document or an Online template. In the case of a HTML document, a specified part or all of the document's body content is imported into the host element. An Online template value causes a logic evaluation to happen, as described below.
  • If the value is a Part of the Online template this attribute is in, the content of the document of that Part is automatically evaluated and the result imported into the host element. If the Part doesn't contain document content, this attribute produces an error.  
  • If the value is a String, that String is simply set as the text content of the host element. Should there be any EL-expressions in that text content, those expressions are replaced by text representations of the values they resolve into.
  • If the value is of any other type, its text representation is set as the text content of the host element.

If the value of this attribute resolves into non-File value, the value's text representation, or the value itself if it is a String, is set as the text content of the host element. Should there be any EL-expressions in the text content, those expressions are replaced by text representations of the values they resolve into.

With Online template values, the end result is HTML content being imported in a similar manner, but the content to be imported is defined by the template's logic. The Compose Flow of the template is run with "import" as the initiating event. The content to import is the result of the last composeContent command run within the Flow. A composeContent within the Flow may also define itself to be the import result's producer through an attribute. The result is then expected to be HTML and that HTML is imported into the host element in the same way as if the resolved value was a HTML file to begin with.

This attribute has a priority of 15.

As content may trigger the evaluation of another HTML template by having an Online template or Part as its resolved value, it can cause other content attributes to be evaluated. Those content attributes in that other template may not trigger further template evaluations to occur, and so if any of them would have an Online template or Part as the resolved value, an error would occur.

Secondary attributes

content-append

Required
 Value type
 EL-evaluated
No Boolean Yes
If this attribute's value resolves into true, the new content is placed after any existing content within the host element. Otherwise the new content replaces the existing content.

If not defined, the value of false is used.
content-format

Required
 Value type
 EL-evaluated
No String Yes
Specifies a Format that takes the value to output and formats it into a String as according to its formatting rules. This attribute doesn't have any effect if the output value is a File or an Online template Part.

The resolved String is expected to the name of a Format defined earlier in the logic.
content-replace

Required
 Value type
 EL-evaluated
No Boolean Yes
If this attribute's value resolves into true, the host element is removed and the new content is placed into the document on the same level on which the host element was. Otherwise the new content is placed inside the host element.

This attribute has no effect if the new content is not provided as a File. Text content is always placed inside the host element.

If not defined, the value of false is used.
content-target

Required
 Value type
 EL-evaluated
No String Yes
Defines the content that is imported from a HTML document file. The resolved String is treated as a class name and the content to import is the first element within the document that represents this class.

This attribute has no effect if the new content is not provided as a File. Text content is always brought into the host element in its entirety.

If not defined, all content within the HTML document's body is imported. If the document does not have a body tag, the entire document is imported.

Examples

The content attribute may be placed into any HTML element that can contain text, such as span: 

<span dyn-content="sampleText"/>

If importing a HTML file, you may only want bring in a specific part of its contents. The content-target secondary attribute helps with that - in this example, only the first element in the "sampleHTMLDoc" File with class of "mainBlock" will appear:   

<div dyn-content="sampleHTMLDoc" dyn-content-target="mainBlock"/>
contenteditable

A logic attribute that can make the contents of its host element editable.

If the value of this attribute resolves into a Boolean value of true,  the host element's contents can be freely edited by typing and deleting text, and by using the tools provided by the toolbar that appears upon clicking the element.

Should the host element have the standard HTML id attribute defined, its contents at the time of the Form's submit can be found in the variable context as a variable with the same name as the  element's id. The value will be of the String type. Additionally, a variable with a similar name but with the suffix 'Modified' can be found in the context - it's a Boolean value telling if the contents of the host element were modified or not.

Note that this attribute can be overridden by the composeContent command's editable attribute, which if false, prevents the contents from becoming editable regardless of this attribute's value.  

This attribute has a priority of 15.

Secondary attributes

contenteditable-editor

Required
 Value type
 EL-evaluated
No
 String
 Yes
This attribute can be used to define additional tools that will appear in the editing toolbar. The resolved String should list the names of the tools separated by semicolons. The available additional tools are:
  • font
    Allows the user to change the font family and font size of selected contents. Use the contenteditable-availablefonts attribute to define the font families available for selection.
  • format
    Allows the user to copy or remove formatting of selected contents.
  • indent
    Allows the user to increase and decrease the indentation of selected contents.
  • justify
    Allows the user to define justification of selected contents.
  • link
    Allows the user to insert a link.
  • pagebreak
    Allows the user to insert a page break. This break won't have much visible effect on the HTML view, but will render as a proper page break if the content is exported into a PDF.
  • pastetext
    Allows the user to paste content as plain text.
  • showblocks
    Allows the user to activate a display mode visualizing the HTML block elements of the content.
  • source
    Allows the user to open up a dialog displaying the content's HTML source.
  • table
    Allows the user to insert a table.                    
If not defined, no additional tools will appear.
contenteditable-toolbarcontainer

Required
 Value type
 EL-evaluated
No String Yes
This attribute can be used to fix the editing toolbar into a constant position instead of it appearing dynamically near the editable content block. The resolved value should be the id of an element on the Form - the toolbar will appear in that element.
contenteditable-toolbarcolor

Required
 Value type
 EL-evaluated
No String Yes
Defines the color of the editing toolbar. The resolved value should be a hex RGB value prefixed with a hash mark, eg. "#88bbff".

If not defined, the toolbar will have its default color.
contenteditable-filterpaste

Required
 Value type
 EL-evaluated
No Boolean Yes
If this attribute's value resolves into true, any content pasted into the editable area will have its own style information removed. This is likely to help in making pasted content blend better with the editable area's existing content.

If not defined, the value of false is used, allowing pasted content to retain its styles.
contenteditable-nativespellcheck

Required
 Value type
 EL-evaluated
No Boolean Yes
If this attribute's value resolves into true, the native spell checking mechanism of the browser will not be disabled within the editable area.

If not defined, the value of false is used, disabling the browser's spell checking within the area.
contenteditable-availablefonts

Required
 Value type
 EL-evaluated
No String Yes
This attribute can be used to define the set of font families the editor toolbar's font family tool presents. The resolved value should be a listing the family options separated by semicolons. Each family option may contain one or more similar font families separated by commas, in a way similar to how the font-family CSS property works (eg. "Times New Roman,serif;Arial,sans-serif"). Each option may also contain a label preceded by the font families, separated by a slash (eg."Times/Times New Roman,serif").    

Do note that this attribute's value has no effect if the contenteditable-editor attribute's resolved value does not contain the "font" tool.

If not defined, the value "Sans-serif/sans-serif;Serif/serif" is used, giving the user a very simple font selection.
contenteditable-defaults

Required
 Value type
 EL-evaluated
No Map Yes
This attribute allows a Map to be used to define the values of most of the other secondary attributes without actually defining them on the host element. The resolved Map should map attribute names to attribute values. If the host element has a mapped secondary attribute defined, that defined value takes precedence over the mapped value.

The following secondary attributes may be defined through the Map:
  • contenteditable-editor
  • contenteditable-filterpaste
  • contenteditable-toolbarcolor
  • contenteditable-toolbarcontainer
  • contenteditable-availablefonts
  • contenteditable-nativespellcheck                

Examples

This example produces a small editable block of text with the editing toolbar in bright white color. 

<div id="editedContent" dyn-contenteditable="true" dyn-contenteditable-toolbarcolor="'#FFFFFF'">This text can be edited!</div>

Whether the block's contents are modified or not, the contents at the time of the Form's submit can be found in the variable context. In that example, that variable would be "editedContent" and the variable "editedContentModified" would be a Boolean telling if the content was modified or not.

In this example the id of the host element is the same as the name of the variable holding the element's content. This results in the edited content replacing the original content as the variable's value.

<div id="greeting" dyn-content="greeting" dyn-contenteditable="true"></div>

If you wish to make use of the contenteditable-defaults secondary attribute, use the setMap command to create the set of attribute values:

<setMap var="editorAttrs">
  <addMapEntry key="contenteditable-editor" value="table;pagebreak">
  <addMapEntry key="contenteditable-toolbarcolor" value="#003366">
  <addMapEntry key="contenteditable-nativespellcheck" value="true">

And then use the created Map as the attribute value: 

<div id="editableArea" dyn-contenteditable="true" dyn-contenteditable-defaults="editorAttrs">Content</div>
datepicker

A logic element that, when evaluated, becomes a component allowing the user to select a date. When the Form is submitted, the selection will appear in the variable context as a Date value.  

Attributes

name

Required
 Value type
 EL-evaluated
No
 String
 Yes
Defines the name of the variable that will hold the Date value representing the selected date.
value

Required
 Value type
 EL-evaluated
No
 Date, DateTime Yes
Defines the initial value of the datepicker.

If not defined, the datepicker starts out by showing the current day.
popup

Required
 Value type
 EL-evaluated
No
 Boolean Yes
If the resolved value of this attribute is true, the produced datepicker is an input element, which, when clicked, opens up the otherwise-hidden datepicker. Otherwise the datepicker appears as a block-level element.
dateformat

Required
 Value type
 EL-evaluated
No
 String
 Yes
If the datepicker appears as a popup (the popup attribute resolves into true), its input element displays the selected date and this attribute can define the format in which that date is displayed. The resolved String should be the name of a date or dateTime format, which is then used to format the display.

If not defined, the default date format, if defined, is used for formatting instead. Otherwise the selected date is presented in an undefined format.
slds

Required
 Value type
 EL-evaluated
No
 Boolean Yes
If the resolved value of this attribute is true, the produced datepicker follows the Salesforce Lightning Design System (SLDS) theme in looks and functionality.

Examples

Creating a datepicker isn't complicated. Do note that the popup attribute changes the size of the picker quite a lot, so take that into account in your layout plans.  

<dyn-datepicker name="selectedDate" value="initialDate"/>
href

A logic attribute for creating download links to files in the variable context.

The value of this attribute should resolve into a File or a String and the host element receives the HTML attribute href whose value depends on the type of resolved value. If it is a File, the link will be a download link for downloading the file. If it is a String, that String will be set as the href's value as is.

This attribute has a priority of 15.

Examples

This attribute is present in many templates to create download links for composed documents, looking like this:

<a dyn-href="composedDoc">Download document</a>
id

A logic attribute for setting the "id" attribute on an HTML element.

The host element's "id" is set to whatever String the value resolves into. Note that ids within a HTML document should be unique.  

This attribute has a priority of 15.

if

A logic attribute that makes its host element conditional.

If this attribute's value resolves into a Boolean value of true, the element will remain in the document. Otherwise the element and its contents are removed.

This attribute has a priority of 1000.

Examples

Basically any element can be made conditional with this attribute. Here is a basic example of a conditional paragraph:

<p dyn-if="displayText">
  <span>Conditional text</span>
</p>
model

A logic attribute that is basically a combination of content and contenteditable.  It has the effects of both on the host element, bringing content to it, making these contents editable and submitting the edited contents.

The value of this attribute defines the variable whose value is being read and possibly updated.

Generally this attribute should only be placed on the generic HTML block and inline elements div and span. The exact effects on the host element vary depending on which one it is.           

If model is set on a div element:          

  • Does the same as content with its attribute value as the same as model's attribute value. Both content-replace and content-target secondary attributes have their default values.            
  • If the secondary attribute model-editable is undefined or resolves into true, does the same as contenteditable with its attribute value set to "true". The resulting Map of model's secondary attribute model-editorconfig is used as the value for contenteditable's secondary attribute contenteditable-defaults.  
  • Sets HTML attribute "id" on the host element with this attribute's non-resolved value as its value. This causes the submitted value to overwrite the original variable value that was used as content.
  • Sets the Dynamo HTML attribute "value-type" on the element with the value "html". This causes the submitted value to appear as a HTML value in the variable context, making certain commands react to it as HTML rather than plain text.

If model is set on a span element:

  • If the secondary attribute model-editable is undefined or resolves into true, the host element is transformed into an input element that presents the value of model's target variable for editing. Please note that the input element will be of fixed size and so doesn't flow well among text content - it is therefore highly suggested that model-editable is false if the document this attribute is in is composed for a non-interactive purpose, like for PDF export.    
  • If the secondary attribute model-editable resolves into false, the host element will remain as a span, but has its text content set as model's resolved value.

This attribute has a priority of 10.

Secondary attributes

model-editorconfig

Required
 Value type
 EL-evaluated
No Map Yes
This attribute's resolved value is used as the value for contenteditable's contenteditable-defaults attribute, which allows the other secondary attributes of that logic attribute to be defined with entries in the Map.
model-editable

Required
 Value type
 EL-evaluated
No Boolean Yes
This attribute can be used to disable the editing capabilities. If the resolved value is false, the value of model's attribute will appear as the content, but will not be editable.

Note that this attribute can be overridden by the composeContent command's editable attribute, which if false, sets the contents as uneditable regardless of this attribute's value.  

If not defined and composeContent is not making everything uneditable, the value defaults to true allowing users to edit the contents.

Examples

As model is a combination of two other logic attributes, here is an example to show how model does the same thing as its two components would. 

<div dyn-model="sampleContent" dyn-model-editorconfig="editorAttributes"/>

The above is basically equivalent to:

<div id="sampleContent" value-type="html" dyn-content="sampleContent" dyn-contenteditable="true" dyn-contenteditable-defaults="editorAttributes"/>
multi-select

A logic element that adds functionality to a specific kind of structure within it, resulting in a selection component that presents available and selected options in their own containers, with buttons to move the options around.          

This logic element requires certain HTML elements to exist within it. These are as follows:                    

  • A select with the class "dynMultiSelect-options". This element should contain the options available to be selected. These options may be generated dynamically as shown in the example.            
  • A select with the class "dynMultiSelect-selected". This element can be empty, as it is to contain selected options.            
  • A button with the class "dynMultiSelect-add". Pressing this button moves the currently selected option in the container of available options into the container of selected options.            
  • A button with the class "dynMultiSelect-remove". Pressing this button moves the currently selected option in the container of selected options into the container of available options.                          
  • (Optional) A button with the class "dynMultiSelect-up". Pressing this button moves the currently selected option in the container of selected options up one step.            
  • (Optional) A button with the class "dynMultiSelect-down". Pressing this button moves the currently selected option in the container of selected options down one step.          

The specified elements may exist anywhere within the logic element -  they can, for example, be placed inside a table. If any of the four required elements is missing, the logic element reports it as an error.

The variable value that this component produces when the form is submitted is a Collection of Strings, with every String being the value of a selected option's value attribute.

Example structure

<dyn-multi-select name="selectedOptions">
  <table>    
    <tr>
      <td>
        <select class="dynMultiSelect-options" size="10">
          <option dyn-repeat="options" dyn-repeat-var="var" dyn-value="var.Id" dyn-content="var.Name"/>
        </select>
      </td>
      <td>
        <button class="dynMultiSelect-add">Add</button> <br/>
        <button class="dynMultiSelect-remove">Remove</button>
      </td>
      <td>
        <select class="dynMultiSelect-selected" size="10">
        </select>
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>
        <button class="dynMultiSelect-up">Up</button>
        <button class="dynMultiSelect-down">Down</button>
      </td>
    </tr>
  </table>
</dyn-multi-select>

Attributes

name

Required
 Value type
 EL-evaluated
Yes String
 No
Defines the name of the variable that will hold the Collection of selected options' values.
next

A logic attribute that defines the Step to which the currently active Flow proceeds to after this Form.

This attribute works only if placed onto a button element with the type "submit". If the Form is submitted using the button with this attribute, the Flow proceeds to the Step named by the attribute's value.

Secondary attributes

next-message

Required
 Value type
 EL-evaluated
No String
 No
Defines the message that will appear after the Form is submitted and the next Step of the Flow is loading.

If not defined, the submit message of the Form is presented after submit.
repeat

A logic attribute that iterates through all items of a Collection and produces a copy of its host element for every item beyond the first.

The value of this attribute should resolve into a Collection. The collection is iterated through and for every item in it, aside from the first, a copy of the host element is produced (for the first item,  the host element itself is used). This copy is placed into the document after the host element or the previous copy. The copy and its contents are then evaluated with the current item in the variable context behind the key defined with the repeat-var secondary attribute.

This logic attribute produces a local variable context for its child logic elements and attributes. A new context is created for every round of the iteration process - a context is created at the start of the round and terminated at the end of the round.

This attribute has a priority of 100.

Secondary attributes

repeat-var

Required
 Value type
 EL-evaluated
Yes String
 Yes
The resolved value of this attribute defines the name of the local context variable that holds the current item of the loop.
repeat-round-start

Required
 Value type
 EL-evaluated
No Boolean No
This attribute can be used to define a condition for skipping certain iteration rounds. This attribute's expression is evaluated at the start of every round and if it doesn't resolve into true, the current item and loop round is skipped, resulting in no copy of the content being produced.
repeat-var-status

Required
 Value type
 EL-evaluated
No String
 No
Defines the name of the variable that holds the loop status object. Loop status object has properties count, first, last and index. A new loop status is generated for every iteration of the loop.

Property count is the number of the iteration starting from 1.
Property index is same as count with the difference that it starts from 0.
Property first is a Boolean true during first round of the loop.
Property last is a Boolean true during the last round of the loop.

Examples

Use repeat to present a Collection's data on a HTML template or Form. Take care to not repeat content that has things within it that should be unique, such as a table's thead element.

<div dyn-repeat="items" repeat-var="item">
  <p dyn-content="item.text"/>
</div>

To create dynamic tables in HTML, place repeat on the table's content row. Additionally, this example table excludes items of its Collection missing the "description" property using the repeat-round-start secondary attribute:

<table>
  <tr dyn-repeat="items" dyn-repeat-var="item" dyn-repeat-round-start="item.description == null">
    <td>
      <p dyn-content="item.name"/>
    </td>
    <td>
      <p dyn-content="item.description"/>
    </td>
  </tr>
</table>

Should you have a need of repeating more than one table row, place repeat on a tbody element in which the rows are:

<table>
  <tbody dyn-repeat="items" dyn-repeat-var="item">
    <tr>
      <td>
        <p dyn-content="item.name">
      </td>
      <td>
        <p dyn-content="item.type">
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <p dyn-content="item.description">
      </td>
    </tr>
  </tbody>
</table>
src

A logic attribute for setting the "src" attribute on an HTML element.

The value of the "src" depends on what this attribute's resolved value's type is. If the resolved value is a File, the data is converted into a data URI which is used as the value. If the resolved value is a String, it is directly used as the value.

This attribute has a priority of 15.

Examples

If you have an image File in the variable context, src can be used to display that image in HTML content:

<img dyn-src="drawing"/>

If you wish to display some external image instead and linking to it directly is fine, have the image's URL in a String and give that to src:

<img dyn-src="drawingURL"/>
submit

A logic attribute that defines if any data in the currently displayed Form is submitted to be used by the Flow. By default all data is always submitted, but should you want the Flow to proceed past the Form while discarding any user input, this attribute does the job. This attribute does nothing in HTML content that is not used as a Form.

This attribute works only if placed onto a button element of type "submit". If the Form is submitted using the button with this attribute and the value is false, the inputs on the Form will not have their values delivered to the Flow's variable context. Should the value of this attribute be true, all data is submitted as usual.

Examples

Create a button for skipping a Form without cluttering the variable context with irrelevant input data:

<button type="submit" name="skip" dyn-submit="false">Skip</button>
value

A logic attribute for setting the initial value and type of an HTML input element.

The HTML attribute "value" is set onto the host element with its value being a String representation of the resolved value of this logic attribute. Additionally, if the host element does not have the HTML attribute "type" already, it may receive it with a value matching the type of the resolved value.

This attribute has a priority of 15.

Examples

Use this attribute to initialize a Form's inputs with previously existing values, for example. Give the input element the same name as the variable name to have the input's user-modified value to overwrite the original value:

<input name="quantity" dyn-value="quantity"/>

Comments

0 comments