Bootstrap Steps Display Plugin

Introduction

The Bootstrap Steps Display Plugin is a Form Element and Datalist Column Formatter that allows you to display status steps with two distinct presentation styles visually. For example, you can show steps as icons with colors in your form or datalist column.

Plugin information

This plugin enhances the visual representation of status progression in your Joget forms and datalists by introducing customizable steps with icons, colors, and connectors.

Get started

Where to get the plugin

You can download the plugin from Joget Marketplace.

How to install

1. Download the plugin from the Joget Marketplace. 
2. Install it in your Joget environment, go to the Plugin Management section, and upload the plugin.

How to use it

The steps display form element plugin

1. Start the Joget server and open the App Center.
2. Log in as an admin, click Design New App, or choose an existing application.
   
3. Fill in the App ID and App Name, then click Save.
   
4. Create a new form, providing the Form ID, Form Name, and Table Name, then click Save.
   
5. Add a Text Field with the ID set as status, then add a Step Display form element and save the form.
   
6. Edit the Step Display form element by adding various status values and selecting corresponding colors. Save the form again.
   
   
   
7. Click the GENERATE APP button to create a CRUD app.
   
8. Launch the Step Display App in the UI builder.
   
9. Go to the newly created form and click New.
   
10. Fill in the status field with one of the status values you configured and observe the results.
    

Steps display list column formatter plugin

1. Edit the List - Step Display Form to use the plugin as a list column formatter.
   
2. Edit the status column and add the Bootstrap Steps Display Formatter.
3. Configure the column by adding the status values and selecting corresponding colors, then save the form.
   
4. Add a new record to the list and observe the results.
   

Configure step display form element properties

Fields to configure:

• ID: Element ID (e.g., step_display creates a corresponding database table column c_step_display).
• Status Field: Field ID to control the status of steps.
• Appearance Scale: Scale and resize the appearance of steps.
• Status
  • Numbering: Sequence number of steps.
  • Icon: Icon used for the step (Use icons from libraries like pixeden-stroke-7-icon or fontawesome).
  • Value: Value of the step display label.
  • Label: Step display label visible to the end-user.
• Theme: Icon theme.
• Connector: Shape of the connector connecting multiple steps.
• Icon Color: Color of the icon.
• Icon Background Color: Background color of the icon.
• Completed Icon Background Color: Background color of the icon once a step is completed.

Configure step display list column formatter properties

Fields to configure:

• Status
  • Numbering: Sequence number of steps.
  • Icon: Icon used for the step (Use icons from libraries like pixeden-stroke-7-icon or fontawesome).
  • Value: Value of the step display label.
  • Label: Step display label to be visible to the end-user.
• Theme: Icon theme.
• Connector: Shape of the connector that connects multiple steps.
• Icon Color: Color of the icon.
• Icon Background Color: Background color of the icons.
• Completed Icon Background Color: Background color of the icons once a step is completed.

Download plugin

You can download the Bootstrap Steps Display Plugin from Joget Marketplace.