Apex Designer Documentation
What's New
Getting Started
Business Objects
User Interfaces
App Behaviors
Project Settings
Patterns and Best Practices
App Showcase

Add User Tasks To The Onboard Supplier Process

Detail the user interfaces for user activities

Blank Profile Image
Written by Jim Volpe
Updated 4 months 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 employeeIdentificationNumber:
    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 Employee 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

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. Complete the task by populating each field, then press the Submit button:
    Submit the task
  11. Still in the app, navigate back to the task list using the My Tasks button on the ribbon assignment_turned_in
  12. Select the Complete Application task to open it:
    Open Complete Application task
  13. 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 User Task Page 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:
    Complete Application page
  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. To add one more field, navigate to the business objects page using the Business Objects button category 
  15. Select the Onboard Supplier business object.
  16. Add a property called employerIdentificationNumber as a string:
    Add property employerIdentificationNumber
  17. Generate the business object and check the page to see the new field, but do not submit the task until the next lesson:
    Check Complete Application page

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-2022 Apex Process Consultants