Rapide provides a number of options for enhancing the look and feel of listboxes:
In the example below, bitmaps have been used in listbox columns to show a picture of the selected resource. The image is dynamically loaded based on the data in the Gen group view. The image can either come from a static resources file containing the images or from a BLOB view with Gen 8.5 or higher.
A simple Y/N column has also been converted to display a checkbox, which is much more intuitive to the user indicating that the cell can be clicked to tick/un-tick the checkbox.
Column sizes can be changed with a simple mouse drag on the heading and rearranged by dragging the column to a new position. The user can also sort on columns by clicking on the column heading.
With Rapide, listboxes can also be displayed as tree controls and also have a selectable checkbox as shown below.
Rapide's overlay control option allows you to 'overlay' the contents of a cell with an editable control. This could be a simple text field, a push button, drop-down, date picker, slider, spinner, etc.
In the example below, various columns contain editable controls, for example a spinner, checkbox, date picker and drop-down.
The above example used the same overlay control for each cell in the column. In the example below, the overlay control in the cell is dynamically defined, allowing different cells in the same column to use a different control. This is especially useful for property sheets.
Another feature for Rapide listboxes is the ability to use HTML markup to format the data in a cell. The listbox below is a standard Gen listbox which has been enhanced with Rapide. The data in the Model column contains HTML code that displays the picture and text with formatting markup which is then rendered. The data in the Retailer column is a simple HTML link which will open the link in a separate tab of the browser when clicked.
Row Templates provide a mechanism for sophisticated layout of listboxes on browser and mobile platforms. They are especially useful for use on mobile platforms where HTML markup is not supported.
With the row template style, each row consists of a single column with the Gen listbox attributes placed as cells within the row. Click events are supported on each cell and for browser platforms the cells can also contain HTML markup.
The example below shows a row template layout. Each of the cells is specified in a separate attribute of the group view and the layout defined using the Rapide Designer.
A listbox can be displayed as a grid instead of a simple row-based listbox.
With a grid layout, the Rapide runtime automatically displays the listbox rows in cells, with multiple cells per line, according to the overall width of the listbox.
As with other types of listboxes, column data may be enhanced as images and sophisticated layout within the cell is accommodated with the same approach as row templates.
In the example below note how the layout adjusts automatically when the device is rotated and also the use of a pagination control to indicate how many pages are available.
When you have a listbox that contains many columns and the user has to scroll sideways to see all of the data, it is often useful to be able to fix the position of one of more 'identifier' columns on the left of the listbox so that these do not scroll, and hence the user is able to relate the data in the right most columns to the row identifier. Rapide now allows you to fix the position of one or more columns so that these do not scroll horizontally.
After scrolling to the right, notice that the Type and Resource columns are fixed in position:
This feature allows the developer to specify that listboxes on desktop and browser platforms have an additional blank row to enable the user to easily add new records into a listbox. In the example below, there are four rows in the group view, with a blank row available for the user to enter data into.
For mobile platforms, a common user interaction to refresh a list of data is to pull down from the top of the listbox. Rapide supports a "Pull to Refresh" action for listboxes and row templates. When the user pulls down from the top of the listbox, a specified event is triggered in the procedure step and a message plus spinning icon informs them that the data is being refreshed.