Detail View Layout

Detail View Layout

The layout for a detail view is described by a list of layout definitions. There are primarily three types of layout definitions: section definitions, property definitions, and related definitions.

Section Definition

This definition describes a new section to be displayed. The detail view always have one default section and any additional ones are rendered sequentially, in order of access, after the default section. There are a number of options that control how the section will be displayed.

• as: A list of child layout definitions to use.
• options: A set of options to describe the section.
  • title: The title to be displayed for the section.
  • list: true to render the section as a list, false to render it as a field set.

General Definition

This definition describes a property to be displayed. There are a number of options that control how the property will be displayed.

• cls: A CSS class to be applied to the outer element for this property.
• label: A label to be displayed.
• name: The name of the property to be displayed. The provider uses this to extract the raw value from the feed entry.
• provider: A function that takes two arguments, the property name and the feed entry, and returns the corresponding raw value.
  • If no provider is specified, the provider Sage.Platform.Mobile.Utility.getValue, which extracts the value based on it’s dot-path expression, will be used.
  • If no name is specified, the raw value will be the feed entry.
• renderer: A function that accepts the raw value and returns the formatted display value.
  • This property is mutually exclusive with tpl.
• tpl: A Simplate that will be passed the raw value and rendered.
• wrap: A Simple that will be used in place of the default template definitions. This template will be passed the following options:
  • cls: From definition.
  • icon: From definition.
  • name: From definition.
  • label: From definition.
  • entry: The feed entry.
  • value: The formatted value.
  • raw: The raw value.
  • view: The linked view, if specified.
  • context: Context for the linked view, if specified.

Related Definition

This definition describes a related proeprty to be displayed. In addition to the options presented in the general definition, a number of addition options are available that control what this related definition will link to.

• icon: Used by the default related property template to display an icon.
• property: true to render the link out in a similar format to a property, false otherwise.
  • This is usually set to true when linking to a detail view and/or when in-line with other, non-linking properties; false when linking to a list view and/or when contained in a related items section.
• key: By default, a dot-path expression to fetch the key to be passed to the linked view.
  • This value is generally used when linking to a detail view and is exclusive with where.
  • Can either be a string value or a function that accepts the feed entry and returns a string. If it is a string value, it will be passed to the provider to extract the key value from the feed entry.
• where: An SData query expression to be passed to the linked view.
  • This value is generally used when linking to a list view and is exclusive with key.
  • Can either be a string value or a function that accepts the feed entry and returns a string.
• resourceKind: The resource kind to be passed to the linked view. This value is not commonly used.
  • Can either be a string value or a function that accepts the feed entry and returns a string.
• resourcePredicate: The resource predicate to be passed to the linked view. This value is not commonly used.
  • Can either be a string value or a function that accepts the feed entry and returns a string.