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:

1. Country Table: Contains a list of countries.
2. State Table: Each state record includes a foreign key (country_id) that links it to a specific country.
3. 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.

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
   • 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)

Step-by-Step Guide

Step 1: Prepare the Database

1. Open your localhost environment (e.g., XAMPP) and start the MySQL server.
2. Create a new database named rsbl_employees using phpMyAdmin or a similar tool.
3. Download and import the provided SQL file with dummy values into this database.

Step 2: Start a New Radsystems Project

1. Open Radsystems Studio and select "PHP Laravel" as the backend and "Bootstrap jQuery" as the frontend.
2. Click the "Create Project" button and enter the project details.

1. Specify project information, such as name, path to save etc.
2. Since we're using MySQL database for this test project, select the MySQL under "Select Database" section.
3. Specify your credentials for your localhost and select the rsbl_employees database.
4. Click the "Create Project" button and wait for Radsystems Studio to read and load the database schema.

Step 3: Save and Publish Initial Project Setup

1. Click "Save Project" to save your progress.
2. Navigate to the "Publish" tab and click "Publish Project." Wait for the process to complete.

Step 4: Configure the Office SELECT Control

1. Select the employees table from the list of tables.
2. Select the "Add" page for the employees table.
3. Select the office_id field and change its field type to "Select."
4. In the control properties, click on "Select Data Source" and then the "..." button.

Set Data Source:

1. Select Data Table option.
2. Choose the offices table, select office_id as the value, and office_name as the label.
3. Set the sorting order to ascending (ASC) on office_name and click "Okay."

Step 5: Configure the Department SELECT Control

1. Select the department_id field in the employees table.
2. Change its field type to "Select."
3. Click "Select Data Source" and then the "..." button.

Set Data Source

1. Select Data Table option.
2. Choose the departments table, select department_id as the value, and department_name as the label.
3. Set the sorting order to ascending (ASC) on department_name.

Step 6: Make Department SELECT Control Dependent

1. In the department field properties, choose the "Dynamic Select Lookup" option. Once selected, additional options for "Lookup field for dynamic selection" will appear on the same screen.
2. The "Dependent Field" refers to the field in the form on which our "department_id" field relies, hence the name "Dependent Field."
3. The "Matched Field" is the corresponding field from the "Departments" table (previously selected during database field setup) that aligns with the "Dependent Field."
4. In SQL terms, we are essentially writing following SQL query:
   
   SELECT  DISTINCT department_id AS value, department_name AS label FROM departments WHERE office_id=:lookup_office_id ORDER BY department_name ASC
   
   For the sake of understanding, let me put MatchedField and DepedentField in the above query to give you a clear idea of these settings:
   
   SELECT  DISTINCT department_id AS value,department_name AS label FROM departments WHERE MatchedField=DepedentField ORDER BY department_name ASC
   
   In view of the SQL query above, the "Dependent Field" is the where clause and the "Matched Field" is the value passed to the where clause.
5. Therefore, in our case, select "office_id" as Dependent Field.
6. Select "office_id" SQL database table record as Matched Field, because the value of "office_id" in HTML form will be saved to "office_id" record in database table.
7. Click "Okay" to save the configuration.

Step 7: Save and Publish Changes

1. Click "Save Project" to save your changes.
2. Press CTRL+F5 or click "Publish Project" to apply the updates.

Visit the Add Employee page to test the functionality. When you select an office in the Office SELECT control, the Department SELECT control will automatically update to display the relevant departments. Here is the final result:

Radsystems Studio: Embrace No-Code Power Today!

After setting up dynamic dependent lookup controls using Radsystems Studio, you can appreciate how efficiently it streamlines complex tasks without extensive coding. Radsystems Studio's no-code approach not only simplifies development but also enhances productivity by automating backend integrations and frontend interactions. By leveraging its intuitive interface and powerful features, developers can focus more on enhancing user experience rather than managing intricate technical details.

For those interested in exploring further, we encourage you to download the fully functional 30-day trial version of Radsystems Studio. Experience firsthand how it accelerates development cycles, empowers rapid prototyping, and enables seamless deployment of robust web applications.

Mastering Radsystems Studio opens doors to creating sophisticated web applications with ease. Subscribe to our YouTube Channel to stay tuned for more tutorials and insights on how to leverage RadSystems Studio to achieve your project goals effectively.