All the controls that are recorded using Jiffy UI Learn get listed in UI controls tab. You can also manually add UI controls and edit the existing UI controls for any changes in the recorded control of the UI pages.

1. Click the icon on the attribute pane of the node.
2. Select the UI Control option to display the UI Control tab.

UI Controls tab displays ID, Name, Created by, Updated On, Type, Mode, Module, and Action of each UI Control.

Create UI Control

1. Click the icon, to add a new UI Control.

2. Specify the following details in the Add UI Control window.

   • Name: An intuitively appropriate name for the control.
   • Module: All modules created in the HyperApp are listed. Select the required application from the drop-down.
   • Type: Select the Type of UI control to be created, for example, Submit:WEB, Select:Web
     

3. Click the Save button.

Edit UI Control

Click the icon against the UI Component you wish to modify:

1. Edit the fields Description, Element Type, Module, and Closeness Percentage, as required.
2. Change mode from Static to Dynamic, if required.
3. Click the Save button.

Change Mode from Static to Dynamic

UI Controls can be of Static or Dynamic type.

• Static: Non-editable element captured as a constant value.
• Dynamic: You can enter desired value as variable during task design.

By default, mode of any UIControl is Static. You can change it to Dynamic in three ways from the Edit UIControl window:

1. Select Dynamic from the Type drop-down.
   1. Click the + icon and enter the Variable Name.
2. Enable Use Dynamic Script option.
   1. Write python script for the UI element in the Dynamic Script field, based on your requirement.
3. Click the Make Dynamic option. Make Dynamic window opens.
   1. Enter Name of UI Control in the Target Text field.
   2. Enter an intuitively appropriate name in the Variable Name field.
   3. Click the SAVE button.
      

The UIControl is now dynamic. In Actions tab, you can enter the desired values as variables.

Mode of UI element One-way is changed to Dynamic and added Variable Name as TypeMode. In Actions tab, the value Two-way can be entered as variable.