Adding images to tables

You can display BMP, JPEG, JPG, GIF, and PNG image types in list view and tree view tables as shown in the following figure and the following figure. The images are based on shared image objects stored in the AR System server (see Adding-icons-and-images-to-Progressive-Web-Applications). They are displayed by reference.

Images in a tree view table

Images in a list view table

In each table node or cell, the images can appear with or without text. When images appear with text, the images and text do not need to have a one-to-one relationship. Likewise, the same text can appear with different images (see "Emily" in the above figures).

Images and their alternative text are stored with a form view, so they can be localized.

Images are always optional. Images can be decorative, or they can convey important information (see the second level/column in the above figures).

When using images in tables, consider these limitations:

• In standard left-to-right format, images are displayed to the left of the text. In right-to-left format, images are displayed to the right of the text. You cannot change these default positions.
• Images in tables can be associated only with the values in selection fields (drop-down list, radio button, and check box). For example, in a table on a default regular form, images can be linked only to the value of the Status field no matter which column they appear in. 
• Alert lists, results lists, and cell-based tables do not support images displayed by reference. You can, however, display images in cell-based tables by adding a view field to the cell and using a template to display the image inside the view field (see View-fields).
• Although reserved field ID 1020 acts like a results list in web applications, it does support referenced images.
• A column cannot contain both referenced images and buttons, and you cannot use the images in tables feature to display different images on buttons in the same column. For information about adding buttons that contain images to tables, see Adding-buttons-and-URLs-to-tables.You cannot configure images in tables through AR System skins. 

Choosing the best size for your image

Images in list view tables can be any size. AR System server uses them as is. 

Images in tree view tables must be no larger than 16 X 16 pixels. If you use other sizes, in browsers, AR System server scales larger images down proportionally. For example, a 32 x 25 pixel image is scaled to 16 x 12.5 pixels. If the height and width of an image are less than 16 pixels, AR System server leaves the image as is. 

Application developers must ensure that their table columns are wide enough to contain the specified images, textual data, or both. In list view tables, row height automatically adjusts to fit the tallest image. The font size, however, does not adjust to accommodate "large" images.

Because the images are downloaded to a browser, the larger the image, the slower the download. To improve performance, keep images as small as possible.

To add an image to a list view or tree view table

1. In Developer Studio, open the form that contains the table.
2. In the table, select the column field in which you want the images to appear.
3. In the Properties tab, select the Column Images property, and click its ellipsis button.
   The Column Images dialog box appears.
4. In the Selection Field field, enter the name of the selection field (drop-down list, radio button, or check box) whose values will determine which images appear in the column selected in step 2.
   You can enter the name by typing it, by pasting it, or by using the ellipsis button next to the field to display the Field Selector dialog box.
   When you select a field, the field's selection values automatically appear in the dialog box table.
5. In the table, select the Image cell of a value with which you want to associate an image, and click its ellipsis button.
   Images can be associated with the NULL value.
6. In the Image dialog box, click Select.
7. In the Object Selector dialog box, select the appropriate image, and click OK.
8. (Optional) In the corresponding Alternative Text cell, enter a description of the image to improve usability for vision-impaired users.
9. Repeat step 5 through step 8 for each value that you want to associate an image with.
10. Click OK.
11. (Tree view tables only) If any levels of the hierarchy contain only images, no text:
    1. Select the table.
    2. On the Properties tab, enter a space in the Value column of the Display NULL Value As property.
       Otherwise, the text [No Value] appears next to the images at runtime.
12. To control the sort order of the following types of levels or columns, insert a hidden sort level or column before such levels or columns:
    • Image-only levels or columns (see the flag level in the following figure)
    • Levels or columns in which images are the only differentiators (see the "Emily" nodes in the following figure)
      See Setting-sort-order-and-visible-levels.
      (Tree view tables only) If you do not use a hidden sort level in these situations, only the image in the first request in that level appears. For example, see the following figure. 
      

To add an image to the root node of a tree view table

1. In Developer Studio, open the form that contains the tree view table.
2. Select the tree view table.

3. In the Properties tab, enter a label in the Label property's value cell.
   This label appears in the tree view table's root node. For example, in the above figure, "Bug Fix Priority" is the label of the root node.

   If the Label property does not have a value, the root node does not appear in the table. This is true even when an image is specified for the root node.

4. In the Properties tab, select the Root Node Image value, and click its ellipsis button.
5. In the Root Node Image dialog box, click Select.
6. In the Object Selector dialog box, select the appropriate image, and click OK.
7. Click OK.

8. (Optional) In the Properties tab, enter the appropriate text in the Alternative Text property's value cell.

   If the tree view table is converted to a list view table, the Label, Root Node Image, and Alternative Text property values are ignored.

How column display types affect images

The value of a column's Display Type property affects images as follows:

Images at runtime

By default, images in tables are cached as a form is generated. If you reference many images in your tables, consider pre-caching them. This prevents the first user who opens a form from waiting for the images to be cached.

If a selection value changes at runtime, users must refresh the table to display the image associated with the new value.

To add images to a list-based table column

1. Log in to Developer Studio and then open a form in progressive view.
2. Drag the Table - List View field onto the form.
3. Double-click the Table - List View field.
4. In the Properties pane, expand the Attributes property group.
5. Click Tree/Table Property, and then in the Value column, click the ellipsis () button.

6. In the Table Columns section, add the selection field for which you want to add images.
   
   
   

   Important

   To add a custom image, you must first upload it to the server.

7. Double-click the column to which you want to add images.
8. In the Properties pane, expand the Image property group.
9. Click the Column Images property, and then in the Value column, click the ellipsis () button.
10. In the Column Images dialog box, click the ellipsis () button for a selection value.
    
11. In the Image dialog box, click Select to choose an image from your computer.
    
    The image is added for the selection value. This image is displayed in the table column.

12. Double-click the table column and then in the Image property group, select one of the following values for the Field Value To Define Images property:

    Value	Description
    Clear	The default value. No image or text is displayed in the table column.
    Show Image	Only the image is displayed in the table column.
    Show Text	Only the text (the selection value) is displayed in the table column.
    Show Both Image and Text	Both the image and the text are displayed in the table column.