Skip to content

Dashboard Tile Objects

Working with CSS Styles
Extended CSS Class Styles

When you create a new Mobile Web Project in the Studio, it creates a template Dashboard view that contains a set of four tile objects.

The first tile object has been configured to display information about the user that is currently logged in. The remaining tile objects are not configured for any purpose. This topic discusses how to configure the Dashboard tile objects to perform basic navigation and to display information.

Object Structure and Styling

Object oTiles_grp is a cWebGroup
    Set pbShowBorder to False
    Set piColumnCount to 12
    Set psCSSClass to "TilesGroup"

    Object oTile1 is a cWebHtmlBox
        Set piColumnSpan to 6
        Set psCSSClass to "Tile"
    End_Object

    Object oTile2 is a cWebHtmlBox
        Set piColumnSpan to 6
        Set piColumnIndex to 6
        Set psCSSClass to "Tile"
    End_Object

    Object oTile3 is a cWebHtmlBox
        Set piColumnSpan to 6
        Set psCSSClass to "Tile"
    End_Object

    Object oTile4 is a cWebHtmlBox
        Set piColumnSpan to 6
        Set piColumnIndex to 6
        Set psCSSClass to "Tile"
    End_Object
End_Object

The above code demonstrates the structure of DataFlex objects used to create the dashboard tiles.

A cWebGroup object is used to group the individual tiles together. Note that the group’s psCSSClass property is set to “TilesGroup”. This is required to position and style the tiles contained within the group.

Each tile is represented by a cWebHTML box object. The HTML box is required in order to generate additional HTML elements that will form the content of each tile. Note that the HTML box’s psCSSClass property is set to “Tile”. This is required in order to apply the correct appearance to each tile.

Additional CSS classes can be added to each tile to configure the tile’s background color. Four color styles are available and can be applied by adding the following class name to each tile’s psCSSClass property:

  • Light: This is the default and will give the tile a light blue background.
  • LightAlternate: This will give the tile a light grey background.
  • Dark: This will give the tile a dark blue background.
  • DarkAlternate: This will give the tile a dark grey background.
Set psCSSClass to "Tile DarkAlternate"

The above code shows how you would set the psCSSClass of a cWebHTMLBox tile object to give it a dark grey background.

Custom Background Colors

.ForestGreen.Tile .WebCon_Sizer {
    background: #22742B;
}

The above style declaration shows how you can create your own tile background color. You would declare this style in your workspace’s application.css file. The new color would be applied to a cWebHTMLBox tile as follows:

Set psCSSClass to "Tile ForestGreen"

Tile Structure and Content

The structure and content of each tile is given by the HTML that is generated by the tile’s cWebHTML box object. There are two basic div element structures that can be generated:

  1. Big Label: Used for a tile that contains a large label and optionally a smaller sub-label. The basic structure of div elements that should be generated by the cWebHTMLBox is as follows:

    <div class="Tile_BigLabel">Caption</div>
<div class="Tile_SmallLabel">Smaller caption</div>

  2. Big Icon: Used for a tile that contains a font icon and optionally a small label beneath the icon. The basic structure of div elements that should be generated by the cWebHTMLBox is as follows:

    <div class="Tile_Icon IconClass">Small Caption</div>

Note that to display an icon, the div element’s class attribute must be set to “Tile_Icon” plus the CSS class name that represents the icon that you wish to be displayed. For example, to display a trashcan icon, you would declare the div element as follows:

For a full set of the available font icon CSS Class names, refer to the “Font Icon CSS Class Styles” help topic.

Tile Actions

Click actions for each tile can be defined via the cWebHTMLBox click event handler. Three steps are required to handle click events:

  1. Set the cWebHTMLBox’s pbServerOnClick property to True.
  2. Create an OnClick event handler.
  3. Configure one (or more) of the generated div elements to trigger the server OnClick event.

If you configure the outer WebCon_Sizer div element, then the click event will be processed for the entire tile, which is normally what you would want.

The following shows how you would configure the WebCon_Sizer div element to trigger a server OnClick event and pass the string “myID” as the first parameter. For more information, refer to the cWebHTMLBox topic in the Class Reference.

To configure the click event to navigate to a new view, you would send the normal navigation message to that view from the OnClick event handler.

Procedure OnClick String sId String sParam
    Send NavigateForward to oSelectCustomer nfUndefined Self
End_Procedure

The above code demonstrates how you would configure a tile’s click event to navigate to a view called oSelectCustomer.

You are encouraged to study the Dashboard.wo view in the Web Order Mobile sample workspace to see examples of complete tile objects.

Previous Topic: Working with CSS Styles
Next Topic: Extended CSS Class Styles

See Also

Developing Web Applications