User and System Settings Tabs API

API allows to plug your own tabs to the User Settings, the Configuration or the Workflow Settings applications.

How to export the Configuration or Workflow Settings Settings tab

You can export Configuration Settings tabs by using the configuration-settings feature,
Workflow Settings tabs by using the workflow-settings feature.

Example for Workflow Settings:

    export const avid = {
        'workflow-settings': {
            'companyname-projectname-settings-tab-name': {
                config: {
                    path: [{ index: 100, id: 'group1', displayName: 'Group 1' }],
                    index: 100,
                    displayName: 'My System Settings'
                },
                factory() {
                    return new WorkflowSetting();
                }
            }
        }
    };

You can also use the following approach to export Workflow Settings tabs:

    export const avid = [{
            name: 'companyname-projectname-settings-tab-name',
            provides: ['workflow-settings'],
            create: () => {
                return {
                    config: {
                        path: [{ index: 100, id: 'group1', displayName: 'Group 1' }],
                        index: 100,
                        displayName: 'My System Settings'
                    },
                    factory() {
                        return new WorkflowSetting();
                    },
                };
            }
        }
    ];
    

Use the configuration-settings feature name for Configuration Settings.

How to export the User Settings tab

You can export User Settings tabs by using the user-settings feature.

Example:

    export const avid = {
        'user-settings': {
            'user-settings-tab-1': {
                config: {
                    index: 100,
                    displayName: 'User settings'
                },
                factory() {
                    return new UserSettings();
                }
            }
        }
    };

You can also use the following approach to export User Settings tabs:

    export const avid = [{
         name: 'user-settings-tab-2',
         provides: ['user-settings'],
         create: () => {
             const config = {
                 config: {
                     path: [{ index: 100, id: 'group1', displayName: 'Group 1' }, { id: 'subgroup1', displayName: 'Sub Group 1' }],
                     index: 150,
                     displayName: 'User Settings 1'
                 },
                 factory() {
                     return new UserSettings();
                 },
             };
     
             return config;
         }
    }];

config

The config object can have the following fields:

displayName

Localized settings tab name

index

The index property is used for tab positioning inside the parent group.
The model is merged with all other plugins and the elements are sorted by the given index.

path

Optional

Path specifies where the settings tab is positioned (group, subgroup).
Path is an array that contains items that describe parents of the tab from the top-level group to the subgroup.
If path is omitted, the tab is added as top-level item.

Each array item must have id, displayName, and index.
Choose unique ids for all path parts.

Example

path: [{ index: 100, id: 'companyname-groupname', displayName: 'Group 2' }, { id: 'companyname-groupname-subgroup1', displayName: 'Subgroup 1' }],
displayName: 'My Tab'

You can see the tab as follows:

    > Group 2
      > Subgroup 1
          My Tab

Factory

Function that returns a Workflow Settings tab instance.
Instance must implement the interface described in Settings Tab API.

Settings Tab API

render

Mandatory

Is called every time when a user selects the tab.

render({ domElement, saveHelper }) {
    // ...
}

Parameters:

{domElement} domElement where the view’s DOM structure can be appended.

{saveHelper} saveHelper - Function that can be called to save the tab.

saveHelper provides a UI helper to show the wait! saving changes and try again dialogs)

saveHelper can be used as follows:

<input type="button" value="Save" onclick='saveHelper()' />

Internally, saveHelper calls the save method of the tab.

isDirty

Optional

Must return true if a user changes settings.

 isDirty():Boolean

The method can be omitted if a settings tab is used only for data preview.

save

Optional

Must return Promise that is fulfilled if settings saving is completed successfully or rejected otherwise.

save():Promise

The method can be omitted if a settings tab is used only for data preview.

destroy

Optional

destroy():void

Is called every time when a user switches to another tab or closes the whole application while the current tab is open.
Perform the necessary cleanup in this method (cancel requests, remove event listeners, etc.).