Uncle Pete’s Corner – WebDev Looper With Break Header – FAQ Example

unclepetecorner

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.

2014-05-27_0947

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.

2014-05-24_0602

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.

2014-05-24_0621

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.

2014-05-24_0622

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.

2014-05-24_0642

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

2014-05-24_0634

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.

2014-05-24_0636

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

2014-05-24_0640

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:

2014-05-24_0720

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

2014-05-24_0722

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.

2014-05-24_0723

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.

2014-05-24_0728

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.

2014-05-24_0850

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.

2014-05-24_0851

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.

2014-05-24_0854

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

2014-05-24_0856

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

2014-05-24_0859

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

2014-05-24_0900

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’]

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

One thought on “Uncle Pete’s Corner – WebDev Looper With Break Header – FAQ Example

  1. I really found all the sessions on loopers very helpful. I would like to see more on using combo boxes in loopers and how to use the looper footer feature.

    Like

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s