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
Building Columns in the Columns Builder Preview
Button Creation Using Classic Objects and Column Content
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
Using DGH To Build The Required Script
Confirming the warning message
Update Column Content Then Apply The Column Builder Preview To The DataGrid
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
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:
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
And in the "Reset" button, input this script:
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
You can also copy / paste the scripts from this lesson.
Then, click on each buttons for testing the result.