Components for options

Instead of using ID in URL you could prefer to create filtering using special Select component with the ability to select a country from the list. Previously, we have already used the Relselect component, and the logic of its work is very similar, but thanks to Select, we can not only offer a choice from all available countries but also add our own options.

Select component

Let's look at the Select setting, the choice which will determine which cities from which countries should be in the table, and the ability to show all available cities, in general, has been added.

When creating a Select component, it must be filled with options from which the selection will be made. To do this, as in Relselect, you need to get a general list of countries. But then we do not send this list to Select directly but convert it into available options, each of which is represented as a Select Option model. Therefore, we declare the Select Options array as a variable and fill it with the necessary data in a loop.

In this example, the essential Select Options fields for us will be Label (the text of the proposed option) and Value (its numeric identifier). Set these values to the name of the country and its ID.

When the loop is completed we should create and add one more option that will show all available cities without filtering by countries. Let's set Label = World and Value = 0.

When you select any option, the Select onChange trigger will fire. Let's use it to find out the selected option and write it to the new global variable Country selected. In this case, it is necessary to make an additional check, and if the last option (all available cities) was selected, then the value of this variable should be set to empty (null).

The last action of this business process is to start clicking the Refresh button, which refreshes the data in the table. Its business process also needs to be slightly changed to take into account the emergence of a new variable.

Now we can choose which cities from which country should be shown in the table.

Dropdown component

And finally, let's look at another component that allows you to choose different options - Dropdown. Its key difference is that selecting a particular option should immediately trigger some action rather than just remembering the selected option. It can be called a button with extended functionality.

For example, let's use Dropdown as a replacement for the delete country button in the table. Now it will not immediately delete the entry in the database but will call up additional options where you can either confirm the deletion or cancel it. 

Let's start with the general configuration of the component. Let's choose its appearance and available options.

Next, we will create the business process itself. And the first action in it will be to determine the record for which the Dropdown was clicked. For ordinary buttons, this value is passed as a Record ID, but in this case, not even the Dropdown itself will be pressed, but its child component with the desired option. Therefore, getting the entry ID is a bit more complicated.

For repeating table elements, the Component ID consists of two parts, separated by a “-” sign. The first part is the standard component ID. But the second part is just the record ID, the addition of which makes the identifier of the repeating components unique.

Knowing this, we just have to get this ID. Therefore, we will split the string into parts (Split string) and find out the value of the second part (index = 1)

As a next step we need to find out what option was selected.

If this is indeed an option to confirm the deletion, then run the appropriate command. Otherwise, you can do nothing because some action is not required.

Now deleting records from the database is protected from accidental clicks.