# GM - Dynamic Tabs

## **Documentation**

**GM - Dynamic Tabs** component is used to display a Tab Set in a Lightning App Page. It could be useful to build a workspace like an SRD Workspace.

## **Specification**

<table data-full-width="true"><thead><tr><th width="209">Property</th><th width="121.33333333333331">Type</th><th>Description</th></tr></thead><tbody><tr><td>Tabs Config *</td><td>String</td><td>Tabs JSON configuration describing the tabs and the content for each tab.</td></tr><tr><td>Extra Tabs Config</td><td>String</td><td>Extra Tabs JSON configuration describing the tabs and the content for each tab.</td></tr><tr><td>Variant</td><td>String</td><td>The The appearance of the Tabs : default, scoped or vertical</td></tr><tr><td>Show Border</td><td>Boolean</td><td>Check this option if you wish to add a border.</td></tr></tbody></table>

Example of Dynamic Tabs  configuration

```coffeescript
[
   {
      "label": "Contacts",
      "components": [
         {
            "component": "gmpkg:ListViewDataGridComponent",
            "attributes": {
               "relatedObjectName": "Contact",
               "listViewName": "AllContacts",
               "canCreate": false,
               "canUpdate": true,
               "canDelete": true,
               "canFilter": true,
               "recordDetail": true,
               "inline": true,
               "showBorder": true,
               "showColumnBorder": true               
            }
         }
      ]
   },
   {
      "label": "Accounts",
      "components": [
         {
            "component": "gmpkg:ListViewDataGridComponent",
            "attributes": {
               "relatedObjectName": "Account",
               "listViewName": "AllAccounts",
               "canCreate": false,
               "canUpdate": true,
               "canDelete": true,
               "canFilter": true,
               "showBorder": true,
               "inline": true
            }
         }
      ]
   }
]
```

## **API Reference**

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

```xml
<design:component label="GM - Dynamic Tabs">
    <design:attribute name="tabItems" label="Tabs Config." description="Tabs JSON configuration"/>
    <design:attribute name="extraTabItems" label="Extra Tabs Config." description="Extra Tabs JSON configuration"/>
    <design:attribute name="variant" label="Variant" description="The appearance of the tabset (default|scoped|vertical)"/>
    <design:attribute name="showBorder" label="Show border?" />    
</design:component>
```

{% endtab %}
{% endtabs %}