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.

• title: The title to be displayed as the section header.
• list: is a boolean value. If true it will render the children rows using a list style template, when false as a field set.
• name: Is a unique name used as an identifier (especially in customizations).
• collapsed: a boolean value that determines the initial state of the section, true will hide any child rows.
• use: a template (Simplate) that overrides the one used to display the HTML.
• children: An array containing row objects, a list of child layout definitions.

/* Simple Section object: */
    {
        title: this.detailsText,
        name: 'DetailsSection',
        children: [...]
    }

General Definition

The children row objects describe properties, fields, actions. There are a number of options that control how these will be displayed.

• cls: A CSS class to be applied to the outer element for this property.
• label: A label to be displayed next to the field.
• name is the unique name of the row/field, used as an identifer (especially in customizations).
• property: The name of the property to be displayed. The provider uses this to extract the raw value from the SData feed entry.
• provider: A function that if defined will be used to retrieve 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 or template: A Simplate that will be passed the raw value, then renders it.
• wrap: A Simplate 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.
• security: Secured Access role string required to perform action. Will add to HTML a disabled= with appropiate true/false of access.
• action: If defined it signifies this is a clickable action row, the string being the name of the function to call when clicked.

Related Definition

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

• icon: Used by the default related property template to display an icon. Relative path to an image.
• 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.

With so many options available, some of them inclusive of other options, here are a few actual samples that you may encounter:

createLayout: function() {
    return this.layout || (this.layout = [{
        title: this.detailsText,
        name: 'DetailsSection',
        children: [
            /* Simple row to display SData info */
            {
                name: 'AccountName',
                property: 'AccountName',
                label: this.accountText
            },

            /* Action row */
            {
                name: 'AddNoteAction',
                property: 'AccountName',
                label: this.addNoteText,
                icon: 'content/images/icons/New_Note_24x24.png',
                action: 'addNote',
                security: 'Entities/Account/CustomAction'
            }]
    },{
        title: this.relatedItemsText,
        list: true,
        name: 'RelatedItemsSection',
        children: [
            /* Related View row */
            {
                name: 'ActivityRelated',
                icon: 'content/images/icons/To_Do_24x24.png',
                label: this.relatedActivitiesText,
                where: this.formatRelatedQuery.bindDelegate(this, 'AccountId eq "${0}"'),
                view: 'activity_related'
            },

            /* More Complex row */
            {
                name: 'AlarmTime',
                property: 'AlarmTime',
                label: this.alarmTimeText,
                renderer: Mobile.SalesLogix.Format.date.bindDelegate(this, this.alarmDateFormatText),
                include: this.doesActivityHaveReminder
            }
        ]
    }]);
}