TEMPLATE: Fully Customizable CRM System App Blueprint
Tags: beginners, tutorial, webdev, database
Published: 2021-12-15 18:35:28

The CRM system App Blueprint provides ample functionality for managing customer interactions, keeping sales team members on task, and supporting the sales process.

A CRM system, or customer relationship management system, is a tool for supporting sales team members and moving prospects down the sales funnel. The functionality included in CRM software is applicable in many other tools and systems for business management.

The CRM App is one of our free [App Blueprints](https://backendless.com/introducing-app-blueprints/). App Blueprints are more than just templates from which to build a specific type of application. We design all of our blueprints to provide one or more key functions that a developer would want to add to their application, regardless of the app’s business use.

Additionally, most blueprints, and specifically the CRM blueprint, can be used out of the box as a fairly complete application.

As with all App Blueprints, the entirety of the CRM App Blueprint is built without code using [Backendless’ UI Builder](https://backendless.com/developers/#ui-builder). As a result, you can customize or replicate any part of the blueprint to fit your needs without writing code.

In this article, we will explore the basics of this blueprint’s functionality. As you would expect with a CRM system, this blueprint is very feature rich and we will only be scratching the surface here.

*   Work with data from the frontend
*   Enable users to export data to CSV from the frontend
*   Schedule tasks and display on a calendar
*   Implement a responsive sidebar menu that is hidden on tablet and mobile devices
*   Enable users to create their own lead forms and generate HTML form code

The CRM App Blueprints includes thorough instructions to guide you through making your own modifications and customizations. In fact, the first thing you will see when creating an app from a blueprint is the instruction window.

The web app, which functions identically to a website, can be purchased for free when creating a new app in Backendless Console. It features a beautiful, responsive design that will look great on any size screen.

[Click here to view the live demo and follow along.](https://honeststation.backendless.app/app/index.html)

Work with data from the frontend
--------------------------------

The primary purpose of any CRM system is to provide your end users with an easy way to consume data visually. The CRM App is no different, offering a Dashboard and multiple pages for displaying valuable data stored in the database.

The Dashboard can be customized to show the data that is most important to an individual user. In fact, further customization is possible beyond what is included in the blueprint, such as providing personalized Dashboards based on user roles or even giving the user to customize their own dashboard.

[![CRM App Dashboard](https://backendless.com/wp-content/uploads/2021/12/CRM-App-Dashboard.jpg)](https://backendless.com/wp-content/uploads/2021/12/CRM-App-Dashboard.jpg)

Elsewhere in the app, data is displayed in easily-consumable table form. Dropdown filters and text-based search functionality is built into the various pages for ease of navigation.

Additionally, most data pages provide options for users to perform relevant actions with the data. These include:

*   **Clicking through to edit or update the data**  
    [![CRM click to update record](https://backendless.com/wp-content/uploads/2021/12/CRM-click-to-update-record.png)](https://backendless.com/wp-content/uploads/2021/12/CRM-click-to-update-record.png)
*   **Sending an email**  
    [![CRM click to send email](https://backendless.com/wp-content/uploads/2021/12/CRM-click-to-send-email.png)](https://backendless.com/wp-content/uploads/2021/12/CRM-click-to-send-email.png)
*   **Downloading a PDF, such as an invoice or project quote**  
    [![CRM click to download PDF](https://backendless.com/wp-content/uploads/2021/12/CRM-click-to-download-PDF.png)](https://backendless.com/wp-content/uploads/2021/12/CRM-click-to-download-PDF.png)
*   **Deleting an entry**  
    [![CRM click to delete record](https://backendless.com/wp-content/uploads/2021/12/CRM-click-to-delete-record.png)](https://backendless.com/wp-content/uploads/2021/12/CRM-click-to-delete-record.png)

You can implement permissions controls to ensure that users are limited to actions that they have authorization to perform.

Enable users to export data to CSV from the CRM system
------------------------------------------------------

Power users and analysts may desire to work with their data in other software. The CRM App includes “Export CSV” functionality allowing users to export data from Backendless to a CSV without having to access the Backendless data table directly.

[![CRM export data to CSV](https://backendless.com/wp-content/uploads/2021/12/CRM-export-data-to-CSV.png)](https://backendless.com/wp-content/uploads/2021/12/CRM-export-data-to-CSV.png)

This serves an important purpose. It allows you to easily control who can and cannot export certain data, and does so without requiring you to give users direct access to your Backendless Database.

Additionally, it gives you the ability to allow users to get CSV data without requiring you or your development team to do the work.

Schedule tasks and display on a calendar
----------------------------------------

The CRM App includes two items that can be given a specific date and time and displayed on the calendar. In the blueprint, users can create Touchpoints and Tasks. When doing so, the item is added to the built-in calendar page.

[![Create new task in CRM](https://backendless.com/wp-content/uploads/2021/12/Create-new-task-in-CRM-1200x499.jpg)](https://backendless.com/wp-content/uploads/2021/12/Create-new-task-in-CRM.jpg)

Users can create new tasks/touchpoints, edit them, and change the status. As with previous items in this article, you can adjust user permissions down to the individual user level to ensure data is protected from unauthorized changes.

All created tasks and touchpoints are displayed on the CRM calendar. Again, you can tweak permissions or add item ownership to customize individual users’ calendars.

[![CRM calendar](https://backendless.com/wp-content/uploads/2021/12/CRM-calendar-1200x754.jpg)](https://backendless.com/wp-content/uploads/2021/12/CRM-calendar.jpg)

You can reach the calendar page using the calendar icon in the top menu. Of course, if calendars are a priority feature for your CRM, you can easily create a calendar item on the `aside` menu.

[![CRM calendar menu item](https://backendless.com/wp-content/uploads/2021/12/CRM-calendar-menu-item.png)](https://backendless.com/wp-content/uploads/2021/12/CRM-calendar-menu-item.png)

Implement a responsive sidebar menu that is hidden on tablet and mobile devices
-------------------------------------------------------------------------------

As you’ve seen in previous screenshots, the CRM App comes with a global side menu. In the app, you can view or hide the aside by looking at the page item tree:

[![How to view the CRM aside in UI Builder](https://backendless.com/wp-content/uploads/2021/12/How-to-view-the-CRM-aside-in-UI-Builder.png)](https://backendless.com/wp-content/uploads/2021/12/How-to-view-the-CRM-aside-in-UI-Builder.png)

This side menu is designed to become hidden on smaller screens, such as tablets and mobile phones. When using the app on a small screen, the app becomes a side menu, accessible via hamburger icon.

[![CRM App aside on table or mobile](https://backendless.com/wp-content/uploads/2021/12/CRM-App-aside-on-table-or-mobile.gif)](https://backendless.com/wp-content/uploads/2021/12/CRM-App-aside-on-table-or-mobile.gif)

Enable users to create their own lead forms and generate HTML form code
-----------------------------------------------------------------------

The CRM App allows user to create their own lead forms to be hosted on their website. The user can add and remove form fields, change field type, and set the field to required or not.

[![Create new form field in CRM](https://backendless.com/wp-content/uploads/2021/12/Create-new-form-field-in-CRM-1200x632.jpg)](https://backendless.com/wp-content/uploads/2021/12/Create-new-form-field-in-CRM.jpg)

Once the form is complete and saved, the user can use the “Get Code” button to view the form in HTML form. This HTML can then be copied and added to the user’s own website, landing page, etc., to begin capturing leads.

[![Lead capture form HTML](https://backendless.com/wp-content/uploads/2021/12/Lead-capture-form-HTML.jpg)](https://backendless.com/wp-content/uploads/2021/12/Lead-capture-form-HTML.jpg)

Below the HTML code, the user can see what the form looks like on the page.

[![Lead capture form](https://backendless.com/wp-content/uploads/2021/12/Lead-capture-form-1200x384.jpg)](https://backendless.com/wp-content/uploads/2021/12/Lead-capture-form.jpg)

* * *

Closing
-------

The CRM App displays the level of detail and complexity that can be easily built using Backendless’ UI Builder. Equally important, it provides Backendless users with a template to follow for a variety of key Backendless functions.

Using this template, you can see first-hand how to:

*   Work with data from the frontend
*   Enable users to export data to CSV from the frontend
*   Schedule tasks and display on a calendar
*   Implement a sidebar menu that is hidden on tablet and mobile devices
*   Enable users to create their own lead forms and generate HTML form code

Happy Codeless Coding!

*This article first appeared on [backendless.com](https://backendless.com/crm-system-app-blueprint/) on December 13, 2021.*