# GM - Record Layout

## **Documentation**

**GM - Record Layout** component is used to display a related object using a layout configuration. The related object could be at any level. You can configure this component to display sections and define also their visibilities.

**Use case:** Display the ultimate account details on the contact page with different sections and of course more than 2 columns!

## **Specification**

<table data-full-width="true"><thead><tr><th width="191.67917410949835">Property</th><th width="154.55150547835012">Type</th><th>Description</th></tr></thead><tbody><tr><td>Object Name *</td><td>String</td><td>The name of the related object to display.</td></tr><tr><td>Record Id Field *</td><td>String</td><td>The name of the lookup field to display. If you want to display an account card from the contact page, set this property to AccountId.If the record layout displays the current object, set this field to <strong>recordId</strong>.</td></tr><tr><td>Record Layout *</td><td>String</td><td>The record layout is a way to describe the sections and the visibility of each section using a JSON format. See <a href="#record-layout-schema">Record Layout Schema</a></td></tr><tr><td>Record Actions</td><td>String</td><td><p>Record actions to apply. You can leverage your existing quick actions.</p><p></p><p>The configuration wizard can be used to build the list of actions. See <a href="https://docs.gridmate.io/package-reference/grid-configuration#actions-property">Actions Configuration</a> </p><p></p><p>An action has these properties:</p><ul><li><strong>name</strong>: the name of the action.</li><li><strong>label</strong>: the label of the action</li><li><strong>icon</strong>: the icon to display. Only utility:* icons are supported</li><li><strong>visibility</strong>: visibility condition for the action same as for a section. </li></ul></td></tr><tr><td>Show Actions as Buttons</td><td>Boolean</td><td><p>Check this option if you wish to display actions as buttons instead of icons.</p><p>When the actions are displayed as icons, we can define the icon on JSON actions configuration using the icon attribute.</p></td></tr><tr><td>Visible Actions</td><td>Integer</td><td><p>Set the number of visible custom actions. All the core actions will always be displayed depending on the configuration of course. </p><p>The remaining custom actions will be added as an option on the button menu.</p></td></tr></tbody></table>

### Record Layout Schema

Each section contains a list of rows. A section could have a visibility condition that can evaluate all the properties of the targeted record(see example below).

A section has these properties:

* **name**: the name of the section. It should be unique
* **label**: the title of the section
* **active**: a flag to activate the section or not. Set this field to **always** to keep the section always active
* **cols**:  # of columns to display.
* **visibility**: visibility JSON condition. It should be built it the same way as Read-only Fields
* **visibilityFormula**: Visibility Javascript condition. Using a formula is useful to compare fields instead of using static value. See [Javascript Formulas](https://docs.gridmate.io/package-reference/javascript-formulas).
* **readOnly:** Read-only JSON condition. It should be built it the same way as[ ](https://docs.google.com/document/d/1vLiHubI7Y5T6oC7vCVPR2Sb9rV9hXrZXirMvVwp5Iks/edit#bookmark=id.eqgy1mh5zdow)Read-only Fields. If the section is read-only, all its fields will be read-only as well&#x20;
* **readOnlyFormula**: Read-Only Javascript condition. Using a formula is useful to compare fields instead of using static value. See [Javascript Formulas](https://docs.gridmate.io/package-reference/javascript-formulas).
* **rows**: the list of rows. Each row is a list of fields or blocks to display

Each row contains a list of fields or an empty block. Each field can be displayed in a read-only using a condition that can evaluate all the properties of the targeted record (see example below).

A field has these properties:

* **apiName**: the API name of the field.
* **colSize**: the width of the component
* **noWhitespace**: flag to remove white space
* **emtyBlock**: An empty block ({"emtyBlock": true}) can be used to align to the displayed fields
* **readOnly**: Read-only condition. It should be built it the same way as[ ](https://docs.google.com/document/d/1vLiHubI7Y5T6oC7vCVPR2Sb9rV9hXrZXirMvVwp5Iks/edit#bookmark=id.eqgy1mh5zdow)Read-only Fields
* **readOnlyFormula**: Read-Only Javascript condition. Using a formula is useful to compare fields instead of using static value. See [Javascript Formulas](https://docs.gridmate.io/package-reference/javascript-formulas).
* **visibility**: visibility condition. It should be built it the same way as[ ](https://docs.google.com/document/d/1vLiHubI7Y5T6oC7vCVPR2Sb9rV9hXrZXirMvVwp5Iks/edit#bookmark=id.eqgy1mh5zdow)Read-only Fields
* **visibilityFormula**: Visibility Javascript condition. Using a formula is useful to compare fields instead of using static value. See [Javascript Formulas](https://docs.gridmate.io/package-reference/javascript-formulas).
* **coloring**: Conditions for coloring. You can define the coloring and the corresponding condition same as Cell Coloring for Grids.&#x20;

  ```json
  [
      {
          "color": "#a6f79e",
          "exp": {
              "MailingCity": {
                  "operator": "=",
                  "value": "Paris"
              }
          }
      }
  ]
  ```
* **managedComponent**: set to true if you want to use a custom component to display the field.
* **componentDef**: Custom component to use for the managed field. This property is a JSON object containing the component name and attributes.&#x20;

We can also override the density of the record layout using the density property (see example below). This property could be set to "auto" | "compact" | "compact"

{% hint style="info" %}
Parent fields can be used for Visibility and ReadOnly conditions. See the example below:

```json
{
    "sections": [
        {
            "name": "ssnInformation",
            "label": "SSN",
            "active": true,
            "cols": 1,
            "rows": [               
                [
                    {
                        "apiName": "SSN__c",
                        "visibility": {
                            "Account.BillingCountry": {
                                "operator": "=",
                                "value": "USA"
                            }
                        }
                    }
                ]
            ]
        }
    ]
}
```

{% endhint %}

### Configuration Examples

{% content-ref url="../../troubleshooting/config-samples/record-layout" %}
[record-layout](https://docs.gridmate.io/troubleshooting/config-samples/record-layout)
{% endcontent-ref %}

{% content-ref url="../../troubleshooting/config-samples/layout-with-section-visibility" %}
[layout-with-section-visibility](https://docs.gridmate.io/troubleshooting/config-samples/layout-with-section-visibility)
{% endcontent-ref %}

{% content-ref url="../../troubleshooting/config-samples/layout-with-field-visibility" %}
[layout-with-field-visibility](https://docs.gridmate.io/troubleshooting/config-samples/layout-with-field-visibility)
{% endcontent-ref %}

{% content-ref url="../../troubleshooting/config-samples/layout-with-read-only-field" %}
[layout-with-read-only-field](https://docs.gridmate.io/troubleshooting/config-samples/layout-with-read-only-field)
{% endcontent-ref %}

## **API Reference**

{% tabs fullWidth="true" %}
{% tab title="RecordLayoutComponent.design" %}

```xml
<design:component label="GM - Record Layout">    
    <design:attribute name="recordId" label="recordId" 
                      description="recordId to use. Use it only for community"/>        
    <design:attribute name="targetObjName" label="Object Name" 
                      description="Object Name to load"/>    
    <design:attribute name="recordIdField" label="Record Id Field" 
                      description="Record Id Field to load" />
    <design:attribute name="recordLayout" label="Record Layout" 
                      description="JSON Record Layout"/>    
    <design:attribute name="showBorder" label="Show Border" 
                      description="Show record card border"/>
    
    <design:attribute name="recordActions" label="Record Actions" 
                      description="JSON Record Actions"/>        
    <design:attribute name="buttonActions" label="Show Actions as Buttons" 
                      description="Use buttons for actions instead of icons"/>
    <design:attribute name="visibleActions" label="Visible Actions" 
                      description="# of visible actions"/> 
</design:component>
```

{% endtab %}
{% endtabs %}