Open

Overview

In this lesson, we are going to review how to add a “Dropdown List” control to a page and different way to set its source including Stored Procedures, Prototypes or fixed lists.

Let’s get to it!

How to create a “Dropdown List” control?

In our first example, we are going to create a new control in “Free” mode. This option will allow us to display a fixed list of values without using an data source like a database Stored Procedure or API.

Let’s go to the page where we are going to include this object.

Open

We can observe all the Datasets, Controls and Actions associated to the page created. Under the “Controls” section, choose the “Dropdown List” option.

Wayfast refreshes the screen with the buttons associated to this control. Click on “New” button and a popup will be prompted to complete the control’s properties.

Turn to “General” tab, complete the “Object Name” field that will be the control identifier and “Displayed Name” field which is the label that the dropdown will show on the application.

Turn to “Data Binding” tab. Like we mentioned previously, we select “Free” mode to generate a simple Key-Value Pair with the data that we want to display in the dropdown list. Keep in mind that the syntax on “Options” text box should have the following order “1,2019;2,2020;3,2021;4,2022” with comma to separate the key-value and semicolon to separate the pairs.

Make sure that the “Pre” execution type is selected to display the values in dropdown every time that the page is loaded. Now turn to “Layout” tab and set the place in the page that we want to display this control.

Layout configuration will depend on the design that we want to arrange in the page. In this case, we select the Order #1 to display the control at the top page. Click on “Submit” button and let’s verify how the control is displayed on page’s preview.

Click on “Preview” button and new tab will display the page with the layout setting:

How to connect datasets to “Dropdown List” control?

In the next example, we are going to create a Dataset inside the page and then we will link this object with the “Dropdown List” control.

Let’s create a dataset, click on “New Dataset” button.

A popup is displayed to complete the dataset’s properties. We can identify the dataset name and “Pre” as execution type like we mentioned in the later example. Turn to “Columns” tab where we put the reference values and the type column.

Turn to “Data Prototype” tab and we can observed that the 2 columns added are now available and ready to be completed with the input values. Check that “Value” column is the expected value that we will display in the “Dropdown List” control.

Click on “Submit” button and now we are ready to create the control

Focus on “Controls” section and select “Dropdown List” option. Click on “New” button

In “General” tab, fill the required fields like in the first example.

Turn to “Data Binding” tab and here we will have the change setting in comparison with the “Free” mode. Select the dataset that we created in the later step that will be displayed in the dropdown list. Also change to “Dataset” mode and refer to the dataset created in “Fill Dataset” field. Those 3 configurations will give us the connection between the control and dataset.

Click on “Submit” button after including the layout settings. Let’s see how the dropdown is displayed in preview with the dataset available.

Click on “Preview” button

Notice that the new dropdown is showing the 4 values from the dataset below the previous example that we created.

Recap

In this lesson, we learnt different ways to create “Dropdown List” controls in Wayfast. There are multiple options to create a dropdown showing data from different source. We can create an Stored Procedure and similar than Dataset, we can connect this data with the dropdown control to display different values and stored the selection from the user.