UiPath Activities

The UiPath Activities Guide

Callout Designer

UiPath.Callout.Activity.CallOutActivity

Enables you to design the callout that you want to display either by configuring the properties or by using the Callout Designer wizard opened by clicking the button in the body of the activity.

Properties

Common

  • DisplayName - The display name of the activity.

Data Binding

  • CalloutFieldsCollection - This property field can be used to bind workflow variables into the callout and can have a direction specified as IN, IN/OUT, OUT. This field supports only Dictionary<String,Argument> objects.
  • GenerateInputFields - If selected, automatically generates a callout schema based on the object added in the CalloutFIeldsCollection property field. By default, this check box is selected.

Format

  • Height - The height of the rendered callout window, specified as an Int32 variable. This field supports only Int32 variables. By default, this field is set to 237.
  • Width - The width of the rendered callout window, specified as an Int32 variable. This field supports only Int32 variables. By default, this field is set to 355.

Input

  • CalloutFieldsInputData - Passes JSON input data to the callout. If this property is used, the values in the CalloutFieldsCollection property are ignored. This field supports only strings and String variables.

Misc

  • Private - If selected, the values of variables and arguments are no longer logged at Verbose level.

Options

  • Timer - The duration (in seconds) until the callout is automatically closed. Leaving this field empty does not close the callout automatically. By default, this field is empty.

Output

  • CalloutFieldsOutputData - The JSON data that results from the callout upon completion, stored in a String variable. This field supports only strings and String variables.
  • Dismissed - If the user manually clicks the Close Window button without filling in any callout fields, the Boolean variable in this field is set to True. Otherwise, the variable is set to False. This field supports only Boolean variables.
  • SelectedButton - Stores which of the UI elements in the callout were interacted with by the user in a String variable. This field supports only strings and String variables.

Callout Designer

By clicking the Design Callout button in the body of the activities, the Callout Designer wizard is opened. This wizard helps you create a custom callout by enabling you to select what kind of UI elements you want present in the final callout and in what order they should be displayed.

Types of Callout Fields

On the left side of the wizard, you can find the four categories of widgets you can use to populate your callout. To add one of these callout fields to your callout, simply select one and drag and drop it to the canvas on the center of the Callout Designer. The four categories are:

  • Basic Components - This category contains the most used callout fields, such as Text Field, Number, Password, or buttons, check boxes, and so on.
  • Advanced - This category contains from personal data such as Email or Phone Number, to more complicated fields, such as Date/Time, Currency, and even HTML Element.
  • Layout - Contains elements that alter the layout of your callout, enabling you to add a Column or Table to your custom callout.

Customizing a Callout Field

Once you have dragged a callout field from one of the categories described above, a window is opened that enables you to customize the field in its entirety. This window contains 5 tabs, each enabling you to customize different aspects of the field, as well as offering a preview of the field.

Note:

Hovering over the question button that is located next to the fields displays a tooltip that offers more information on each field.

The 5 tabs are, as follows:

  • Display - Contains various settings regarding the appearance of the field, its position inside the callout, its description, and prefixes or suffixes. The check boxes at the bottom of the tab enable you to perform several very important actions, such as:
    • Disabled - Makes the form field read-only.
    • Always enabled - Makes the callout field editable even if the IsReadOnly check box is selected.
  • Data - Enables you to specify a default value for the field, and how often or if it should refresh.
  • Validation - Offers options regarding the validity of the data entered into the field, such as minimum or maximum length, as well as the error message that is to be displayed if the data entered is not valid.
  • Field Key - This section lets you associate a key to a callout field, enabling you to bind callout controls to workflow variables.
  • Conditional - This field enables you to put conditions into place that dictate if certain callout fields should be shown only when certain actions affect other fields in the callout.

After editing all of these tabs, clicking Save in the right side of the callout designer closes the window and saves the field with all the changes you have performed.

Callouts can be edited after this step by using the cogwheel button that is displayed when hovering over the field you want to edit.

If you want to duplicate an already existing field, you can use the copy button.

Removing a field can be done by using the delete button.

Example of Passing Dynamic HTML Elements

If you want to pass a dynamic HTML element by using the HTML Element callout field type, you can do so by following these steps:

  1. In the CalloutFieldsCollection property field of the Callout Designer activity, add an In Argument, which contains the dynamic element you wish to pass, whether it is a string, an image, etc.
  2. Open the Callout Designer wizard and drag an HTML Element to your callout.

Note:

To add an image in a HTML Element callout field, the image has to be added in Base64 format.

  1. Use a p tag in the HTML Tag field.
  2. In the Content editor, add the type of data that you want to pass dynamically by using the expression {{data.variable}}, where variable is the argument that you created at step 1.
  3. Select the Refresh on Change check box.

For example, if you wanted to add an image, you would create an In Argument named sampleImage1 and add it to the CalloutFieldsCollection property, assign the Base64 string that contains the image to this argument, and the final expression in the Content field should look like <img src={{data.sampleimage1}} height=100 width=100/>

Please note that the Label and Header property fields can also be used to pass elements dynamically in the same way, enabling you to set dynamic labels and headers for callout fields.

The Callout Designer Ribbon

Buttons on the ribbon of the Callout Designer enable you to perform actions related to saving, exporting, importing, deleting, and previewing callouts, as follows:

  • Save - This button saves the callout you have generated in the Callout Designer. After clicking it, closing the Callout Designer returns you to Studio and saves the changes you have made to the callout.
  • Save As Template - Enables you to export the callout you have created as a template that can be easily reused in other automation processes.
  • Insert Template - Lets you browse for already created callout templates, which are easily added to the current project.
  • Clear callout - Deletes all entries in the current callout and lets you start from scratch.
  • Preview - Clicking this button enters the Preview mode, which shows you how the callout looks like at runtime. This section also enables you to resize the display size of the callout, or change its theme from a selection of premade themes.

Note:

Clicking the Themes button in the Preview section displays the available premade themes and enables you to select one for the entire callout.

Customizing Themes

Entering the Preview mode and clicking Themes takes you to the Theme selection window, in which you can use the Customize Current Theme button to start customizing the theme you have selected.

In this menu, you can customize the background color of the callout, the font that is used, as well as its color and size. Also, buttons that are placed in the callout can be customized, the colors used for their background, font, and border, can be edited.

Once you have finished customizing your theme, clicking the Save Customization button lets you name and save your theme for future use.

Updated 5 months ago


Callout Designer


Suggested Edits are limited on API Reference Pages

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