MS HTML Editor - PROCEED-Labs/proceed GitHub Wiki

Most of the following parts are more visually explained in the public documentation: https://dbpms-proceed.gitlab.io/proceed-documentation-website/user-guide/modelling/user-tasks/

This page is just for some internal details

During runtime every user task is displayed on an engine inside a Tasklist. This tasklist accepts HTML based forms for every user task. All process variables can be included and are are rendered at runtime. On this page you find the structure of the user task HTML documented.

Default structure

Every user task HTML must at least contain a form element that contains at least one submission element (<button> or <input type="submit">) to submit the form. This transfers the information to the Engine that the User Task is finished.

<form>

  <button>Okay</button>
</form>

On the Engine (more precisely: the Tasklist web app that displays every user task) this is displayed inside an iFrame. So you can actually write a complete HTML file with head, body, styles, JavaScript and every other HTML element. OR you can even just link an external web page with a form, e.g. created by Google Forms. If the Engine has internet access at runtime, the iFrame can load the page.

The only requirement is that there is a submit event generated inside a form somewhere on the page which the Engine can listen for (this is automatically thrown with <button> and <input type="submit">). So the Engine can listen for this event and parses all the data.

Reading process variables

Inside the HTML code you can use the simple Whiskers template syntax to access and use process variables. It is easy and keeps templates readable by limiting tags to variables, statements ("for", "if", and "else"), partials, and comments. Usually you only need { } for accessing a variable or object.

Setting process variables

Setting process variables is done like in a normal form. You can use every usual form element. Typically this is done with <input type="..." name="variableName" value="initialValue" ...> where name is the name of the process variable and value the inserted/changed/default value in the input field.

Attention: with this method you can easily overwrite process variables. So pay attention that you choose the correct variable names.

<html>
    <head>
        <style>...</style>
    </head>
    <body>
        <h1>{title}</h1>
        <form>
            <p>{smallDescription}</p>
            
            <img src="{imgData}" alt="This pic is a person" width="400px" height="400px" />
            <br>
            <label>Full Name:
                <input type="text"
                    name="varMyName" required minlength="5" 
                    placeholder="Max Mustermann" />
            </label>
            <br>
            Is this person allowed to access the room?
            <br>
            <button name="varApproval" value="allowed">Yes</button>
            <button name="varApproval" value="forbidden">No</button>
        </form>
        <script>...</script>
    </body>
</html>

Validation

You can use HTMLs built-in form validation.