Skip to main content

Item templates

You can use a number of item templates in your own blocks, such as list and detail blocks. When you're building your own block, you'll want to pick the most suitable item template to display information according to your requirements.

Items can be laid out in multiple ways; see Item layouts.

All items have common properties together with item-specific properties. Items can also have item-level actions, such as Edit and Delete actions.

The following templates are included:

Item layouts

The following layouts are available:

Layout Description Usage Supports
Row Layouts items out vertically, one underneath another. The width is the same for all items; the height can vary for each item. LIST block flexible, goal, note, people, worklist
Grid Items are presented in a grid and laid out left-to-right, top-to-bottom. All items have a fixed width and height. On smaller devices, Grid will respond down to Row. LIST block flexible, people
Grid-mini Similar to the grid but with a much smaller fixed width and height. Grid-mini will also be shown on mobile devices. LIST block flexible
Detail An item is presented with all its detail; designed for single-object viewing DETAIL block goal, vacancies
Map When presented on a Google Map, this item is shown when clicking on a map marker. It's usually similar, visually, to Row. SEARCH block vacancies, people

Common properties

All types of items have the following properties:

Property Description
type The item's type, eg, flexible, goal
pageId (optional) The first part of the item's hyperlink (see page Ids)
objectId (optional) The second part of the item's hyperlink (see object Ids)
target (optional) Set to modal to open the target in a modal window. This is only relevant when page Id is specified; this is not supported when href is supplied
href (optional) Alternative to setting page Id and object Id; use either href or a pageId/objectId pair. Use of pageId and objectId is preferred over the use of href unless specifying an external URL
linked.actions An array of actions that can be performed on the item. See Item actions.

Item actions

Each item action in an array can have the following properties:

Property Description
id The identifier for this type of action. This is required.
title The title of the action
operation The HTTP verb that will be used when the action is performed. This is required. Choose between PUT, POST, DELETE, or LINK. Use LINK to link to an existing in-app page rather than perform an action.
href The HTTP endpoint that will be called when the action is performed. This is required when the operation is PUT, POST, and DELETE. If the operation is LINK, page Id and object Id are preferred over href.
page Id The first part of the item's hyperlink (see page Ids). Only applicable when the operation is LINK; use of page Id and object Id is preferred over href in this case.
object Id The second part of the item's hyperlink (see object Ids). Only applicable when the operation is LINK; use of page Id and object Id is preferred over href in this case.
target Set to modal to open the target in a modal window. This is only relevant when the operation is LINK and the page Id is specified; this is not supported when href is supplied.
bulkActionEnabled The true or false value that determines whether this item action can be bulk performed or not
meta.options.color The color name of this action. Choose from positive, balanced, energized, and assertive.

Here is an example of a SQL statement that returns an item with two item actions:

  SELECT 'flexible' "type"
        ,'hello world' "line1"
        ,XMLElement
          ("actions"
          ,XMLAttributes
            ('true' as "json:force-array"
            ,'http://json.org/' as "xmlns:json")
          ,XMLElement
            ("action"
            ,XMLForest
              ('delete' "id"
              ,'Delete' "title"
              ,'true'   "bulkActionEnabled"
              ,'DELETE' "operation"
              ,xxas_com_rest_util_pkg.uri_from_path('absence/12345') "href")
            ,XMLElement
              ("meta"
              ,XMLElement
                ("options"
                ,XMLForest
                  ('assertive' "color")
                )
              )
            )
          ,XMLElement
            ("action"
            ,XMLForest
              ('edit'     "id"
              ,'Edit'     "title"
              ,'false'    "bulkActionEnabled"
              ,'LINK'     "operation"
              ,'absences' "pageId"
              ,'12345'    "objectId"
              ,'modal'    "target")
            )
          ) "linked"
  FROM   dual;

Sections in this article