Using variables in a low-code app

In this tutorial, you will learn how to create a variable and dynamically change its value through a header bar, allowing it to be used as an element state filter within a query.

By the end of this tutorial, you will have a functional low-code app that allows users to dynamically filter elements based on their state.

Estimated duration: 15 minutes.

Note

• This tutorial uses DataMiner web version 10.5.1.
• Variables have been available since DataMiner web version 10.4.12, and support for dynamic value changes was introduced in version 10.5.1.

Tip

See also: Kata #58: Low-Code Apps - Introducing Variables on DataMiner Dojo

Prerequisites

• DataMiner server version 10.4.0 or higher

• DataMiner web version 10.5.1 or higher

Overview

• Step 1: Create a variable

• Step 2: Create a 'Get elements' query filtered by the variable

• Step 3: Add buttons to modify the variable and filter elements

Step 1: Create a variable

1. Create a low-code app.

2. In the Data pane on the right, expand the Variables item and click the "+" icon to start creating a new variable.

3. In the Name box, enter a descriptive name for the variable.

4. Select Text from the Type dropdown list.

5. Ensure the Read-only option is disabled so the variable can be changed later.

6. Click the button to stop editing the variable.

Step 2: Create a 'Get elements' query filtered by the variable

In this step, you will create a query that retrieves elements in your DataMiner System filtered by the variable created in step 1.

1. Create a query:

   1. In the Data pane, Expand the Queries item and click the "+" icon to start creating a new query.

   2. In the Name box, enter a name for the query.

   3. Select Get elements as the data source.

   4. Apply a Filter query operator:

      1. Select Filter from the Operator dropdown list.

      2. Choose State as the column to filter.

      3. Select equals as the filter method.

      4. Under Value, click the button.

      5. From the Data dropdown list, select the variable you created in step 1.

      6. Under Empty data shows, select everything.

      7. Click Link in the lower right corner.

         Tip

         See also: Replace the static filter value with a feed

   5. Click the button to stop editing the query.

2. Add a table component to the app.

3. Drag the newly created query from the Data pane onto the table component.

   The table now displays an overview of all elements in your DataMiner System.

Step 3: Add buttons to modify the variable and filter elements

Currently, all elements are displayed in the table. To allow filtering, you will add buttons to the header bar that modify the variable's value, thereby updating the query dynamically.

1. Click the header bar toggle button.

2. Add a button to filter for active elements:

   1. Click the "+" on the left side of the header bar.

   2. Enter Active as the button label.

   3. Expand the Events item and select Configure actions.

   4. Select Change variable from the dropdown list.

   5. From the Variable dropdown list, select the variable you created in step 1.

   6. Enter Active as the new value.

   7. Click Ok.

3. Add a button to filter for stopped elements:

   1. Click the "+" on the left side of the header bar.

   2. Enter Stopped as the button label.

   3. Expand the Events item and select Configure actions.

   4. Select Change variable from the dropdown list.

   5. From the Variable dropdown list, select the variable you created in step 1.

   6. Enter Stopped as the new value.

   7. Click Ok.

4. Publish the app by clicking the button in the top-right corner of the low-code app header bar.

   Your app is now functional. By default, it displays all elements in your DataMiner System, but you can use the buttons in the header bar to filter the list to show only active or stopped elements.