Introduction | Create a Blazor CRM application with Radzen Blazor Studio

In this tutorial you will learn how to create a complete Blazor application with Radzen Blazor Studio.

Specification

The application is a CRM (Customer Relationship Management) with the following features:

• Support users of two roles - Sales Representative and Sales Manager.
• Contact management - add, search and update contacts.
• Opportunity management - create opportunities for existing contacts and change their status.
• Task management - create and edit tasks (phone call, meeting etc.) associated with opportunities.
• Display data-driven company performance metrics in a dashboard.

Requirements

To create the application you need:

1. A working Radzen Blazor Studio installation.
2. A running Microsoft SQL Server instance (the free Express version will suffice).
3. SQL Server Management Studio (or some other tool that supports database table design).
4. Understanding of C# and Entity Framework core (to create the custom DB queries needed by the dashboard).

Implementation

The application relies on the following Radzen Blazor Studio features:

• CRUD page scaffolding from a database to automatically generate most of the application.
• Security to support user management, login and roles.
• WYSIWYG Design-time to customize the application visually.
• Custom methods to get real-time performance metrics via database queries.

Steps

The application is created in the following steps:

1. Database Shows how to create the database, enable security and set up relationships.
2. Customize security Allow the users to upload their picture and set their first and last name, assign page permissions.
3. Customize CRUD pages Apply various visual customizations, implement contact search.
4. Create dashboard Create a dashboard page that uses charts, data grids and cards to display some vital performance metrics. Query the database with custom code to get the required data.
5. Finishing touches Customize the login screen, display the picture of the logged in user, customize the navigation menu.

If you are impatient you can check the final result in the Radzen Github repository for server-side Blazor and for client-side WebAssembly Blazor.