How to Setup Dynamic Dependent Look-up Control in Radsystems Studio

Creating a great web application goes beyond just having an attractive UI. While aesthetics are important, the true essence of a good user interface lies in its workflow and functionality. Users often prioritize ease of use over visual appeal, appreciating a streamlined experience that helps them accomplish their tasks efficiently. This balance between design and functionality is crucial for user satisfaction and engagement.

In today's fast-paced world, users lean towards point-and-click interfaces rather than manually typing in data. This preference for convenience means that developers need to ensure that these controls are populated with the correct values based on specific business logic. This is where dynamic dependent SELECT controls come into play. These controls dynamically update their options based on user input or other variables, providing a responsive and intuitive user experience. Setting up such controls can be efficiently handled using Radsystems Studio, a no-code solution that simplifies the process without requiring extensive coding knowledge.

In this tutorial, we will walk through the steps to set up dynamic dependent lookup controls in Radsystems Studio, ensuring your web application meets both functional and user experience standards.

What is Dependent Dynamic Lookup Control?

Dependent dynamic SELECT controls are essential for creating intuitive and efficient user interfaces, particularly in forms where users need to make selections from related datasets. These controls dynamically update their available options based on the user's previous selections, ensuring that users only see relevant data and reducing the potential for errors or irrelevant choices.

To illustrate, consider a scenario involving three database tables: Country, State, and City. Here’s how they are related:

• Country Table: Contains a list of countries.
• State Table: Each state record includes a foreign key (country_id) that links it to a specific country.
• City Table: Each city record includes a foreign key (state_id) that links it to a specific state.

In the user interface, you would have three SELECT controls:

• Country SELECT Control: Displays a list of countries.
• State SELECT Control: Displays a list of states based on the selected country.
• City SELECT Control: Displays a list of cities based on the selected state.

Here’s how it works in practice:

• When a user selects a country from the Country SELECT control, the State SELECT control automatically updates to show only the states that belong to the selected country.
• Similarly, when a user selects a state from the State SELECT control, the City SELECT control updates to show only the cities that belong to the selected state.

This interdependence among the SELECT controls enhances the user experience by:

• Simplifying the selection process.
• Ensuring data relevance and integrity.
• Minimizing user errors by filtering out irrelevant options.

Implementing dependent dynamic lookup controls manually can be complex, but tools like Radsystems Studio offer no-code solutions that streamline the setup process.

Traditional Approach vs. Radsystems Studio

In a typical development workflow, setting up a dependent dynamic SELECT control involves several steps and a fair amount of custom coding. Here’s a brief overview of what a developer usually needs to do:

1. Create a Custom Endpoint: Write a custom endpoint to handle the logic for fetching the corresponding records from the database. This involves writing SQL queries to filter the data based on user selections.
2. Bind API Call to Input Change Event: Connect an API call to the input change event of the SELECT control. This means that every time a user makes a selection, the application must send a request to the server to fetch the relevant data.
3. Load Data into the SELECT Control: Write additional code to load the fetched data into the SELECT control. This involves parsing the response, creating the necessary HTML elements, and handling any potential errors that might occur during the process.

Handling all these tasks manually can be time-consuming and error-prone, requiring a solid understanding of both front-end and back-end development.

In the next sections, we will walk through the step-by-step process of setting up these controls in Radsystems Studio, demonstrating just how straightforward it can be to implement this powerful functionality without writing a single line of code.

Scenario: Employee Record Management

Imagine you are developing an application where you need to manage employee records. Each employee belongs to a specific office location, and each office has its own set of departments.

The goal is to set up the form so that when a user selects an office location, the departments associated with that office dynamically populate another SELECT control. We’ll use PHP Laravel for the backend, Bootstrap jQuery for the frontend, and a MySQL database.

sql
-- phpMyAdmin SQL Dump
-- version 5.2.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jun 15, 2024 at 01:05 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_employees`
--

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

--
-- Table structure for table `departments`
--

DROP TABLE IF EXISTS `departments`;
CREATE TABLE `departments` (
  `department_id` int(11) NOT NULL,
  `department_name` varchar(255) DEFAULT NULL,
  `office_id` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

--
-- Dumping data for table `departments`
--

INSERT INTO `departments` (`department_id`, `department_name`, `office_id`) VALUES
(1, 'Administration', 1),
(2, 'Finance', 1),
(3, 'Human Resources', 1),
(4, 'IT Support', 1),
(5, 'Marketing Strategy', 2),
(6, 'Digital Marketing', 2),
(7, 'Market Research', 2),
(8, 'Product Development', 3),
(9, 'Research', 3),
(10, 'Quality Assurance', 3),
(11, 'Engineering', 3),
(12, 'Customer Support', 4),
(13, 'Technical Support', 4),
(14, 'Billing Department', 4),
(15, 'Customer Relations', 5),
(16, 'Complaints Department', 5),
(17, 'Service Improvement', 5),
(18, 'Operations', 5);

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

--
-- Table structure for table `employees`
--

DROP TABLE IF EXISTS `employees`;
CREATE TABLE `employees` (
  `employee_id` int(11) NOT NULL,
  `employee_name` varchar(255) DEFAULT NULL,
  `email` varchar(255) DEFAULT NULL,
  `phone_number` varchar(20) DEFAULT NULL,
  `hire_date` date DEFAULT NULL,
  `job_title` varchar(100) DEFAULT NULL,
  `salary` decimal(10,2) DEFAULT NULL,
  `office_id` int(11) DEFAULT NULL,
  `department_id` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

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

--
-- Table structure for table `offices`
--

DROP TABLE IF EXISTS `offices`;
CREATE TABLE `offices` (
  `office_id` int(11) NOT NULL,
  `office_name` varchar(255) DEFAULT NULL,
  `office_location` varchar(255) DEFAULT NULL,
  `contact_phone` varchar(20) DEFAULT NULL,
  `contact_email` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

--
-- Dumping data for table `offices`
--

INSERT INTO `offices` (`office_id`, `office_name`, `office_location`, `contact_phone`, `contact_email`) VALUES
(1, 'Head Office', '123 Main St, New York, NY 10001', '+1 (555) 123-4567', '[email protected]'),
(2, 'Marketing Office', '456 Park Ave, Los Angeles, CA 90001', '+1 (555) 987-6543', '[email protected]'),
(3, 'Research and Development', '789 Innovation Dr, San Francisco, CA 94101', '+1 (555) 222-3333', '[email protected]'),
(4, 'Customer Care Center 01', '101 Service Rd, Chicago, IL 60601', '+1 (555) 444-5555', '[email protected]'),
(5, 'Customer Care Center 02', '202 Support St, Houston, TX 77001', '+1 (555) 777-8888', '[email protected]');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `departments`
--
ALTER TABLE `departments`
  ADD PRIMARY KEY (`department_id`),
  ADD KEY `office_id` (`office_id`);

--
-- Indexes for table `employees`
--
ALTER TABLE `employees`
  ADD PRIMARY KEY (`employee_id`),
  ADD KEY `office_id` (`office_id`),
  ADD KEY `department_id` (`department_id`);

--
-- Indexes for table `offices`
--
ALTER TABLE `offices`
  ADD PRIMARY KEY (`office_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `departments`
--
ALTER TABLE `departments`
  MODIFY `department_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=19;

--
-- AUTO_INCREMENT for table `employees`
--
ALTER TABLE `employees`
  MODIFY `employee_id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `offices`
--
ALTER TABLE `offices`
  MODIFY `office_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
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 */;

Tables Involved

1. offices
   • office_id (Primary Key)
   • office_location (VARCHAR)
2. departments
   • department_id (Primary Key)
   • department_name (VARCHAR)
   • office_id (Foreign Key)
3. employees
   1. employee_id (Primary Key)

• employee_name (VARCHAR)
• email (VARCHAR)
• phone_number (VARCHAR)
• hire_date (DATE)
• job_title (VARCHAR)
• salary (DECIMAL)
• office_id (Foreign Key)
• department_id (Foreign Key)