Introduction

The image above shows the Layout Editor. 

When you open the Editor, the above screen displays. You have one, two, and three-column basic blocks. When you select a two-column layout, the screen is divided into two columns. You can drag and drop widgets of your choice in both columns. 

Note: You can only add widgets or fields to the layout after selecting the basic block.

The Summary View layout in each module can be customized. The current header, description, Activity, and One View in the Summary view will be available as separate widgets. You can arrange these widgets according to your requirements using the drag-and-drop method. 

You will find fields specific to that particular module in the Layout Designer. For example, if you select a Contacts layout, you will find fields like Salutation, First Name, Last Name, Primary Email, Date of Birth, Contact ID, etc. The map widget will only be available for modules with addresses as fields.

You can add images, tables, etc., to a column. The widgets can be deleted with the delete option and replaced with another one using the drag-and-drop method.

Layout Designer is a game-changer for businesses. By providing the flexibility to create customized layouts, you can:

• Empower your users to create personalized layouts based on their roles and responsibilities. 
• Improve data alignment and increase data integrity by displaying information specific to the user.

Editing the Field

You have the edit option to edit the fields created in the Layout Designer. 

For example, you create a layout design for the Contacts module by adding fields like name, email, and phone number. 

You can select this saved layout design in the Contacts module and edit the fields you have added. When you hover over the fields like name and email, you can see a pencil icon at the end of the field. You can click the edit icon to make changes.  
 

Dynamic Dependency

Dynamic dependency in Layout Designer in Vtiger CRM is the capability to configure fields in a form layout so that their visibility, required status, or options depend on the value of another field. This feature allows for more dynamic and flexible form designs tailored to specific user scenarios.

In the Layout Designer, you can add fields to a custom layout. If there's a dependency set up to prevent a specific field from appearing in the Module Layouts and Fields settings, adding it to the layout will still make it show up.

The field's visibility and mandatory status will be determined by its dependency. 

Feature Availability

Click here to learn more about Feature Limits.
 

Benefits of Layout Designer in Vtiger CRM

The following are the benefits of Layout Designer in Vtiger CRM:

• Personalized User Experience: Layout Designer adds custom fields and simplifies the UI.
• Better Data Management: Layout Designer can customize fields and their organization to better manage data within the system, including hiding sensitive information and highlighting relevant data.
• UI Enhancements: Layout Designer improves the visual appearance of fields and widgets, enhancing user interaction with the CRM system.
• Scalability and Flexibility: Layout Designer offers the flexibility to modify layouts as new requirements arise or as business processes change, making the Vtiger CRM scalable and adaptable over time. 

In this article, you will learn about:

• Installing the Layout Designer
• Creating a Layout design

Installing Layout Designer

The Admins can install the Layout Designer and make it accessible to the users.

Follow these steps to install a Layout Designer:

1. Log in to the CRM.

2. Click the User Profile on the right side of the screen.
3. Click Settings.

4. Go to Extensions.
5. Click Add-ons.

6. Type Layout Designer in the search bar.
7. Click Install. Are you sure you want to install this Add-on? message appears.

8. Click Yes.

A success message will be displayed. Once installed, it will appear under the Platform app.

Adding a Layout Design

Follow these steps to create a Layout Design:

1. Log in to the CRM.

2. Go to Platform App.
3. Click Layout Designer. The Layout Designer module opens.

4. Click +Add Layout. An Add Layout Designer window opens.

5. Type the name of the Layout Designer.
6. Select the module from the drop-down.
7. Select Assigned To from the drop-down.
8. Click Save. The Layout Designer editor opens.

9. Drag and drop the basic block from the right side to the left of the screen.

10. Drag and drop the Fields from the right to the left.

11. Drag and drop the Widgets from the right to the left.
12. Click Save.

You have now added a new layout design. The Layout Designer is created. 
 

How do you view the new Layout Design

Let us see an example for Deals module for which a layout design named Deals View for Sales rep is created. 

1. Log in to the CRM.

2. Click the Main Menu.
3. Go to Sales.
4. Select Deals under Pipeline Management. The Deals module opens.

5. Click the drop-down beside Layout.
6. Click your saved layout design. The layout will be changed from default to the selected layout design.

If you want to have a default layout, you can set it back to Default.

Follow these steps to edit an existing layout:

1. Log in to the CRM.

2. Click the Main Menu.
3. Go to Platform.
4. Click Layout Designer. The Layout Designer List View opens.

5. Select the Layout Design you want to edit. The Layout editor opens.

6. Click Edit Details. The Layout Designer window opens.

7. Click Save. You can now edit the layout.

 

8. Click Save.

The updated layout is saved.

Limitations

1. You cannot edit an action for fields in the Custom Layout Designer.
2. Dynamic Dependency does not work for Custom fields. This means that the relationship between elements or components can change based on certain conditions or inputs.

3. When you change a layout, the map widget will appear only for modules that support address fields.