How Do I Create a Checkbox in a Form?
This Lesson presents how to create a checkbox button in a data grid form, using the Data Grid Helper Plugin.
This lesson is based on the ExpandingRow stack located in this lesson: http://lessons.livecode.com/m/datagrid/l/9850-how-do-i-create-rows-that-can-expand-contract
and will consist to show you how to replace the arrows images by a checkbox button.
Opening the Form Builder
Double click on the Data Grid to open the DGH plugin, then click on the "Form" topic inside the DGH properties window.
Click on the Edit... button to open the Form Builder.
Populating The Form Data Grid
Clicking on the "Draw List" button populates the Data Grid and will allow DGH to display a preview of the Data Grid in its Form Builder.
Editing controls in the Data Grid Helper Template Area
Double-click on the ArrowExpander image to open the LiveCode Inspector. We will need the Inspector for deleting the ArrowContracted image which is not visible by default.
Click again on the ArrowExpander image to give the focus to the Template Area, then press the delete key on your keyboard, to delete the graphic.
Using the Template Area Controls List for Selecting an Object
Use the Controls Popup (1) for selecting the "ArrowContracted" graphic.
The graphic is "invisible" by default. Chek the visible property checkbox (2) in the LiveCode Inspector.
The graphic is now visible. Click on it (3) to give it the focus, then press the delete key.
Adding the Expanded CheckBox
We are now ready to add and position a checkbox in the Data Grid template.
Drag the Check Box objects from the Classic Objects list (1) and drop it into the Template Area (2)
Use the mouse or the arrows keyboard keys to place and dimension the checkbox the exact location and size you want.
In the Inspector, rename the new checkbox: "expanded" (3) and hide its label (4)
Updating the Row Behavior Script
To reflect the template changes, we have now to edit the script. Click on the "script" button and select the "Edit script" menu item.
Change the mouseUp handler by the following code:
on mouseUp pMouseBtnNum
if pMouseBtnNum is 1 then
switch the short name of the target
case "expanded"
## Update internal data
SetDataOfIndex the dgIndex of me, "expanded", the hilited of the target
## Redraw so LayoutControl and FillInData can update UI
RefreshIndex the dgIndex of me
break
end switch
end if
end mouseUp
And the FillinData message by:
on FillInData pDataArray
-- This message is sent when the Data Grid needs to populate
-- this template with the data from a record. pDataArray is an
-- an array containing the records data.
-- You do not need to resize any of your template's controls in
-- this message. All resizing should be handled in resizeControl.
set the text of field "Name" of me to pDataArray["name"]
set the text of field "Description" of me to pDataArray["description"]
set the hilited of btn "expanded" of me to pDataArray["expanded"]
set the visible of field "Description" of me to pDataArray["expanded"]
end FillInData
Saving the Script and Going Back to the Column Builder Interface
In the Script Editor window, click on the "apply" button, to save the script and close the window.
When DGH is opening the Script Editor it reduces itself as a small palette, so we need to revert it back at its original size.
For doing this, click on the open button, then DGH will display the Column Editor.
Updating the Template Area Content
Click on the Update button (1) to apply the script changes to the Template Area preview (2).
Trying the changes in the Preview
Before applying the changes to your project Data Grid, you can checked all is working as expected by using the Template Area preview.
By checking the checkbox (1), the line expands with no error.
We can consider our job, done, and then click on the "Apply" button (2) to apply the changes to the project Data Grid.
The Final Result
That's it, our Data Grid form is ready to use!
0 Comments
Add your comment