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

-- phpMyAdmin SQL Dump
-- version 5.2.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jun 08, 2024 at 01:03 PM
-- Server version: 10.4.28-MariaDB
-- PHP Version: 8.2.4

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `rsbl_loans`
--

-- --------------------------------------------------------

--
-- Table structure for table `loan_proposals`
--

DROP TABLE IF EXISTS `loan_proposals`;
CREATE TABLE `loan_proposals` (
  `proposal_id` int(11) NOT NULL,
  `scheme_id` int(11) NOT NULL,
  `borrower_name` int(11) NOT NULL,
  `borrower_email` varchar(255) NOT NULL,
  `borrower_phone` varchar(255) NOT NULL COMMENT ' ',
  `loan_amount` decimal(10,2) NOT NULL,
  `repayment_tenure` int(11) NOT NULL,
  `notes` varchar(255) DEFAULT NULL,
  `created_on` timestamp NULL DEFAULT current_timestamp(),
  `updated_on` timestamp NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

-- --------------------------------------------------------

--
-- Table structure for table `loan_schemes`
--

DROP TABLE IF EXISTS `loan_schemes`;
CREATE TABLE `loan_schemes` (
  `scheme_id` int(11) NOT NULL,
  `scheme_name` varchar(255) NOT NULL,
  `interest_rate` decimal(10,2) NOT NULL,
  `min_amount` decimal(10,2) NOT NULL,
  `max_amount` decimal(10,2) NOT NULL,
  `max_repayment_tenure` int(11) NOT NULL,
  `notes` varchar(255) DEFAULT NULL,
  `created_on` timestamp NULL DEFAULT NULL,
  `updated_on` timestamp NULL DEFAULT NULL ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

--
-- Dumping data for table `loan_schemes`
--

INSERT INTO `loan_schemes` (`scheme_id`, `scheme_name`, `interest_rate`, `min_amount`, `max_amount`, `max_repayment_tenure`, `notes`, `created_on`, `updated_on`) VALUES
(1, 'Basic Loan', 5.50, 1000.00, 5000.00, 12, 'Suitable for small amounts.', '2024-01-04 18:30:00', '2024-01-08 18:30:00'),
(2, 'Standard Loan', 6.20, 5000.00, 10000.00, 24, 'Standard loan for moderate amounts.', '2024-02-09 18:30:00', '2024-02-13 18:30:00'),
(3, 'Premium Loan', 7.00, 10000.00, 50000.00, 36, 'Premium plan for larger amounts.', '2024-03-14 18:30:00', '2024-03-17 18:30:00'),
(4, 'Business Loan', 8.50, 20000.00, 100000.00, 48, 'Ideal for small businesses.', '2024-04-19 18:30:00', '2024-04-23 18:30:00'),
(5, 'Education Loan', 4.50, 5000.00, 20000.00, 60, 'For educational purposes.', '2024-05-24 18:30:00', '2024-05-27 18:30:00'),
(6, 'Home Loan', 6.80, 50000.00, 200000.00, 120, 'Home purchase and renovation.', '2024-01-11 18:30:00', '2024-01-15 18:30:00'),
(7, 'Auto Loan', 5.90, 20000.00, 50000.00, 48, 'For purchasing vehicles.', '2024-02-17 18:30:00', '2024-02-21 18:30:00'),
(8, 'Personal Loan', 7.50, 1000.00, 10000.00, 36, 'Flexible personal use loan.', '2024-03-19 18:30:00', '2024-03-22 18:30:00'),
(9, 'Travel Loan', 6.00, 3000.00, 15000.00, 24, 'For travel and vacations.', '2024-04-27 18:30:00', '2024-05-01 18:30:00'),
(10, 'Medical Loan', 4.80, 2000.00, 20000.00, 24, 'For medical expenses.', '2024-05-09 18:30:00', '2024-05-12 18:30:00');

-- --------------------------------------------------------

--
-- Table structure for table `members`
--

DROP TABLE IF EXISTS `members`;
CREATE TABLE `members` (
  `member_id` int(11) NOT NULL,
  `first_name` varchar(50) NOT NULL,
  `last_name` varchar(50) NOT NULL,
  `email` varchar(100) NOT NULL,
  `phone` varchar(20) DEFAULT NULL,
  `address` varchar(255) DEFAULT NULL,
  `city` varchar(100) DEFAULT NULL,
  `country` varchar(100) DEFAULT NULL,
  `created_on` timestamp NOT NULL DEFAULT current_timestamp(),
  `updated_on` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

--
-- Dumping data for table `members`
--

INSERT INTO `members` (`member_id`, `first_name`, `last_name`, `email`, `phone`, `address`, `city`, `country`, `created_on`, `updated_on`) VALUES
(1, 'Scot', 'Hughes', '[email protected]', '674-1322', '51-17 Great Suffolk Street', 'Sudlersville', 'USA', '2024-01-12 10:29:29', '2024-01-16 06:44:54'),
(2, 'Adele', 'Rand', '[email protected]', '965-5686', '21-59 Scarborough Road', 'Wheat Ridge', 'USA', '2023-12-31 18:30:07', '2024-01-05 09:57:36'),
(3, 'Luisa', 'Longo', '[email protected]', '867-0047', '4-8 Hamilton Court', 'Butlerville', 'USA', '2023-12-31 18:30:09', '2024-01-05 09:25:38'),
(4, 'Marielle', 'Moses', '[email protected]', '835-7313', '2-7 Peartree Way', 'Magee', 'USA', '2023-12-31 19:01:40', '2024-01-07 09:07:10'),
(5, 'Lucio', 'Hughey', '[email protected]', '325-5495', '34 Flanders Way', 'East Palestine', 'USA', '2023-12-31 18:30:01', '2024-01-05 15:03:38'),
(6, 'Mel', 'Randall', '[email protected]', '652-9832', '5 Parkhurst Road', 'Alvarado', 'USA', '2024-03-19 23:59:08', '2024-03-22 15:05:40'),
(7, 'Parker', 'Weaver', '[email protected]', '741-1922', '33-47 Belgrave Square', 'Iowa Park', 'USA', '2024-06-01 03:19:57', '2024-06-06 20:39:25'),
(8, 'Alexia', 'Bain', '[email protected]', '905-2189', '6 Curtain Road', 'Butner', 'USA', '2024-04-19 15:50:16', '2024-04-25 12:29:22'),
(9, 'Giovanni', 'Longoria', '[email protected]', '212-9581', '4-9 Diana Road', 'Zuni', 'USA', '2024-03-04 05:12:01', '2024-03-07 00:44:05'),
(10, 'Catina', 'Cade', '[email protected]', '292-6056', '43-48 Aylward Road', 'Oneida', 'USA', '2024-04-26 10:41:55', '2024-04-28 15:53:02'),
(11, 'Elvie', 'Gilchrist', '[email protected]', '489-9788', '1-8 Douglas Avenue', 'Suffern', 'USA', '2024-05-13 20:41:16', '2024-05-18 20:49:33'),
(12, 'Avery', 'Baines', '[email protected]', '138-3809', '5-9 Postmill Close', 'Alvin', 'USA', '2024-02-04 05:34:57', '2024-02-08 07:57:12'),
(13, 'Adrien', 'Dobson', '[email protected]', '322-7795', '5-8 Evenwood Close', 'Wheatfield', 'USA', '2024-03-21 02:29:21', '2024-03-23 23:37:09'),
(14, 'Noemi', 'Hull', '[email protected]', '244-3848', '3-8 Littleton Crescent', 'Butte', 'USA', '2024-01-02 06:43:07', '2024-01-08 22:40:45'),
(15, 'Adela', 'Solomon', '[email protected]', '128-6870', '3 Pembroke Road', 'Gravette', 'USA', '2024-03-08 23:48:38', '2024-03-13 12:05:56'),
(16, 'Marielle', 'Loomis', '[email protected]', '427-5327', '32-47 Warton Court', 'Suffield', 'USA', '2023-12-31 18:42:43', '2024-01-07 03:24:59'),
(17, 'Mariano', 'Webber', '[email protected]', '527-9335', '43-47 Vauxhall Grove', 'Maggie Valley', 'USA', '2024-02-14 01:41:41', '2024-02-19 01:26:08'),
(18, 'Heather', 'Giles', '[email protected]', '416-2504', '5-8 Waterside Close', 'River Rouge', 'USA', '2023-12-31 18:30:03', '2024-01-04 06:05:10'),
(19, 'Onie', 'Hulsey', '[email protected]', '101-8959', '2 Broadway', 'Oneill', 'USA', '2024-01-20 09:11:29', '2024-01-23 08:41:42'),
(20, 'Rema', 'Mosher', '[email protected]', '432-3919', '193 A-C Roupell Street', 'Riverbank', 'USA', '2024-02-27 06:11:45', '2024-03-01 17:36:47'),
(21, 'Enriqueta', 'Cagle', '[email protected]', '253-7167', '5-6 Pembridge Square', 'Ipswich', 'USA', '2024-05-25 03:49:57', '2024-05-29 10:04:56'),
(22, 'Porfirio', 'Bair', '[email protected]', '911-8600', '3 Emerald Square', 'East Peoria', 'USA', '2023-12-31 18:30:05', '2024-01-06 14:19:51'),
(23, 'Mitchel', 'Cahill', '[email protected]', '617-4682', '53-28 Mansel Grove', 'Wheatland', 'USA', '2023-12-31 18:30:02', '2024-01-05 19:12:13'),
(24, 'Clotilde', 'Randle', '[email protected]', '967-5759', '35-29 Upper Berkeley Street', 'Suffolk', 'USA', '2024-03-05 05:18:02', '2024-03-09 00:21:17'),
(25, 'Lenny', 'Dockery', '[email protected]', '971-4477', '2-6 Abercorn Crescent', 'Alviso', 'USA', '2024-03-20 08:51:10', '2024-03-26 11:51:18'),
(26, 'Bernie', 'Looney', '[email protected]', '552-0587', '1-8 Cavendish Square', 'Magna', 'USA', '2024-04-26 09:36:44', '2024-04-29 13:58:14'),
(27, 'Diedre', 'Humes', '[email protected]', '770-7858', '1 Bridgewater Road', 'Oneonta', 'USA', '2023-12-31 18:44:48', '2024-01-04 03:02:07'),
(28, 'Bernarda', 'Somers', '[email protected]', '871-4957', '7 Fitzroy Square', 'Wheaton', 'USA', '2023-12-31 18:30:02', '2024-01-07 16:14:39'),
(29, 'Janna', 'Mosier', '[email protected]', '999-1984', '35-27 Scarborough Road', 'Suffolk County', 'USA', '2023-12-31 18:39:08', '2024-01-07 09:01:30'),
(30, 'Marvis', 'Baird', '[email protected]', '712-0581', '63 Meeting House Lane', 'Wheeler', 'USA', '2024-01-10 10:50:47', '2024-01-15 20:07:52'),
(31, 'Adolph', 'Loper', '[email protected]', '447-6466', '52-49 Acol Road', 'Riverdale', 'USA', '2024-03-17 03:29:43', '2024-03-20 00:25:53'),
(32, 'Ariel', 'Hummel', '[email protected]', '245-2218', '31-48 Walterton Road', 'Irene', 'USA', '2024-05-22 05:17:06', '2024-05-25 14:36:17'),
(33, 'Cherie', 'Lopes', '[email protected]', '508-7897', '23-17 Bonner Street', 'Onida', 'USA', '2023-12-31 18:38:45', '2024-01-06 19:05:49'),
(34, 'Josefine', 'Cain', '[email protected]', '063-1472', '89 Percy Road', 'Magnolia', 'USA', '2024-03-05 06:39:43', '2024-03-11 04:21:51'),
(35, 'Joel', 'Randolph', '[email protected]', '960-6846', '344 A-D Dorrell Place', 'Irmo', 'USA', '2023-12-31 18:30:54', '2024-01-06 14:47:08'),
(36, 'Elsie', 'Baker', '[email protected]', '411-9912', '2-7 Cleaver Street', 'Butte City', 'USA', '2023-12-31 18:44:52', '2024-01-06 05:24:50'),
(37, 'Bennie', 'Mosley', '[email protected]', '572-7637', '25-18 High Street', 'Sugar City', 'USA', '2024-01-21 03:47:18', '2024-01-26 03:49:52'),
(38, 'Tom', 'Raney', '[email protected]', '693-1798', '53-47 Cathall Road', 'Riverhead', 'USA', '2023-12-31 18:30:07', '2024-01-05 13:53:15'),
(39, 'Arnulfo', 'Weber', '[email protected]', '397-3893', '5-9 Charterhouse Square', 'Grawn', 'USA', '2024-05-11 12:13:00', '2024-05-15 20:55:20'),
(40, 'Shon', 'Humphrey', '[email protected]', '749-4900', '2-8 Approach Road', 'Onondaga', 'USA', '2023-12-31 18:31:38', '2024-01-02 22:28:16'),
(41, 'Pablo', 'Calabrese', '[email protected]', '149-5785', '3-9 Abbey Lane', 'Mahaffey', 'USA', '2024-02-21 07:32:27', '2024-02-26 17:47:28'),
(42, 'Slyvia', 'Gill', '[email protected]', '509-4364', '514 Fish on the Hill', 'Ama', 'USA', '2024-05-22 00:23:21', '2024-05-24 16:50:10'),
(43, 'Bennie', 'Balderas', '[email protected]', '029-2091', '76 Heath Road', 'Butte Falls', 'USA', '2023-12-31 18:38:52', '2024-01-07 08:14:18'),
(44, 'Collen', 'Moss', '[email protected]', '026-1092', '4-8 Victoria Park Road', 'Iron Mountain', 'USA', '2024-04-16 16:10:19', '2024-04-21 17:20:03'),
(45, 'Fay', 'Sommer', '[email protected]', '796-9435', '11-38 Atlantic Road', 'East Petersburg', 'USA', '2024-03-03 05:51:52', '2024-03-08 11:30:50'),
(46, 'Charlie', 'Webster', '[email protected]', '847-3540', '25-57 Eden Road', 'Gray', 'USA', '2024-05-19 13:38:05', '2024-05-22 06:17:08'),
(47, 'Heath', 'Rangel', '[email protected]', '028-3588', '14-57 Grafton Way', 'Amado', 'USA', '2023-12-31 18:35:05', '2024-01-06 05:15:59'),
(48, 'Eugenio', 'Dodd', '[email protected]', '792-0362', '57 Milkwood Road', 'East Pittsburgh', 'USA', '2024-02-24 00:02:25', '2024-02-27 03:37:52'),
(49, 'Deshawn', 'Gillen', '[email protected]', '052-0006', '6C Stonhouse Street', 'Riverside', 'USA', '2024-03-30 15:09:51', '2024-04-06 01:41:01'),
(50, 'Abbie', 'Sommers', '[email protected]', '588-5767', '82 A-C Charing Cross Road', 'Wheeler Army Airfield', 'USA', '2024-04-27 21:05:48', '2024-05-02 11:21:56');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `loan_proposals`
--
ALTER TABLE `loan_proposals`
  ADD PRIMARY KEY (`proposal_id`);

--
-- Indexes for table `loan_schemes`
--
ALTER TABLE `loan_schemes`
  ADD PRIMARY KEY (`scheme_id`);

--
-- Indexes for table `members`
--
ALTER TABLE `members`
  ADD PRIMARY KEY (`member_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `loan_proposals`
--
ALTER TABLE `loan_proposals`
  MODIFY `proposal_id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `loan_schemes`
--
ALTER TABLE `loan_schemes`
  MODIFY `scheme_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;

--
-- AUTO_INCREMENT for table `members`
--
ALTER TABLE `members`
  MODIFY `member_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=51;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

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.

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.