UI Plugin Structure

Organize your UI plugin in a directory that has the same name as the plugin.

Choose a unique name for your UI plugin (use your company name as prefix).

In the directory, there must be a package.json and js file that is an entry point for your plugin.

A minimalistic UI plugin structure looks like the following:

  -  companyname-hello-world
        - package.json
        - index.js

A minimalistic package.json must contain an entry point and avid section.

package.json:

1
2
3
4
5
6
7

{
  "main": "index.js",
  "avid": {
     "autoload": true,
     "alias": "companyname-hello-world-alias...."   
  }
}

index.js:

1

alert('hello world')

package.json

The package.json must contain an avid section that contains information about UI plugin dependencies, format, registration, etc.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13

{
  "main": "index.js",
  "avid": {
    "autoload": true,
    "format": "amd",
    "dependencies": [
      "avid-drag-data"
    ],
    "mode": ["main", "embedded"],
    "embeddedIn": ["adobe"],
    "alias": "companyname-hello-world-alias...."
  }
}

avid properties:

format

The MediaCentral | Cloud UX loader supports AMD and
CommonJS modules out of the box
(see SystemJS Module Formats for details).
ES6 modules are currently not supported.

We recommend using AMD for production (or even better: UMD) and bundling your plugin
code into a single file.

autoload

Starting with v2018.11

The value true is used only for Core plugins.

Set false for all your UI plugins.

To load the plugin at the right moment, describe the features section properly.

See UI Plugins Lazy Loading

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

{
    "avid": {
        "format": "amd",
        "main": "index.js",
        "autoload": false,
        "alias": "my-app-alias-f5bf272966436ea6c1e3bcf83dcaf6",
        "features": {
            "provides": [
                {
                    "appViews": [
                        {
                            "name": "my-view"
                        }
                    ]
                }
            ]
        }
    }
}  

Before v2018.11

If set to true, the plugin is loaded from the start.

If set to false, the plugin is not independent and only loaded if it is specified as dependency to other plugins.

A plugin that uses another plugin as a dependency must include this UI plugin in its dependencies property.

features

See UI Plugins Lazy Loading

dependencies

Specify all your dependencies as an array of names of the plugins that are used as dependencies:

"dependencies": ["avid-drag-data"]

The property has an impact on the plugin loading sequence (dependencies are loaded before the plugin).

alias

The alias property must contain the Application ID from the Application Record for your plugin.

mode (optional)

Defines the modes in which the plugin is loaded.

Default value: main

Possible values:

• main is defined for plugins that are loaded to the Main Layout with applications
• admin is defined for plugins that are loaded to the Administration Client
• embedded is defined for plugins that are loaded to companion windows in MediaCentral | Cloud UX
  integrations, such as Media Composer, Adobe Premiere Pro, etc.

If there is no mode specified, the plugin is loaded only to the Main Layout.

Example: The plugin is loaded to the Main Layout and Administration Client:

    "mode": ["main", "admin"]
    

embeddedIn (optional)

Helps to specify the embedded mode.

Applies only if the mode param includes embedded.

Please use next embeddedIn props:

adobepremiere - for Adobe integrations
composer - for MC Panel integrations
mos - for ENPS integrations
mos_gfx - for GFX MOS integrations

Example: The plugin is loaded to the Main Layout, all integrations and the specific Adobe integration:

    "mode": ["main", "embedded"],
    "embeddedIn": ["adobepremiere"]"

Entry Point

The plugin entry point can export predefined features.

What we call “UI Plugin features” are predefined APIs, exposed by a static plugin and consumed by the MediaCentral | Cloud UX UI Framework.

Simplified example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

module.exports = {
  avid: [
    {
      provides: ['feature-1'],
      create() {
        return {
            //...
          };
      }
    },
    {
      provides: ['feature-2'],
      create() {
        return {
            //...
          };
      }
    }
  ]
}

Export section:
avid - array of components defined by the module

Each component is an object with the following properties:
provides - (array) names of features provided by the component
create - function that returns a component implementation

Predefined Feature Types

• apps Application
• appViews Application View
• actions Action