Data Mapping - Auto Load Data

Configure UI to load data when the page is rendered.

This section explains the steps to:

1. Configuring Data Loader.

2. Setup Data bean path.

3. Rendering data in a UI.

---

Part 1: Create UI

1. Open or Create a Custom Widget.

2. Drag and drop Section (Parent component).

3. Add child components (such as Field, Label) to the Section.
   

   

---

Part 2: Configure Action to fetch data

Action to fetch the data can be a DB Action, a JavaScript Action, or an Action to get data from a third-party application.

Depending on the Parent component type, the data fetched by the Action should be a JSON Object or a JSON Array.

• If the Parent component supports repeating data or multiple points:
  → Return a JSON Array (for example, Grid, Chart, Map)

• If it does not support repeating data:
  → Return a JSON Object (for example, Section)

Although the following example uses a DB Action, the same steps apply to any Action.

Steps:

1. Click <Application Name> > DB Operations > +

2. Give a unique name.

3. Select appropriate Action Type. In this example, choose FindOne, since Section is the parent component.

4. Open the Properties Panel.

5. Enter a query to return a single or multiple rows, based on the selected Action Type. In this example, the query returns a single row.

6. Select the Data Source.

   

---

Part 3: Add the Action to the UI

1. Open the User Interface by expanding User Interfaces and selecting the page created in Step 1.

2. Expand the item explorer (DB Operations or Actions) containing the data-fetching Action.

3. Click the Model tab in the User Interface.

4. Drag the Action into the Drag and drop items area.

   

---

Part 4: Configure Data Loader

Actions added to User Interface > Model (from Part 3) can now be used as Data Loaders by UI components.

Steps:

1. Select the parent component (for example, Section, Grid, Chart, Widget).

2. Click Data Mapping.

3. Select the Action from the Data Loader dropdown. This dropdown lists all Actions added in Part 3.

4. Provide a unique name for the Data Bean Path.

5. Select the Autoload Data checkbox (this loads the data whenever the page is rendered).
   

   

   This step ensures that the parent component loads data when the page is loaded or refreshed.
   The loaded data can then be consumed by the child components.

---

Part 5: Configure child components to render data

This part explains how child components access data loaded by the parent (in Part 4, data is loaded for Section).

The loaded data must be either:

1. A JSON Object like:

   {"<key 1>":"<value 1>","<key 2>":"<value 2>", ... }

   OR

2. A JSON Array like:

   [{"<key 1>":"<value 1>","<key 2>":"<value 2>", ... },{"<key 1>":"<value 1>","<key 2>":"<value 2>", ... }, ... ]

Example query: SELECT * FROM employee LIMIT 1 Returns:

{"id": <id>, "employeename": <employeename>, ...}

The child components render values by referring to the appropriate "key" in the JSON object or array.

Steps:

1. Select the child component (for example, Text box).

2. Click Data Mapping.

3. Enter the JSON "key" in the Field Name.

4. Repeat these steps for each child element.

   

---

Testing

Add the screen to a web module and launch the web module.

---