Input types - UI elements

The user interface (UI) elements are the input controls used to receive inputs in an action while building a bot.

The following examples show the supported input types. Use the UI elements to create user interface (UI) designs to build the Control Room interfaces. For instance, if you need an input as text then, use TEXT, if you need a radio button, select RADIO, and so on. This topic is based on the SampleUI sample available within the Package SDK in the following location: <PackageSDK>\src\main\java\com\automationanywhere\botcommand\samples\commands\ui\SampleUI.java.

Make sure you have imported the following packages to ensure all the functionalities works as described in the sample.

import com.automationanywhere.commandsdk.annotations.Idx;
import com.automationanywhere.commandsdk.annotations.Pkg;
import com.automationanywhere.commandsdk.annotations.rules.CodeType;
import com.automationanywhere.commandsdk.annotations.rules.VariableType;

Add the @BotCommand annotation to make a class as an Action in the Control Room. For more information on annotations, see Annotations.
```
@BotCommand
```
Add the @CommandPkg annotation to define all the UI related components - labels, description, and name.
```
@CommandPkg(label = "UI Demo", description = "Demonstrates the provided UI elements", name = "uiDemo")
```
Create a class and define the fields as described below.
1. Annotate the method with @Execute to execute the method during compilation.
2. In this sample, @Idx and @Pkg are used as a member of the class, so you should use set and get methods to define them.
  1. @Idx - Defines the index of an action.
  2. @Pkg - Defines all the parameters and member variables shown in the interface. Must be accompanied by the @Idx, if not this annotation is ignored.
  3. @Inject - To receive value from the UI using the member class, @Inject is required at field levels.
```
@BotCommand
@CommandPkg(label = "UI Demo", description = "Demonstrates the provided UI elements", name = "uiDemo")
public class SampleUI {
        @Idx(index = "1", type = TEXT)
        @Pkg(label = "Text type")
        @Inject
        String text;

    @Execute
    public String getText() {
        return text; 
    } 
    public void setText(String text)  {
        this.text = text; 
    }
}
```
Drag the action into canvas and you will be able to input a string in the text field. You will see an input box similar to this image.

UI element - Number field

Use the Number type to create an UI element that will accept a number. Using the below sample you will be able to create a field that will accept only numbers.

@BotCommand
@CommandPkg(label = "UI Demo", description = "Demonstrates the provided UI elements", name = "uiDemo")
public class SampleUI {
        @Idx(index = "2", type = NUMBER)
        @Pkg(label = "Number type")
        @Inject
        String num;

    @Execute
    public String getNum() {
        return num; 
    } 
    public void setNum(String num)  {
        this.num = num; 
    }
}

Other UI elements

It is possible to create other UI components like: Boolean, Radiobutton, Number, Variable, Code, Dictionary, List, Date/Time, and so on. To get a complete list of UI elements supported, see <PackageSDK>\src\main\java\com\automationanywhere\botcommand\samples\commands\ui\SampleUI.java.

UI validations supported

The following UI validations are also supported:

@NotEmpty means that the UI field needs an input at the bot design time.
@ LocalFile refers to a local file from a user machine.
@NumberIntegers refers to a number value that you can provide, such as, a float or a double input kind.

Automation 360

Input types - UI elements