Documentation
RocketFuel
<  Widgets

Tabbed My Account

### Description

Control personal settings through an autonomous user interface. The Tabbed My Account widget allows users to modify their account information, update a live profile photo, add or remove delegates, and view assets and team members. Configure this widget to display specific data in a tabbed interface or embedded widgets within any single tab. You can customize and style this widget using the available instance options and associated custom templates.

### Instance Options
| Option  | Property | Comments | Default Value | Source |
| ----- |:-----:| ---- | ---- | ---- |
| Template | `template` | Used to name the bootstrap class for the widget. | `Default value` | Instance |
| Configuration | `config` | Structured JSON which controls tabs and embedded widget options. | `Default value` | Options Schema |

### CSS/SASS Variables

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

| Variable | Comments |
| -------- |:-------------:|
| `$nr-my-account-tab-active` | This variable controls the background color of an active tab. |

### Templates
| Name | Comments |
| -------- |:---|
| `nr-my-account-default.html` | Displays the default template. |


### Configuration

```json
{

    {
   "tabs": [{
           "widget_id": "widget-form",
           "icon": "profile-icon",
           "options": {
               "view": "default",
               "omitHeaderOptions": "true",
               "table": "sys_user",
               "hideRelatedLists": true,
               "disableUIActions": "true"
           },
           "canSee": true,
           "id": "about",
           "title": "About"
       },
       {
           "widget_id": "nr-team",
           "icon": "team-icon",
           "options": {},
           "canSee": true,
           "id": "team",
           "title": "Team"
       },
       {
           "widget_id": "nr-my-assets",
           "icon": "assets-icon",
           "options": {
                           "template": "nr-my-assets-default.html",
                           "view": "nr-default"
           },
           "canSee": true,
           "id": "assets",
           "title": "Assets"
       },
       {
           "widget_id": "nr-user-delegates",
           "icon": "delegates-icon",
           "options": {
               "widget_template": "nr-my-delegates-default.html",
               "modal_template": "add_delegate.html"
           },
           "canSee": true,
           "id": "delegate",
           "title": "Delegates"
       }
   ]
```

Want to Learn More? Talk to an Expert
Contact Us