Get Ext JS ready to render tasklist

This endpoint provides the frontend tasklist Extjs which is ready to be rendered in any frontend application.

Request

URL: /task/tasklist

Method: GET

Authorization: required

GET /ibis/rest/task/tasklist HTTP/1.1
Accept: application/xml
Host: localhost:8080

Request Query Parameters

Name Description Required Allowed values

portal

A string value to indicate that the portal has to work independently without Process user configuration.

no

E.g.: bpc

includeCss

Default value is true. It sets default theme available with inubit. To use custom themes, value should be set to false.

no

true or false

includeScript

Default value is true. It includes default scripts available with inubit.

no

true or false

Request Headers

Name Description Required Allowed values

portalUrl

The context path of the portal, which will used for further communication from front-end to the INUBIT server.

yes

Url string

actionUrl

The url that needs to be called for submit action

yes

Url string

Response

HTTP/1.1 200 OK
Content-Type: application/xml

<!DOCTYPE html>
<html lang="en">
    <head>
        <div id="includeCssForTasklist">
            <link rel="stylesheet" type="text/css"
          href="/FormProxyServlet?url=inubitrepository:///Global/System/Widgets/resources/theme-classic-all.css"/>
            <link rel="stylesheet" type="text/css"
          href="/FormProxyServlet?url=inubitrepository:///Global/System/Widgets/resources/theme-classic-all_1.css"/>
            <link rel="stylesheet" type="text/css"
          href="/FormProxyServlet?url=inubitrepository:///Global/System/Widgets/resources/theme-classic-all_2.css"/>
        </div>
        <div id="test"></div>
        <div id="includeScriptForTasklist">
            <script type="text/javascript"
            src="/FormProxyServlet?url=inubitrepository:///Global/System/Widgets/resources/Script.js"></script>
            <script type="text/javascript"
            src="/FormProxyServlet?url=inubitrepository:///Global/System/Widgets/resources/AjaxScript.js"></script>
            <script type="text/javascript"
            src="/FormProxyServlet?url=inubitrepository:///Global/System/Widgets/resources/jquery-3.5.1.js"></script>
        </div>
        <script>Ext.require([
        'Ext.data.*',
        'Ext.grid.*',
        'Ext.util.*',
        'Ext.toolbar.Paging',
        'Ext.tip.QuickTipManager'
    ]);

    Ext.onReady(function () {
        Ext.define('Tasks', {
            extend: 'Ext.data.Model',
            proxy: {
                type: 'ajax',
                reader: 'xml'
            },
            fields: [

                // {name:'Task-ID', mapping: '@id' },
                {name: 'formName', mapping: '@id'},
                'Name', 'Description',
                {
                    name: 'creation',
                    type: 'date',
                    mapping: '@creation',
                    convertOnSet: false,
                    dateFormat: 'd.m.Y H:i:s',
                    convert: function (v, record) {
                        return Ext.Date.parseDate(parseInt(v / 1000), 'U');
                    }
                },
                {
                    name: 'expiration',
                    type: 'date',
                    mapping: '@expiration',
                    convertOnSet: false,
                    dateFormat: 'd.m.Y H:i:s',
                    convert: function (v, record) {
                        return Ext.Date.parseDate(parseInt(v / 1000), 'U');
                    }
                },
                {name: 'action', mapping: '@action'},
                {name: 'locked', mapping: '@locked'}
            ]
        });

        // create the Data Store
        var taskstore = Ext.create('Ext.data.Store', {
            storeId: 'taskstore',
            model: 'Tasks',
            autoLoad: true,
            sorters: [{direction: 'DESC', property: 'creation'}],
            proxy: {
                autoload: true,
                type: 'ajax',

                url: "/servlet/tasks",

                reader: {
                    type: 'xml',
                    // records will have an "Item" tag
                    record: 'Task',
                    rootProperty: 'Tasklist',
                    headers: {'Accept': 'text/xml'},
                    idProperty: 'ASIN',
                    totalRecords: '@total'
                },
                simpleSortMode: true,
            },
            listeners: {
                'load': function (t, records, options) {
                    isGridLoaded = true;
                    // _tasklist_tasklist_isp_WAR_isp_tlextsetIntervalIS();

                    // _tasklist_tasklist_isp_WAR_isp_tlextstoreMasterExtJsIS.load();


                    if ((typeof nextTaskId !== 'undefined') && nextTaskId != "") {
                        openTaskWindow(nextTaskId, "Form", "");
                        nextTaskId = '';
                    }
                }
            }
        });

        action = function (v, p, r, rIdx, CIdx) {
            var s;
            s = '
            <span>
                <img style="margin-left: 3px; height: 10px" src="http://localhost:8000/ibis/servlet/Repository/Global/System/Widgets/resources/images/grid/hmenu-unlock.gif">
                </span>';
            return s;
        },
            renderTasks = function (v, p, r, rIdx, cIdx) {
                var lockedtask = 'false';
                var taskId = r.data.formName;
                if (!!v) {
                    var s = '';
                    var color = '';
                    if (80 > 0 && ((new Date().getTime() - r.data.creation.getTime()) * 100 / (r.data.expiration.getTime() - r.data.creation.getTime()) > 80)) {
                        color = 'color:firebrick;';
                    }
                    var locked = false;
                    if (r.data.locked) {
                        s = Ext.String.format('
                <span style="color:#cccccc;"/>', r.data.locked);
                        locked = true;
                        locked = true;
                    }
                    if (cIdx == 0) {
                        s = s + v;
                        if (locked) {
                            s += ' (' + r.data.locked + ')';
                        }

                        var lockTitle = locked ? 'Release/unlock' : 'Accept/lock';
                        var lockIcon = locked ? 'lock.gif' : 'unlock.gif';

                        s = s + Ext.String.format('
                <span  style="float:right;"onClick="callAndRefreshLockUnlock(`{0}`, {1})" title="{2} the task">
                    <img style="margin-left: 3px; height: 10px" src="http://localhost:8000/ibis/servlet/Repository/Global/System/Widgets/resources/images/grid/hmenu-{3}"/>
                </span>', taskId, !locked, lockTitle, lockIcon);

                    } else {
                        s = s + v + '
            </span>';
                    }
                    return s;
                }
            };

        callAndRefreshLockUnlock = function (taskId, isLocked) {
            var url = "/servlet/opentask-" + taskId + "?lockTask=" + isLocked;

            new Ext.data.Connection().request({
                url: url,
                method: 'PUT',
                failure: function (response, options) {
                    close();
                    if (response.status == 423) {
                        Ext.Msg.alert('Warning',
                            'Task is ' + (isLocked ? 'Unlocked' : 'Locked') + '.');
                    }
                } /* close the window on failure; e.g. if task ist locked */,
                success: function (response, options) {
                    Ext.getCmp('tasksGrid').getStore().load();
                }
            });
        };
        callAndRefresh = function (link, params) {
            new Ext.data.Connection().request({
                url: '/servlet/infoTask/opentask-' + link
                , method: 'PUT'
                , params: params
                , failure: function (response, options) {
                    close();
                    if (response.status == 423) {
                        Ext.Msg.alert('Warning',
                            'Task is locked.');
                    }
                } /* close the window on failure; e.g. if task ist locked */
                , success: function (response, options) {
                    Ext.getCmp('tasksGrid').getStore().load();
                }
            });
        };

        var autoRefreshGridData = {
            run: function() {
                Ext.getCmp('tasksGrid').getStore().load();
            },
            interval: 10000 // 10 seconds
        };
        Ext.util.TaskManager.start(autoRefreshGridData);

        // create the grid
        var tasksGrid = Ext.create('Ext.grid.Panel', {
            id: 'tasksGrid',
            store: taskstore,
            columns: [
                // {text: "Task-ID", width: 240, dataIndex: 'Task-ID'},
                {text: "Task", width: 225, dataIndex: 'Name', renderer: renderTasks},
                {text: "Description", width: 225, dataIndex: 'Description', renderer: renderTasks},
                {text: "Start", width: 300, dataIndex: 'creation', renderer: renderTasks},
                {text: "Expiration", width: 300, dataIndex: 'expiration', renderer: renderTasks}

            ],

            bbar: {
                xtype: 'pagingtoolbar',
                pageSize: 10,
                store: taskstore,
                displayInfo: true
            },
            listeners: {
                itemdblclick: function (dv, record, item, index, e) {
                    openTaskWindow(record.data.formName, record.data.action, record.data.Name);
                }
            },
        });

        Ext.define('Unit', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'type', mapping: '@type'},
                {name: 'name', mapping: '@name', type: 'string'},
                {name: 'tasks', mapping: '@tasks'}
            ]
        });

        var unitStore = Ext.create('Ext.data.Store', {
            storeId: unitStore,
            autoLoad: true,
            autoDestroy: true,
            model: 'Unit',
            sorters: [{
                property: 'name',
                direction: 'ASC'
            }],
            proxy: {
                type: 'ajax',
                autoload: true,

                url: '/servlet/units',

                reader: {
                    type: 'xml',
                    rootProperty: 'Units',
                    record: 'Unit',
                    idProperty: '@name',
                    totalRecords: '@total'
                },
                simpleSortMode: true,
            }
        });

        var renderUnits = function (v, p, r) {
            var value = "";
            if (!r.data.name) {
                value = value.concat('All units', " (", r.data.tasks, ")");
            } else {
                value = value.concat(r.data.name, " (", r.data.tasks, ")");
            }
            return value;
        };

        var unitsGrid = Ext.create('Ext.grid.Panel', {
            id: 'unitsGrid',
            hideHeaders: false,
            border: true,
            store: unitStore,
            width: 150,
            selectedRecords: null,
            emptyText: '',
            stateful: true,
            selType: 'rowmodel',
            selModel: {
                mode: 'MULTI'
            },
            columns: [{
                text: 'Unit',
                dataIndex: 'name',
                width: '100%',
                renderer: renderUnits,
                sortable: false,
                menuDisabled: true
            }],
            viewConfig: {
                loadMask: false
            },
        });

        Ext.create('Ext.panel.Panel', {
            border: false,
            bodyBorder: false,

            height: 400,

            renderTo: Ext.get("test"),
            width: 1200,
            layout: 'border',
            items: [{
                region: 'west',
                width: 150,
                height: 150,
                split: true,
                layout: 'fit',
                items: [unitsGrid]
            }, {
                region: 'center',
                layout: 'fit',
                items: [tasksGrid]
            }
            ]
        });

        var lastForm = '';
        var taskWindow = null;

        var closeTaskWindow = function () {
            lastForm = '';
            if (taskWindow != null)
                taskWindow.destroy();
        };
        //open tasks in window
        var openTaskWindow = function (formName, action, taskName) {
            closeTaskWindow();
            lastForm = formName;
            if (action == 'Info') {
                Ext.MessageBox.confirm('Info', 'Submit?', function (btn) {
                    if (btn == 'yes') {
                        callAndRefresh(formName);
                        lastForm = '';
                    }
                });
            } else {
                var url = "/servlet/opentask-" + formName;
                url += "?submitUrl=";
                var actionUrl="";
                url += actionUrl + "%26formName%3D" + formName;
                taskWindow = Ext.create('Ext.window.Window', {
                    id: 'autoload-win',
                    closable: true,
                    width: Math.min(1150, ((self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) - 50)),
                    maximizable: true,
                    fireUnlock: true,
                    tasklistStore: taskstore,
                    modal: true,
                    form: formName,
                    padding: 10,
                    height: document.body.offsetHeight - 70,
                    title: taskName,
                    bodyStyle: 'background-color: white',
                    autoScroll: true,
                    constrain: false,
                    constrainHeader: true,
                    loader: {
                        method: 'POST',
                        autoLoad: true,
                        scripts: true,
                        url: url,
                        params: {'id': formName},
                        loadMask: true,
                        listeners: {
                            load: function (loader, response) {
                                var comp = taskWindow;
                                var autoloadWinHeight = comp.getHeight();
                                var viewportHeight = 0 + (self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight);
                                if (autoloadWinHeight > viewportHeight) {
                                    comp.setHeight((self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - 15);
                                }
                                if (comp.getPosition(false)[0]< 0) {
                                    comp.setPosition(comp.getPosition(false)[0], 5);
                                }
                                var autoloadWinWidth = comp.getWidth();
                                var viewportWidth = 0 + (self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
                                if (autoloadWinWidth > viewportWidth) {
                                    comp.setWidth((self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) - 15);
                                    comp.center();
                                }
                                isGridLoaded = true;
                            }
                        }
                    },
                    listeners: {
                        beforeshow: function () {
                            tasksHeadersBefore = jQuery('head > *');
                        }, close: function () {
                            if (window.tooltip) {
                                window.tooltip.destroy();
                            }
                            lastForm = '';
                            var headers = jQuery('head > *');
                            for (var k = 0; k < tasksHeadersBefore.length; k++) {
                                headers.splice(tasksHeadersBefore[k], 1);
                            }
                            headers.remove();
                            var panels = Ext.ComponentQuery.query('panel[id="MainPanel"]');
                            if (panels.length > 0) {
                                Ext.each(panels, function (panel) {
                                    panel.destroy();
                                });
                            }
                        }
                    }
                });
                taskWindow.show();
            }
        };
    });

        </script>
    </head>
</html>

Errors

Authorization Failed (401)

Authorization with the given username and password failed. Please revisit both values and provide valid credentials.

<html>

    <head>
        <title>Status page</title>
    </head>

    <body style="font-family: sans-serif;">
        <p style="font-size: 1.2em;font-weight: bold;margin: 1em 0px;">Unauthorized</p>
        <p>The request requires user authentication</p>
        <p>You can get technical details <a
                href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.4.2">here</a>.<br>
            Please continue your visit at our <a href="/">home page</a>.
        </p>
    </body>
</html>
Server Error (500)

Execution on the INUBIT server failed. Have a look into the response message, otherwise access to the INUBIT log is required to retrieve further information.

Service Unavailable (503)

In maintenance mode the INUBIT server endpoint will not respond to incoming requests but return this error response. Once the maintenance mode is switched off the endpoint will respond normally.