Versions Compared

Key

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

...

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.

Steps To Import This Plugin

...


Get started

Steps To Use Steps Display Form Element

...

Plugin

  1. Start the Joget server and open the App Center.

  2. Login as admin and click on Design New App or click on an existing application.
    Image Removed
    Image Added

  3. For a new application, fill up the App ID and App Name then proceeds to click on on the Save button. 
    Image Removed
    Image Added

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

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

    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 Removed

    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.

    Image Modified

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

    Image Modified

  3. Edit the column by adding status accordingly and selecting color then save the form. 

    Image Added

  4. Add a new record to the datalist and observe the results. 
    Image Removed
    Image Added


Step Display Form Element Properties


General

Image Added



ID
NameDescription

ID

Element ID (By declaring as "requestStepstep_display", a corresponding database table column "c_step_requestStepdisplay" will be created)
Status Field

Field ID to control the status of steps.

Appearance Scale

To scale and resize the appearance of steps.

Status
NameDescription
Numbering

Sequence number of steps.

IconIcon 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 ColorColor of icon.
Icon Background ColorBackground color of icons.
Completed Icon Background Color

Background color of icons once a step is completed.

...



Step Display Datalist Column Formatter


General

Image Added



NameDescription
Status
NameDescription
Numbering

Sequence number of steps.

IconIcon 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 ColorColor of icon.
Icon Background ColorBackground color of icons.
Completed Icon Background Color

Background color of icons once a step is completed.

...