Creating Widget

Learn how to create a widget (screen).

Creating a Manual Screen (Widget)

You can create a manual screen (widget) and add different UI components such as Section, Field, Chart, or Map to it.

Steps:

  1. Create a new widget:

    1. Navigate to User Interfaces under your application in the component explorer.

    2. Click the "+" icon.

    3. Specify a unique name for the new widget and click OK.

      Create Widget

    4. Assign a unique JSON structure name as the data bean path of the main widget by navigating to: Data Mapping > Data Bean Path (for example, post).

      It is a good practice to initialize the data bean path with an empty JSON map:

      data.post = utils.createMap();

  2. Click the Show Drop Areas slider in the top menu to make drop areas visible.

  3. Drag and drop standard UI components from the top menu bar as needed:

    1. Name the components appropriately.

    2. Ensure each resource ID is unique within the screen.

    3. Assign a variable name.

      Designing UI

  4. Design the layout:

    1. To change a component’s width, right-click it and choose the number of columns it should occupy.

    2. To remove a component, use the delete icon in the right-click popup.

  5. Map data to the widget:

    Each component should reference a key from the JSON map associated with the parent widget. Example: data.post

  6. Click SAVE to finalize the screen.