[+]
[+]
[-]
 [+]
  
 [+]
 [+]
  
 [+]
 [+]
 [-]
   
   
   
   
   
   
   
 [+]
 [+]
 [+]
 [+]
 [+]
 [+]
 [+]
[+]
Updated on 12/10/2019
Workflow Documentation
UI Tab
Direct link to topic in this publication:

PREVIOUS  |  NEXT

UI Tab

Quick Links

Use the UI tab of the Form Designer to add the following UI components to your page layout:

  • Text: Enables you to create static and dynamic text messages that you can add to the page layout.
  • Button: Enables you to add a button that you can configure to execute various actions.
  • Related Case Container: Enables you to add a list of related cases to the page layout. 
  • Link: Enables you to link to a file that is stored in the Local File Management workspace.
  • Section: Enables you to add a section to which you can add fields, columns, forms, and other UI components.
  • Tab Container: Enables you to add one or more tabs that can contain fields, columns, forms, and other UI components. 
  • Smart List Container: Enables you to add an existing smart list to the page layout. 
  • iFrame: Enables you to add a link to an external webpage to the page layout.

In addition to components, you add images to the page layout. Note that before you can add an image to a page layout, you must upoad it to Workflow. For information about uploading images, see Local File Management. For more information about adding images to a page layout, see Images

To add a component, go to the UI tab of the Form Designer.

The following sections describe how to add each component type.

Images

[Back to top]

Before you can add images to a form, you must upload the image to the UI folder. For more information, see Local File Management.

To upload a new image: 

  1. Click the Upload New link.
  2. Click the Upload icon to open browse for your image file.
  3. Select the image and click Open to upload the file. Workflow automatically updates the Label value with the name of the file and displays a preview of the selected image.
  4. You can use the Remove icon to remove the file, and then select another if necessary.
  5. Add a brief description. This is used as an internal note for administrators.
  6.  Click Add to save the file.
    Workflow adds the file to the list of images that you can add to the page layout.

Text

[Back to top]

Use the Text component to add text messagesto a page layout. You can display the message using plain text or you can customize the message using rich text formatting. You can also create dynamic messages using tags. See Text Component Tags for a complete list of tags you can use in your message. 

Add Text Component to Page Layout

[Back to top]

To add the Text component to the page layout:

  1. Drag the Text component into the layout section. 
    Workflow opens a window where you can configure the message content and visibility permissions.
  2. In the Basic tab:
    • Enter a unique identifier in the System ID field that can later be used in scripts. See System ID for more information.
    • Select from these options:
      • Rich Text: Enables you to format a static message using the rich text editor. You cannot use tags with this option.
      • Rich Text with Tags: Enables you to format a dynamic message using tags and rich text formatting. 
      • Plain Text with Tags: Enables you to create a dynamic message using tags and plain text formatting. 
    • Enter your message in the text window, including tags and formatting, if applicable.
  3. Select the Visibility Permissions tab to select users and permission groups that can see this message. 
  4. Click Save.

Example: In the following screenshots, we display a Text component configuration on an Approve action that uses a tag and rich text formatting. Then, we display the result as seen by end users:

To edit a Text component, point at its header and click the  button

To remove a Text component from the page layout, point at its header and click the  button.

Text Component Tags

[Back to top]

Notice: We are currently working to improve this content. Once revisions are finalized, we will add the article to the Recently Updated Articles section on the product's Documentation Home page. Learn more.

Button

[Back to top]

You can add a button that executes the following behaviors when a user clicks it:

  • Submit Form: Submits the form.
  • Quick Save: Saves the form without closing or submitting it. This action also executes any assignment rules on the workflow action and saves changes to existing custom fields on the form.
  • Cancel: Closes the form without saving changes.
  • Execute Workflow Action: Executes a workflow action you define.

    Note: You can use only the Execute Workflow Action behavior type on a View Case action that does not use default settings. 

  • Execute Script: Executes a script you define. 
  • Execute Web Action: Executes a web action you define.
  • Execute Custom Action: Executes a custom action you define.
  • Open Public Case Creation Page: Opens a public case creation page you define. 
  • Load URL: Loads the URL you define. 

Workflow adds the Submit button on all workflow actions by default.

Note: You cannot use visibility permissions to hide the default Submit button on Create Case and Edit Case workflow actions.

Add Button to Page Layout

[Back to top]

To add a Button component to the page layout:

  1. Drag the Button component into the layout section.
    Workflow opens a window where you can configure basic properties, style attributes, and visibility permissions.
  2. Complete the form fields in the Basic tab: 
    • Button Label: Enter the label that will appear on the button. When you don't configure a label name, we display Submit by default.
    • System ID: Enter a unique identifier that can later be used in scripts. For more information, see System ID. 
    • Message Key: This is a dictionary key that represents the label of the field in a different language. This field is restricted to a maximum of 50 characters. For more information about dictionary keys, see Dictionary.  
    • Target System ID: Enter the system ID of the component that will display the result of the button action. 
    • Tab Order: This value establishes the order in which the button becomes the active element when someone uses their Tab key to navigate the page.  
    • Display as Hyperlink: When enabled, we display an Image field that enables you to upload an image, or add an existing image that displays in place of the button.
    • Confirmation Message: When enabled, you can enter a message that will display after a user clicks the button, but before the behavior executes. The confirmation message displays with a Yes and No button. When the user clicks Yes, the behavior executes.
    • Choose Button Behavior: Select from the available button behaviors. See button behaviors above for more information. If you select one of these behaviors, Workflow displays an additional field for configuration: 
      • Execute Workflow Action
      • Execute Script
      • Execute Web Action
      • Execute Custom Action
      • Open Public Case Creation Page
      • Load URL

You can also choose from these button options: 

  • Submit Form
  • Quick Save
  1. Open the Label Style Attributes tab and configure these attributes if desired: 
  2. Open the Visibility Permissions tab to select users and permission groups that can see this button. 

    Note: You cannot use visibility permissions to hide the default Submit button on Create Case and Edit Case workflow actions.

  3. Click Save.

To edit a Button component, point at its header and click the  button

To remove a Button component from the page layout, point at its header and click the  button.

Smart List Container

[Back to top]

Use a Smart List Container component to display a smart list on a page. When configured on an action, and a user executes that action, we display the smart list that you configured on the Smart List Container component, using the column configurations defined in the table layout you select. You cannot add fields, forms, or other UI components to a smart list container. 

Add Smart List Container to Page Layout 

[Back to top]

To add a Smart List Container component to the page layout:

  1. Drag the Smart List Container component into the layout section. 
    Workflow opens a window where you can configure basic properties, style attributes, and visibility permissions. 
  2. Complete the form fields:
    • Title: Enter a name that will appear in the header of the container to end users.
    • Message Key: This is a dictionary key that represents the label of the field in a different language. This field is restricted to a maximum of 50 characters. For more information about dictionary keys, see Dictionary.  
    • Smart List: Select a smart list from the drop-down menu. See Smart Lists for more information on creating a smart list.
    • Table Layout: Select a table layout from the drop-down list. See Case List Layouts for more information on creating case table layouts. 
    • System ID: Enter a unique identifier that can later be used in scripts. For more information, see System ID. 
  3. Open the Style Attributes tab and configure these attributes, if desired: 
  4. Open the Visibility Permissions tab to select users and permission groups that will see this button.
  5. Click Save

To edit a Smart List component, point at its header and click the  button

To remove a Smart List component from the page layout, point at its header and click the  button.

Section

[Back to top]

Use the Section component to organize your page layout into sections.You can place fields, forms, other components, and other sections within a section. 

Add Section to Page Layout

[Back to top]

To add a Section component to your page layout:

  1. Drag the Section component into the layout section. 
  2. Point at the component header and click the  button to open the configuration window.
  3. Complete these form fields on the Basic tab: 
    • Title: Enter a name for the section that will only appear to end users when you enable the Collapsable setting on the Collapse Settings tab.
    • System ID: Enter a unique identifier that can later be used in scripts. For more information, see System ID. 
    • Message Key: This is a dictionary key that represents the label of the field in a different language. This field is restricted to a maximum of 50 characters. For more information about dictionary keys, see Dictionary.  
    • Number of Columns: Enter the number of columns to divide the section or tab. We do not restrict the number of columns you can add and we don't display empty columns to end users. If you add columns to a section or tab, we enable you to configure the Basic, Border Attribute, and Font Attribute styles on each column by clicking the Edit icon on the column header.
  4. Open the Style Attributes tab and configure these attributes, if desired: 
  5. Open the Collapse Settings tab and configure these settings: 
    • Collapsable: When enabled, end users will be able to collapse and expand the section by clicking on the section header on their page layout.
    • Collapsed: When enabled, the section will be collapsed when first opened on the end user's page layout. 

      Warning: If you enable the Collapsed option, but not the  Collapsable option, the section will not appear on the user's page layout.


  6. Open the Visibility Permissions tab to select users and permission groups that will see this button.
  7. Click Save

To edit a Section component, point at its header and click the  button. 

To remove a Section component from the page layout, point at its header and click the  button.

Tab Container

[Back to top]

Use the Tab Container component to create tabs on your page layouts where you can combine logical groups of other page elements. This is a good way to organize large amounts of information, or information according to topics that your users can easily access. You can add columns, custom and standard fields, and UI components to your tab container and you can execute a script when a user opens a tab. We also provide a validation feature that ensures all required fields in the tab container are populated either when a user submits the form, or when they move between tabs. 

Add Tab Container to Page Layout

[Back to top]

To add a Tab Container component to the page layout:

  1. Drag the Tab Container component into the layout section.
    Workflow opens a window where you can configure basic properties, style attributes, and visibility permissions.
  2. Complete these form fields:
    • Name: Enter a name for the container. This will also be the name of the first tab in the container which you can later rename if desired. The first tab is automatically added to the container and you can click the Edit icon on the header of the tab to change the name and edit the tab properties.     
    • System ID: Enter a unique identifier that can later be used in scripts. For more information, see System ID. 
    • Message Key: This is a dictionary key that represents the label of the field in a different language. This field is restricted to a maximum of 50 characters. For more information about dictionary keys, see Dictionary.  
    • Button Visibility: When enabled, we display Previous and Next buttons on the tab container that end users can use to navigate between tabs. 
    • Validation Setting: Enables you to choose when Workflow validates that all required fields in the tab container are populated.  Select from these options: 
      • When the form is submitted
      • When moving between tabs
      We enable the When moving between tabs option by default.

      Note: When a user attempts to submit the form or navigate to another tab before completing the required fields, depending on the validation option you selected, Workflow displays Incomplete in the tab label until the user completes the fields.

    • Class: Enter the class from the CSS file you uploaded in UI Settings. This class will apply style settings to all elements in the tab container. 

  3. Click Save
  4. Note: If you add a tab container to a page layout, but do not add fields or other components to at least one tab, Workflow will not display the tab container to users. Also, the tab container does not display tabs that do not contain fields or other components.

Add Tab to Tab Container

[Back to top]

    To add a tab to the tab container:

    1. Click the Add Tab link on the tab container header. 
    2. Complete the form fields:
      • Name: Enter a name that will appear on the tab.
      • System ID: Enter a unique identifier that can later be used in scripts. For more information, see System ID. 
      • Message Key: This is a dictionary key that represents the label of the field in a different language. This field is restricted to a maximum of 50 characters. For more information about dictionary keys, see Dictionary.  
      • Number of Columns: Enter the number of columns to divide the section or tab. We do not restrict the number of columns you can add and we don't display empty columns to end users. If you add columns to a section or tab, we enable you to configure the Basic, Border Attribute, and Font Attribute styles on each column by clicking the Edit icon on the column header.
      • Execute Script on Tab Activation: Select a script from the list that will execute when a user clicks on the tab.
    3. Open the Style Attributes tab and configure these attributes, if desired: 
    4. Click Save.

Reorder Tabs in Container

[Back to top]

To reorder the tabs within a tab container:

  1. Point at the component header and click the  button on the tab container header.
  2. Reorder the tabs in the Sort Tabs using Drag and Drop section of the configuration window.
  3. Click Save.

Configure Columns in a Tab Container

[Back to top]

To configure columns within your container:

  1. Point at the column header and click the  button.
  2. Configure these attributes as necessary: 
  3. Click Save.
  4. You can now add fields, forms, and other UI components to the columns on a tab by dragging and dropping the element into the column.

    Note: If you don't add at least one element to a column, Workflow will not display the column to end users.

To edit a Tab Container component, point at its header and click the  button

To remove a Tab Containter component from the page layout, point at its header and click the  button.

Related Case Container

[Back to top]

Use the Related Case Container component to display related cases on the page. When configured on an action, and a user executes that action, we display the related cases that you specified in the Related Case Container component. You can allow users to edit a case, and create new related cases from within the container. You can also configure style and visibility settings and you can configure filters for the cases you wish to display in the list to users.

You cannot add fields, forms, or other UI components into a related case container. 

Note: The related case container is automatically collapsible on the user's page layout, and is initially displayed in the expanded state.

Add Related Case Container to Page Layout

[Back to top]

To add a Related Case Container component  to the page layout:

  1. Drag the Related Case Container component into the layout section. 
    Workflow opens a window where you can configure basic properties, style attributes, and visibility permissions. 
  2. In the Basic tab, complete these form fields:
    • Title: Enter a name that will appear in the header of the container to end users.
    • Message Key: This is a dictionary key that represents the label of the field in a different language. This field is restricted to a maximum of 50 characters. For more information about dictionary keys, see Dictionary.  
    • Table Layout: Select a table layout from the drop-down list. See Case List Layouts for more information on creating case table layouts. 
    • Enable Editing Cases from Container: When enabled, Workflow displays an Edit link on each case in the list. 
    • Enable Creating New Related Cases from Container: When enabled, Workflow displays a Create New link at the bottom of the container.
    • System ID: Enter a unique identifier that can later be used in scripts. For more information, see System ID. 
  3. Select values from the fields in the Filter By section. You can add multiple values to these fields:
    • Case Relation
    • Workflow
    • Status
    • Project
    • Assigned To
    • Created
    • Priority
  4. You can also configure a filter using Created On dates and you can configure these settings:
    • Display: Select the number of results to display per page by default. 
    • Include Closed Cases: Enable to display closed cases in the results.
  5. Open the Style Attributes tab and configure these attributes, if desired: 
  6. Open the Visibility Permissions tab to select users and permission groups that will see this button.
  7. Click Save

To edit a Related Cases Container component, point at its header and click the  button. 

To remove a Related Cases Container component from the page layout, point at its header and click the  button.


Link

[Back to top]

Use the Link component to add a link to a file in Local File Management or to an external source. When added to a page layout, users can download the file when viewing the workflow action form. 

You can also use the System ID of the link to create a CSS rule as a class name. Example: For the link component with a system ID link_component, you can create the CSS rule: .link_component {background-color: green}. For more information about style sheets, see UI Settings.

Add Link to Page Layout

  1. Drag and drop the Link component into the layout section. 
    Workflow opens a window where you can configure the message content and visibility permissions.
  2. Complete the form fields in the Basic tab:
    • Choose an Internal File: Select a file from the Local File Management storage, or 
    • Add Custom Link: Enter the external link which will open in a new tab.
    • Link Label: You can assign a custom label to the field that will display wherever the field is used. If you don't configure a label name, we display Linkby default.
    • System ID: Enter a unique identifier that can later be used in scripts. For more information, see System ID.
  3. Open the Visibility Permissionstab to select users and permission groups that will see this field.
  4. Click Save.

To edit a Link component, click the  button on the header of the component on the page layout. 

To remove a Link component from the page layout, click the  button on the header of the component on the page layout. 

iFrame

Use the iFrame component to add a link to an external webpage to the page layout. By default, you can add links only to the following domains:

  • .docusign.com
  • .litmos.com
  • .webcomserver.com
If you need support for additional domains, please contact Customer Support. 

Note: iFrame supports only HTTPS domains. This is because Workflow can be accessed only with HTTPS and does not display unsecured content. 

Add iFrame to Page Layout

  1. Drag and drop the iFrame component into the layout section. 
    Workflow opens a window where you can configure the component and its visibility permissions.
  2. Complete the fields in the Basic tab:
  • System ID: Enter a unique identifier that can later be used in scripts.
    For more information, see System ID.
  • URL: Enter the URL of the webpage to add.
  1. Optionally, complete the fields on the Style Attributes tab:
  • Width: The width of the cell, in px, em, or pt units.  
  • Height: The height of the cell, in px, em, or pt units.
  • Border Attributes:
    • Border Color: Enter the border color. You can enter the name of the color, or the hex color code equivalent. 
    • Border Width: Enter border width, in px, em, or pt units.
    • Border Style: Select the border style from the list.
  1. Optionally, open the Visibility Permissions tab and select users an permission groups that can see this field.

To edit an iFrame component, point at its header and click the  button

To remove an iFrame component from the page layout, point at its header and click the  button.


Related Topics