Adding Custom Applications to Studio – Home

Info: Performing the steps described in this article 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.

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.

Managing Applications

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

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.

Configuration

Applications are configured in the config.js file of Studio.

Example:

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:

{
      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:

  {
      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.

Custom App sample 1

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.

Custom App sample 2

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.