Basic Screen with Input Fields, Picklist, Date Picker, Link and Buttons

The basic screen sure has been seen a lot on websites, for example, contact form, to get personal informations for marketing or for any subscriptions. It usually contains common fields like name, company, more details, country choice and submit button.  It is the same in Dynamo Template Builder.

Below is a screen that covers image (1), input text field (2), text area (3), picklist or select block (4), date picker (5), link (6) and buttons (7) 

Image

By choosing Image from Content section in Block Library, an image placeholder will instantly appear at the decided position. Just like in Body Content, image can be uploaded from user computer or link to a public source. The image can also be resized with width defining.

See more in this article How to insert images to the document

Input Block

Input text field that holds only one line. Usually used for customizing short texts. In the example below is for the user to input name to be modified later as latest edit person. Make sure the element "Input Block" is chosen to define the correct attribute.

In the attributes:

• Name is the variable name that holds the input value
• Label is the text appears on top left of the box, for navigation
• Placeholder is the text appears inside the box which will instantly disappear when the box is chosen, used to instruct user what to type there.

Text Area

Text areas are for those inputs that contains multiple lines or long texts. It is sometimes used to update a long text field inside Salesforce, for example Description or User's Notes on certain records.

Same as Input Block, the attributes for Text Area contains Label, Name and Placeholder text for defining variable and modifying the interface.

If there is something that you are not sure, you can click on the small question mark icon (?) next to field name in Attributes panel to go directly to the instruction of that field. 

Select Block

Select Block or Picklist is a drop-down list to choose one option from multiple options that have been defined. A common example is to choose language for document.

• Add more options by clicking on Add Option button
• Modify option by choosing Edit of that option

Attributes has Name field (variable name to hold the value), Label to explain what the picklist is about and the Value (usually left empty) to define a certain value

Once click on Edit a certain option, an Option panel screen will open on the right side panel.

• Label: display name of the value
• Value: a short and memorable text to use later in the flow, if chosen the variable will be understood as "selectLanguage=en"
• Selected: can be pre-defined with "true" or "false". If true, the Document Language field will display English unless the user later modify otherwise.

Date picker

Date picker is a calendar for user to easily choose a date. Use case for this is varied from choosing the starting point, a document creation date, validity date of the document, to filter out list of line items that has specified valid date.

Attribute list:

• Name: variable name holds the date value
• Date Format: choose from set of format in the flow
• SLDS: Salesforce Lightning Design System, if true will follow this theme in looks and functionality
• Popup: If true, the produced date is an input element, which, when clicked, opens up the calendar to choose. Otherwise, it appears as a block element

You can read more from datePicker command

Link

Link is an element inside paragraph to help screen designer link to an external URL or to provide a download link to the generated document.

• Link: input external links here between single quotation marks ' ' to define the URL. If there is a variable holds a URL, it can also be added here
• Content: if defined, will display the content instead of the placeholder text

Button Group

Buttons are implemented to direct users to whichever the next step is. Buttons that are commonly used in screens are Save, Cancel, Back, Send, or Edit. As a template creator, buttons helps with the logic design and connect a screen with different steps.

Add Button by clicking on Button Group. In the Button Group element, more buttons can be added by using "Add Button" option on the right side-panel.

To configure a button inside the "Button Group", choose the button in the screen edit view:

• Next Step: fill in here the name of the step that you want this button to direct to (i.e Load Previous Version)
• Next Message: short text message while loading and redirecting to next step (i.e Saving document...)

Attributes:

• Name: is the variable name to hold the button value
• Label: the name to display in the button

Please contact [e-mail] if you need help with the screen implementation.