This week’s Uncle Pete’s corner will be covering creating a Looper with Multiple Columns and adding a break to that Looper that spans all of the columns.

Loopers are  the heart of most E-commerce sites, and most business web applications. They provide an interface that provides a more natural and feature rich interface for the web than table controls. When working on a Windows application I assume a table control unless there is a specific reason for a looper, and for a web application just the opposite: I assume a Looper unless there is a specific reason for a table control.

The heavy reliance on Loopers is what has cause me to do some much experiment and working with Loopers. Once you really start understanding them they are an incredible tool.

For the IGBT.US.com website, we had a requirement to provide a page that list Product Categories (Dual, H-Bridge, PIM, Single, etc.) , these categories needed to be visually divided into Master Categories (IGBT Modules, Diode Modules, GTO Thyristors, etc.). An image needed to be displayed as part of the header of each new Master Category. And finally the categories should be listed in 3 colums in order to fill the space visually and keep more links “above the fold”.

I had done Looper breaks before, in fact we have discuss them in other webinars. I knew it was a simple setting to make a looper display in multiple columns. But I was worried about how to display a Header that would span 3 columns. Turns out that once again WebDev doesn’t dissappoint and will a little work it was possible. Here is a screen shot of the final result.

So let’s start with a simple example and work our way up to the final product. This sample will use a ProductGroup table that contains two string fields (MasterGroup and SubGroup) and a composite key on those two fields, so that our looper will be sorted correctly.

A bit of simple code will generate sample data for this table.

Now we will create a new web page and add a looper to that page. The looper will be based on a our ProductGroup file.

For Now we just want to display the SubGroup

And we want it sorted by our Composite Key

Our looper will use Classic Mode. Will show all the rows on one page and have 3 columns.

After completing the wizard, we get a looper that produces this result.

The first thing we want to do is change the subgroup control to a plan static instead of a formatted display control. So we delete the control (make sure you delete the control and not the looper!) and re-add it as a static.

After a few visual changes to the size and style of the Looper we end up with this display.

At this point we have achieve a couple of the requirements, we are listing the groups sorted properly (yes group 10 comes after group1 but that is because it is a alpha sort), and we have the looper displaying 3 columns. Its time to add a break for the Master Group.

From the content tab of the Looper Description click on the Edit Breaks button.

And set Master Group as the Break

This adds a header and a footer section to the looper.

For now lets add a static to the header to display the Master Group. We will get fancier later.

And of course we have to add an attribute to populate the new static.

After a few additional visual changes we get a display like this

Looking better, we now have a header. And you may even think that we have the header spanning the 3 columns but we do not. If we edit the data and make Master Group 1 a much longer string we can see this.

Notice that it word wraps and doesn’t not span the 3 columns.  Using Google Chrome Developer tools and my HTML knowledge and discover that as we have discussed in other articles WebDev is doing a little extra work for us and generated some table cells that are causing our problems. After some experimenting I discovered that if I create the Header as an HTML control and embed my own code into is I can force the cell to generate the way we need it. this “trick” to this is to define a Horizontal Rule that will be as wide as all 3 columns.

Again using the Google Chrome tools I discover that I need the Horizontal Rule to be 936 Pixels Wide. So we delete the Static we created for the Header and Replace it with an HTML Control

And we need to adjust the Looper Attributes. To now point to the new control, and make sure that we don’t link it to any database items. We are going to manually assign the HTML code in the Looper Display Event.

And finally in the Row Display Event we add the following code

This is simple HTML code to define a Horizontal Rule 936 pixels wide, so that it will span our 3 columns.  We are assigning this to the Looper Attribute which in turn will assign it to our HTML control we just added. Another test of the page shows us this.

Well we are spanning the 3 columns now, but not the exact effect we want. The HR is being stretched by setting of the Table Cell that WebDev is generating, but once we are done, that will magically be corrected! So lets add our heading text back in.

First we add a new attribute to the looper. We link this attribute to the Master Group table field, so that we can have its value available in the code. Notice that this attribute is not assigned to any screen control! This is another one of those subtle concepts that took me quite a while to realize. I use to use hidden statics because I thought that every attribute had to be assigned to a screen control, but as you see they do not, this allows us to have additional data available in the looper, such as primary key id fields, without displaying them. This is similar to hiding fields in an WinDev table.

Now we add an additional line of code to the Row Display Event.

This creates a HTML DIV tab to display the Master Group name. It uses the attribute we just created to retrieve the value of the Master Group name. But what is that class=’ProductGroupHeader’ all about? Well that is there to make sure you have been paying attention. If you don’t know you will have to go back and watch last weeks webinar.

A test of the site now shows we are really close!

The only thing left to do is add images. For this example we are going to assume that the images are in a directory called “ProductTypeImages” underneath the web directory and that the image names will be based on the Master Group Name. So all we do is add yet one more line of code to the Row Display Event.

This is a simple HTML IMG tag pointing to the image. In a production site we would need to do a little work so that the directory would be correct for both production and testing, but that is for a future article. So a final test of the page give us the desired effect.

As you can see with a little experimenting and some knowledge of HTML, loopers can be very versatile and visual elements of your WebDev site. As always I hope this has inspired you to experiment with them for your own needs. And be sure to share what you learn with the rest of us.

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 weekly webinar on all things WX every Friday, 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’]

 

• WEBDEV