...

Bootstrap Steps Display is a Form Element and Datalist Column Formatter that allows users to display status in steps with two presentation styles. For example, you can now display steps in icon with color in your form or datalist column.

Get Started

To see how the Steps Display form element actually functions, we should first create a form. Here are the steps for this process:

Steps

...

To

...

Import This Plugin

1. Go to the website ()
   
   
2. Click "Download" on this plugin screen (It will be a .jar file).
   
   
3. Go to your Joget Workflow localhost or server and login as admin.
   
   
4. In Joget Console navigate to "Admin Bar>Systems Settings>Manage Plugins" and click the "Upload Plugins" button.
   
   
5. In "Upload Plugin", select the plugin .jar file you just downloaded, then click "Upload".
   
   
6. You should be able to view the newly installed plugin under the Installed Plugins tab.
   
   
7. Remember to always uninstall the old plugin before uploading a new version.
   
   
8. The Joget Workflow Knowledge Base has more information on managing and developing plugins.

Steps To

...

Use This Plugin

1. Start the Joget server and open the App Center.
   
   
2. Login as admin and click on Design New App

...

1.  or click on existing application.
   
   Image Added
2. For new application, fill up the App ID and App Name then proceeds to click on Save button.

...

1.  
   
   Image Added
   
   
2. Create New Form, fill up Form ID, Form Name and Table Name then click on Save button.

...

1. 
   
   Image Added
   
   
2. Fill up the form with a Text Field with the id as status and a Step Display form element then save the form.

...

1.  
   
   Image Added
   
   
2. Edit the Step Display form element by adding a few status and selecting color then save the form.

...

1.  
   
   Image Added
   
   Image Added
   
   
2. Click the GENERATE APP button and generate a CRUD.

...

1. 
   
   Image Added
   
   
2. After creating the CRUD, launch the Step Display App Userview.

...

1. 
   
   Image Added
   
   
2. Go to the newly created form and click on New button.

...

1. 
   
   Image Added
   
   
2. Fill up the status field with one of the values added in the status of Step Display form element and observe the results.

...

1. 
   
   Image Added
   
   
2. To use the plugin as a datalist column formatter, edit the List - Step Display Form.

...

1. 
   
   Image Added
   
   
2. Edit the status column and add the Bootstrap Steps Display Formatter.

...

1. 
   
   Image Added
   
   Image Added
   
   
2. Add a new record to the datalist and observe the results.

...

Figure 2

Image Removed

Figure 3

Image Removed

Figure 4

Image Removed

Figure 5

Image Removed

Figure 6

Image Removed

Figure 7

Image Removed

Figure 8

Image Removed

Figure 9

Image Removed

Figure 10

Image Removed

Figure 11

Image Removed

Figure 12

Image Removed

Figure 13

Image Removed

Figure 14

1.  
   
   Image Added
   
   
   

Step Display Form Element Properties

General

Name	Description

Screen (Click to view)

ID	Element ID (By declaring as "requestStep", a corresponding database table column "c_requestStep" will be created)

Image Removed

Status Field ID	Field to control the status of steps.
Status	Name Description Numbering Sequence number of steps. Icon Icon used for the step. When using Icon theme, key in icon code from libraries of pixeden-stroke-7-icon ( https://themes-pixeden.com/font-demos/7-stroke ) or fontawesome ( https://fontawesome.com/icons ) into Icon column. Value Value of step display label. Label Step display label to be displayed to end-user.
Theme	Theme of icon.
Icon Color	Color of icon.
Icon Background Color	Background color of icons.
Completed Icon Background Color	Background color of icons once a step is completed.

Image Added

Step Display Datalist Column Formatter

General

Image Added