# GM - RelatedList Tabs

## **Documentation**

**GM - RelatedList Tabs** component is used to display a related list based as a Tab Set. This component is relevant for small related lists.

**Use case:** Display the list of payment methods as tabs on the account page.

## **Specification**

<table data-full-width="true"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>Related List Label *</td><td>String</td><td>The label defined on the layout page. Set it to Contacts to display the list of contacts on the Account page.</td></tr><tr><td>Row Limit *</td><td>Integer</td><td>The maximum number of rows to fetch. The grid will never go beyond this number of records.</td></tr><tr><td>Filter</td><td>String</td><td>JSON string to define filter criteria. See <a href="gm-relatedlist-grid">GM - RelatedList Grid </a></td></tr><tr><td>Sort</td><td>String</td><td>The field list to sort the related records. See <a href="gm-relatedlist-grid">GM - RelatedList Grid </a></td></tr><tr><td>Order</td><td>String</td><td>Ascending or descending order for sorting. See <a href="gm-relatedlist-grid">GM - RelatedList Grid </a></td></tr><tr><td>Label Field</td><td>String</td><td>Label Field for Tab title. If you want to display a list of contacts, set this to Name for instance. Each tab will have the name of the contact as a title.</td></tr><tr><td>Record Fields</td><td>String</td><td><p>Record Fields to display in a JSON format if you don’t want to display the whole layout. For instance, for a contact list, we can set it to:</p><pre class="language-json"><code class="lang-json">[
    "FirtName",
    "LastName",
    "MailingCity"
]
</code></pre><p></p><p>If this property is empty, the page layout will be used.</p></td></tr><tr><td># of Columns</td><td>String</td><td># of columns for the layout.</td></tr><tr><td>Record Related Components</td><td>String</td><td><p>A JSON string to add a list of inline components to display per record. Each inline component should have:</p><ul><li><strong>component</strong>: the name of GridMate component.</li><li><strong>attributes</strong>: the list of attributes to configure, same as on the lightning app builder.</li></ul><p>See <a href="gm-relatedlist-grid">GM - RelatedList Grid</a></p></td></tr><tr><td>Show Border</td><td>Boolean</td><td>Check this option if you wish to add a border to the component.</td></tr><tr><td>Component Height</td><td>Integer</td><td>Set the component height. Set this property if you want to control the height. The user has to scroll vertically to see more records.</td></tr><tr><td>Actions</td><td>String</td><td><p>JSON string to initialize the list of available actions on each record.</p><p>Custom actions are available on each tab as toolbar. 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></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>Custom 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>

## **API Reference**

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

```xml
<design:component label="GM - RelatedList Tabs">
    <design:attribute name="recordId" label="recordId" 
                      description="recordId to use. Keep this empty if you want to use the current record"/>        
    <design:attribute name="relatedListLabel" label="Related List Label" 
                      description="The label defined in the layout page. Ex. Contacts to display contact list on account page"/>    
    <design:attribute name="rowLimit" label="Row Limit" 
                      description="The maximum number of row to fetch"/>    
    <design:attribute name="filter" label="Filter" 
                      description="Json string to define filter criteria. Don’t forget __c for custom fields. Ex. {'StageName':'Needs Analysis'} to see only 'Needs Analysis' Opportunities"/>    
    <design:attribute name="sort" label="Sort" 
                      description="The field list to sort the data grid. This field is used only for the initial load. Don’t forget __c for custom fields. Ex. Amount to sort opportunities by amount"/>
    <design:attribute name="order" label="Order" 
                      description="Asc or Desc order for sorting"/>
    
    <design:attribute name="labelField" label="Label Field" 
                      description="Label Field for Tab title"/>    
    <design:attribute name="recordFields" label="Record Fields" 
                      description="Record Fields to display"/> 
    <design:attribute name="layoutColumns" label="# of Columns" 
                      description="# of Columns for record layout"/> 
    <design:attribute name="recordRelated" label="Record Related Components" 
                      description="Json string to initialize related component"/>          
    
    <design:attribute name="canUpdate" label="Can Update Object" 
                      description="Check this option if you want to update object"/>    
    <design:attribute name="canDelete" label="Can Delete Object" 
                      description="Check this option if you want to delete object"/>        
    <design:attribute name="canCreate" label="Can Create Object" 
                      description="Check this option if you want to create object"/> 
    
    <design:attribute name="recordActions" label="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:attribute name="showBorder" label="Show Border" 
                      description="Show Border"/> 
    <design:attribute name="height" label="Component Height" 
                      description="Set the component height"/>     
</design:component>
```

{% endtab %}
{% endtabs %}