Modify a Table's Default Display

You can modify the default look and feel of tables to provide a more visually appealing display in your application's pages.

Here's how a table mapped to data in a business object (done using the Add Data quick start) displays by default:

Description of the illustration table-defaultdisplay.png

Display table as a grid

By default, tables display as a list. To switch the list view to a more compact grid view:

1. Select the table on the page to view its properties.
2. Select Grid under Display in the Properties pane's General tab.
3. If you want to hide the horizontal and vertical gridlines, select Enabled for the Horizontal Grid Visible and Vertical Grid Visible properties.

Here's how the table looks in grid mode (with the horizontal and vertical gridlines still visible):

Description of the illustration table-grid.png

Reformat content in table columns

It's possible to reformat the content of your data columns to provide a cleaner and more visual display. For example, you might want to show images or visualize data using gauges.

Display images in a column

To display images in a table column:

1. Drag an avatar component from the Components palette and drop it directly onto any row in a particular column on the table (Picture, in our example):
   
   
   Description of the illustration table-dndavatar.png
   
   
2. Update the avatar component's properties as desired, for example, you can change its size and shape as well as give it a background:
   
   
   Description of the illustration table-avatarproperties.png
   
   
3. Switch to the Data tab in the Properties pane. Hover over the Src field and click the down arrow to open the variable picker. Select picture under Current and Row to bind the avatar to the value of that row in the column:
   
   
   Description of the illustration table-bindavatar.png
   
   

Your data now shows as images:

Description of the illustration table-avatarresults.png

Reformat a date column

To change the format used by a date column in a table:

1. Drag an input date component from the Components palette and drop it directly onto a date-based column (Date of Travel, in our example). The component automatically picks up the existing value.
2. Update the component's properties, for example, you can use the Converter property to set the format of the date:
   
   
   Description of the illustration table-date.png
   
   

   You might also want to clear the component's Label Hint field, so Date does not appear in the column.

Visualize data in a column

To visually display data in a table column:

1. Drag a visualization component (for example, the Linear Status Meter under Gauges) and drop it directly onto a particular column in the table (Cost, in our example). The component automatically picks up the existing value.
2. Update the component's properties as desired, for example, you might change the color of the gauge:
   
   
   Description of the illustration table-gauge.png
   
   
3. If your data falls outside the default data range for the gauge component, switch to the Data tab and change the Maximum Value, so your data renders in a more meaningful way:
   
   
   Description of the illustration table-gaugedatarange.png