Subscribe

UiPath Activities

The UiPath Activities Guide

Advanced Controls in the Form Designer

The Form Designer is available from one of the following activities:

Common components that are available in the Form Designer are described here.

This page contains instructions for additional advanced controls. You can use them by appending keywords such as _dropdown or _storage to argument names in the collection for the activity.

Advanced Controls for Drop-downs


📘

Note:

The instructions refer to the Create Form Task activity and the FormData collection, which is available in the Create Form Task activity. For the Create Form activity, the collection is FormFieldsCollection.

Dynamic Drop-downs

Use them in workflows where you want to send dynamic data to populate a drop-down control in an Action Center form.
With this method, a variable of the type List of Strings holds the values of the drop-down list instead of adding static values on the Data tab in the Form Designer.

To create a dynamic drop-down:
In the following example, we create a dynamic drop-down of countries, initialize a variable with the list of countries, and create an additional variable to capture the country selected by users.

  1. In the Create Form Task activity, click the ellipsis (...) to the right of FormData.

  2. Add an argument for the dynamic drop-down as follows:

    • Name: CountryList_dropdown
    • Direction: In
    • Type: List of Strings (List<String>)
    • Value: Press Ctrl + K and enter CountryList as the variable name.

    The _dropdown keyword is recognized and this automatically creates a drop-down component in Form Designer. The CountryList variable contains the items in the drop-down list.

📘

Array of Strings is also supported, but you must manually add the drop-down component in Form Designer and add the Field Key value.

  1. If you want to get the user selection back to the workflow, add another argument to capture the selected value:
    • Name: CountryList (the Field Key of the drop-down component)
    • Direction: In/Out or Out
    • Type: String
    • Value: Press Ctrl + K and enter selectedCountry as the variable name.
  2. Click OK to close Form Data.
  3. Open the Variables panel and initialize CountryList with the default value new string(){ "India", "Romania", "US" }.

👍

You can also choose to populate CountryList through other activities instead of initializing it.

Cascaded Drop-downs

Use them in task-based forms when you want the selection in one drop-downs (parent) to populate the values in the second drop-down (child).
To create a cascaded drop-down:

  1. In the Create Form Task activity, click the ellipsis (...) to the right of FormData.

  2. Add an argument for the parent drop-down as follows:

    • Name: StateDictList_parent
    • Direction: In
    • Type: List of Strings (List<String>)
    • Value: "CountryList".

    The CountryList variable contains the items in the drop-down list.

  3. Add another argument for the child drop-down as follows:

    • Name: StateDictList_dropdown (StateDictList is the Field Key of this drop-down)
    • Direction: In
    • Type: Dictionary of Strings and Lists of Strings (Dictionary<String,List<String>>)
    • Value: Press Ctrl + K and enter stateDicList as the variable name.

    The dictionary key is a value from the parent drop-down list and its corresponding value is a list of options to be shown on the form if the parent is set to the key.

👍

Tip:

You can pass the values to be pre-filled (for example, with country and state fields) in the FormData collection.
If you are passing child values, make sure you also include the parent value to prevent unexpected behavior.

  1. Map each value from the parent drop-down to a List of Strings variable. You can populate the list (dictionary) for the parent drop-down in any way, but for this example, we use an Add to Dictionary activity for each value.
    • Dictionary: the dictionary of the child drop-down, stateDictList.
    • Key: a value from the list of strings for the parent drop-down, CountryList - in this example, "US", "India", and "Romania".
    • Value: Press Ctrl + K and enter a name for the the List of Strings variable which holds the values to show in the child drop-down when the Key value is selected in the parent - usaStatesList, indianStatesList, and romanianCountyList, respectively.
  2. Make sure you place the activity or activities for the above step before the Create Form Task activity.
  3. Click OK to close Form Data.
  4. Open the Variables panel and initialize the new List of String variables you created with the following default values:
    • for indianStatesList: new string(){ "India", "Romania", "US" }
    • for usaStatesList: new string(){"Florida", "Georgia", "NY"}
    • for romanianCountyList: new string(){"Cluj", "Bucharest"}.

Setting the Number of Search Results for Drop-downs

Drop-downs show at most four search results by default. You can change this limit by setting a property in the form design.

  1. In the Form Designer, click Edit to open settings for the drop-down list and then select the Data tab.
  2. Under Choices.js options, add { "searchResultLimit" : x }, where x is the maximum number of results you want to show.

Embedding Objects in Form Tasks


You can design your form tasks to display images or PDF files to simply customize the look with logos and icons, or to provide materials that can help your Action Center users in completing the task.
This feature is only available with the Create Form Task activity.
To embed objects, you use the properties under the Storage section of the Create Form Task activity to link to a Storage Bucket and the Upload Storage File activity to add files.
You can embed any type of object that is supported by storage buckets.

Embedded objects shown in the Action Center:

Permissions

To use these features, users need the following permissions:

  • Action Center user: the folder permissions Storage Bucket [View] and Storage File [View]
  • Robot user: the folder permissions Storage Bucket [View and Edit] and Storage File [View and Create].

Embedding Images from Storage Buckets

For your Action Center users to experience better performance, we recommend that you embed images that were previously uploaded to a Storage Bucket.

To embed an image in a form task:

  1. Using activities such as the Upload Storage File activity, upload the image to the storage bucket that is used by the Create Form Task activity.
    As part of this step, create a String variable to store the path where the file is uploaded, for example imagePath.

📘

Note:

The storage bucket upload converts the + sign into a space, which can result in an error during form rendering

  1. In the Create Form Task activity, click the ellipsis (...) to the right of FormData and add an argument with the _storage keyword as a suffix:

    • Name: image_storage
    • Direction: In
    • Type: String
    • Value: imagePath

    The _storage keyword is used to indicate that this is an object that is available in the activity's storage bucket. For the value, we added the variable where we stored the path to the uploaded image.

👍

Tip:

For images smaller than 2 KB, such as logos or icons, you can skip this step. In the following step where the image_storage argument is used, use the imagePath variable instead.

  1. Add an HTML Element component and configure it as follows:
    • HTML Tag: div
    • Content: <img src="{{ data.image_storage }}" />
      This maps the storage file argument to the form component. Using the <img> tag displays the image in the form. Alternatively, you can use <a href="{{ data.image_storage }}" target=_blank> to add a link that opens the image in a new window.
    • Refresh On Change: selected.

📘

Note:

You can ignore any validation errors that appear on the Content field, they do not affect form rendering at runtime.

Embedding PDF files from Storage Buckets

You can also add PDF files that were uploaded to a storage bucket to a form task so that your Action Center users can review it.

To embed a PDF in a form task:

  1. Using activities such as the Upload Storage File activity, upload the PDF file to the storage bucket that is used by the Create Form Task activity.
    As part of this step, create a String variable to store the path where the file is uploaded, for example docPath.

  2. In the Create Form Task activity, click the ellipsis (...) to the right of FormData and add an argument with the _storage keyword as a suffix:

    • Name: doc_storage
    • Direction: In
    • Type: String
    • Value: docPath

    The _storage keyword is used to indicate that this is an object that is available in the activity's storage bucket. For the value, we added the variable where we stored the path to the uploaded PDF file.

  3. Add an HTML Element component to the form and specify the following:

    • HTML Tag: div
    • Content: <embed src={{ data.doc_storage }} width="600px" height="500px"></embed>
    • Refresh On Change: cleared
  4. Save your changes and close the component window to return to the Form Designer window.

  5. Click the Edit JSON icon for the HTML Element.

  6. Under Component JSON, search for "refreshOn" and set its value to the form data attribute so that you have "refreshOn": "doc_storage".

🚧

Important

If you use UiPath.FormActivitiyLibrary v1.1.10, notice that Component JSON doesn't list the "refreshOn" option. However, you can manually add the "refreshOn" key and set its value as mentioned above.

Allowing Users to Upload Files to the Storage Bucket


You can also allow your Action Center users to upload files to a storage bucket. Robots can then download these files for further processing using the system activity UiPath.Core.Activites.Storage.DownloadStorageFile.

Upload file widget in the Action Center:

To add a file upload widget to a form task:

  1. In the Create form Task activity, click the ellipsis (...) to the right of FormData.
  2. In the FormData window, and add an Out argument of the type StorageUploads, and in the Value field press Ctrl + K to add a variable.
  3. In the Form Designer, add a File component to the form with the following configuration:
    • File tab: Specify minimum and maximum limits for the file size, as needed.
    • Field Key tab: Add the variable you just created as the field key.
    • Data tab: Select Multiple Values if you want to allow users to upload more than one file.

Adding Advanced Logic Using JavaScript


You can build advanced conditions and logic into the design of task forms to guide Action Center users and reduce the likelihood of errors.

To add advanced logic to a form component:

  1. In Form Designer, click Edit to open the component's properties.
  2. Select the Logic tab.
  3. Click Add Logic.
  4. Fill in the Logic Name field.
  5. In the Trigger block, choose JavaScript and add your code under Text Area.
    This should be a condition for when you want the advanced logic to apply.
  6. Click Add Action to define what happens when the condition under Trigger is true.
  7. Fill in the Action Name field and select an option from the Type list to choose if you want to change a property or value of this component.
    Additional fields appear, depending on your selection, where you can specify how to change the selected item.

About JavaScript in the Action Center

In the Action Center, JavaScript runs inside a sandboxed JavaScript interpreter, which lets you run safe JavaScript and blocks potentially harmful code.
Action Center uses JS-Interpreter, which is compatible with most modern browsers. For more information on limitations, security, or compatibility, see the JS-Interpreter documentation.

Supported

  • JavaScript functions that return a value, for example:
    function add(p1, p2) {
    return p1 + p2;
    }
    return add((+data.number1), (+data.number2));

  • Expressions that control the properties of components; for example, you can write an expression that hides a component if true:
    JavaScript: result=(data.number1 < 100 || data.number1 > 200)
    Action: (Type: Property, Component Property: Hidden, Set State: True)

Not supported

  • Browser, document, or window object properties are inaccessible. Also, setting properties on these objects doesn't have any effect.
  • Web APIs are not available.
  • ECMAScript 6 is not supported. You can use ECMAScript 5 or use a source-to-source compiler.

Setting a Default Tab


Starting with UiPath.FormActivityLibrary dependency v1.1.9, you can set which tab to be displayed by default in an Action form.
This applies to the cases where you design two or more tabs inside the form, using the Form Designer from the Create Form Task activity.

To set a default tab:

  1. In Form Designer, go to the Layout category.
  2. Drag and drop the Tabs Component into the designer.
  3. In the Display tab, click Add another to add two or more tabs.
  4. Go to the Field Key tab.
  5. In the Custom Properties block, input defaultTab in the Key field and set a value for it.

📘

Note:

The value you set for the defaultTab key must correspond to the count of the desired tab, starting from 0.
Let's say you have a total of 5 tabs. If you want to set the 3rd tab to be displayed by default, you must enter 2 (Tab 1 - counts as 0, Tab 2 - counts as 1, Tab 3 - counts as 2, Tab 4 - counts as 3, Tab 5 - counts as 4).

  1. Save the form, run the job, and be amazed.

Updated 25 days ago


Advanced Controls in the Form Designer


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.