<  Widgets

RocketFuel Tabbed Data Table

Widget

### Description

This widget allows users to see specifically configured data in a tabbed interface. You may also configure this widget to display embedded widgets within any single tab.

### Configuration

If you wish to customize this widget, once it is on the page, right-click on it to open the options, and click 'copy config to clipboard', which is the last option. Then, right-click the widget once again, and this time choose 'Instance in Page Editor'. Paste the config into the JSON field, and then modify the options as needed to produce additional tabs with specific data.

### Widget Options

| Option                         |    Property    | Comments                                                                                                                                                                                                                | Source   |
| ------------------------------ | :------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Additional options JSON format |   `options`    | JSON entered here will be used to configure this widget.                                                                                                                                                                | Instance |
|                                |     `tabs`     | This variable is used to specify an array of tabs to display across the top of the widget.                                                                                                                              |          |
|                                |    `table`     | This variable is used to specify a specific table to use for a tab                                                                                                                                                      |          |
|                                |      `id`      | This variable is used to specify a hash name for quick access to a specific tab through the url.                                                                                                                        |          |
|                                |     `page`     | This variable is used to specify which page to take the user to when they click on of the the records generated in the list.                                                                                            |          |
|                                |  `widget_id`   | This variable is used to specify which widget you would like to use on a specific tab. The property takes a widget id. The id of the widget that generates record lists in the default configuration is nr-request-list |          |
|                                |   `filters`    | This variable is used to specify an array of specific filters that are displayed to the user in the form of buttons. The filters property takes an array of objects (see sample data)                                   |          |
|                                |      `id`      | This variable is used to specify an id for a specific filter.                                                                                                                                                           |          |
|                                |    `label`     | This variable is used to specify a label for a specific filter to be displayed on the related tab as a button beneath the tab area.                                                                                     |          |
|                                |    `filter`    | This variable is used to specify an encoded query for a specific filter to be displayed on the related tab as a button beneath the tab area.                                                                            |          |
|                                |    `active`    | This variable is used to specify whether or not a filter is active                                                                                                                                                      |          |
|                                | `count_filter` | If a count filter is specified, a count will appear on the tab which uses the countFilter property to get a row count.                                                                                                  |

### Widget Options Example

```js
{
 "tabs": [
   {
     "table": "sc_request",
     "id": "requests",
     "label": "Requests",
     "page": "sc_request",
     "widget_id": "nr-request-list",
     "countFilter":
       "active=true^opened_byDYNAMIC90d1921e5f510100a9ad2572f2b477fe",
     "filters": [
       {
         "id": "open",
         "label": "Open",
         "filter":
           "active=true^opened_byDYNAMIC90d1921e5f510100a9ad2572f2b477fe",
         "active": true
       },
       {
         "id": "closed",
         "label": "Closed",
         "filter":
           "active=false^opened_byDYNAMIC90d1921e5f510100a9ad2572f2b477fe"
       }
     ]
   },
   {
     "table": "sysapproval_approver",
     "id": "approvals",
     "label": "Approvals",
     "page": "approval",
     "filter":
       "state=requested^approverDYNAMIC90d1921e5f510100a9ad2572f2b477fe"
   }
 ]
}
```

### Sample Data

```json
{
 "options": {
   "tabs": [
     {
       "table": "sc_request",
       "id": "requests",
       "label": "Requests",
       "page": "sc_request",
       "widget_id": "nr-request-list",
       "countFilter":
         "active=true^opened_byDYNAMIC90d1921e5f510100a9ad2572f2b477fe",
       "filters": [
         {
           "id": "open",
           "label": "Open",
           "filter":
             "active=true^opened_byDYNAMIC90d1921e5f510100a9ad2572f2b477fe",
           "active": true
         },
         {
           "id": "closed",
           "label": "Closed",
           "filter":
             "active=false^opened_byDYNAMIC90d1921e5f510100a9ad2572f2b477fe"
         }
       ]
     },
     {
       "table": "incident",
       "id": "incidents",
       "label": "Incidents",
       "page": "ticket",
       "filters": [
         {
           "id": "active",
           "label": "Active",
           "filter":
             "opened_byDYNAMIC90d1921e5f510100a9ad2572f2b477fe^active=true",
           "active": true
         },
         {
           "id": "inactive",
           "label": "Inactive",
           "filter":
             "opened_byDYNAMIC90d1921e5f510100a9ad2572f2b477fe^active=false"
         }
       ]
     },
     {
       "table": "sysapproval_approver",
       "id": "approvals",
       "label": "Approvals",
       "page": "approval",
       "filter":
         "state=requested^approverDYNAMIC90d1921e5f510100a9ad2572f2b477fe"
     }
   ]
 }
}
```

### Dependencies

_Dependencies are included and configured as part of the provided Update Set._

> None

### CSS/SASS Variables

_CSS/SASS variables are given default values that can be overridden with theming or portal-level CSS._

| Variable                |                                            Comments                                            |
| ----------------------- | :--------------------------------------------------------------------------------------------: |
| `$nr-myitems-tab-color` | This variable controls the color of the text on the tabs as well as the border below the text. |

Get Awesome Updates

Enter your email address for news and updates from NewRocket.

Thanks for your email!
There was an error, please try submitting again.