This article builds on the concepts covered in two previous articles about Data Relations in Frontly. We recommend familiarizing yourself with these foundational articles before proceeding with the configurations covered here:
Fundamentals of Data Relations
Setting Up Data Relations in Frontly
Using Data Relations in Frontly enables you to filter dropdown entries based on specific conditions, improving both the user experience and data accuracy. For example, imagine a spa chain where different branches offer a variety of massage therapies. By selecting a specific branch, users should only see the therapies available at that location, simplifying the booking process.
The following steps will guide you through setting up these data relations in Frontly, allowing you to filter available services dynamically based on the location selected.
Settings Setup
As this is an advanced function of Frontly's, you'll need to toggle the Include Full Relation Records toggle from within the app's Advanced settings.
Data Setup
For this example, we will be working with three datasets: one for Locations, another for Services and one more for Appointments.
In the Locations data source, each branch is identified by a unique ID, captured by the frontly_id column, while in the Services data source, each service is linked to one or more locations with corresponding Location ID values.
Lastly, we have an Appointments data source without any values yet, but serves as a critical intermediary, linking the Locations and Services datasets via shared relational fields, effectively acting as a pivot table for user submissions.
Locations
Services
Appointments
Now it's time to join the data sets together using dating relations. In the Relational Data setup tab, we will connect the Services and Locations data sources to their respective fields in the Appointments data source by their frontly_id fields.
In this setup, Appointments acts as the 'child' data source, meaning it will inherit data from the 'parent' sources—Locations and Services—based on the relationships defined.
Form Setup
After completing our relational data setup, we will create a form block on a page and set the data source to the Appointments one. If previewed without any configuration, both dropdown fields will render the complete set of available values from their parent data sources before any filtering logic is applied.
Note: The options shown in these dropdowns are set by the Display Name setting from within the relational data setup tab.
Right now, there are no rules limiting what gets shown in the Service dropdown after I select a location. Ideally, by selecting the Downtown Location, I would want to only see services that have Location ID = 1 as one of the comma-separate values, where 1 is the corresponding frontly_id for the Downtown Location (refer to data tables above). In this case, the list of values should be: Swedish Massage, Deep Tissue Massage, Hot Stone Massage, Body Scrub.
To achieve this, we'll need to set up a Hidden Filter, which will allow us to restrict the dropdown entries, ensuring that only services linked to the selected location are shown. To locate this setting, click on the field that you wish to have filtered > Click on Advanced Settings > + Add Hidden Filter.
For this particular set up, we want the selected Location value to be checked against the Location ID values of each service. We'll be using the form variable with the field name to define the condition's value.
After saving this configuration and previewing our app, we can now see from the services filtering in realtime once a Location is specified.
Reviewing Submitted Entries
Once an entry is submitted where Location = Downtown Location and Service = Deep Tissue Massage, their values will appear into the Appointments data source as their IDs (as shown below).
Use a Table block in Frontly to show the display names they correspond to and you are free to handle your data however you wish to from there!
In Data Source
In Frontly
Final Thoughts
It's important to remember that the approach outlined in this article is not a "one size fits all" solution. The setup of relational data and its interaction with other functions and fields in Frontly can vary greatly depending on the complexity of what you're trying to achieve. As a result, understanding the high-level concepts of data relations is important to ensuring that your data structures work as intended.
We highly recommend giving yourself the time and space to experiment with different data structures, configurations, and filters in Frontly. Testing various setups will help you uncover the best approach for your specific use case and can prevent potential issues down the road.
If you need additional assistance or run into challenges, don't hesitate to reach out to our Discord community or our support team!