Versions Compared

Key

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

...

The easiest way to see how does the Process Status Menu works is to first create a new process. Here are the steps:

Image Removed

Image Removed

Image Removed

Image Removed

Image Removed

Image Removed

...

1. Start your Joget Server, Log in as administrator then click on Design New App.

Image Added

Figure 1


2. Fill up the App details as shown. (See Figure 2)

Image Added

Figure 2


3. Create a new Form, and fill up its details as shown then Save the Form. (See Figure 3) 

Image Added

Figure 3


4. Fill up the Form with a Text field, fill up its details as shown. (See Figure 4)

Image Added

Figure 4


5. Save the Form, then Generate an Approval Process. (See Figure 5 & 6)

Image Added

Figure 5

Image Added

Figure 6


6. From the List Builder, Launch the automatically generated List. (See Figure 6)

Image Added

Figure 7


7. Drag a Hyperlink in to the Row action part of the List (top right of the canvas). (See Figure 8) 

Image Added

Figure 8


8. Configure the Hyperlink as shown in the image, then Save the List. (See Figure 9)

Image Added

Figure 9


9. Navigate to the UI Builder, then click on the automatically generated UI to edit it. (See Figure 10). 

Image Added

Figure 10


10. Drag a List UI Element and a Process Status UI Element to the Home Category. (See Figure 11 & 12)

Image Added

Figure 11

Image Added

Figure 12


11. Configure the Process Status and List UI Elements as shown. (See Figure 13 & 14).

Image Added

Figure 13

Image Added

Figure 14


Info
titleInfo

For a more in-depth tutorial on using the Process Status UI Element, Check out this article.


Process Status Properties

Configure Process Status

Image RemovedImage Added

Figure 1: Process Status Properties

NameDescription
Custom ID

Item link slug. Optional field.

Info
titleUnique field

Value defined here must be unique to the rest of the

Userview

UI Menus as the first matching name will be called upon.

LabelMenu label. Mandatory field.
Type

The type of visual format, either Path (default) or Chart.

Example Path:

Image Modified

Example Chart:

Image Modified


Record ID
  • Record Id or Process Instance Id. Please use Request Parameter Hash variable if want to retrieve this value from URL, for example "#requestParam.id#".
  • Mandatory field.


Info
titleExample

By using the request parameter hash variable, we can define the record ID to seek for.

Record ID:

#requestParam

#requestParam.id#

Image Modified
View Permission

Determines who can access the record's information.

  • Process requester
  • Participants of the process
  • Admin users
  • Group
  • Department

At least one option must be selected.

UI

Image RemovedImage Added

Figure 2: UI Properties

NameDescription

Custom Header

Custom Header in HTML.

Custom Footer

Custom Footer in HTML.

Show Process Name?

If checked, the process name will be generated at the top of the resultant graph. Optional.

Show Future Process Activities

Click checkbox to show future process activities.

Show Skipped Activities

Click checkbox to show skipped activities.

Username Display Format

  • Name

  • Username

  • Name (Username)

Event Click Callback (Javascript) 

Callback variable "activity" containing information of activity and process.

Panel
borderColorpurple
borderWidth1
titleBGColor#ddccff
borderStylesolid
titlePerformance

You can configure the Performance settings in this Userview UI Element which allows one to cache existing content for improved performance and loading speed. Read more at Performance Improvement with Userview UI Caching.