🔎Building a Customer Finder app

As an admin panel is the single source of truth when it comes to customer data, there must be a quick and efficient way to look for specific information.

For the purpose of this tutorial, we created a Workspace - a custom UI built with a drag-and-drop no-code editor - that displays all the information about a user once a CS team member types the user's name in the search box.

Here is how to build a customer finder like this one:

First, click on the 🧩 icon on the left-side menu and create a new workspace.

From the list of components, drag and drop a Section and then Tabs next to it. You can drag and drop your elements directly onto the workspace, but sections make it more aesthetically pleasing and tabs make it more organized. We need two tabs to display basic information about users and their orders separately.

A text component with personalization introduced with curly brackets gives a personal touch to your workspace.

Then add a search box linked with the collection you want to display information from. In our case, it's a Users collection as we want to display user information.

The next step is to add a Collection component that will display your search results.

And finally, action buttons that will allow you to take the action required from this user, such as resetting his password or anonymizing his data. We chose to make it visible only when search results are visible (option: Visible only when a component (collection1) is visible) to make the workspace clearer.

Now, in the first tab, we will add a couple of Fields that display relevant user data. You can add as many as you like, along with more action buttons.

In the 2nd tab, we're going to display orders placed by this user. To make it possible, we added a Collection that displays only data related to another Collection - in our case, the one we added before. We also decided to make it visible only when the initial action was taken, that's why we chose the option Visible: Only when dynamic values are defined.

We have also added one more action button, to make it possible to apply a different promo code to that specific order.

And finally, we added a simple chart that displays the number of orders placed by this customer.

We haven't covered all the features available on Workspaces. You can add more types of charts, links, dropdown lists, dividers and a toggle. To learn more, go to the documentation section that covers Workspaces in detail or watch this video 👇