Methods to flexibly bind data

Using Data to flexibly bind data

You can customize data coming from sources like the variables, Keywords, controls, simple Javascript, and so on. For example, if you are creating a simple employee registration for specific training, you may want to display the user name and add a welcome note or basic instructions to the user. In that case, you can add keywords, variables, and even the control values, as data. You simply need to add these variables, controls, or keywords inside double curly brackets.

For the moment let us take an example to display an initial note referring to the logged-in user and inform them that further instructions would be available on email. Add any control like the Date Time controls that enable users to select the date and time to start the Training. This selected value of the Control would be displayed in a text control. So for Text Control, go to Bind Data > Data. You are already aware of how you enter the static data. Now you can also add the dynamic data here like the Keywords, variables, and control values as reference.

Note:

  • Make sure that you use the System Keywords as they appear so that they are available for use correctly

Now if you take a preview of the above Data, you can see the data generated.

Similarly, if you are planning to use the Dropdown control you can have the flexibility by adding Data as a part of the array as shown below. In this example, the data is the value of the TextInput Control textinput3.

["{{textinput3}} 1",“Folder”, “Control”]

So the Dropdown control, in this case, would have the three options where the first option is a dynamic from the textinput3.

For Table grid it would be an array of objects

   [
      {
       "id": "{{dropdown1}}",
       "name": "Carlyn Bartle",
       "email": "Carlyn.Bartle@example.com"
      },

     {
       "id": "2",
       "name": "Murry Rowsel",
       "email": "Murry.Rowsel@example.com"
     }
  ]

where {{dropdown1}} is the value selected from the dropdown control.

Using JSON UI to flexibly bind data

While binding static data to some controls like the split button, checkbox, and more, you can find the feature to add JSON values using a dedicated UI right beside JS and SQL. This UI option is available to make the developer experience easier and more direct.

In the bind data section under Data, you can see the UI option. The UI option provides different JSON UI depending on the type of control. Let’s see the UI for split control.

In the above image, you can see that there are three options already created for the split button control – Approve, Reject, and None. You can add further options using this JSON UI feature by clicking on the + Add button.

In the above image, you can see that a new option named option has been added to the options list. Now to provide data and items to the newly created option, simply click on it.
This will open up a tray window and then you can provide details or menu items.

You can rearrange options for the split control by simply dragging and arranging them in the JSON UI itself.

Right beside every option – we haveimage which provides us with some additional options of

  • Duplicate – To duplicate the selected option.
  • Delete – To delete the selected option.

App Preview -
A new option is added with the help of JSON UI.

Previewing the app.

DronaHQ Docs have found a new place!

We have updated and moved our documentation to docs.dronahq.com.
You can continue to ask questions in the community here.