WebApp Customizations

[MaheshkumarSundaram]

Hi @ralphhanna,

Could you please advice on the below customizations in the webapp?

1. Is it possible to restrict or hide BPMN elements from the modelling canvas? For example, consider we are never going to use the elements "Intermediate message throw and catch"; so we would like to hide those elements from the modelling canvas to avoid confusion with users.

2. Is it possible to modify field types of the properties panel elements? For example, we know that the users should provide an delegate expression for service tasks. Suppose the user misspells the implementation name or leaves it empty, the engine would ignore that service while execution. To avoid this, I would like to make the field "Delegate Expression" as a Dropdown field instead of thee default text field, so that user can choose the service from a predefined list.

What do you think of implementing such customizations and the effort in doing so?

Thanks!

[ralphhanna]

1. Restrict BPMN element types from Modelling: Not in plan, and difficult to do.
2. Dropdown for service names, requires a bit of work, may be easier to provide raise exception and stop execution if service not found. Same would apply if any mismatch or script error, best option is just run the process in test environment to validate its correctness

[ralphhanna]

Keep in mind that there are several other errors that can happen:

• Invalid timer
• Invalid Message/Signal
• Invalid JavaScript Syntax
• JavaScript Errors

Also, changes to the underlying code can cause errors to the process, therefore, the best guard is to test the process:

Below is an example of test script using Mocha

Feature('Buy Used Car- clean and repair', () => {
    Scenario('Simple', () => {
        Given('Start Buy Used Car Process', async () => {
            response = await server.engine.start(name, { caseId: caseId });
            instanceId = response.id;
            console.log('**instanceId', response.id, instanceId);
            console.log(' after start ', response.data.caseId);
        });
        Then('check for output', () => {
            expect(response.data.caseId).equals(caseId);
            expect(getItem('task_Buy').status).equals('wait');
        });

        When('a process defintion is executed', async () => {

            const data = { needsCleaning: "Yes", needsRepairs: "Yes" };
            const query = {
                id: instanceId,
                "items.elementId": 'task_Buy'
            };
            console.log(query);
            response = await server.engine.invoke(query, data);
        });

        When('engine get', async () => {
            const query = { id: instanceId };

            response = await server.engine.get(query);

            expect(response.id).equals(instanceId);

        });


        Then('check for output to have engine', () => {
            expect(getItem('task_Buy').status).equals('end');
        });

        and('Clean it', async () => {

            const query = {
                "data.caseId": caseId,
                "items.elementId": 'task_clean'
            };
            console.log(query);
            await server.engine.invoke(query, {});
        });

        and('Repair it', async () => {
            const query = { id: instanceId, "items.elementId": 'task_repair' };
            response = await server.engine.invoke(query, {});
        });
        and('Drive it 1', async () => {
            const query = {
                id: instanceId,
                "items.elementId": 'task_Drive'
            };
            response = await server.engine.invoke(query, {});
        });

        and('Case Complete', async () => {

            console.log(response.status);
            expect(getItem('task_Drive').status).equals('end');

        });

        and('find engine status', async () => {

            var insts = await server.engine.status();
 
        });

        // 
        and('find instances', async () => {

            var insts = await server.datastore.findInstances({ id: response.id });
            expect(insts).to.have.lengthOf(1);

        });

        and('find items', async () => {

            var items = await server.datastore.findItems({ id: response.id } );
            expect(items).to.have.lengthOf(17);

        });




    });

});

function getItem(id) {
    return response.items.filter(item => { return item.elementId == id; })[0];
}

[MaheshkumarSundaram]

One other reason I wanted to customize Properties Panel is the below scenario:

In order to complete a task say a UserTask from client side using API, we would need the TaskID.
Getting the TaskID is not a problem when an instance contains only one element in the wait stage. I could use findItems and get the TaskID as the resulting array will have only one TaskID. But if an instance contains more than one elements on wait, then there is an overhead that the client should know their TaskIDs to target specific elements (UserTasks).

[ralphhanna]

Please review the test script above to see how to find specific item using either elementId or name.

Also typically uses don’t have access to modify the model
Keep in mind the WebApp provided is for demo only, to be modified for specific needs