I recently had a client that needed a good example of a WebDev Looper that had a break header that used an Image to control the collapse and expansion of the breaks. So I dusted off my FAQ example I created a while back, upgraded it to WebDev 19, and documented all the code involved. So thanks to one of my clients, in this week’s webinar/article, we will go over that example.

This will give you a good idea of how to work with Breaks with WebDev Loopers which can be used for several interesting interface requirements. I have even used them to create a Parent/Child style entry form in the past. So read on and enjoy…

Let’s start with a screen shot of what we are building.

This is a Looper, with a break configured on category. As you see when we collapse the Category 2 the image changes from a “minus” to a “plus”.

Let’s take a look at the Analysis for this example.

It is a simple Parent/Child Relationship.

FAQCategory – Contains the Category Headings for a Frequently Asked Questions Web Page.
FAQEntry – Contains a Question and its related answer

Next we create a Query that “flattens” out the Parent-Child Relationship so that we have one row for each FAQEntry and that row contains the information from the FAQCategory as well.

If we run the query we will get the following result. Notice how the data from FAQCategory is repeated with each row and that the data is sorted by FAQCategoryID.

We will start with a simple version of the Looper and then expand on it.

First I created a Looper based on the Query we just created. The Looper is set for Classic mode and no limit to the number of rows.

Make sure that the Looper is loaded in Memory. Otherwise it will not be able to correctly handle the breaks.

Next I click on the Edit the Breaks button and define the break on FAQCategoryID. Which was my only option since that was the field sorted by. For now I have left the simple Collapsable/Expandable breaks via simple click in background option turned on, we will adjust that later.

This creates a Looper with 3 sections. A Header and Footer Break, plus the body of the Looper.

To adjust the entire space of an entry, you resize the Looper as you would normally. To adjust the size of the Header or Footer break, you drag the internal blue margin lines for the Header or Footer, in other words the Header and Footer space is “borrowed” from the Looper Space.

You will also notice that I adjusted the style so that there isn’t background shading for Odd and Even rows as I find that distracting with Breaks.
And finally you will see that I added a static (linked to the description from the FAQCategory.Description in the Query) to the header. And two statics to the body (linked to the appropriate fields for the Question and Answer)

Running a test at this point gives us a page that looks like this:

And if you click on any of the categories they collapse like this.

Now let’s add an image for controlling the collapse and expansion.

In order to have an Image control the Collapse and Expand logic, we first turn off the Simple Click option.

Next I created a couple of hidden image controls off the screen with the Plus and Minus Images in them. This is just an easy trick to get the Images correctly included in the project, since we will be setting them dynamically in the Looper code.

Next I create a Clickable Image and add it to the Header section of the Looper. Make sure they it is a Dynamic Image, otherwise it won’t change on the fly, and that it is clickable. I have it initially set to the Plus Image just so that I have something showing visually at design time.

We add one new attribute to the looper (attButtonImage) and set it to the Image Controls Image attribute. Notice we don’t link this attribute to anything in the query.

We add three lines of code to the Row Display Event. This is to initially populate the Images with a Minus Image, since all the break will initially be expanded.

We add six lines of code to the click event of the new clickable image, making sure that we set the Event to AJAX enabled, so that a screen refresh doesn’t happen.

Line 1: Toggles the expanse or collapse of the break.

Line 2: See if the current Image being displayed is a Minus

Line 3: Changes the Image to a Plus if it was a Minus

Line 5: Changes the Image to a Minus if it was a Plus

Now when we run the test we see the page initially like this

And if we click on an image to collapse it we see this

That is a simple example of a Looper with a break. Hopefully it will inspire you to explore them more and you will find many uses for them in your WebDev projects.

Be sure to go over to wxLive.us and watch the Uncle Pete’s corner webinar that is the companion to this article. 

Uncle Pete’s Corner is webinar series on all things WX, to watch the recorded version of this webinar, many other WX related webinars or to watch future ones live go to wxLive.us

[suffusion-the-author display=’author’]

[suffusion-the-author display=’description’]

• WX