How Do I Create a Progress Bar in a Column?

This Lesson presents how to create a column containing a Progress Bar in a datagrid, using the Data Grid Helper Plugin.

Opening Columns Builder

Opening Columns Builder

First, drag a datagrid onto a stack and double click on it to open the Data Grid Helper (DGH) Properties Palette.

Click the "Edit..." button to open Columns Builder.

Building Columns in the Columns Builder Preview

Building Columns in the Columns Builder Preview

Click the (+) button and add three columns.

Name the last column "Progress Bar".

Button Creation Using Classic Objects and Column Content

Button Creation Using Classic Objects and Column Content

Open the Classic Objects, Columns Builder Properties topic (1)

Double click on the "Menu" header (2)  to open the Column Content (3)

Next, drag the Progress Bar image from the Column Builder Properties and drop it in the Column Content Area (4)

Update Columns Builder Preview

Update Columns Builder Preview

Click the Update button to refresh the Column Builder Preview content (1).

A field named "_ColumnData_" will also be automatically added in the Column Content.

We have no need of that field in this lesson. Remove it by selecting it's name in the Object List of the Column Content Area (2), after the field is selected in the Column Content, on your keyboard, press the Delete or suppr key.

Editing the Progress Bar Properties

Editing the Progress Bar Properties

Double clicking on the Progress Bar in the Column Content, will open the Properties Inspector.

Enter a name for the progress bar. Example: myFirstProgressBar

Input a list of possible values for this menu.

Using DGH To Build The Required Script

Using DGH To Build The Required Script

DGH can now  build the required script for managing this progress according to the column data.

Click the Script Editor icon and select the "Build Script" menu.

Confirm Script Updating

Confirm Script Updating

Click the "Update" button to update the script of the column.

Confirming the warning message

Confirming the warning message

Click the "Erase" button to replace the column default script with the script built by DGH.

Update Column Content Then Apply The Column Builder Preview To The DataGrid

Update Column Content Then Apply The Column Builder Preview To The DataGrid

After the script is built, update the DataGrid Preview, by clicking the "Update" button.

Then, click on the "Apply" button to apply the modifications to the selected DataGrid (1).

Testing The Result - Step 1 : Inputing some Data

Testing The Result - Step 1 : Inputing some Data

To test the result, open the Contents tab of the LiveCode's Property Inspector, then input some data.

Separate data of each column by a tab, and each line by a return.

In the Progress Bar column, note we have input two values separated by a comma.

  • The first value is the max value of the progress bar.
  • The second value is the current value of the progress bar.

The ready to use script installed by DGH uses these two values for displaying the Progress Bar. If the current value is set to - 1 the scroll bar is hidden. Any other value (including zero) will display the Progress Bar in the column.

Testing The Result - Step 2 : Creating a Script for Managing our Progress Bar Column

Testing The Result - Step 2 : Creating a Script for Managing our Progress Bar Column

For changing the state of our progress bars, we have just to update the values in the progress bar column.

Add two buttons in the card and name it respectively: "Launch!" and "Reset"

In the "Launch!" button, add this script:

on mouseUp

  repeat with tTheProcess = 1 to 3

     put tTheProcess * 100 into tEndStep

     repeat with x = 10 to tEndStep step 10

        dispatch "setDataOfLine" to grp "datagrid 1" with tTheProcess, "Progress Bar", tEndStep & comma & x

        dispatch "RefreshLine" to grp "datagrid 1" with tTheProcess

        wait 150 millisecs with messages

     end repeat

  end repeat

end mouseUp

And in the "Reset" button, input this script:

on mouseUp

  repeat with tTheLine = 1 to 3

     dispatch "setDataOfLine" to grp "datagrid 1" with tTheLine, "Progress Bar", "100, -1"

     dispatch "RefreshLine" to grp "datagrid 1" with tTheLine

  end repeat

end mouseUp

You can also copy / paste the scripts from this lesson.

Then, click on each buttons for testing the result.

0 Comments

Add your comment

E-Mail me when someone replies to this comment