1. What Does This Page Cover?

3. Overview

3.1 Canvas in Creator

When you choose a pre-designed template from the templates gallery, it'll be populated with your actual application data and the highlighted texts such as phone numbers and email addresses will be displayed in your application theme's color.

Note: 

1. You can switch back to your pre-defined layout any time by selecting it in the layout section under Report customization - web. 
2. The custom layout that you created will still be listed along with the default detail view layouts. 
3. The custom layout builder will not be available under the Report customization tabs for mobile and tablet devices. You can still design custom layouts for record detail view in web browsers.

3.2 Benefits of using Canvas layout builder

1. Customize and reorganize the data in your records the way you want and offer better visibility to your users
2. Turn your professional detail view layouts into artistically attractive and visually-appealing layouts
3. Add only relevant data components and elements. This way, you can ensure that your users can view the required information at a glance.
4. Choose from a multitude of icons for efficient visual representation and completely re-design your detail view layout
5. Reuse styles applied to components in the Data and Elements module. Learn how
6. Dynamically resize your custom layout to fill your users' entire screen. Learn how
7. Export your customized layout in JSON format and import the same across applications in your account

If you have not added certain fields to your custom layout, it simply means that you have chosen not to display those fields in your records' detail view. Users who have permissions to view your records cannot view such fields as you haven't added them. However, these fields can be accessed while editing the record, and can also be assigned values by users with the required permissions. 

Info: Make sure you prepare a list of all the fields you need on your records' detail view in advance, so that you do not leave out any relevant fields while designing your custom layout. 

4. Modules in Canvas

1. Data
2. Elements
3. Style
   

1. Use the search bar at the top-left of the Data module to search for relevant record data.
2. Click the undo and redo icons at the top to undo and redo the changes respectively.
3. Click the download icon to export your layout in .json format.
4. Click the full screen icon at the top so that the layout builder fills your entire screen.
5. Provide a name for your layout in the space provided at the top.
6. Click the Save button to save the changes made in your layout, since changes will not be saved automatically.
   

4.1 Data

Note: You can expand and collapse the various sections in the Data module by clicking the "+" and "-" icons respectively.

1. Fields: Drag and drop the fields (both form fields and system fields) onto the layout builder.
   
2. Custom actions: Drag and drop the required custom action tile, if you've already configured them in your reports. Otherwise, you can click Add New Action and configure them.
3. Custom Functionalities: 
1. Comments: Drag and drop the record comments tile onto the builder. Canvas builder also allows you to set column width simply by dragging and dropping the resize icon when you hover over column borders.
   
2. Blueprints: Drag and drop the blueprints tile onto the builder. The current stage will be displayed.
   
4. Related Blocks:
1. From Related Blocks: Existing subforms and lookup fields that look up data can be dragged and dropped onto the builder.
2. To Related Blocks: Lookup fields in the current (chosen) form from which data is looked up in other forms will be listed here.

4.2 Elements

Refer this section to know how to add elements to your custom layout.

1. Section: The section element enables you to create standalone sections and group related content such as fields, record comments, and blueprints.
2. Tab: Enables you to reorganize your data into distinct, switchable tabs. This helps to provide a well-organized display to the users. For example, in the image below, the tab named Product Management is placed in the Workitem module, which has three tabs: Design, Development, and Testing, all within a section. 
3. Table: Can be used to display your record values in a tabular format. This format lets you save space in the detail view by displaying the data in a table structure, comprised of rows and columns. For example, in the image below, the product name, description, and product ID are the form fields present that are displayed as rows and columns. 
4. Text: You can insert a text box element to enter the required content within the detail view. For example, you can use the text element to display a heading before starting sections or to add a note or disclaimer.
   
5. Icon: You can use the icon element to represent a field instead of a conventional text label inside sections, tabs, tables, and so on. For example, in the image below, the product name and price are displayed using icons instead of text.
   
6. Line: The line element can be used to insert a horizontal line to separate content or define a change in content. In other words, it is used to represent a thematic break between content. For example, you can insert a line element between two sections in your layout. 
   

4.2.1 Fixed and Fluid Component

4.3 Style

Refer this section to know how to add elements to your custom layout.

The style options vary based on the selected element. 

5. See How It Works

6. Use Cases

1. Employee Management: Let's say you have created an Employee Management application using Creator. You need the detail view of your employee records to show the basic and contact details along with the dependents' and claim details. You also wish to highlight each employee's emergency contact details. This is where Canvas comes into the picture. You can use our custom layout builder to achieve the above and much more. This way, the moment you land on a record and catch a glimpse of a customized highlighted part, you know whom to contact in case of emergencies, without even having to take a closer look. 

1. Education Management: Let's say you have created an Education Management application using Creator. You need the detail view of your students' and staff records to display a comprehensive view of their profile and courses details. You can use our Canvas layout builder to design the detail view of your records and bring your ideas to life.
   
2. Real-estate management: Let's say you have created an Real Estate Management application using Creator. You wish to display your rental properties' details vividly that also helps users narrow down their dream homes. You also need to ensure that potential buyers who come looking for rental details must not be overwhelmed with all the information.  Canvas helps you design neat and appealing layouts that offer details about your rental properties at a glance. 

In addition to these use cases, you might come across or have other requirements. Using Canvas, you can dictate the styling and visibility of various data components and elements in the layout builder that cater to a  wide range of contexts and scenarios to arrive at a highly rich, meaningful, and dynamic user experience.

7. Navigation Guide for accessing Canvas

1. Navigate to the Design tab of the required report that you want to customize the detail view for. 
2. Select the Detail View tab and click Create New Layout beneath the Custom Layout card. The Canvas builder will appear.
   

8. Things to know

1. You cannot create an application sandbox if there are canvas layouts in the same application. Learn more about creating a sandbox.
2. You can set a custom layout as the default detail view for the records in your application. Learn how
   
3. You can export the custom layouts in .json format. Learn how
4. You can use arrow keys to move all the elements inside the custom layout builder.
5. You can configure alignment for the field values by selecting them inside the Canvas builder and using the alignment options available on the left panel under the Style tab.
   

9. Limitations

1. Canvas layout builder is not applicable to the spreadsheet report type.
2. Currently, when you create a custom layout using Canvas, changes will not be auto-saved. You need to click Save after making the required changes.

Related Topics

1. Understand detail view layouts
   
2. Create custom layout using Canvas
3. Manage custom layout