Methode Swing allows to customize the filter used inside the Topics Calendar view

Configure a custom filter

Filters are made of an HTML template and a related JS file.

Default templates are put in the base folder

{SWING-APP}/config/templates/topiclist

Filters can be configured outside {SWING-APP}. See the paragraph How to configure topic filters in external folder for some tips in how to take advantage of this new configuration option.

Topic List Templates are based on the same algorithm of Swing Custom Search Filter, with few minor differences, listed below. Please refer to the Custom search filter documentation for a detailed explanation of the filter inner workings.

Configure the JS file

To add a filter, the JS should be structured as follows.

eidosmedia.webclient.topicList.addFilter( options );

In detail, the options are:

eidosmedia.webclient.topicList.addFilter({
    // @property "template": {string} - the path to the filter template. Path is relative to the 'config/topiclist/' folder.
    // @required
    template: 'topiclistfilter.html',

    /**
     * Function called after loading the template, but BEFORE loading the filter
     * use it to add listeners.
     * @param {ContextObject}
     * @param {Object} options - the a list of options.
     * Please see below for the list of options.
     */
    onLoad: function( ctx, options ) {

    },

    /**
     * Function called after having executed the query.
     * @param {ContextObject}
     * @param {Object} - filterConditions: an object containing all the conditions obtained from the query
     * @param {Array} results - the results of the query
     * @param {Function} callback - the option to call after processing the result.
     * Please see below for the list of options.
     */
    processResults: function( ctx, filterConditions, results, callback ) {
       /*
        Here it is possible to process results,
        elaborate the custom conditions, etc.
        */
    }
});

Each parameter is detailed below.

template

This property defines the template for the filter.

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

The path of the template starts from the topiclist/ folder.

onLoad

onLoad is a function called when the filter is loaded for the first time. This function is called AFTER the DOM has been filled, so that all the DOM elements of the filter are available. It can be used to add custom listeners for events.

It is called with 2 parameters:

  • ctx: the Context Object. See Context Object documentation for further details. In this case, though, the context object has neither activeObject nor selection, and only contains information on the Swing area.

  • options. It is a Javascript Object with a few properties. See code below for further details.

{
    options: {
        panel: DOMObject, // the DOM reference to the filter container
        data: {
            groups: [], // Array of groups
            topicListCfg: {}, // Topic list configuration as set in Swing main configuration,
            userChannels: [], // Array of channels for the user
            channels: [], // List of all the available channels
            workflows: [], // List of all the workflow steps available
        }
    }
}
{
    onLoad: function( ctx, options ) {
        var $panel = $(options.panel);
        // Put your code here...
    }
}

Return value of the function is not important.

processResults

The processResults function is called whenever the filter is executed. It is possible to elaborate the results as preferred.

It is called with a few parameters:

( ctx, filterConditions, results, callback )

  • ctx: the Context Object. See Context Object documentation for further details. In this case, though, the context object has neither activeObj nor selection, and only contains information on the Swing area.

  • filterConditions: a list of all the conditions set in the filter. It is an array of all the data-xvalue and data-custom-xvalue available in the filter.

  • results: the list of results of the query

  • callback: the callback to be called with the processed results

{
    // An example used to filter for "Standing Objects"
    processResults: function( ctx, filterConditions, results, callback ) {
        // console.log( filterConditions );
        var ownerTeamFilter = _.findWhere(filterConditions, { conditionKeyword: 'ownerteam' });
        if (ownerTeamFilter && ownerTeamFilter.conditionValue) {
            ownerTeamFilter = ownerTeamFilter.conditionValue.split(',');
            if (ownerTeamFilter.length) {
                var _groups = _.filter(ownerTeamFilter, function( tp ) { return tp.indexOf('-GROUP') > -1; });
                _groups = _.map( _groups, function( gp ) { return gp.replace('-GROUP', ''); } )
                results = _.filter( results, function(tp) {
                    if ( tp.virtual_attributes_json && tp.virtual_attributes_json.va && tp.virtual_attributes_json.va.oteam ) {
                        return _groups.indexOf( tp.virtual_attributes_json.va.oteam ) > -1;
                    }
                    return false;
                });
            }
        }
        callback( results );
    }
}

Configure the HTML File

While creating the HTML, the same mechanism as the Search Filter creation can be used. Both filters share the same keywords, same attributes and operators.

Please refer to the HTML and Keywords reference in the Filter documentation for further information.

How to configure topic filters in external folder

Additional topic filters 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 filters 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/topicfilters" readOnly="true"
            webAppMount="/config/templates/topiclist" />
    </Resources>
</Context>