...

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 icons with color in your form or datalist column.

Get

...

started

Steps To

...

Steps To Import This Plugin

...

Use Steps Display Form Element Plugin

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 an existing application.
   
   Image Added
   
   
2. For a new application, fill up the App ID and App Name then proceeds to click

...

1. on the Save button.

...

1. 
   
   Image Added
   
   
2. Create New Form, fill up Form ID, Form Name and Table Name then click on the 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
   
   
   

Steps To Use Steps Display Datalist Column Formatter Plugin

1. 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. Edit the column by adding status accordingly and selecting color then save the form. 
   
   Image Added
   
   
3. 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

Image Added

Name	Description

Screen (Click to view)

ID	Element ID (By declaring as "

requestStep

step_display", a corresponding database table column "c_step_

requestStep

display" will be created)

Image Removed

Status Field

ID

	Field ID to control the status of steps.
Appearance Scale	To scale and resize the appearance 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.
Connector	Shape of connector that connects multiple steps.
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.

Step Display Datalist Column Formatter

General

Image Added