Finishing touches

In this final part of the CRM tutorial we will add a few final features that will make the CRM application more polished.

• Customize the navigation.
• Show the current user picture.
• Allow the current user to update his personal details - first name, last name and picture.
• Create custom design for the login page.

Customize the navigation

We will rearrange the navigation, create a hierarchy, and add icons.

The application navigation typically lives in the Main layout. Layouts are special pages that define common UI components that are shared between multiple pages.

1. Open the Main layout in Radzen Blazor Studio and select RadzenPanelMenu.
2. Set Home page RadzenPanelMenuItem Text to Dashboard and Icon to home.
3. Set Contacts Icon to perm_contact_calendar.
4. Make the Tasks page third and set the Icon to work.
5. Make Opportunities fourth and set the Icon to shopping_cart.
6. Add a new item with Text Settings and Icon: settings. Set the Visible property to @Security.IsInRole("Sales Manager"). This makes this item visible only to members of the Sales Manager role.
7. Add a child item with Text Opportunity Statuses, Task Types and Task Statuses as child items.

Now when a member of the Sales Manager role logs in she would see this navigation. Members of the Sales Representative role will see this (note that the Settings menu item is not present).

Show the current user picture

By default the Main layout has a ProfileMenu component which allows users to logout or update their profile. Let’s customize the ProfileMenu to show the current user name and profile picture.

1. Select the ProfileMenu component.
2. Click the Edit template button.
3. Delete the Gravatar component.
4. Drag and drop a Label component.
5. Set the Text of the Label to @Security.User.FirstName.
6. Duplicate the Label. Set its Text to @Security.User.LastName.
7. Drag and drop an Image. Set Path to @Security.User.Picture. Set Width and Height to 32px and BorderRadius to 16px.
8. End template editing.

If you run the application from Radzen Blazor Studio you will see the current user picture and name in the top right corner.

Update user details

When you enable security for a Radzen Blazor Studio application one of the scaffolded pages is Profile (also accessible from the ProfileMenu component in the top right corner). By default it allows the current user to change their password. In the CRM application we have extended the AspNetUsers table with three new columns - FirstName, LastName, Picture and we want the user to be able to change them.

Create the UI

Now let’s create the UI.

1. Open the Profile page.
2. Drag and drop a Tabs component.
3. Add two items: Personal and Password.
4. Select the Password tab and move the TemplateForm there.
5. Delete the now empty Row.
6. Select the Personal tab and drag and drop a new TemplateForm inside. Set its Data property to @user.
7. Set the Text of the label to First Name. Set the Value of the TextBox to @user.FirstName. Set the Text of the validator to First Name is required.
8. Duplicate the first row of the form. Set the Text of the label to Last Name. Set Component to LastName. Set the Value of the TextBox to @user.LastName. Set the Text of the validator to Last Name is required. Set Component to TextBox2.
9. Duplicate the second row of the form. Delete the TextBox and drop a FileInput. Set the Text of the label to Picture. Set Component to FileInput1. Set the Value of the FileInput to @user.Picture and its Display style property to block. Set the Text of the validator to Picture is required. Set Component to FileInput1.

The final step is to update the personal data when the user submits the form.

1. Add a new handler for the form Submit event.
2. Ivoke the Security.UpdateUser custom method. Set the Id parameter
   • Set the Id parameter to @Security.User.Id
   • Set the User parameter to @user
3. Display a notification to let the user know that their details have been updated.

Run the application to check the profile page!

Custom login page

Finally let’s create a custom login page by editing both the Login layout and page.

Login layout

We will add a background image that will cover the whole page. Also we will add the CRM application logo.

Add the assets

Radzen Blazor Studio allows you to use images seamlessly. For this demo we will use a background. Download this file and add it as assets in the application (wwwroot\images).

Set the background image

1. Open the Login layout.
2. Select RadzenLayout component and change the background image to crm-login-background.png.

Login page

Let’s now customize the Login page.

Customize the login form

1. Open the Login page and set ShowLoginButton to false for Login component.
2. Drag a SplitButton component after the Login component, set Text to Login, ButtonStyle to Primary, Float to right and add two items with Text Sales Manager and Sales Representative.
3. Add SplitButton component Click event.
4. Add the following code to the SplitButton component Click event:

   string theForm = "document.forms[0]";
   
   protected async System.Threading.Tasks.Task SplitButton0Click(Radzen.Blazor.RadzenSplitButtonItem args)
   {
        if(args?.Text == "Sales Manager")
        {
            await SetLoginCredentials("salesmanager@demo.radzen.com", "SalesManager1@");
        }
        else if(args?.Text == "Sales Representative")
        {
            await SetLoginCredentials("salesrep@demo.radzen.com", "SalesRep1@");
        }
   
        await JSRuntime.InvokeVoidAsync("eval", $@"{theForm}.submit()");
   }
   
   protected async System.Threading.Tasks.Task SetLoginCredentials(string username, string password)
   {
        await JSRuntime.InvokeVoidAsync("eval", $@"{theForm}.Username.value = '{username}'");
        await JSRuntime.InvokeVoidAsync("eval", $@"{theForm}.Password.value = '{password}'");
   }
   

   That is all!

Complete source

The complete source of this application (with a few additional changes that are mostly cosmetic) is available for server-side Blazor and for client-side WebAssembly Blazor in the Radzen github repository.