Create web user interfaces (forms)

 

Create web user interfaces (forms)


1. Select the process pool

2. Go to Execution > Instantiation form

3. Click on the pencil icon next to Target form.



4. Rename newForm to submitClaimForm





5. Select the Description widget by clicking on it & In the Widget properties, on the right hand side of the window, click on the ... icon and select Switch...




6. Similarly create the form for the Review and answer claim user task, Select the Satisfaction Level widget and use the delete key to remove it as we don't want it in this form.

7.Do the same set of operations with the form for Read the answer and rate it task, Don't remove any widgets.


Widgets Description:

  1.        Container : It can include set of widgets required for the web interface. Container is an empty box which can be filled with entities. Below are properties of container:
  2. Tabs Container: It creates tabs and allocates separate space for each tab.
  3. Form Container is similar to Container, Its an empty container which can contain any widgets related to form.
  4. Modal Container can contain different modules, you can display modal with an animation
  5. Input:   The Input specifies an input field where the user can enter data.




  6. TextArea : Similar to Input Widget, more rows of data can be entered than the Input Widget.
  7. Autocomplete: This widget has intellisense to detect words from the dictionary to complete the words.
  8. Select: It is like Drop-Down box, even data from any form variables or database can be inserted as Available options of the select.


  9. Checkbox : The checkbox is shown as a square box that is ticked (checked) when activated.

  10. Check List : List of checkboxes

  11. Radio Buttons : Radio buttons are a collection of circle buttons describing a set of related options. Only one radio button in a group can be selected at the same time.

  12. Upload: File chooser for uploading a document to a form. This widget allow users to choose the file they want to upload. This widget has almost same properties as above widgets along with URL property to upload file to the specific path.

  13. Date Picker: Calendar widget for selecting a date only.

  14. Date Time Picker: Calendar for selecting a date and time.

  15. Button: A clickable button which is trigger for an action in a page or Form.

                

    Following are the properties of button:
  16. Link: Navigation link to another page or form

  17. Image: Display an image from assets or from URL

  18. File Viewer: Link to display or download a document.

  19. Table 
    Properties of table:

  20. Text: It is an empty text box for short string or paragraph to be displayed.

  21. Title : Text used to structure page or form content, title can be set from Font level 1 to Font level 6.


    💗💗💗💗💗💗💗💗💗💗💗💗💗💗💗💗💗💗💗💗💗💗💗💗💗💗💗

     

Comments

Post a Comment

Popular posts from this blog

BPMN process diagram

Image
 BPMN Process Diagram overview of process execution: ·  The process will be started by a customer who submits a claim, which is a simple text description in our example ·  Next, an employee will review the claim and provide an answer ·  The customer will be able to review the employee's answer and provide a satisfaction rating ·  If the rating is equal to or greater than 3, the process will finish after the customer has read the answer ·  If the rating is lower than 3 an extra task will be assigned to the manager of the employee to work with this customer who is not really satisfied. Once this task is done the process will be completed     Step 1:       The new diagram includes: ·  One pool: one process definition ·  One lane inside the pool: lane default name is  Employee lane  (more about lanes in another chapter) ·  A start event: the starting point of process execution ·  A user task: a task (or ste...
Read more