Adding Custom Applications to Studio

One of the ways of adding custom functionality to Studio is by adding Custom Applications. These are accessed through the Applications menu and — as is the case with the default applications such as the Publication Overview and the Trash Can — run in a full Studio window, including a header and a Back button.

Actions can be performed within the application through the use of parameters.

Example: You can add custom reports based on data from Studio Server, display external sources, and so on.

Figure: The Apps menu.

Default applications

By default, the following applications are shown:

• Publication Overview: Opens the Publication Overview. It provides a general overview of how far the production process of a print publication has progressed by showing all layouts of a publication and their Workflow Status.
• Issue Manager. Opens the Issue Manager, used for creating, editing, or deactivating Issues.
• Trash Can. Opens the Trash Can page. It is used for restoring files that have been moved to the Trash Can, or for permanently deleting them.

Deprecated options

The following table shows an overview of options that have been deprecated and therefore cannot be used or referred to when creating custom applications.

Managing Applications

Making applications available in the Apps menu is done by configuring Studio.

Any application can be added as long as it can be referenced through a URL.

If needed, the Apps menu can also be removed from the toolbar.

The configuration can be done via the Management Console or by directly editing the config.js configuration file.

Configuration via the Management Console

Applications are configured on the Apps menu page of the Management Console. This can be accessed by logging in to the Studio Server instance on which Studio is run, and clicking Integrations > Studio.

Note: It is not obligatory to use the configuration via the Management Console in Studio 11.105 or higher; feel free to use the method of configuring the apps via the config.js file (see configuration for Studio 11.104 and lower). However, configuration via the Management Console is quicker and more user friendly.

First use

By default, Studio uses the configuration in the config.js file (see configuration for Studio 11.104 and lower) as long as the method in the Management Console is not enabled.

When accessing the Apps menu page in the Management Console for the first time, a notification is shown stating that configuring apps via the Management Console can be enabled and that by doing so, the configuration in the config.js file is from then on ignored.

After enabling the feature, the page for configuring Apps is shown. At this stage, it contains only the default Apps.

Subsequent use

After having enabled the feature, the page can be used for managing Apps.

The use of the page is self-explanatory:

• Click Add application to add a new application.
• Click an existing application to edit is settings (see below for an explanation about each setting; click Delete to delete an application.
• Click the Active switch to set the App to Inactive and thereby hiding it from the menu while keeping its settings to optionally enabling it at a later stage. Do the reverse to make the application appear in the menu again.

Tip: Change the order of the applications as they appear in the menu by dragging an application to a different position.

The following settings can be configured:

• Name. The name as it appears in the Apps menu.

• Application URL. The URL or local path to the application. The following wildcards can be used (filled in automatically by Studio Server):
• (SERVER_URL}. The path to the current instance of Studio Server.
• {SESSION_ID}. The ID of the current session.
• {APP_PATH}. The Studio path, used for applications with relative paths such as the Publication Overview.

• Open in new tab. Select when the application needs to be opened in a new Web browser tab.

• Icon URL. URL or local path to the icon file.

Note: For the default applications, only the options 'Active/Inactive' and 'Open in new tab' can be changed.

Directly editing the config.js file

In this method, the config.js file for Studio is edited directly.

Info: Performing the described step requires direct server access. Depending upon how your system is hosted and the level of access you have to that system, coordination may be required with your Partner or WoodWing Support team. For a full overview of the steps that need to be done by WoodWing and how to request them, see WoodWing Cloud - Change management.

The location of this file is:

<Studio Server path>/contentstation/

apps: [
    {
      name: 'Publication overview',
      url: '{APP_PATH}#/publication',
      icon: 'publication-overview.svg',
      thisTab: true
    }
  ],

Use the following properties:

• name. Name as it appears in the Apps menu.

• url. URL to the application. The following wildcards can be used (filled in automatically by Studio Server):
• (SERVER_URL}. The path to the current instance of Studio Server.
• {SESSION_ID}. The ID of the current session.
• {APP_PATH}. The Studio path, used for applications with relative paths such as the Publication Overview.

• icon. Name of the icon to use in the Apps menu. (See also the alternative method iconURL below.)

Note: To use this option, the icon should be stored in ~/assets/third-party-icons. Icons can be in any file format that is supported by a Web browser; recommended formats are SVG, PNG and JPG.

• iconUrl. Path to the icon file, if stored outside of the Studio icons folder.

• thisTab. If the application needs to be opened in the same tab as Studio, set it to true.

Examples

A custom app on Studio Server, opened in a new tab:

Copy the code

{
      name: 'My Custom App, get',
      url: '{SERVER_URL}/server/apps/myapp.php?ticket={SESSION_ID}',
      icon: 'icon1.png'
    }

Google search, opened in a new tab:

Copy the code

  {
      name: 'Google search',
      url: 'https://www.google.com',
      iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1000px-Google_%22G%22_Logo.svg.png'
    }

Removing the Apps menu

To completely remove the Apps menu, empty the apps option:

apps: []

Custom Application samples

To get you started, 2 simple samples are provided (see the contentstation > sdk > samples folder).

Sample 1 contains a page with some text and a button in the header that displays a message when clicked.

Sample 2 contains a page with a button that displays some random parameters on the page. The header contains two buttons: one that displays a message and another that updates text on the page.

How Custom Applications are accessed

Users access a Custom Application through the Applications menu in the top right corner of the page.

Custom Applications are automatically added to the menu below the default applications (as defined in the config.js file).

How Custom Applications are provided

Custom Applications should be provided in the form of a javascript plug-in.

Where to get Custom Applications from

Custom Applications need to be created or obtained yourself; they are not provided by WoodWing.

Creating a Custom Application

To help you create your own plug-ins, an SDK and sample files are available in the following location:

• Content Station folder > sdk

It contains the following files and folders:

• content-station-11-sdk.md. The SDK describing the available options that can be implemented.

• plugins.md. Sample code showing how to enable plug-ins in Studio

• samples. Folder containing some example plug-ins. See the SDK for more information.

The process

The process of creating and adding a plug-in is as follows:

Step 1. Create the plug-in by following the instructions in the SDK.

Step 2. Place the plug-in in the following folder (optionally in a subfolder of this folder):

• Content Station folder > sdk

Step 3. Enable the plug-in in Studio by opening the contentstation > config.js file and adding a reference to the plug-in in the plugins section. For details about how to configure this, see the plugins.md file in the sdk folder.

Step 4. Save the file.

Step 5. Log in to Studio — or refresh the page when you are already logged in — and test the working of your plug-in.