Placing Images in HTMLTables for Maintain Applications

By Mark Derwin

HTMLTables are my favorite object when creating WinForms. The HTMLTable allows the user to see multiple rows and columns of a stack. It allows the user to make selections by clicking on columns or headings.

Besides data, a column can contain HTML or images. Using HTML, the developer can add things like check boxes and input fields directly into a row of the table. With Image Path, you can display a thumbnail image. It is a versatile object.

If you use Image Path to display an image in an HTMLTable, it appears at its full size. This means, that if you want a thumbnail version and then a full-size picture, you have to have two copies of the same image. We can avoid this by using HTML instead of Image Path for the CONTENT type of the column.

When using images in Maintain, I find it easier to specify the path to the image in a variable, instead of dragging the image onto the form. This makes deployment easier. In this case I have a simple database containing the product number, product name, and image file name (ProdImg). To load up the stack for the HTMLTable, use the following code:

case getimage
for all next prod_num prodname prodimg into stk
compute path1/a40 = '/approot/image_article/'
compute i/i2=1;	
repeat stk.foccount
Compute stk(i).image/a55 =
'<IMG SRC=' || path1 || stk(i).prodimg || 'WIDTH =30 HEIGHT=30>';
  compute i=i+1;
endrepeat
endcase

After loading the data into the stack, I set the path to the location of the image files. I then loop through the stack and add both HTML Tags and the image path to the stack. When we display the stack in the HTMLTable we see the image that appears on Figure 1.

Make sure that the content type for the image field is HTML, and not TEXT or ImagePath. You may have to adjust the width of the column to get rid of empty space. You could even change the size of the thumbnail image by changing the values in the HEIGHT and WIDTH tags.

In order to display the larger image next to the HTMLTable, assign a link to a column in the HTMLTable, and have it perform the following:

case detail
compute row/i3=form1.htmltable1.clickrow;
compute img/a55 = path1 || stk(row).prodimg;
endcase

The field, IMG, contains the same file name that we used in the thumbnail image and the path. We just omit the HTML Tags. Now, place an image on the form and assign it to the variable IMG. When the user clicks on any row, the full size image is also displayed.

Adding images to your HTMLTables makes selections more interesting. There is no limit to the kind of images you can display.