New content creation dialog

With Méthode Swing it is possible to override the default creation dialog.

Registration of a new content creation dialog

To register a new content creation dialog, use the following namespace

eidosmedia.webclient.extensions.newcontent

and its function

register( contentTypes, options )

Table 1. Method information
Method	`register`
Parameter	Required `{Array} contentTypes` - The list of contentTypes for which the specified dialog must be used. See Available content types for details. Required `{object} options` - An object containing the options and the behaviour of the dialog. See Properties of the creation dialog for details.
Returns	`{undefined}` undefined

Available content types

When registering the dialog, the content type can be chosen among these options:

story
gallery
liveblog
webcontainer
webpage
topic
topicplan

Properties of the creation dialog

The following paragraphs describe each of the available properties or methods for the custom panel.

title

[Optional] {String} title defines the title of the dialog

Example

{
    // ...
    title: "For whom the bell tolls",
    // ...
}

layout

The layout property is optional and allows to have some control on the dialog dimensions. Available values are :

fullWidth - the dialog occupies all the screen width.
fullHeight - the dialog occupies all the screen height.
fullPage - the dialog occupies all the screen width and height.

If necessary, fullWidth and fullHeight properties could be used in addition with width and height properties.

Example

{
    // ...
    layout: "fullPage"
    // ...
}

width, height

If the layout property is not sufficient for your necessities, it is possible to customize the width and the height of the dialog by specifying the respective property.

Example

{
    // ...
    layout: 'fullWidth',
    height: "425px"
    // In this case we have a wide dialog with fixed height.
    // ...
}

css

If the layout property is not sufficient for your necessities, it is possible to customize all the css properties. It works exactly like jQuery.css method. Please refer to jQuery documentation for further information.

Example

{
    // ...
    css: {
        'fontSize': '12px',
        'width': '423px'
    }
}

dialogType

Dialog Type can be one of the following values.

full - the dialog is completely custom. It should be used when referencing an external url for the content creation. See Full custom dialog configuration documentation.
contained - the dialog is custom, but interacts with Methode Swing. The result is a modal that contains your custom HTML, but has the "Create" button as part of Swing. See Contained custom dialog configuration documentation.
template - the dialog is the standard Methode Swing dialog, but the template choice part is custom. See Template custom dialog configuration documentation.
tab - the dialog is the standard Methode Swing dialog, template and shape tabs are standard but It’s possible to add one ore more custom tabs. See Tab custom dialog configuration section

Example

{
    // ...
    dialogType: "full"
    // ...
}

Full custom dialog configuration

A "full" custom dialog should be used when the customer has an indipendent Object Creation tool available on another website. The "full" dialog has minimal interaction with Swing, and merely opens an external URL in an iframe.

To activate the "full" custom dialog, dialogType property must be valued at full.

Configuration of a proxy

To allow the use of your external url inside Swing, it is necessary to use a Proxy.

Méthode Swing uses proxies to communicate to external services. This is necessary due to the Same-Origin Policy used by modern browsers.

The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin. Same-origin Policy is used as a means to prevent some of the Cross-site Request Forgery attacks.

— Mozilla Developer Network

Proxies can be configured in Méthode Swing.

Proxy Options

The proxy can be configued with the following options:

http.jersey.client [true | false (default)] - Determines whether to use Jersey as client to perform all the as proxy for all HTTP requests through this proxy
http.read.timeout [30000] - Specify the socket read timeout (in milliseconds) to read the response from the target endpoint.
http.socket.timeout [3000] - Specify the socket connection timeout (in milliseconds) to establish a connection of the target endpoint.
reachout.httpProxy [true | false (default)] - if true enables the proxy to use an external proxy for HTTP requests. To do so, a following environment variable to the JVM where the Swing WebApp is running:- em.reachout.httpProxyURI must be specified: the URI of the HTTP proxy, including port number (e.g: https://em.proxy:80/).
When configured, all HTTP requests will be done through the configured proxy URI. This option is irrelevant if you set false to "http.jersey.client" option.
useTemplate [true | false (default)] - if true allows to use templates to build the target URL

<!-- other configuration -->
<proxies>
    <proxy>
        <name>[PROXY-NAME]</name> <!-- e.g. resourcespace -->
        <http.jersey.client>false</http.jersey.client>
        <http.read.timeout>30000</http.read.timeout>
        <http.socket.timeout>3000</http.socket.timeout>
        <reachout.httpProxy>false</reachout.httpProxy>
        <targetUri>http://192.168.203.129/resourcespace/plugins/api_search/</targetUri> <!-- e.g. destination target Uri -->
        <useTemplate>false</useTemplate>
    </proxy>
</proxies>

The useTemplate param allows to use templates to build the URL. The following is an example of url which uses templates.

<proxies>
    <proxy>
        <name>[PROXY-NAME]</name> <!-- e.g. resourcespace -->
        <targetUri>http://192.168.203.129:{_port}</targetUri> <!-- e.g. destination target Uri -->
        <useTemplate>true</useTemplate>
    </proxy>
</proxies>

The new proxed URL must be called with ALL the parameters in its querystring, e.g.

http://swing/[PROXY-NAME]/users/get?_port=8080&id=userID

Note: if the parameter is missing, the call will return an HTTP 500 error.

Note: due to the nature of the Template Servlet, in this mode it is not possible to pass arrays as querystrings ( i.e. more than one querystring parameter with the same name ).

Configuration of the url

To point to the external url, it is mandatory to configure the url option. Please notice that, considering that you have just configured the correct proxy for your application, the url will be actually a subset of the Swing url.

{
    // ...
    url: 'http://localhost:9797/swing/newcontentproxy/index.html0
    // ...
}

Closing the dialog

The "full" custom dialog actually includes your custom external url inside a Swing modal dialog. Since there is no interaction between it and your code, the only way for the customer to close the Swing dialog is to put the following code inside their application.

// Creation code of your application..
// At the end of it, put the following code
if (window.top.eidosmedia) {
    window.top.eidosmedia.closeCurrentDialog();
}

Accessing the Context Object

The "full" custom dialog actually includes your custom external url inside a Swing modal dialog. Since there is no interaction between it and your code, the only way for the customer to access the Swing context (with all the limitation of being in another iframe), is the following.

// Creation code of your application..
// At the end of it, put the following code
if (window.top.eidosmedia) {
    var CTX = window.top.eidosmedia.getCTX();
    // Get current user...
    var currentUserName = CTX.getCurrentUser().getName();
    // All methods of the CTX are available (such as getChannels, getWorkfolders, getTemplates)
}

Full example

eidosmedia.webclient.extensions.newcontent.register( ['story'], {
    dialogType: 'full',
    title: 'Custom story creation dialog',
    url: 'http://localhost:8080/swing/testcustomcontent/index.html',
    layout: 'fullPage'
});

The code above will let Swing understand that the operation is done.

This will only work if the external url is Proxied inside Swing using the Proxy configuration.

Contained custom dialog configuration

The contained dialog is used in other to insert custom HTML in the New Content Creation dialog of Swing. The contained dialog is wrapped inside Swing, and uses a custom template. Inside the dialog, it is possible to use the Context Object to retrieve important information. See Context Object (ctx parameter) for further information.

The dialog can be configured with additional properties.

template

[Optional if dialogType is 'full'] {String} template defines the template of the dialog. The template is placed under the following path:

{SWING}/config/templates/newcontent/

Swing supports Tomcat 9.x, so custom panels can be configured outside {SWING-APP}. See the paragraph How to configure custom dialog in external folder for some tips in how to take advantage of this configuration option.

The template is an HTML file, and there is maximum liberty in its content. Please refer to Contained custom dialog configuration documentation for further information.

Example

{
    // ...
    template: "mycustomnewcontent.html",
    // ...
}

showCreateButton

{Boolean} showCreateButton if true, the Create button is shown in the Modal footer, and the creation process is managed by Swing by calling the getCreationInfo method when the user clicks on the button.

Example

{
    // ...
    showCreateButton: true,
    // ...
}

Full example

eidosmedia.webclient.extensions.newcontent.register( ['story'], {
    template: 'newcustom.html',
    dialogType: 'contained',
    title: 'Custom story creation dialog',
    layout: 'fullPage',
    showCreateButton: true,
    postFillForm: function(ctx, $dialog) {
        // There are some APIs available to list channels, teams,
        // access the metadata of the user, and so on...
    },
    getCreationInfo: function( ctx, dialog, callback ) {
        var $dialog = $(dialog);
        var team = $dialog.find('[data-field-type="team"]').val();
        // ...
        callback({
            team: team,
            channel: channel,
            // ...
        })
    }
});

Methods of the creation dialog in Full or Contained mode

postFillForm

Method called when the dialog and its custom html has been loaded. It can be used to add custom listeners to buttons, make some elaborations, etc..

The syntax is the following:

postFillForm( ctx, dialog );

Table 2. Method information
Method	`postFillForm`
Parameter	`{object} ctx` - The context object. See Context Object (ctx parameter) for further information.
Parameter	`{DOM object} dialog` - The DOM reference to the dialog
Returns	`undefined`

Example

// options object...
{
    postFillForm: function( ctx, dialog ) {
        var $dialog = $(dialog);

        var _teams = ctx.getTeams();
        var teamHtml = _.map( _teams, function(t) {
            return '<option>' + t.name + '</option>';
        });
        $dialog.find('[data-field-type="team"]').html( _.map() );
        $('.my-custom-button', dialog ).on('click', function() {
            // do something here
        });
    }
}

getCreationInfo

Method called when the user clicks on the "Create" button. In this method, the dialog should return a JSON object with all the information necessary to call the REST api /object/create.

This will be called in the following circumstances:

showCreateButton set to true and dialogType either full or contained and user clicks on the create Button

The syntax is the following:

getCreationInfo( ctx, dialog, callback );

Table 3. Method information
Method	`getCreationInfo`
Parameter	`{object} ctx` - The context object. See Context Object (ctx parameter) for further information.
Parameter	`{DOM object} dialog` - The DOM reference to the dialog
Parameter	`{Function} callback` - The function to be called with the JSON object for the /object/create REST API
Returns	`undefined`

Example

// options object...
{
    getCreationInfo: function( ctx, dialog, callback ) {
        var $dialog = $(dialog);
        var team = $dialog.find('[data-field-type="team"]').val();
        // ...
        callback({
            team: team,
            channel: channel,
            // ...
        })
    }
}

onCreate

Method called when the user clicks on the "Create" button and the getCreationInfo method is not defined. In this method, the dialog should return a JSON object with the information of the created content.

This will be called in the following circumstances:

showCreateButton set to true and dialogType either full or contained and user clicks on the create Button

The syntax is the following:

onCreate( ctx, dialog, callback );

Table 4. Method information
Method	`onCreate`
Parameter	`{object} ctx` - The context object. See Context Object (ctx parameter) for further information.
Parameter	`{DOM object} dialog` - The DOM reference to the dialog
Parameter	`{Function} callback` - The function to be called with the JSON object with the information of the created content
Returns	`undefined`

Example

// options object...
{
    onCreate: function( ctx, dialog, callback ) {
        var $dialog = $(dialog);
        var team = $dialog.find('[data-field-type="team"]').val();
        // ...
        callback({
            id: content.id,
            name: content.name,
            // ...
        })
    }
}

Template custom dialog configuration

The template custom dialog overrides the template / shape choice panel inside the standard "New Content" dialog of Swing. Inside the dialog, it is possible to use the Context Object to retrieve important information or use a set of APIs to interact with the creation dialog (see below). See Context Object (ctx parameter) for further information on CTX object.

Starting from version 5.2020.09 the new content creation dialog system has been renewed and redesigned in React with a modern, responsive UI. Due to this change, legacy template dialog customisations won’t work anymore. Template custom dialog is still supported but a refactoring of existing customization is required.

Template configuration object example

{
  // ...
  dialogType: "template",
  template: "mycustomnewcontent.html",
  createContent: function ({inputs, formData, dataConfig, callbacks}) {},
  renderTemplate: function ({loading, error, templates, ctx, dataConfig, callbacks}) {},
  renderShape: function ({loading, error, shapes, ctx, dataConfig, callbacks}) {},
  // ...
}

Configuration properties

dialogType

[Mandatory] {String} Set to "template" for template custom dialog configuration

template

[Mandatory] {String} defines the template of the dialog. The template is placed under the following path:

{SWING}/config/templates/newcontent/

The template is an HTML file, and there is maximum liberty in its content.

createContent

[Optional] {Function} If defined, the process to create the content is completely customizable. This function is called on "Submit" button press. If this function is not defined the content is created using the default dialog creation flow.

Table 5. Parameters
Name	Type	Description
`inputs`	{Object}	Contains the full data set for the inputs controllers (teams, channels, editions, inserts, workfolders, …)
`formData`	{Object}	Contains the data currently set by the user or programmatically using the `setFormData`api
`dataConfig`	{Object}	Contains the full data set about configurations
`callbacks`	{Object}	Contains a set of functions api to comunicate with the dialog. See the following table for details

Table 6. callbacks object fields api
Name	Description	Parameters
`setError`	Set an error status for the dialog, It’s possible set an error status for a particular component or display an error alert to the user	{String or Object} A string to display an error alert or an object {input, message} to set an input field in status error
`resetErrors`	Clear the error status for the dialog
`setLoading`	Set\unset the dialog in a loading status	{Boolean} Loading status
`close`	Close the dialog

renderTemplate

{Function} renderTemplate is called multiple times: whenever the dialog is loading data (with loading parameter true), when there is an error (with error parameter defined) or when templates data has been retrieved (loading false, error undefined, templates array filled).

Table 7. Parameters
Name	Type	Description
`loading`	{Boolean}	True if the dialog is in loading state to retrieve the templates
`error`	{String}	If an error occured contains the error otherwise will be `undefined`.
`templates`	{Array}	Contains the retrieved set of templates based on dialog form inputs.
`ctx`	{Object}	The CTX object
`dataConfig`	{Object}	as described above
`callbacks`	{Object}	Contains a set of functions api to comunicate with the dialog. See the following table for details

Table 8. callbacks object fields api
Name	Description	Parameters
`setTemplate`	Set the chosen template	{Object} template
`setError, resetErrors, setLoading`	as described above	as described above
`getFormData`	Retrieve the data set by the user. Reserved string paramater values are 'name', 'issueDate', 'team', 'edition', 'insert', 'channel', 'location', 'workfolder', 'template', 'shape', 'createTopicFrom', 'conflictResolutionMode', 'moderation', 'summary' or the custom data key stored using `setFormData`	{String} Form data key
`setFormData`	Store a custom data to be retrieved using `getFormData` function or from `formData` object	{String} Form data key, {Any} Form data value. Be carefully to not override the reserved key values listed in `getFormData`

renderShape

{Function} renderShape same behavior of the renderTemplate function but with shapes data. setShape function is provided in callbacks parameter to set the chosen shape.

Full example

The full customization example code can be found in {SWING}/config/templates/newcontent/ installation folder. See files newcontentTemplate(.js | .html | .css).

eidosmedia.webclient.extensions.newcontent.register(["story"], {
  dialogType: "template",
  template: "newcontent.html",

  // Optional. Define it only if you need to take control of create content process
  createContent: function ({ inputs, formData, dataConfig, callbacks }) {
    const { setError, resetErrors, setLoading, close } = callbacks;
    // ...
  },

  renderTemplate: function ({
    loading,
    error,
    templates,
    ctx,
    dataConfig,
    callbacks,
  }) {
    const {
      setTemplate,
      setError,
      resetErrors,
      setLoading,
      getFormData,
      setFormData,
    } = callbacks;
    // ...
  },

  renderShape: function ({
    loading,
    error,
    shapes,
    ctx,
    dataConfig,
    callbacks,
  }) {
    const { setShape } = callbacks;
    // ...
  },
});

Tab custom dialog configuration

Using tab custom dialog configuration is possible to add one or more custom tabs inside the standard "New Content" dialog of Swing along with the standard Template and Shape tabs. Inside the tabs you can use the Context Object to retrieve important information or use a set of APIs to interact with the creation dialog (see below). See Context Object (ctx parameter) for further information on CTX object.

Tab configuration object example (2 tabs)

{
  // ...
  dialogType: "tab",
  title: { tab1: "Title Tab", tab2: "Title Tab 2" }
  template: { tab1: "mycustomtab1.html", tab2: "mycustomtab2.html" },
  createContent: function ({inputs, formData, dataConfig, callbacks}) {},
  renderTab: {
    tab1: function ({ inputs, formData, ctx, dataConfig, callbacks }) {},
    tab2: function ({ inputs, formData, ctx, dataConfig, callbacks }) {}
  }
}

Please note that title, template and renderTab are objects having keys tab1, tab2. These keys are used to indentify a specific tab setup. Any string can be used execept the reserved strings template and shape.

Configuration properties

dialogType

[Mandatory] {String} Set to "tab" for tab custom dialog configuration

title

[Mandatory] {Object} defines the title for the custom tabs.

template

[Mandatory] {Object} defines the template for the custom tabs. The templates are placed under the following path:

{SWING}/config/templates/newcontent/

The template is an HTML file, and there is maximum liberty in its content.

createContent

Table 9. Parameters
Name	Type	Description
`inputs`	{Object}	Contains the full data set for the inputs controllers (teams, channels, editions, inserts, workfolders, …)
`formData`	{Object}	Contains the data currently set by the user or programmatically using the `setFormData`api
`dataConfig`	{Object}	Contains the full data set about configurations
`callbacks`	{Object}	Contains a set of functions api to comunicate with the dialog. See the following table for details

Table 10. callbacks object fields api
Name	Description	Parameters
`setError`	Set an error status for the dialog, It’s possible set an error status for a particular component or display an error alert to the user	{String or Object} A string to display an error alert or an object {input, message} to set an input field in status error
`resetErrors`	Clear the error status for the dialog
`setLoading`	Set\unset the dialog in a loading status	{Boolean} Loading status
`close`	Close the dialog

renderTab

{Function} renderTab can be called multiple times: at tab opening, whenever the dialog is loading data (with loading parameter true), when there is an error (with error parameter defined) or when input data changes.

Table 11. Parameters
Name	Type	Description
`inputs`	{Object}	Contains the full data set for the inputs controllers (teams, channels, editions, inserts, workfolders, …)
`formData`	{Object}	Contains the data currently set by the user or programmatically using the `setFormData`api
`ctx`	{Object}	The CTX object
`dataConfig`	{Object}	as described above
`callbacks`	{Object}	Contains a set of functions api to comunicate with the dialog. See the following table for details

Table 12. callbacks object fields api
Name	Description	Parameters
`setTemplate`	Set the chosen template	{Object} template
`setError, resetErrors, setLoading`	as described above	as described above
`getFormData`	Retrieve the data set by the user. Reserved string paramater values are 'name', 'issueDate', 'team', 'edition', 'insert', 'channel', 'location', 'workfolder', 'template', 'shape', 'createTopicFrom', 'conflictResolutionMode', 'moderation', 'summary' or the custom data key stored using `setFormData`	{String} Form data key
`setFormData`	Store a custom data to be retrieved using `getFormData` function or from `formData` object	{String} Form data key, {Any} Form data value. Be carefully to not override the reserved key values listed in `getFormData`

Full example

The full customization example code can be found in {SWING}/config/templates/newcontent/ installation folder. See files newcontentTab(.js | .html | .css).

eidosmedia.webclient.extensions.newcontent.register(["story"], {
  template: { tab1: 'newcontenttab.html', tab2: 'newcontenttab2.html' },
  title: { tab1: 'My first custom tab', tab2: 'Custom Shape' },
  dialogType: 'tab',

  // Optional. Define it only if you need to take control of create content process
  createContent: function ({ inputs, formData, dataConfig, callbacks }) {
    const { setError, resetErrors, setLoading, close } = callbacks;
    // ...
  },

  renderTab: {
      tab1: function({ inputs, formData, ctx, dataConfig, callbacks }) {
        const { setTemplate, setError, resetErrors, setLoading, getFormData, setFormData } = callbacks;
      },
      tab1: function({ inputs, formData, ctx, dataConfig, callbacks }) {}
  }

});

HTML Template

Swing provides a sample template inside the following folder.

{SWING}/config/templates/newcontent/

Please use it as a reference. In general, no restriction is given to the HTML code.

Context Object (ctx parameter)

Inside the different methods in the New Content Dialog configuration, the Context Object is available. See Context object documentation for reference.

Furthermore, the New Content Dialog context object has several specific methods available.

getTemplates

Return the list of templates, given some options. See the example for all the options available.

Syntax

ctx.getTemplates( options, callback );

Parameters

Table 13. Parameters
Name	Type	Required	Description
`options`	{Object}	Required	A set of options to retrieve the templates. See the example for all the options available.
`callback`	{Function}	Required	A callback function. See Callback definition for further information.

Returns

Table 14. Parameters
Name	Type	Description
`data`	{Array}	An array with a list of templates

Example

{
    // ...
    postFillForm: function(ctx, dialog, extraInfo) {

        var options = {
            workfolder: '/Globe/Art', // MANDATORY
            type: 'topic' // optional, the template type for filtering.
            // Could be "story", "gallery", "prs", "pkg"
        }

        // Synchronous way...
        try {
            var templates = ctx.getTemplates(options);
        } catch(ex) {
            // manage error here
        }

        // Better way...
        ctx.getTemplates(options, function(err, data) {
            var $dialog = $(dialog);
            if (err) {
                $dialog.find('.error-message').html(err.message).show();
                return;
            }
            // data is an array of templates...
            /* Like this:

            [
              {
                "id": "199$1.0.21025653",
                "name": "bio",
                "type": "EOM::Story",
                "contentType": "story",
                "path": "/SysConfig/Globe/Templates/bio.xml",
                "isDefault": false,
                "dir": "/SysConfig/Globe/Templates",
                "system_attributes": {
                  "workfolder": "",
                  "templateName": "",
                  "summary": "",
                  "wordCount": "",
                  "sugCategory": "",
                  "channel": "",
                  "edition": "",
                  "storyType": "",
                  "productInfo": {
                    "name": "",
                    "issueDate": ""
                  }
                }
              }, ...
            ]
            */
        });
    }
    // ...
}

Note

The method can also be called synchronously, but this usage is not recommended.

getChannels

Return the list of channels, given some options. See the example for all the options available.

Syntax

ctx.getChannels( options, callback );

Parameters

Table 15. Parameters
Name	Type	Required	Description
`options`	{Object}	Required	A set of options to retrieve the channels. See the example for all the options available.
`callback`	{Function}	Required	A callback function. See Callback definition for further information.

Returns

Table 16. Parameters
Name	Type	Description
`data`	{Array}	An array with a list of channels

Example

{
    // ...
    postFillForm: function(ctx, dialog, extraInfo) {

        var options = {
            showTemplates: truem
            showInserts: true,
            showCalendar: true
        }

        // Synchronous way...
        try {
            var channels = ctx.getChannels(options);
        } catch(ex) {
            // manage error here
        }

        // Better way...
        ctx.getChannels(options, function(err, data) {
            var $dialog = $(dialog);
            if (err) {
                $dialog.find('.error-message').html(err.message).show();
                return;
            }
            // data is an array of channels...
            /* Like this:

            [
                  {
                    "id": "199$0",
                    "name": "Globe-Print",
                    "displayName": "Globe-Print",
                    "type": "print",
                    "isDefault": false,
                    "editions": [
                      {
                        "name": "EUROPE",
                        "_default": false
                      },
                      {
                        "name": "USA",
                        "_default": false
                      },
                      {
                        "name": "ASIA",
                        "_default": false
                      }
                    ],
                    "inserts": [
                      "Insert One",
                      "Insert Two"
                    ],
                    "calendar": {
                      //...
                    },
                    "cobaltSite": false
                  }
                ]
            */
        });
    }
    // ...
}

Note

The method can also be called synchronously, but this usage is not recommended.

getTeams

Return the list of teams, given some options. See the example for all the options available.

Syntax

ctx.getTeams( options, callback );

Parameters

Table 17. Parameters
Name	Type	Required	Description
`options`	{Object}	Required	A set of options to retrieve the teams. See the example for all the options available.
`callback`	{Function}	Required	A callback function. See Callback definition for further information.

Returns

Table 18. Parameters
Name	Type	Description
`data`	{Array}	An array with a list of basefolders

Example

{
    // ...
    postFillForm: function(ctx, dialog, extraInfo) {

        var options = {
            showChannels: truem
        }

        // Synchronous way...
        try {
            var teams = ctx.getTeams(options);
        } catch(ex) {
            // manage error here
        }

        // Better way...
        ctx.getTeams(options, function(err, data) {
            var $dialog = $(dialog);
            if (err) {
                $dialog.find('.error-message').html(err.message).show();
                return;
            }
            // data is an array of teams...
        });
    }
    // ...
}

Note

The method can also be called synchronously, but this usage is not recommended.

getWorkfolders

Return the list of workfolders, given some options. See the example for all the options available.

Syntax

ctx.getWorkfolders( options, callback );

Parameters

Table 19. Parameters
Name	Type	Required	Description
`options`	{Object}	Required	A set of options to retrieve the workfolders. See the example for all the options available.
`callback`	{Function}	Required	A callback function. See Callback definition for further information.

Returns

Table 20. Parameters
Name	Type	Description
`data`	{Array}	An array with a list of workfolders

Example

{
    // ...
    postFillForm: function(ctx, dialog, extraInfo) {

        var options = {
            team: 'Globe_Team', // one of them is necessary, according to your requirements
            contentType: 'story'
        }

        // Synchronous way...
        try {
            var workfolders = ctx.getWorkfolders(options);
        } catch(ex) {
            // manage error here
        }

        // getBaseFolder way...
        ctx.getWorkfolders(options, function(err, data) {
            var $dialog = $(dialog);
            if (err) {
                $dialog.find('.error-message').html(err.message).show();
                return;
            }
            // data is an array of workfolders...
        });
    }
    // ...
}

Note

The method can also be called synchronously, but this usage is not recommended.

getSelectedOptions

Return the data info related to the selected topic item.

Syntax

ctx.getSelectedOptions();

Returns

Table 21. Parameters
Name	Type	Description
`data`	{Object}	A JSON object with topic item properties

Example

{
    // ...
    postFillForm: function(ctx, dialog, extraInfo) {

        const options = ctx.getSelectedOptions();

       /* options like this:

           {
               channel: "Globe-Web/English",
               edition: "English",
               issueDate: "20200901",               name: "USA 2020 Elections.xml",
               workfolder: "/Globe/Politics"
           }
        */
    }
    // ...
}

createDocument

Create a new document with the options passed. The newly created document is automatically opened.

Syntax

ctx.createDocument( options, callback );

Parameters

Table 22. Parameters
Name	Type	Required	Description
`options`	{Object}	Required	A set of options to create the document. See the details in the box belox.
`callback`	{Function}	Required	A callback function. See Callback definition for further information.

Returns

Table 23. Parameters
Name	Type	Description
`Object`	{Object class}	An instance of the Object Class. See [objectclass] for further information on the methods available.

Options

The request to the createDocument method is a JSON with the following properties:

name: the file name. It must end with .xml for stories or .pkg for topics.
template: the path of the source template. It is mandatory
team: the base team
channel: the document channel
insert: the information on inserts
edition: the edition
issueDate: if available, the issueDate in the format YYYYMMDD.
workfolder: the workfolder of the document
path: the document path
workStatus: optional to specify the status of the document. The workStatus must be a valid status, reachable from the initial status in which the document is created.
attributes: optional to specify the metadata of the document
newObjOption: a number describing the behaviour in case of files with the same name. Values are the following:
- 0 - An error is thrown
- 1 - The new file is automatically renamed
- 2 - The file is replaced
- 3 - A new version is created

Example

{
    // ...
    postFillForm: function(ctx, dialog, extraInfo) {
        var _ctx = ctx;
        // With your custom button...

        $(dialog).on('click', '.create-button', function(event) {
            var request = {
                "name": "TestCreateCustom2.xml",
                "template": "/SysConfig/Globe/Templates/story-external.xml",
                "team": "Globe_Team",
                "channel": "Globe-Print",
                "insert": "Insert One",
                "attributes": "<test>true</test>",
                "workStatus": "NewsFlow/Editing",
                "edition": "EUROPE",
                "issueDate": "20170713",
                "workfolder": "/Globe/Art",
                "newObjOption": 2,
                "path": "workfolder:///Globe/Art"
            };
            ctx.createDocument(request, function(err, Obj) {
                if (err) {
                    ctx.showError(err);
                    return;
                }

                // The document is automatically opened
                // But I can still retrieve its info
                var newId = Obj.getId()

            });
        });
    // ...
}

Note

The method cannot be called synchronously.

createTopic

Create a new topic with the structure passed. Please refer to the REST API documentation for further info: Topic Creation documentation. Please notice that in this case the document is NOT opened.

Syntax

ctx.createTopic( options, callback );

Parameters

Table 24. Parameters
Name	Type	Required	Description
`options`	{Object}	Required	A set of options to create the document. See the details in the box belox.
`callback`	{Function}	Required	A callback function. See Callback definition for further information.

Returns

Table 25. Parameters
Name	Type	Description
`Object`	{Object class}	An instance of the Object Class. See [objectclass] for further information on the methods available.

Example

{
    // ...
    postFillForm: function(ctx, dialog, extraInfo) {
        var _ctx = ctx;
        // With your custom button...

        $(dialog).on('click', '.create-button', function(event) {
            var request = {
            "containerType":"TOPIC",
            "source":"",
            "attributes": "<test>true</test>",
            "workStatus": "NewsFlow/Editing",
            "path":"/TestTopicPlan/Topic",
            "name":"I giochi a Rio",
            "description":"I Giochi della XXXI...",
            "correlates" : [ { "containerType": "CORRELATES", "source" : "loid:9$2.0.798314409", "correlationType": "RELATED_IMAGE" }],
            "children":[
                {
                    "containerType":"TOPICITEM",
                    "name":"La città di Rio De Janero",
                    "dueDate":"20160501",
                    "size":"2 colonne",
                    "channel":"Globe-Web",
                    "author":"Mario Rossi",
                    "comment":"This is a topic item comment",
                    "priority":"TASK_PRIORITY_NORMAL",
                    "content":"picture",
                    "workFolder":"/Globe/Sport",
                    "assignment":"test,prova1",
                    "asset":"",
                    "correlates" : [ { "containerType": "CORRELATES", "source" : "loid:9$2.0.798137329", "correlationType": "RELATED_IMAGE" }],
                    "children":[
                        {
                            "containerType":"TOPICSUBITEM",
                            "name":"Rio - Foto",
                            "dueDate":"20160501",
                            "size":"2 colonne",
                            "channel":"Globe-Web",
                            "author":"Mario Rossi",
                            "comment":"This is a sub topic item comment",
                            "priority":"TASK_PRIORITY_LOW",
                            "content":"PICTURE",
                            "workFolder":"/Globe/Sport",
                            "assignment":"test,prova1",
                            "asset":{
                                "source":"loid:9$2.0.795001757"
                            }
                        },
                        {
                            "containerType":"DIVIDER",
                            "source":"",
                            "name":"SUBITEM DIVIDER",
                            "font":{
                                "bold":true,
                                "color":"2558080",
                                "faceName":"Tahoma",
                                "italic":"false",
                                "lineThrough":"false",
                                "size":"14",
                                "underline":"true"
                            }
                        },
                        {
                            "containerType":"TOPICSUBITEM",
                            "name":"Rio - Foto",
                            "dueDate":"20160501",
                            "size":"2 colonne",
                            "channel":"Globe-Web",
                            "author":"Mario Rossi",
                            "comment":"This is a sub topic item comment",
                            "priority":"TASK_PRIORITY_LOW",
                            "content":"PICTURE",
                            "workFolder":"/Globe/Sport",
                            "assignment":"test,prova1",
                            "asset":{
                                "source":"loid:9$2.0.795001794"
                            }
                        }
                    ]
                },
                {
                    "containerType":"DIVIDER",
                    "source":"",
                    "name":"SUBTOPIC DIVIDER",
                    "font":{
                        "bold":true,
                        "color":"000000",
                        "faceName":"Tahoma",
                        "italic":"false",
                        "lineThrough":"false",
                        "size":"14",
                        "underline":"true"
                    }
                },
                {
                    "containerType":"TOPICITEM",
                    "name":"Le zone dei giochi",
                    "dueDate":"20160501",
                    "size":"2 colonne",
                    "channel":"Globe-Web",
                    "author":"Mario Rossi",
                    "comment":"This is a topic item comment",
                    "priority":"TASK_PRIORITY_NORMAL",
                    "content":"picture",
                    "workFolder":"/Globe/Sport",
                    "assignment":"test,prova1",
                    "asset":"",
                    "children": []
                }
            ]
        };
            ctx.createTopic(request, function(err, Obj) {
                if (err) {
                    ctx.showError(err);
                    return;
                }

                // The document is automatically opened
                // But I can still retrieve its info
                var newId = Obj.getId()

            });
        });
    // ...
}

Note

The method cannot be called synchronously.

Callback definition

The callback parameter, when specified, is always defined as follows:

// Callback definition
function( err, response ) {
    // This is the "Node.js" callback style.
    // It forces the developer to manage the errors.

    if (err) {
        // Do something...
        return;
    }

    // Real implementation here

}

Obtain a usable Context Object

For several reason, it could be necessary to use the Swing Context Object. In an iframed custom template, the only way to obtain it is to call

window.top.eidosmedia.webclient.app.getCurrentDocumentContext()

which returns an available CTX. Please refer to Context object documentation for further reference.

How to configure custom dialog in external folder

Additional objects may be made available to Swing application by defining one or more nested components in Swing web context in server.xml. (for further details on Tomcat 9.x Resources configuration, please refer to Resources configuration).

This is an example of the external custom panels configuration.

<Context docBase="com.eidosmedia.webclient.web-app"
    path="/swing" reloadable="false">
    <Resources
        className="org.apache.catalina.webresources.StandardRoot">
        <PreResources
            className="org.apache.catalina.webresources.DirResourceSet"
            base="/methode/meth01/extension/newcontent" readOnly="true"
            webAppMount="/config/templates/newcontent" />
    </Resources>
</Context>