Detail View Layout - Sage/argos-sdk GitHub Wiki

The layout is returned in the function createLayout() which is typically found as the last function of a view. The layout object (this.layout) is an array that contains row objects, which may contain a title and their own child rows (example: More Details), or just one big list of rows (Edit Views).

The Detail View is meant to be read-only with all its details and related actions. Therefore the properties available for Detail rows are geared towards representing data, or adding the ability to do something related.

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

This definition describes a new section to be displayed. The detail views always have one default section and any additional ones are rendered sequentially after the default section. Sections are characterized by the children: [] property with child rows underneath, and are treated as a collapsible header. There are a number of options that control how the section will be rendered:

• 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: determines the initial state of the section, a value of 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: [...]
    }

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.

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 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
            }
        ]
    }]);
}