How to Set Up a Dynamic SELECT Control in RadSystems Studio

In this article, we will focus on setting up a dynamic SELECT control using RadSystems Studio's no-code solution.

How to Set Up a Dynamic SELECT Control in RadSystems Studio

Good UI design is essential for creating user-friendly web applications. One of the key aspects of a good UI is minimizing user effort by using point-and-click mechanisms instead of manual data entry. Users prefer selecting values from a given set rather than typing them out because it reduces errors, saves time, and enhances the overall user experience. To cater to this user preference, RadSystems Studio offers a variety of ways to populate the SELECT HTML form control with values. In this article, we will focus on setting up a dynamic SELECT control using RadSystems Studio's no-code solution.

Using a SELECT HTML form control is a common way to provide a list of options for users to choose from. RadSystems Studio offers various methods to populate this control with values, making the process seamless and efficient.

Methods to Populate SELECT Control in RadSystems Studio

  1. Quick List: RadSystems Studio comes with pre-made lists to speed up your work, such as a list of countries, name prefixes, etc. Users can manually specify the value-label pairs for the SELECT data list to populate it quickly.
  2. Enter Values: This method allows users to manually enter value-label pairs directly into the system. This is useful for static lists that do not change often.
  3. Data Table: This method allows users to populate the SELECT control from a database table. Users can configure the table, value field, label field, and sorting order.
  4. Custom SQL: For more complex scenarios, users can write their own SQL queries to fetch and populate the SELECT control options. The query should return two columns: value and label.

Hypothetical Demo Project: Loan Proposals Management

Consider a simple demo project where we are building a web application to manage loan proposals.

Tables involved:

  • members:
    • member_id
    • first_name
    • last_name
    • contact_email
    • contact_phone
    • address
    • city
    • country
    • created_on
    • updated_on
  • loan_proposals:
    • proposal_id
    • scheme_id
    • borrower_name
    • borrower_email
    • borrower_phone
    • loan_amount
    • repayment_tenure
    • notes
    • created_on
    • updated_on
  • loan_schemes:
    • scheme_id
    • scheme_name
    • interest_rate
    • min_amount
    • max_amount
    • max_repayment_tenure
    • notes
    • created_on
    • updated_on
💡
Download the demo project SQL containing dummy data to follow along with the steps.

For "Add" page of loan_proposals table, we will set up two dynamic SELECT controls, one for scheme_id in which we will load the names of actual schemes in the SELECT control and the second is borrower_name where we will populate the SELECT control with the name, city and country details from members table.

Prepare Demo Project Database

  1. Open XAMPP or any localhost environment you've installed on your computer and start Apache, MySQL servers.
  2. Use any database management tool like HeidiSQL or phpMyAdmin and create new database. I will give it a name "rsbl_loans".
  3. Download the MySQL Demo Database used in this tutorial and import it in the newly created database using your favorite database management tool.

Create New Radsystems Project

Create New Project

Start Radsystems Studio and select "PHP-Laravel" as back-end and "Bootstrap jQuery" as front-end framework. Click "Create Project" button to move on to the next step.

📝
Although we're building Laravel Bootstrap application, the process explained in this blog post remains consistent for other supported frameworks, too.

Set up the Project

  1. Fill-in the Project Information fields.
  2. In this demo project, we are going to use MySQL Database. Therefore, select MARIADB under "Select Database".
  3. Select the database.
    1. Specify all the details to connect to your localhost MySQL database.
    2. Click the down-arrow of Database drop-down and select the database you created above. Since I named my database rsbl_loans, I have selected that database in the "Database" field.
  4. Click "Create Project" button to create new project. Wait for Radsystems Studio to complete reading database schema.
  5. Save and Publish to complete project setup.
    1. Once the project is loaded, click "Save Project button to save the project.
    2. Now, click "Publish" tab and wait for the Radsystems Studio to complete publishing the project.

This will complete setting up Radsystems Demo project. I have added some dummy data to the database to help you get started.

Now, let's move on to configure the scheme_id and borrower_name fields in RadSystems Studio.

Configuring the SELECT Control for scheme_id

Let's walk through the steps to configure the SELECT control using the Data Table option in RadSystems Studio.

Set up the field:

Select the table loan_proposals in the list of tables, and then,

  1. Click on Add Page in the list of pages. This will load all the database fields.
  2. Change Field type for scheme_id :
    1. Select the field scheme_id.
    2. Since we want to load the scheme names from loan_schemes table, we will first change the field type for this field to "Select".

Select Data Source:

Select the field property "Select Data Source" and click "..." button. This will open a new window "Select Field Datasource".

  1. Choose the "Data Table" option from the available data source types (Quick List, Enter Values, Data Table, Custom SQL).
  2. Configure Data Fields
    • Configure the Table Name:
      • Table Name: Select the table from which you want to fetch the options. In this example, loan_schemes.
    • Set the Value Field:
      • Value Field: Choose the field that will be saved in the database when the form is submitted. In this example, scheme_id.
    • Set the Label Field:
      • Label Fields: Select the field that will be displayed to the user in the SELECT control. In this example, scheme_name.
    • Configure Ordering:
      • Order By: Choose the field by which you want to sort the options. In this example, scheme_name.
      • Order: Select the sorting order, either ASC (ascending) or DESC (descending).
    • Distinct Option: Check this box if you want to remove duplicate entries from the options.
  3. Save and Apply: Click "Okay" to save your settings.

Configuring the SELECT Control for borrower_name

RadSystems Studio does not restrict you; you can also opt for a low-code solution where you write your own SQL query. Ensure that your query returns only two columns: value and label.

For example, let’s join the first_name, last_name, city, and country in the label. Here’s how you can edit the SQL.

Change Field type for borrower_name :

Similar to scheme_id, we want to load the values from another database table named members in this field. So, let's first change the field type to "Select"

Select Data Source:

Select the field property "Select Data Source" and click "..." button. This will open a new window "Select Field Datasource".

  1. Choose the "Data Table" option from the available data source types (Quick List, Enter Values, Data Table, Custom SQL).
  2. Configure Data Fields
    • Configure the Table Name:
      • Table Name: Select the table from which you want to fetch the options. In this example, loan_schemes.
    • Set the Value Field:
      • Value Field: Choose the field that will be saved in the database when the form is submitted. In this example, scheme_id.
    • Set the Label Field:
      • Label Fields: Select the field that will be displayed to the user in the SELECT control. In this example, scheme_name.
    • Configure Ordering:
      • Order By: Choose the field by which you want to sort the options. In this example, scheme_name.
      • Order: Select the sorting order, either ASC (ascending) or DESC (descending).
    • Distinct Option: Check this box if you want to remove duplicate entries from the options.
  3. Edit Query: If we leave the above settings, the SELECT control will load only the first_name from the members table. We want to append Last Name, City and Country information to it. For that, we will edit the query by clicking the button Edit Query.

Edit SQL Query code:

By default, you will find first_name as label in the query. We will use MySQL CONCAT function to append the other fields to first_name field. Here is how the final MySQL query looks like:

SELECT DISTINCT member_id AS `value`, CONCAT(first_name, ' ', last_name, ', ', city, ', ', country) AS `label` FROM members ORDER BY first_name ASC

Save and Apply: Click "Okay" to save your settings.

And that's it! Your dynamic SELECT control is set up using RadSystems Studio’s low-code solution.

End Result

Now, it's time to see the final result. Click "Save Project" to save the project and hit F5 button to publish the project. Here is how the final result looks like:

Scheme ID Field

Borrower Name Field

Try Radsystems Studio Today!

RadSystems Studio significantly saves time and accelerates project development by providing a robust no-code and low-code environment. This platform eliminates the need for manual coding for common tasks, such as populating SELECT controls, which would otherwise require custom endpoints and additional scripting. With intuitive point-and-click configurations, pre-made lists, and flexible data source options, developers can quickly set up dynamic forms and focus on core application functionality, thereby reducing development cycles and enhancing productivity.

👍
Ready to experience the efficiency of RadSystems Studio for yourself? Download the 30-day fully functional trial version today and start building dynamic web applications with ease!