Introduction
In today's fast-paced world of web development, creating dynamic and interactive user interfaces is essential. One of the most common UI elements is a tabbed interface, which allows users to switch between different tabs, drop-downs, or views effortlessly. In this blog post, we will explore how to build dynamic tabs according to the drop-down using Lightning Web Components (LWC), a powerful framework from Salesforce. I actually work for a bank, and they deal with many different kinds of clients, including individuals, non-individuals and businesses. In order to handle this smoothly, the current processes are ineffective.
Thus, they planned to develop a novel procedure that could manage various client types while also assigning the appropriate client agent.
Understanding the Requirements:
Before diving into coding, let's define the requirements for our dynamic tab component. We want to create fully dynamic tabs that are dependent on the chosen option and each contain different content. Users should be able to switch between drop- and tabs by clicking on them. Additionally, we want to provide an option to highlight the active tab to give users a visual indication of their current selection. The key functionality of this project is to make the tabs UI which means they are fully dynamic and also configurable from the UI. The tabs are fully dependent on the selected drop-down option, which is also dynamic and configurable from the UI. In this project, we will also discuss pagination and searching functionality and try to make them more dynamic.
Let’s go in deep about Dynamic!!!!!!!
In this case, we develop a configurable drop-down that is connected to tabs and queues. Each tab has a distinct type of data, and we used a queue to display a different sort of data for each tab. If we have four drop-down options, for example, it will display tabs according to each option, such as four tabs for the first option, six tabs for the second, and so on, with each tab pulling data from a separate queue as per our configuration from the UI.
As a result of this project, our UI will look as shown below. 👇👇👇
Let’s start!!
Let’s create a Salesforce app called Avenoir. It will analyze the metadata records and automatically generate the tabs based on the chosen drop-down.
Set the app's Details and Branding.
Selected the user profile.
For example, In the snippet above, it shows 7 tabs for AVAF - Entities, but when we change it to AVAF - Individual, it only shows 4 tabs, See the below snippet.
👉 Let’s create custom metadata. But before creating metadata, just think Why Custom meta
data? Don’t worry, I will tell you -
➔ Custom metadata types enable you to construct reusable functionality that configures the behavior of apps based on metadata rather than storing hard-coded data. Custom metadata can be modified by the user interface and manipulated using the Metadata API.
➔ In most salesforce development journeys, data must be deployed from Development to QA, then from QA to UAT, and finally from UAT to Production. We chose custom metadata since records of custom metadata types can be deployed immediately to higher environment or sandbox, and we wanted data or records to be transferable across sandboxes.
To make it dynamic, will create a custom metadata file, Avenoir_Entity_Tab_Setting__mdt, with some custom fields.
SBU: It will store the business units of the organization.
Queues - It will store the queue list for the selected option.
Tabs - It will store the tab list for the selected option
Let's create a custom metadata record for Avenoir_Entity_Tab_Setting__mdt that will help you effectively manage and categorize your data.
We have to create queues as per our requirements. For example, I already have some queues.
In Part 2, we'll talk about backend architecture.
Happy Coding! You can leave a comment to help me understand how the blog helped you. If you need further assistance, please contact us. You can click "Reach Us" on the website and share the issue with me.
References
How do I create an app? click here
How do I create custom metadata? click here
How do I create a queue? click here
Blog Credit:
A. Kumar
Salesforce Developer
Avenoir Technologies Pvt. Ltd.
Reach us: team@avenoir.ai
Comments