# 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="/pages/-MEstkhme84gnGFcsCxP">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="/pages/-MEstkhme84gnGFcsCxP">GM - RelatedList Grid </a></td></tr><tr><td>Order</td><td>String</td><td>Ascending or descending order for sorting. See <a href="/pages/-MEstkhme84gnGFcsCxP">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="/pages/-MEstkhme84gnGFcsCxP">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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gridmate.io/package-reference/components-library/gm-relatedlist-tabs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.