Creating an Interactive component for a Digital article in Content Station Aurora

An Interactive component is configured as part of a Component Set. For detailed instruction about setting up an Interactive component, see the documentation on Git.

How it works

As mentioned, the content of the component is initially loaded from a location somewhere on the Internet. This content is then later customized by the user.

To keep track of this, two fields are used:

• View URL. This field holds the URL to the HTML content that is loaded when the component is added to the article and when the article is published.
• Edit URL. This field holds the URL to the HTML content in which the user can change the data of the component.

Note: Both URLs have to be located on a publicly accessible Web server, preferably on HTTPS.

When the data is changed by the user, the changes are stored in the article. When the article is closed and opened, the stored changes for each component are loaded.

Creating an Interactive component

Creating an Interactive component is done in the Management Console of Content Station in Enterprise Server by defining a set of properties.

This can be done in the following ways:

• Manually by creating a new Interactive component and filling out each property one-by-one.
• Automatically by importing a file containing pre-defined properties. This way, multiple components can quickly be generated in one single action.

Step 1. In Enterprise Server, access the Management Console for Content Station.

Step 2. In the list of Brands, choose Global to make the component available to all Brands, or choose a Brand to only make it available to that Brand.

Step 3. In the menu, choose Interactive components.

The Interactive Components page appears showing all Brands. When selecting a Brand, all Interactive components for that Brand appear.

Step 4. Do one of the following:

• To add a component manually, click Add new.
• To add one or more components automatically, click Import.

See the instructions below.

Adding components manually

Adding a component manually involves filling out a list of properties.

For an example and a detailed description of the properties, see the WoodWing GitHub page.

Adding components automatically

Multiple components can be added automatically by importing a JSON file that has the properties for each component defined.

See the following example of the structure of such a file:

{
	"version": "1",
	"data": [
		{
			"name": "Component 1",
			"icon": "add URL here",
			"viewLink": "add URL here",
			"editLink": "add URL here",
			"description": "add description here",
			"defaultConfig": "add JSON here",
			"enabled": true
		},
		{
			"name": "Component 2",
			"icon": "add URL here",
			"viewLink": "add URL here",
			"editLink": "add URL here",
			"description": "add description here",
			"defaultConfig": "add JSON here",
			"enabled": false
		}
	]
}

Use the Import button to import the file and generate the components. Similarly, use the Export button at the bottom of the page to export selected components to a JSON file.

Deleting an Interactive component

Before deleting an Interactive component, make sure that it is not used in an article anymore.

Instead of deleting the component from Enterprise, it might be safer to disable the property 'Show in Digital editor' for that component.