Dynamic table

The Dynamic Table widget displays user-defined content as a standard table with columns, rows, and cells.

Use the widget when employees need to work with data directly from table rows, such as starting processes, changing values, or viewing information in a non-standard format.

In the settings for the Dynamic Table specify  the source table and add the required number of columns to the widget template. In each column, configure the header, row cell content, and footer cell. Other widgets are used for this.

For example, you can start a process to handle an item by placing the Button widget. In the example below, a custom widget is used to let users change and save the order amount.

dynamic-table-1

The Dynamic Table can be added to a page. To do this, open the page in the interface designer and follow these steps:

  1. On the Context tab, add a variable with the Table type, which will be the data source for the Dynamic Table. Set the variable value. For example, specify an app in its settings or generate the value using a script.
  2. Drag the widget from the side panel to the design area and configure its settings.
  3. Configure the table appearance in the widget template.

Widget settings

  1. On the Main tab, complete the fields.

dynamic-table-02

  • List data*. Select a context variable of Table type, whose data will be used in the widget.
  • Show header*. This option is enabled by default. It displays table column headers.
  • Show footer*. This option is enabled by default. Use it to display the table's total row at the bottom, for example, the total amount for all orders.
  1. On the Events and System tabs, you can configure system settings, which are the same for all widgets. They let you control widget visibility and access, configure widget behavior when the pointer hovers over it, and more.
  2. Save the widget settings.

Configure the widget template

After the Dynamic Table settings are configured, an empty widget template appears in the design area. Configure the table appearance by adding columns and other widgets to the widget template. To do this:

  1. Add as many columns as you want to display in the table. Use the plus icon to add them. Note that columns and data from the source table are not added to the widget automatically.

dynamic-table-03

  1. When you add a column, you can configure its system settings.
  2. Each column contains three blocks where you can configure the column header, row cell, and footer cell content. To do this, use other widgets. In their settings, specify the source table data you want to display. Below is an example to illustrate how a widget template may look.

dynamic-table-04

  1. When you finish configuring the template, click Save and then Publish.

 

Example using the Button widget

Let's configure a table with a list of orders on a separate page, with an option to start processing any order using a button.

dynamic-table-5

To do this:

  1. In the workspace where users work with the Orders app, create an Orders Table page and open it in the interface designer.
  2. On the Context tab, add an Orders (table) variable with the Table type. The order data is written to it when the user opens the page. The data is then passed from this variable to the Dynamic Table. Enable the Input and Output options.
  3. Give the widget access to the list of orders. To do this, go to the Settings > Available Items and enable Allow using all items in the workspace.
  4. In Settings > System Functions, specify the initialization function onInit(), which writes data from the app Orders to the variable Orders.

Example script for initializing the page

 

async function onInit () {
    // Get all items from the Orders app
    const orders = await Namespace.app.orders.search().all();
    
    // Assign a value to the Table variable
    Context.data.table = Context.fields.table.create();
   
    // Create a row in the table for each item in the Orders app
    let total = 0;
    for (const order of orders) {
        const row = Context.data.table.insert();
        row.order = order;
        row.statusName = order.data.__status?.name ?? 'Unknown';        
    }
       
    // Assign the value to the table again so the widget is updated
    Context.data.table = Context.data.table;
}
  1. Go to the Orders Table page opened in the interface designer. On the Template tab, place the Dynamic Table widget. On it's Main settings tab, do the following.
  • Specify the Orders context variable, to display items from the Orders app.
  • Turn off the Show footer* option because in our example we do not need to display a total row at the bottom of the table.
  1. On the Template tab, add two columns using the plus icon.
  2. Place the following in the first column:
  • For the header, the Text box widget. In its settings, enter the text Name.
  • For the row cell, the Text box widget. In its settings, select Source row – Orders > Orders > Name.
  1. In the second column, add the following:
  • For the header, the Text box widget. In its settings, enter the text Launch Process.
  • For the row cell, the Button widget. In the Action type field, select process launch and specify the Process Order business process.
    To start a process instance for a specific item in the table, link the process variable to the widget. To do this, in the button settings, click Configure input  parameters. In the window that opens, specify the process variable that stores the app in the left column, and in the right column, specify Source row – Orders. Order.

dynamic-table-6

  1. Save the Button. The Dynamic Table will look like this.

dynamic-table-7

  1. When you finish configuring the widget template, click Save and then Publish.

After that, users will see a table of orders with the columns Name and Launch Process. In the row for the required order, they can click the button to start its processing. The order list is updated each time the user opens the page.

Example using a custom widget

Let's look at a more complex example of using the Dynamic Table. We'll configure a table with a list of orders where users can edit their amounts. If a user changes an order amount and clicks Save, the new value is written to the Orders  app item. We'll also display the total amount of all orders in the table's total row at the bottom.

dynamic-table-1

To do this, complete the following configuration steps:

  1. Preliminary page setup for where the table will be placed.
  2. Create the Editable order amount widget that will be used in the Amount column.
  3. Place it on the page and configure the Dynamic table widget.

Step 1. Preliminary page setup

  1. At the workspace level where users work with the Orders app, create an Orders Table page.
  2. Go to the page designer and on the Context tab, add the following variables.
  • Orders (table) with the Table type: order data is written to it when the user opens the page. The data is then passed from this variable to the Dynamic Table.
  • Total amount (total) with the Money type: its value is displayed in the total cell at the bottom of the Amount column.

For the created variables, enable the Input and Output.

  1. In the variable settings for Orders, in the On value change handler field, specify the function onChanged() to recalculate the total amount when changes are made to the table.

dynamic-table-8

Example script for recalculating the table total

 

 

async function onChanged(): Promise<void> {
    if (!Context.data.table) {
        return;
    }
    // Recalculate the table total when the table value changes
    let total = 0;
    for (const row of Context.data.table) {
        if (row.amount) {
            total += row.amount.asFloat();
        }
    }
    Context.data.total = new Money(total, 'USD');    
}
  1. Give the widget access to the list of orders. To do this, go to the Settings > Available Items and enable Allow using all items of the workspace.
  2. In Settings > System Functions, specify the initialization function onInit(), which writes data from the Orders app to the Orders variable.

Example script for initializing the page

 

 

async function onInit () {
    // Get all items from the Orders app
    const orders = await Namespace.app.orders.search().all();
    
    // Assign a value to the Table variable
    Context.data.table = Context.fields.table.create();
   
    // Create a row in the table for each item in the Orders app and calculate the total
    let total = 0;
    for (const order of orders) {
        const row = Context.data.table.insert();
        row.order = order;
        row.statusName = order.data.__status?.name ?? 'Unknown';
        if (order.data.amount) {
            row.amount = order.data.amount!;
            total += order.data.amount.asFloat();
        }
    }
    Context.data.total = new Money(total, 'USD');
   
    // Assign the value to the table again so the widget is updated
    Context.data.table = Context.data.table;
}

 

Step 2. Create the Editable Order Amount” widget

  1. In the workspace where Orders Table page is created, add the Editable order amount custom widget. It will be used in the table in the Amount column and will allow users to change the order amount directly in the table.
  2. Go to the widget designer. On the Context tab, add variables that will be used in scripts and the widget settings window, as well as in other widgets added to the current template.
  • Order (order) of the App (one) type. Link it to the Orders app, enable the Input option.
  • Amount (amount) of the Money type. Enable Input and Output options for this variable.
  • Read-only amount (isReadonly) of the Yes/No Switch type and value Yes by default.
  • Save? (isSaving) of the Yes/No Switch type and value No by default.
  • Editable amount (editableAmount) of the Money type.
  1. On the Template tab, add the Container widget. Inside it, place the created Editable amount property and two Button widgets.

dynamic-table-9

  1. Configure one Button to edit the order amount. To do this, in the widget settings, select the Script action type with the edit function to switch to edit mode.

dynamic-table-10

Example function for editing the amount:

async function edit(): Promise<void> {
    Context.data.isReadonly = false; // switch to edit mode
}

  1. Configure the other Button to save the new order amount. In the widget settings.
  • In the Inactive field, select the Save? variable. It is used in the widget script to prevent repeated button clicks.
  • Set the Script  action type with the save function.

dynamic-table-11

Example script for recalculating the table total

async function save(): Promise<void> {
    Context.data.isSaving = true; // field for disabling the save button to prevent repeated clicks
    try {
        const order = await Context.data.order!.fetch(); // select the app item from the server
        order.data.amount = Context.data.editableAmount; // set the new item value
        await order.save(); // save the item
        UI.notify('Amount changed', NotificationType.Success); // notify the user that the save was successful
        Context.data.amount = Context.data.editableAmount; // copy the new value to the read-only field
        Context.data.isReadonly = true; // switch to view mode
    } finally {
        Context.data.isSaving = false; // enable the save button
    }

  1. On the Settings > Main tab, enable the Call initialization function in the builder option.
  2. Go to the Settings > System Functions tab and specify the onInit() initialization function, so that the specified order amount is displayed in the edit field by default.

async function onInit(): Promise<void> {
    // Copy the value from the input data to the edit field for display in view mode
    Context.data.editableAmount = Context.data.amount;
}

  1. Save and publish the Editable order amount widget.

Step 3. Configure the Dynamic Table widget

  1. Go to the designer for the Orders Table. On the Template tab, place the Dynamic Table widget, and on the Main tab, specify the Orders context variable, to display items from the Orders app.
  2. On the Template tab, add two columns using the plus icon.
  3. Place the following in the first column.
  • For the header, the Text box widget. In its settings, enter the text Name.
  • For the row cell, the Text box widget. In its settings, select Source row – Orders > Orders > Name.
  1. In the second column, add.
  • For the header, the Text box widget. In its settings, enter the text Amount.
  • For the row cell, the Editable order amount widget created in the previous step. Click the gear icon, open the widget settings, and fill in the input parameters.
    • Orders: select Source row – Orders > Order.
    • Amount: select Source row – Orders > Amount.
  • In the total cell, the Total amount property. 
  1. When you finish configuring the widget template, click Save  and then Publish.

After that, users can work with the order list on the Orders Table page. By selecting an entry in the Name column, they can change and save the order amount in the Amount column. The total cost of all orders is displayed in the bottom row in the Amount row.

document-version.html dynamic-list.html