Developing a Web Application in INUBIT Workbench

You require licenses for web applications in the portal and to use the task generator! These components are not covered by the standard license.

You can find example programs for all tutorials in the INUBIT software.

Prerequisites

  • You have installed the INUBIT Process Engine & Workbench set.

  • You have added a valid license.

  • You have logged in to the INUBIT Workbench with the user miller in order to access to the example diagrams.

Workflow Management

Involving employees is often required and desirable for automated business processes.

User interaction as part of the Technical Workflow

Interactions with users are completely integrated into the Technical Workflows and are created through running workflows. The assignment of tasks arising from the process flow takes place on the basis of roles and can also be controlled using an organization diagram. This enables individual tasks to be assigned to a group of responsible parties. The organization diagram can also be used to determine a supervisor with whom a task can be escalated.

The processing of tasks takes place via a Web-based, personalized task list. A list of all tasks is displayed for each employee. This list is configured using the task generator module in an integrated WYSIWYG editor.

The list structures the tasks of the user and delivers any required additional information such as the priority of the tasks. External applications such as MS Office can also be integrated.

The Process interaction is a JSR 168-compliant module and an integral part of the BPC.

Creating portals

You can also implement complete portals on the basis of the Technical Workflows and in conjunction with the task generator. The Technical Workflows define the logic required to determine the page sequence and to exchange data with back-end systems. The task generator module defines the individual pages, which also contain the portal navigation elements. The tight connection with the business process diagrams means that a portal can be created in a completely process-oriented manner with the INUBIT software.

Refer to

Developing Your Own Web Application

This section describes how to create a form-based Web application for processing orders at the car dealership.

tutorial 130 1

Requirements

The portal server is activated and the portal is configured as process user server (refer to Configuring the Portal Server).

Basic procedure

  1. Create a Web application as a Technical Workflow

    Consisting of:

    • Web application Input Connector

      This connector makes the functions of the Technical Workflow available as a web application instance in the portal. All properties that are relevant for the entire Web application, such as application permissions or timeouts, are configured on this connector.

      As soon as the Web application Connector is deployed on the portal server, a web application instance is generated. This instance serves as a user interface for the Web application. In addition, all relevant information, such as application permissions, is transferred to the portal server.

    • Two task generators with the task type Form sequence/Web application page

      For generating the order and feedback form.

    • One joiner and one splitter in each case.

    • Task generator with the task type Item in task list > Task

      Each new order should generate an item in the task list of the responsible employee.

      The order is submitted to the employee for approval/rejection.

  2. Activate and publish the Technical Workflow.

    Only web application instances based on active Technical Workflows are displayed in the portal.

  3. Deploy the module instance.

  4. Assign application permissions in the portal to one or more roles.

Creating the Web Application Connector

Proceed as follows

  1. Create a diagram of the type Technical Workflow.

  2. Insert a Web Application Connector from the System Connector group in the sidebar into the diagram:

    tutorial 131 0

    The module wizard opens.

  3. In the first dialog, enter a name for the module.

  4. Click Next.

  5. Select Input Connector for Connector type.

  6. Select Active for the connector.

  7. Click Next.
    The following dialog is displayed:

    tutorial 132 0

    Enter a portlet ID.

  8. Click Next.

  9. Skip all of the subsequent dialogs and close the wizard by clicking Finish in the last dialog.

  10. Insert a joiner from the Workflow Controls group in the sidebar, enter a module name and connect it with the Web application Connector.

    The joiner is required to create the messages in the form of a loop so that an empty form is displayed once each order has been submitted.

Creating the Task Generator

Proceed as follows

  1. Insert a task generator from the Data Converter group in the sidebar:

    1. Enter the module name in the first dialog.

    2. Click Next.

    3. In the dialog that now appears, select Form sequence > Web application page.

    4. Click Next.Skip the Permissions dialog.

    5. Click Next.

    6. In the XSLT Mapper settings dialog, select Ignore input message, since the input data is entered by the user directly into the form rather than coming from a previous module.

    7. Click Next.

    8. In the dialog Panel Layout select the layout template Table Layout.

      All form elements will be arranged in a table because that makes it easier to position them.

    9. Confirm with Finish. The task generator is displayed in the designer workspace.

  2. Connect the task generator with the joiner you just added.

  3. Open the context menu of the Task Generator and select Edit (in module editor).

    The Task Generator > Form Mapping tab opens. In the Designer (bottom right) a small table is displayed which is represented as XML element Panel with an orientation='table' attribute on the Form mapping > XML target area (top):

    tutorial 134 0

The next sections illustrate how to create the order form with the so called order mapping on this tab.

Creating the Form Mapping 1: Inserting Labels for Input Fields

The order form should look like this:

tutorial 134 1

Proceed as follows

  1. Create labels for input fields:

    1. Drag a label element tutorial 135 1 from the form designer toolbar and drop it onto the first table cell:

      tutorial 135 2

      The red border indicates where the label is to be inserted.

      This inserts a Label element on the Form mapping > XML target tab.

    2. Click the label in the designer. A colored frame appears around the label and the properties of the label element are displayed on the Properties tab.

    3. To provide text for the label, enter Company in the Specific > label line area of the Properties tab. Confirm your entry by pressing Return. The word you entered is now displayed in the designer and in the XML source/target area:

      tutorial 135 3

    4. Repeat the procedure for inserting and naming a label for the other four label elements. Insert each label into an empty table cell. Enter an asterisk (*) after each label name. This informs users who fill in the form later on that all fields are mandatory and must be filled in.

      To insert additional table rows, open the context menu for the table and select Insert row.

      If you select a table row and then insert another row, the selected table row is copied. This make it easier to create elements that are required frequently.

      tutorial 136 1

  2. Create input fields, name them, and mark them as mandatory fields

    1. Drag a TextField element tutorial 136 2 from the toolbar and place it in the empty table cell next to the Company label:

      tutorial 136 3

    2. Insert TextField elements next to the other labels in the same way.

    3. Assign names to the input fields so that they can be identified more easily when being analyzed: To do so, select the first input field and display the Properties tab. In the General area enter the value Company for the name attribute:

      tutorial 136 4

      Make sure that the value of the name attribute complies with the naming rules for XML elements.

    4. Select the mandatory checkbox. This marks the input field as a mandatory field.

    5. Repeat the last two steps for all other input fields.

  3. Use the context menu to delete the empty table column.

  4. To display the preview, click tutorial 136 5 in the INUBIT Workbench toolbar. The form should look like the following:

    tutorial 137 0

Creating the Form Mapping 2: Adding Buttons

Proceed as follows

You still need buttons for sending the order:

  1. Insert another two table rows.

  2. Drag a button element tutorial 137 1 onto the form and place it in this last, empty table row.

  3. Place a second button next to the first:

    tutorial 137 2

    Pay attention to the red mark. It shows you where the second button is being placed.

  4. To increase the gap between the two buttons, insert a horizontal filler tutorial 137 3 between them. To define the width of the gap, select the filler and enter a pixel value for the size attribute in the Specific area of the Properties dialog. Example: 50

    tutorial 137 4

  5. Select a button and display the Properties tab.

  6. Name the button by entering label=Submit in the Specific area.

  7. Below this, select the submit(value) event, since you want the input data to be submitted when the button is pressed.

  8. Beneath the event, select the validate checkbox. The system will now check that all fields marked as mandatory are filled in before the Submit button is activated:

    tutorial 138 0

  9. Assign the values label=Cancel and event=cancel() to the second button.

    → The input form is now complete. In the next step, you define how data that users enter into the form is forwarded to the next module in the workflow.

Creating the Output Mapping

You use output mapping to define the data structure that is forwarded to the next module in the Technical Workflow.

Proceed as follows

  1. Click tutorial 138 1 to display a preview.

  2. Enter data into the fields so that you can submit the form.

  3. Click Submit.

    The Output mapping tab appears. The XML source file area (bottom left) displays the XML data that is generated when you click Submit and sent to the task generator module:

    tutorial 138 2

  4. In the XML structure, navigate to the Panel element and drag it from the XML source file tab diagonally upwards into the XML target area and drop it onto the template element. The structure is copied to the style sheet along with all child elements (right) and the data (left):

    tutorial 139 0

  5. Adopt values from elements

    Naturally, you do not always want to display the static data displayed top left; instead, you want to display the current values entered for the form elements.

    1. To do so, delete the values displayed in the XML source area (top left): Select the cell and double-click it. Remove the value and confirm the change by pressing Return.

    2. Drag the Company element from the XML source area (under Form > Response > Panel) to the top left and drop it into the empty row next to the Company element.

      A context menu opens.

    3. Select Assign value (value-of) from the context menu.

      The XPath expression /Form/Response/Panel/Company is displayed in the field.

      Proceed in the same way for all other elements in the form. The result should look like the following:

      tutorial 140 1

      You have now completed the output mapping.

  6. Click tutorial 140 2 to test the output mapping.

    The result is displayed on the Mapping results tab (bottom right). The generated XML structure and the data is passed from the task generator to the subsequent module (the splitter) when the Technical Workflow is processed.

  7. Publish the module.

    Publish your module after important configuration steps such as defining form mapping. This allows you to save different work states, because a new version of the module is generated each time you publish it. You can access versions whenever you want.

Inserting Additional Modules 1: Creating a Splitter

Proceed as follows

  1. Display the Technical Workflow again.

  2. Insert a splitter (Workflow Control group):

    tutorial 140 3

    The splitter duplicates incoming orders:

    • One order is forwarded to the task generator that displays the feedback form.

    • The other order is passed on to the task generator that generates a task list item.

      All orders are simply forwarded by the splitter; they are not processed further.

  3. Connect the splitter with the task generator.

Inserting Additional Modules 2: Creating a Task Generator for Order Feedback

Proceed as follows

  1. Create the task generator for order feedback.

    Once the order has been submitted, a short message should tell the ordering party that the order is on its way.

    1. Create another task generator module.

    2. Select the Form sequence > Web application page option again. The application permissions do not need to be taken into account in this module, either.

    3. Select General > Ignore input message in the XSLT Mapper settings dialog.

    4. Close the module wizard by choosing Finish.

    5. Open the module for editing.

    6. Generate the following form using a label and a button in the designer:

      tutorial 141 0

    7. Define any output mapping, that you can freely select, e.g.:

      tutorial 142 0

      The output message of this task generator is not used any further. Therefore, structure and content of the message are not relevant.

  2. Display the Technical Workflow.

  3. Connect modules:

    1. Connect the splitter with the task generator you just created.

    2. Connect the new task generator with the joiner.

      This connection ensures that an empty order form is displayed to users after they click the OK button in the feedback form.

Inserting Additional Modules 3: Creating a Task Generator for Items in the Task List

Proceed as follows

  1. Create a task generator for the item in the task list. Each new order should be displayed in the task list of the responsible employee so that the order can then be approved manually.

  2. Create another task generator module.

  3. Fill in the Task Generator Properties dialog as follows:

    tutorial 143 1

  4. Click Next.

  5. In the Permissions dialog, specify that the Administrator and User portal roles should be used.

    This causes the task to be displayed to all owners of these roles. The task is deleted from the task list as soon as one of the role owners processes it.

    Portal roles are only displayed if a portal server is active, a portal is available, and the portal is configured as process user server, refer to Configuring the Portal Server.

  6. Click Next twice and while doing so, ignore the dialog XSLT Mapper Settings.

  7. In the dialog Panel Layout select the Table layout and then click Finish.

  8. Open the module for editing and create the following form in the designer:

    tutorial 144 1

    • To ensure that the order cannot be changed, deactivate the enabled attribute for all labels and properties in the Misc area.

    • Remember to name the display fields using the name attribute.

You can facilitate your work routine by copying the form you created in the Task Generator EnterOrder and pasting it here.

  • Both buttons receive a submit event. In this case, it is important to differentiate between the two buttons. You should therefore enter the following event values:

    • submit(Reject)

    • submit(Release)

      Confirm your entries by pressing Return.

      The event values help to identify which button was clicked. They are passed to the subsequent module once either button is clicked. Further processing of the order may depend on the event value. For example, an order with the event value Approve may be passed to the responsible department. This is not part of this tutorial.

      For more information on using JavaScript, refer to Using JavaScript in Forms.

      For more information on using JavaScript to submit a form when having configured a BPC portal, refer to Using JavaScript to Submit a Form in the BPC Portal.

      For submission of forms in a BPC webapp, the following function can be used:x

      Ext.getComponent(bpcComponentId).submit(event,namespace,url);

      event: submit event from button or null

      namespace: namespace used in form or '' (empty)

      url: URL for submission

Inserting Additional Modules 4: Creating another Form Mapping

Proceed as follows

  1. The module receives the order data from the form as an input message. You have to map this order data to the form for the task list entry. For this mapping, you need an output message from the first task generator module:

    1. Display the Technical Workflow.

    2. Select the first task generator.

    3. Open the context menu and select Edit (in module editor). The order form is displayed in the designer.

    4. Click tutorial 145 0 to display a preview.

    5. Fill in the fields and click Submit. The form preview closes and the Output mapping tab is displayed.

    6. Test the style sheet: Click the tutorial 145 1 button. The result is displayed on the Mapping results tab.

    7. Click the tutorial 145 2 button and copy the result to the clipboard.

    8. Now, display the form for the task list entry in the Designer again.

    9. Display the Source tab at the bottom left.

    10. Click the tutorial 145 2 button and select Open > Clipboard. The result you just copied is displayed.

    11. Expand the structure.

    12. Select the Company text field in the designer. The corresponding XML structure is displayed in the XML target area.

    13. Drag the Company element from the Source tab up to the XML source area and drop it into the row to the left of the TextField element that is formatted in bold. A context menu opens.

    14. Select Assign value (value-of). This specifies that the value of the Company element is to be displayed in the selected display field. The result should look like this:

      tutorial 145 3

    15. Repeat the last two steps for all other elements in the form.

    16. Click tutorial 145 0 to display the preview:

      tutorial 145 4

    17. Click Release. The Output mapping tab appears. The XML data created when you clicked the button appears at the bottom left.

      The current status of the order is identified by the attribute value submitter=Release of the Response element.

      If the order had been rejected, the value would be submitter=Reject.

    18. Create any kind of output mapping.

      The output mapping is not required in this tutorial because the workflow ends with this module. However, an output mapping must exist or else you cannot publish the module.

      Drag any element, such as a Panel element, from the XML source file tab diagonally upwards to the XML target area and drop it onto the template element.

    19. Publish the module.

  2. Display the Technical Workflow.

  3. Connect the task generator you created most recently with the splitter.

  4. Publish the Technical Workflow.

  5. Activate the Technical Workflow by selecting it in on the Server tab, opening the context menu, and choosing Activate. The workflow symbol now appears with a colored background:

    tutorial 146 1

→ Your Web Application is finished. You can now add it to a portal page as a web application instance.

Adding a Web Application to a Portal Page as an instance

In this section you learn how to add your Web Application to the BPC Portal as a portal instance on a new page within a password-protected area.

Granting Web Application Permissions, Assigning Them to Portal Roles

To control the use of your web application, you can grant special application permissions to buttons and input fields. Then, only Portal users with roles to which these application permissions were assigned in the scope of their site, are able to make use of those web application controls.

Requirements

You are logged in to the portal as an administrator.

Proceed as follows

  1. In the INUBIT Workbench, display the Technical Workflow that you created in a previous chapter.

  2. Open the Web application Connector for editing. The module wizard opens.

Defining Permissions

Proceed as follows

  1. Click through the dialogs until you reach the Permission management dialog.

    1. Beneath the display field, enter Release.

    2. Click the Plus button to copy the permission to the display field:

      tutorial 153 0

    3. Click Finish.

  2. Publish the Web application Connector to transfer the permission you just defined to the task generator.

  3. Open the last task generator for editing; this is the task generator that creates the task list entry. The task generator is selected in the module tree (left).

  4. In the module tree, open the task generator context menu and select Edit properties. The module wizard opens.

  5. Click through the dialogs until you reach the Permissions dialog.

  6. Adopt the application permissions from the OrderForm Web Application Connector by selecting the checkbox in the Web Application Connector section. For creating the Connector refer to Developing Your Own Web Application.

  7. Click Next and then click Finish to close the module wizard.

Assigning Permission to Form Element.

Assign the Release permission to the button.

Proceed as follows

  1. Select the Release button.

  2. Click the empty cell next to the enabled attribute in the Conditional area of the Properties dialog. The Select permissions dialog appears:

    tutorial 154 0

  3. Select the Release option.

  4. Click OK. The dialog closes.

  5. The cell now contains {p:hasPermission($ISPortalUser, ’Release’)} and the button has a colored border.

  6. From now on, the button is only active in the portal for users to whose role the permission Release is explicitly assigned.

  7. Publish the module.

Re-Deploying the module instance

Re-deploy the module instance to make the property changes available.

Proceed as follows

  1. In the INUBIT Workbench, display the Administration > General Settings tab.

  2. Open the configuration area Portal > Portal Deployment.

  3. At the option Portlet-Archive click Open tutorial 154 1. A dialog opens.

  4. In the area Archives on portal server in the column Action click Redeploy archive tutorial 154 2 icon.

  5. Confirm the next dialog.

  6. The deployment starts. A dialog with a progress bar is displayed.

  7. After the deployment has been finished successfully, this dialog is closed automatically.

  8. Close the dialog.

Press Esc to exit full screen
Modal image placeholder
Press Esc to exit full screen