Inicio arrow Artículos Técnicos arrow CodeCharge Studio arrow Dependent Listboxes (custom action)
Dependent Listboxes (custom action)

One of the most exciting and most underused feature of CodeCharge Studio is its extensibility. Mainly because it has remained largely undocumented, it is rare to see developers taking advantage of custom extensions or custom actions. Some daring pioneers, like Bill Noble or Dave Rexel, started researching the extensions mechanism and sharing what they found with the community.

Following the steps of our dear friends, we tried to wet our feet in that field, and this is the result, our first attempt in CCS extensions. But this time, we tried with custom Actions, both client-side and server-side.

Actions are nothing more than a XSLT transformation template that modifies a page description in memory. When you insert an action, CCS adds an <Action/> element to the page description (the .ccp file). We then, using the XSL code in the action script, expand this action element in a way that tells the CCS generator how to create the intended code, either in HTML for client actions, or in the code module for server actions. Because of the heavy use of XML, XPATH, and XSL, a good understanding of these technologies is very important for extensions developer.

In this, our first attempt at CCS extensions, we implemented an easy to use (and reuse) Dependant Listboxes Action. With this action (actually, there are two, one server-side, one client-side), one can create dual, synchronized listboxes with ease. You add the form with the listboxes and a label to hold the DHTML script, and the action does the rest.

Begin by downloading the custom actions here, then install by expanding the ZIP file in the Components folder. Once installed, the action is ready to use. A sample project using the CCS Internet database is available there. Make sure you change the data source to what is appropriate for your setup.

A quick step-by-step on how to use the Dependant ListBoxes action:

  1. Add a record form to your page
  2. Add the master listbox. Set the list datasource, the bound column and the text column.
  3. Add the slave listbox. Set also the list datasource, but this time, add a field alias to the field that would be compared against the id of the master listbox. Name this alias slave_sync
  4. In HTML view, move to the HEAD section of the html template, then add a simple label. Change the Content type to HTML.
  5. Select the record form, move to the actions tab in the properties window. Select BeforeShow and click the plus sign. In the actions window select Dependant Listboxes.
  6. In the properties for the action, set the Master listbox, the Slave listbox, and the label.
  7. Select the page, then add a client action to the onload event. Select Dependant Listboxes for the action.
  8. That's it. Test your form now.

If you made an error setting the action properties, an error message explaining the error and a corrective action is displayed on the Message window.

This version supports PHP only. Other languages would be added in the future. Another planned improvement is to give the script the ability to handle more than 2 listboxes per page.

Almost forgot. The ZIP file also includes some other actions, like a client-side credit card validation, and an action to refresh your page at set intervals.

That's it for now. We can discuss this and other information in the forums.


Advertisement