...

1. Start the Joget server and open the App Center.
   
   
2. Login as admin and click on Design New App or click on existing application.
   
   
3. For new application, fill up the App ID and App Name then proceeds to click on Save button. 
   
   Image Modified
   
   
4. Create New Form, fill up Form ID, Form Name and Table Name then click on Save button.
   
   Image Modified
   
   
5. Fill up the form with a Text Field with the id as status and a Step Display form element then save the form. 
   
   Image Modified
   
   
6. Edit the Step Display form element by adding a few status and selecting color then save the form. 
   
   Image Modified
   
   Image Modified
   
   
7. Click the GENERATE APP button and generate a CRUD.
   
   Image Modified
   
   
8. After creating the CRUD, launch the Step Display App Userview.
   
   Image Modified
   
   
9. Go to the newly created form and click on New button.
   
   Image Modified
   
   
10. Fill up the status field with one of the values added in the status of Step Display form element and observe the results.
    
    Image Modified
    
    
11. To use the plugin as a datalist column formatter, edit the List - Step Display Form.
    
    Image Modified
    
    
12. Edit the status column and add the Bootstrap Steps Display Formatter.
    
    Image Modified
    
    Image Modified
    
    
13. Add a new record to the datalist and observe the results. 
    
    Image Modified
    
    
    

Step Display Form Element Properties

General

Image Modified

Step Display Datalist Column Formatter

General

Image Modified