Implementing List Header Checkboxes in Altio

Screenshot of example app

Here’s a little tutorial on how to set up a checkbox in the header of an Altio list.  The minimum requirements to complete this tutorial should only be that you have an Altio server instance installed, preferably version 5.1 or later.  Why not take this opportunity to try out the 5.2 beta?

Step one is to install an application featuring an Altio list configured to display checkboxes.  Download this application package for an example:

Checkbox Tutorial

To install an Altio archive file place it in the deploy directory of your Altio installation : <Altio_Install>/WEB-INF/classes/deploy.

For example:

/home/tomm/AltioInstalls/AltioLiveStudio5.2Enterprise/tomcat/webapps/altio52/WEB-INF/classes/deploy

or

C:\Program Files\AltioLiveStudio5.2Enterprise\tomcat\webapps\altio52\WEB-INF\classes\deploy

This simple application allows you to “design” a title header for  a website or application by choosing which images to include in the background of the header.  It may be contrived and somewhat limited but it will still serve as a good example as you achieve all of this by clicking check boxes in a list.

Enable header checkbox

So let’s start by adding a header checkbox to the list in the application.  Open the tutorial’s view file in designer and select the VISIBLE column in the list (expand Windows->WINDOW->LIST in the View Explorer and click on VISIBLE).  In the Properties window expand the Appearance group and change the “Show Checkbox in Header” property to “Y”.

If you save your app and run it you should find that a check box has appeared in the header of the checkbox column.  If you click on it to alter it’s value though, you’ll also find that is has no effect.  This is because Altio has no default behaviour for this checkbox; we need to add some application logic to edit the underlying data ourselves.

Add a Header Checkbox Toggled event

The list control has a “Header Check Box Toggled” event fired whenever the user clicks on one.  Click on the list and then select the “Events” tab in the Properties window.  We’ll add a “Set Attribute Value” action to change the value of the list’s data according to the user’s setting in the header checkbox.  Click on the “Header CheckBox Toggled” event in the tree view and find the “Set attribute value” action in the list below.  Double click it to add the action to the event trigger.

Enter the parameters

Click on the parameters tab and enter the following parameters.  You can copy and paste them or build them up using the data builder.

  • Element : /IMAGE
  • Attribute : @VISIBLE
  • Value : ${LIST/VISIBLE.headerchecked}

This means for every IMAGE element, set it’s VISIBLE parameter to whatever the user has set the value of the header checkbox to.  And because the action has been placed under the “Header Checkbox Toggled” event it will run every time the user clicks the checkbox.  Save the application and run it again and you should find the checkbox now works as you’d expect.

UPDATE:  I’ve replaced the flash videos in the post with embedded altio applets.  You’ll need to accept the security certificate to run the application but you can trust us.  Honest.  Also this has been cross posted at altio.com

This entry was posted in altio and tagged , , , . Bookmark the permalink.

2 Responses to Implementing List Header Checkboxes in Altio

  1. Gianni says:

    Well done. Is impressive. Almost forgot how to do it and how it looks like.
    EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE

  2. HeyChinaski says:

    That is the best comment I’ve had on my blog yet.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">