Platforms like Zoho offer fully comprehensive CRM solutions to help you manage sales, marketing, and client relationships, often with a high price-per-user to match. Typically, software like Zoho, Salesforce, and Hubspot offer huge amounts of functionality to their users, but that depth often goes far beyond what most companies actually need or use in practice.
What’s more, while these systems are technically capable of being customized to fit your specific processes, doing so can quickly become complex and expensive. Not to mention, building out this kind of custom functionality more often than not requires specialist developers or certified consultants. Integrating other tools or workflows can add further costs and maintenance overhead… Many businesses find themselves adapting their processes to fit the software, rather than the other way round.
Building your own CRM app allows you to control exactly what functionality goes in, and allows you to take much greater control of your data. Building on a platform like Retool means this process doesn’t have to take months and years; you can build within a matter of weeks.
To show you how easy it is to build your own CRM as a custom solution, we’ve built a Zoho-inspired CRM template that you can download for and import into your Retool environment.
Here’s what it looks like:
Zoho-inspired CRM template
Download the template at the end of this article, or keep reading for some details on how we built it out.
Key features
Simple navigation interface
The double sidebar is a common sidebar interface that users are accustomed to using in their everyday apps, with page groups visible only as icons, and a collapsible page menu to navigate pages.
This kind of UI helps keep complex apps organized and straightforward to use, and the hide functionality keeps the screen tidy when navigation is not necessary. This is built using a sidebar frame, which persists across all pages, and two containers within it acting as columns. The collapsible page menu is a tabbed container that switches according to the page group selected.
Zoho-inpsired CRM template
To ensure that the icon navigation of the left menu is easy to use, we added Tooltips to the menu items so that users can hover and easily see the page group title, such as ‘Reports’. To hide the menu, we switch the sideframe container between small and large.
Best practice forms
Since the contact page requires lots of information, we use a full page to ensure there’s enough space for users to complete the data easily. This also means the form can easily be linked to any page or a quick actions bar.
We use the same page for the New and Edit contact forms to avoid creating repeated functionality. The default form is blank, and when the user clicks on a table row, this sets the ‘contactForm’ data and prepopulates the inputs with the selected row’s data.
The form ‘submit’ button switches between the update and create query. Using a proper Retool Form component in place of random input components and a separate button ensures that data is properly validated before being written to your data source.
To learn more about Forms best practices, you can watch Milan’s quick intro to Using Forms best in Retool.
Best practice for forms in Retool
Useful table features
For datasets with large amounts of data, it can be helpful to give the option to show a different number of records on the page. To do this, we added a dropdown and used this to set the number of displayed records using the pagination attribute. In this case, we did client-side rather than server-side pagination as we weren’t working with a connected database.
{{ filtered_contacts.value.slice(selectRecordsSizeContacts.value*(paginationContacts.value-1),(selectRecordsSizeContacts.value * paginationContacts.value)) || [] }}
Another useful feature is using a ‘deleted_at’ column in your dataset, rather than actually deleting data. This means when the ‘Archive’ button is clicked, the current date is set in the ‘deleted_at’ column. Users can choose to search for archived records or only live records (filtering out any values with a date in the ‘deleted_at’ column), meaning that record ‘deletion’ is less permanent and more traceable.
This method is generally best practice as database ‘delete’ functionality can cause irreversible changes to data if mistakes are made.
User settings
To make sure that this app functions seamlessly as the team grows and evolves, we built in a user settings and groups section. This means that managers can directly manage team members with access to the app without needing to go into the Retool interface. You can set this up by connecting to the Retool API to action permissions directly in-app. Find out more in the Retool docs.
You can download the template below and play around with it in your Retool environment. Be sure to check out our other templates for app ideas and UI inspiration, such as the Hubspot CRM UI, or Hospitable.
