Targetprocess-mashup-helper NPM

targetprocess-mashup-helper

API wrapper for more convenient writing of Targetprocess mashups.

Installation

npm install targetprocess-mashup-helper

Usage

var helper = require('targetprocess-mashup-helper')

You can require separate modules to decrease package size

var customUnits = require('targetprocess-mashup-helper/lib/customUnits')

API

`.addBusListener`

Alias to .events.addBusListener.

`.addBusListenerOnce`

Alias to .events.addBusListenerOnce.

`.getAppConfigurator`

Alias to .configurator.getAppConfigurator.

`.events`

`.addBusListener(busName, eventName, listener, isOnce)`

Add listener to component bus by name.

helper.events.addBusListener('description', 'afterRender', function(e, renderData) {
    //...
});

`.addBusListenerOnce(busName, eventName, callback)`

Same as .addBusListener(busName, eventName, callback, true).

`.configurator`

`.getAppConfigurator() => Promise<Configurator>`

Get application configurator and returns its promise.

helper.configurator.getAppConfigurator().then(function(configurator) {
    // ...
});

`.customUnits`

`.types`

Hash of constants to configure entity types custom unit is applied to.

`.sizes`

Hash of constants to configure card sizes custom unit is applied to.

`.add(config) => Promise`

Add custom unit to registry, make it allowed to add to card.

Config:

id (string) unit unique id.
name (string) name in library.
outerClassName (string | function) class name of unit wrapper for best styling.
template (object | string) template config, will be used as template.markup if string.
- markup (string) unit output in jqote format. Has access to unit data as this.data. E.g. <div class="tau-board-unit__value"><%= this.data.value %></div>. Wrap template with class to get quick output tau-board-unit__value.
- customFunctions (object) map of functions, which will be accessible inside template as <%= fn.someCustomFunction() %>.
model (object | string) data config, maps result of select query to data. E.g: {title: "title"}, result data will be {title: <title of entity>}
sampleData (object | string) sample data will be passed to unit template when using in library
types (array) list of entity types of cards, where unit accessible, all types by default. Use customUnits.types as values.
sizes (array) list of card sizes where unit is accessible, all sizes by default. Use customUnits.sizes as values.
priority (number) order of custom unit in customize card tab (more is closer to an end, can use negative).
hideIf (function) check if unit will be hide entirely from card, e.g. if there is no data.
isEditable (boolean | function) check if unit is editable
editorComponentName (string | function) name of editor component
editorData (object | function) transform unit data to editor data, by default pass unit data as is.

Examples

Simple static unit

helper.customUnits.add({
    id: 'good_field',
    name: 'Good Field',
    template: '<div class="tau-board-unit__value"><%= this.data.value %></div>',
    model: {
        value: '"Hello there"'
    },
    sampleData: {
        value: '"Hello from library"'    
    }
});

Unit outputs entity state name on small cards for bugs and user stories

helper.customUnits.add({
    id: 'my_entity_state',
    name: 'My Entity State',
    template: '<div class="tau-board-unit__value"><%= this.data.entityState.id %> <%= this.data.entityState.name %></div>',
    model: {
        entityState: 'entityState'
    },
    sampleData: {
        entityState: {
            id: 12,
            name: 'In Progress'
        }
    },
    sizes: [cu.sizes.S],
    types: [cu.types.STORY, cu.types.BUG]

});

Unit outputs and allow to edit custom field with name 'ESPN'

helper.customUnits.add({
    id: 'espn_custom_field',
    name: 'ESPN',
    template: '<div class="tau-board-unit__value">ESPN: <%= this.data.customField.value %></div>',
    hideIf: function(data) {
        return !data.customField;
    },
    model: {
        customField: 'CustomValues.Get("ESPN")'
    },
    sampleData: {
        customField: {
            value: '231231224'
        }
    },
    isEditable: true,
    editorComponentName: 'customField.text.editor',
    editorData: function(data) {
        return {
            cf: data.customField
        };
    }
});

`.debug`

`.showComponentsNames()`

Add attribute data-component-name to component top DOM element for better debugging or using inside .addBusListener function.

`.logBus(predicate, logger)`

Output events and data of particular buses. predicate can be a string -- name or id of bus (can be found after call of debug.showComponentsNames()), function (bus, eventName, data) or if is ommitted, all events of all buses will be logged. logger is a function of (busName, eventName, data), it writes to console.log. by default.