Preview extensions

Preview API can be found under the following namespace:

eidosmedia.webclient.extensions.preview

In such namespaces, three methods are available: openPreview, addContentLoader. They are explained in detail in the following paragraphs.

Location of the custom Preview extensions.

In general, all the extensions of Méthode Swing are places under

{SWING-APP}/plugins

So, all the Javascript described in the following sections should be placed under

{SWING-APP}/app/plugins/{EXTENSION-FOLDER}/{EXTENSION-NAME}.js

Do not use the word libs as an extension folder. The libs folder is reserved for loading external libs. See the proper documentation to obtain further info on the topic.

DEBUG MODE: by default, all plugins are aggregated into a single plugins.js file at the Tomcat startup. When creating a plugin, it may be frustrating to restart the Tomcat Server every time a change is made.

To avoid this, set the configuration property debugEnabled to true.

Then, that extension will be loaded on every refresh of the page.

Open preview

To open the preview of an object, you must call the following method:

eidosmedia.webclient.extensions.preview.openPreview( item, options );

The method accepts 2 parameters:

item: (object), mandatory - a Javascript Object with item information.
options: (object), not mandatory - a Javascript Object including the preview options.

The options object is a Javascript object with the following properties:

loadObject (default is false) - Reloads the item information.

Example:

eidosmedia.webclient.extensions.preview.openPreview({ id: '0$1.0.236095983' });

Add custom content

Custom content can be loaded in the lazyLoad part of the preview. To add a custom content, simply call the addCustomContent method as follows:

eidosmedia.webclient.extensions.preview.addCustomContent( name, action );

For example:

eidosmedia.webclient.extensions.preview.addCustomContent( 'mycustomextension', function( ctx, callback ) {
    ctx.activeObject.getMetadata(function(metadata) {
        var videoUrl = $(metadata).find('WireURL').text();
        // We are calling the preview back with the value we want.
        callback( videoUrl );
    });
});

The method has two (mandatory) parameters:

name : the name of the custom content
action : the function to be called.

The action function has two parameters, ctx, which is the Context Object, and callback, which is the function to call back the preview with the desired value. See Context Object in Preview for further details.

NOTE: to load your custom extension within the preview, simply add the following tag at the beginning of the preview template:

<load id="mycustomextension"/> // Replace mycustomextension with your extension's name

and use the following syntax to call your customextension within the preview:

Result: <%=data.mycustomextension%> // Prints "Result: custom extension! Preview item id: 0$123452324"

Add custom actions

It is possible to add custom actions in preview. To register an action, see how to add a custom command in Swing.

The action will be passed the Context Object as the first parameter. See Context Object in Preview for further details.

To add your custom action within the preview, you need to used the data-emaction parameter as follows:

<button data-emaction="mycustomaction">Click me, I'm useful!</button> // Prompts " You clicked on this custom action! ... "

You can use the loaded information when calling an action. For example, if you want to show and use the userInfo within a custom action, you can do as follows:

<load id="userInfo"/> <!-- Load the user info -->
... <!-- Some awesome preview template -->

<button data-emaction="showcreatorinfo">Click me, I know the document creator!</button>

and, in the plugin folder,

eidosmedia.webclient.commands.add({
    name: 'showcreatorinfo',
    action: function (ctx, params, callbacks) {
        alert( ctx.activeObject.getInfo().userInfo.name + ' is the document creator!' );
    }
});

Context Object in Preview

Basic structure of the Context Object

The Context object is made of a specific list of properties, and a number of publicly available methods.

{
    application: {
        getId: function()
    },
    area: {
        getType: function(),
        getName: function(),
        getContext: function()
    },
    component: {
        getType: function()
    },
    activeObject: {
        // Methods of the single object.
    },
    activeObjects: [{activeObject}] // An array of activeObject
    selection: [ ] // Array of objects. See below.
}

Table 1. Parameters list
Parameter	Value type	Description	Values
application.getId()	String	Returns the application Id.	"swing", …
area.getType()	String	Returns the area type.	"main" (for the main views), "editor"
area.getName()	String	Returns the area name.	"explorer", "dashboard", "myarea", "liveblogmanagement" (for "main" areas). "story" (for editors).
area.getContext()	String	Returns the area context.	"story-editor", "report-editor", "dwp-editor", "topic@editor", "topic@search", "topic@binder", "topicplan@editor", "topicplan@search", "topicplan@binder", "topicitem", "upload", "diagram-workflow", "search", "planning-calendar"
component.getType()	String	Returns the component type.	"toolbar", "grid", "objectpanel"…
activeObject	Object	Returns an object with a set of methods. Refer to : Methods of the single object for the list of methods.
activeObjects	Array	Returns an array of activeObject(s). In bulk selection mode all selected items are returned here as array. In single selection mode array length is 1. Each activeObject is coupled with one selected item. Methods of the single object operate to that item.
selection	Array of Object	Returns an array with the currently selected items. Each item has the same set of methods available. Refer to : Methods of the single object for the list of methods.

Each context has a different value for these properties.

Methods available in the Context Object

Further details on the methods available in the Context Object can be found in the Context Object Methods reference.

Context Object properties for the Preview

The Preview context has the following values:

Table 2. Parameters list
Parameter	Values	Description
component.getType()	"preview"
component.getId()	String	Not available
activeObject.getId()	String	Return the ID of the current previewed item
activeObject.getInfo()	JSON	Return the info of the current previewed item
activeObject.getType()	JSON	Return the type of the current previewed item
selection	JSON Array	Not available (empty array)