Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Create a new Project in FAB. Choose Workflow Mode – 'Enhanced'

    Image Modified

  2. Press the Workflow Button Image Modified

...

  1. The FAB Process Designer opens

    Image Modified

  2. Start by switching to the 'Levels' tab and add three levels, 'Start', 'Approve' and 'Complete'. Set the Status at each level to be 'blank', 'Approval' and 'Completed' respectively.

...


  1. Note:  The names of the levels and the status are arbitrary, but you should use meaningful names as these will be visible in the workflow and 'My Forms')

    Image Modified

  2. Switch to the Process Flow tab and notice how the flow is taking place. There are three levels shown in the diagram.

    Image Modified

  3. Now add our first Task. Call it 'Start' (arbitrary). Ensure it is in the Level 'Start', and give it an Abbreviation 'START' (arbitrary)

    Image Modified

  4. Assign a Role to this Task by pressing the 'Roles' button. Assign the Role 'Initiator' to this Task, as it will be the Initiator who will carry out this Task.

    Image Modified

  5. Now add another Task called 'Draft'. It should also be in the 'Start' Level.

    Image Modified

  6. Assign the Role 'Initiator' to this Task, as once again, it will be the Initiator who will be able to action this Task (ie, the initiator can save the document as 'Draft', and then later 'Submit' it)

    Image Modified

  7. Check the Process Flow Diagram now. Notice the Start and Draft Tasks appear in the Start Level.

    Image Modified

  8. Now add an Action to the 'Start' Task by pressing the 'Actions' button

    Image Modified

  9. Add an Action with the Action Id 'DRAFT' (arbitrary), Action Text 'Draft' (arbitrary). (The Action Text will appear on the Footer Toolbar button at run-time)

    Image Modified

  10. Choose an Icon for the Action. This will be the Icon that appears in the Footer Toolbar of the application at run-time. Choose the 'Save' icon (arbitrary).

...


  1. Image Added

  2. Choose the 'Button Type'. This a UI5-specific setting for the buttons; 'Transparent' will render the button without colour or a border. This setting is arbitrary.

    Image Modified

  3. Next, set the 'Behaviour' of the Action by pressing the 'Behaviour' button. For the 'DRAFT' Action, we just want the action to bypass any validations that may exist in the app (such as mandatory fields). We also do not tick 'Go Back' as we want the application to remain open when the user presses Draft so they can continue to edit and perhaps make further changes.

    Image Modified

  4. Next we specify what will be the 'Outcome' of this Action by pressing the 'Outcomes' button. The Outcome of any Action is another Task. In this case the Outcome of the DRAFT Action is to move the application to the 'Draft' Task.

    Image Modified

  5. Check the Process Flow Diagram now. Notice there is now a connection between the Start Task and the Draft Task

    Image Modified

  6. Next, add another Task and give it the Task Id 'Approve' (arbitrary) and Abbreviation 'APPRV' (arbitrary). Ensure that this Task is the 'Approve' Level.

    Image Modified

    Image Modified

  7. Before we assign a Role to this Task, create a new Role in the Roles tab and call it 'Approver1' (arbitrary).

    Image Modified

  8. Then assign this Role to the 'Approve' Task. This means that only a user with the 'Approve1' Role will be able to action this Task.

    Image Modified

  9. So far we have defined the 'DRAFT' Action that moves the workflow from 'Start' to 'Draft'. Next we configure a 'SUBMIT' Action to move the workflow from 'Start' to 'Approve'

    Image Modified

  10. Add a second action and give it the Action Id 'SUBMIT' (arbitrary), Action Text 'Submit' (arbitrary), Icon 'action' (arbitrary) and Button Type 'Accept' (arbitrary). (The 'Accept' button type will show the button as green in the toolbar)

    Image Modified

  11. Configure the Behaviour of this Action. Here we want the app to 'go back' after pressing the Submit button, as the user has completed data entry and is submitting the Form for approval (ie there is no further editing required).

    Image Modified

  12. Configure the Outcome of this Action, which is to move the workflow to the 'Approve' Task.

    Image Modified

  13. Check the Process Flow Diagram again. See the 'Submit' Action takes the workflow to the 'Approve' Task.

    Image Modified

  14. For the 'Draft' Task we want the same behaviour as the 'Start' Task. That is, the user can press either 'Draft' (and the workflow will stay in Task 'Draft') or they can press 'Submit' and move to the Approval Task.
    Since the actions are identical for this Task, we can use the 'Copy Actions from another Task' button.

    Image Modified

  15. Press the button and choose the 'Start' Task to copy the Actions from.

    Image Modified
    The Actions will be copied.
    Image Modified
    Check the Process Flow again and notice that 'Draft' also leads to 'Approve'
    Image Modified
    Next we can to configure the Actions for the 'Approve' Task, but first we need a Task for the Outcome of that Action. Add a new Task 'Complete' (arbitrary) and ensure it is in the 'Complete' Level. Give the Abbreviation 'COMPL' (arbitrary).
    Image Modified
    Check the Process Flow Diagram and notice the Complete Task has appeared in the Complete Level.
    Image Modified
    Now configure the Actions for the 'Approve' Task. Add an Action Id 'APPROVE', Action Text 'Approve', Icon 'accept', Button Type 'Accept'.
    Image Modified
    Configure the Behaviour to 'Completes Task' and 'Go Back'.
    Image Modified
    Set the Outcome of the Action to the 'Complete' Task.
    Image Modified
    Check the Process Flow again.
    Image Modified
    We can also configure a 'REJECT' Action
    Image Modified
    The Reject Action will 'Go Back', and the Outcome will be 'Start' (or 'Draft')
    Image Modified
    Image Modified
    The basic workflow is now complete. Press 'Save and Close' and return to the FAB Workbench. Save the Project. (it may be necessary to press 'Live View Reload' if using Live View). Notice now that the application has a footer toolbar with the appropriate actions (Draft and Submit)
    Image Modified