Auth0 Angular 10
Apex Designer Documentation
What's New
Getting Started
Business Objects
User Interfaces
App Behaviors
Project Settings
Patterns and Best Practices
App Showcase
Angular 10 Base Library
Frequently Asked Questions

Add User Tasks To The Onboard Supplier Process

Detail the user interfaces for user activities

Blank Profile Image
Written by Jim Volpe
Updated 2 years ago
6 min read

In the previous lesson, you created a process with two user activities. When you added those activities, a user task page was created for each with some default components. In this lesson, you will add to the user interfaces to allow you to run each of those activities. You will also build a user interface to show your list of tasks. 

Detail the Initiate Onboarding Activity

  1. Navigate to the process by selecting share from the ribbon, then selecting the Onboard Supplier process.
  2. Select the Initiate Onboarding activity from the process diagram:
    Onboard Supplier process diagram
  3. Open the user task page using the launch button:
    Open user task page
  4. In the Template, click on the Fields component. This will expand it to allow you to add some instructions before it:
    Expand Fields element
  5. Above Fields, type "par" to find and add the Paragraph component, clicking on it to add it:
    Add paragraph
  6.  For the inner text of the paragraph, add some instructions for the Purchasing person assigned to this task:
    Add some instructions for the Purchasing
  7. To collect the information for this activity, we need to add some information parameters to the process. Open the Business Objects page using the category button on the ribbon.
  8. Click on the Onboard Supplier process business object. This business object was added when you created the process.
    Select Onboard Supplier business object
  9. Add 4 properties as strings: supplierName, contactName, contactEmail and employerIdentificationNumber:
    Add Properties to Onboard Supplier business object
  10. Generate the app and look at the running app.
    Initiate Onboarding page
  11. Since this task is performed by Purchasing and they may not know the Employer Identification Number, you should remove that field from the page. Click the Recent Items button in the toolbar at the top of the page history  
  12. Select the Initiate Onboarding page:
    Open Initiate Onboarding business object 
  13.  Select the onboardSupplier property:
    Select the onboardSupplier property
  14. In the read configuration, click into the Add a configuration item field:
    Add a configuration item field
  15. Select Include Fields.
  16. Click into Include Fields to add a field.
  17. Select supplierName to add it as a field to include:
    Include supplierName
  18. Select two other fields to include: contactName and contactEmail:
    Include contactName and contactEmail
  19. Click the Generate UI button autorenew 
  20. Check the page to see that only the 3 fields that you included are shown: 
    Initiate Onboarding page

Assign the Complete Application Task

  1. From the ribbon, select the Processes page, then select the Onboard Supplier process.
  1. Click the Process Variables icon button category .
  2. Select the Process Business Object mixin to see the configuration.
    Mixin section
  3. Add contactEmail to the list of exposed paths, making it available within the process.
    Process Business Object mixin configuration
  4. Select the Complete Application task.
    Select Complete Application task
  5. Select the Task Assignment tab for the task.
  6. For Assignment Type, select User.
  7. Type "contactEmail" in the Assigned User Process Variable field.
  8. Generate the process.

Add a My Tasks Page

We need a way for users to see their tasks and open them. Now, you will create a page to do that.

  1. Open the User Interfaces page using the laptop button from the ribbon.
  2. Add a page called "My Tasks". After typing the name, select the last option shown.
    Add My Tasks page
  3. Add a breadcrumb from the Dynamic Components library:
    Add a breadcrumb
  4. Add the My Tasks Table component from the Camunda Library:
    Add the My Tasks Table component
  5. Use the settings button to open settings for the user interface.
  6. Set the Sidenav Icon Name for the icon to display in the ribbon:
    Set the Sidenav Icon Name
  7. Generate the app and run the app to try it out.
  8. Navigate to the My Tasks page:
    Navigate to the My Tasks page
  9. Select the task to run. (If you have more than one, do not worry! Just pick the latest one):
    My Tasks page
  10. Populate each field, including your own email address for Contact Email.
    Submit the task
  11. Complete the task by pressing the Submit button.
  12. Still in the app, navigate back to the task list using the My Tasks button on the ribbon assignment_turned_in
  13. Select the Complete Application task to open it:
    Open Complete Application task
  14. Click on the Show Process Diagram button share and notice that the highlighted box is now the second activity in the process.

Detail the Complete Application Activity

  1. Back in Apex Designer, navigate to the Process page using the share button in the ribbon.
  2. Open the Onboard Supplier process by selecting it.
  3. Select the Complete Application activity:
    Select the Complete Application activity
  4. Open the user interface for this activity, by clicking the Open Task in Designer button launch 
    Open User Task Page button
  5. Add a Paragraph with instructions for the user:
    Add instructions for the user
  6. Since the Contact Name and Email are not necessary on this page, you can remove them. First, select the onboardSupplier property on the left:
    Select onboardSupplier property
  7. In the read configuration, click Add a configuration item:
    onboardSupplier read configuration
  8. Click on Exclude Fields.
  9. Exclude contactName and contactEmail by selecting them from the Exclude Fields selection list:
    Exclude contactName and contactEmail
    Excluded fields contactName and contactEmail
  10. Generate the user interface using the autorenew button on the dialog. Notice that the two fields for contact are no longer shown:
  11. The Supplier Name field remains, but it should be required. With the onboardSupplier property open, select Require Fields:
    onboardSupplier read configuration
  12. Select supplierName as a required field:
    Make supplierName a required field
  13. Generate the UI and verify that the field is now required:
    Supplier Name shows as a required field
  14. Do not submit the task yet, you will use it in the next lesson.

In this lesson you detailed the Initiate Onboarding and Complete Application activities, both as tasks assigned to users. You also created the My Tasks page to view and select tasks to work on. In the next lesson, you will add a system activity to complete the onboarding process.

Powered by Apex Designer
Terms of ServicePrivacy Policy
© 2017-2024 Apex Process Consultants