loading table of contents...

Studio Developer Manual / Version 2310

Table Of Contents

9.1 General Remarks On Customizing (Multiple) Studio Apps

Since CoreMedia v11, Studio consists of two client apps, the Main / Content App and the Workflow App. It is important to note that these are distinct apps that are customized separately from each other. As for all CoreMedia applications, customizations may be carried out in terms of classical Blueprint extensions or in terms of the newer concept of application plugins. Application plugins are covered in detail in Section, “Plugins for Studio Client” in Blueprint Developer Manual . Blueprint extensions are covered in this section


Restricted Set of Supported Customizations for the Workflow App

For the Workflow App only a very restricted set of customizations is supported although other customizations might be technically possible. Most of what is described in Chapter 9, Customizing CoreMedia Studio only applies to the Studio Main App. More precisely, only Apps Menu customizations (see Section 9.2, “Adding Entries to the Apps Menu”), content type customizations (see Section 9.5, “Document Type Model”) and workflow customizations (see Section 9.26, “Custom Workflows”) are supported for the Workflow App.

Studio Client Apps Extension Points

The Studio Main App and the Workflow App are customized separately. Section, “Plugins for Studio Client” in Blueprint Developer Manual describes that you can add separate application plugins to both apps. If you customize in terms of classical Blueprint extensions, you need to be aware of separate extension points.

  • studio-client.main (defined in blueprint/apps/studio-client/apps/main/extension-config/extension-dependencies/package.json):

    Main App extension point for extensions that can de dynamically linked into the application (no Ext JS theming is done in the extension modules). This corresponds to the studio-dynamic Maven extension point in CoreMedia v2107 and earlier.

  • studio-client.main-static (defined in blueprint/apps/studio-client/apps/main/extension-config/static-extension-dependencies/package.json):

    Main App extension point for extensions that need to be statically linked into the application (Ext JS theming is done in the extension modules). This corresponds to the studio Maven extension point in CoreMedia v2107 and earlier.

  • studio-client.workflow (defined in blueprint/apps/studio-client/apps/workflow/extension-config/extension-dependencies/package.json):

    Workflow App extension point. The distinction between dynamic and static linking does not apply here because for the Workflow App, only certain customizations are supported, see above.

Extension modules for both apps are located under blueprint/apps/studio-client/apps/{APP_NAME}/extensions. They have a coremedia.projectExtensionFor entry in their package.json file, for example:

"coremedia": {
  "projectExtensionFor": "studio-client.workflow"

Example 9.1. Marking a module as an extension for the Workflow App

Shared Customization Code

Although the Main App and the Workflow App are customized separately, it of course makes sense for certain use cases to develop shared code that customizes both apps in the same way. A good example of this are content type localizations (see Section 9.5, “Document Type Model”). For the customization mechanism of application plugins, this is straightforward: Just add the same plugin to both apps. For the customization mechanism of Blueprint extensions it is only slightly more complex and described here.

As described above, extension modules for different apps are located under different .../{APP_NAME}/extensions folders. To have shared customization code it is recommended to have non-extension modules under blueprint/apps/studio-client/shared/ext/extensions (for Ext JS modules) or under blueprint/apps/studio-client/shared/js/extensions (for non-Ext JS modules) and then let the extension modules of each app depend on these shared modules.

Customization Entry points

There are two ways to bootstrap customization code. The first (traditional) one is StudioPlugins as described in Section 9.3, “Studio Plugins”. This approach has been around for as long as Studio itself and is the way to go when Ext JS components are to be customized. In addition, some of CoreMedia's pre-defined customization options only work as StudioPlugin configurations.

A newer and more light-weight way to bootstrap custom code are auto-loaded scripts. The usage is much simpler than for StudioPlugins and it is the preferred way for any customizations other than customizing Ext JS components. An auto-loaded script is simply set up by putting a corresponding entry into the jangaroo.config.js file of a module as in the following example (where the script is named initMyCustomCode.ts and is located under the src folder of the module) :

module.exports = jangarooConfig({
  autoLoad: [

Example 9.2. Bootstrapping auto-loaded scripts

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.