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.
• When you change a layout, the map widget will only appear for modules supporting address fields.

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.

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 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 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 a dependency is 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 appear.

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

Related Lists

• The Related Lists block is between the Fields and Widgets blocks, and each related module is displayed as a component inside the block. For example, if you create a custom layout for the Contacts module, related modules like Organizations, Deals, Sales Orders, etc., will be displayed. You can choose the module you want to add. 
  • If you add a new relationship between modules, all these related modules will appear in the Layout Designer. If you delete the relationship, it won’t appear in the Layout Designer.  
  • Note: A Related list, once created, cannot be deleted from the Layout Designer. For example, assume you have added a custom module related to the Contacts in the Layout Designer. The custom module will still appear in the Related module list even after you delete the relationship between these two modules.
• The Basic block now contains the Horizontal and Vertical Tab components. Each tab has Fields, Related lists, and Widgets. 
  • You can add related lists, widgets, and fields under each tab.
• Tasks module - You can add Subtasks from the Subtasks widget in the Layout Designer.
• You can also choose how you want to see the related lists - in the List format (new UI) or the card format (old UI).

Details View 

• Earlier, you could display record details with the Details icon/widget in the Summary View. 
• With the new changes, you have the following two widgets.
  • The Details widget will display all the details for a record.
  • The Compact Details widget will display compact details (fewer details).
• Icons widget: The Icons widget allows you to add icons by simply dragging and dropping them. You can also click the Setting icon to choose which icon to display.
• The inventory Print Preview widget displays the Print Preview, the Print Button, and the Print Template tabs. 

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 the 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 on a record from the Kanban View. The Summary view of that record opens.

6. Click the drop-down beside Layout.
7. Click your saved layout design - Deals New View. 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.