Skip to content

Page

Pages contain the control definitions that make up each app page.

Page Properties

Property Type Required Default
ActionBar ActionBar No
Caption string No
Controls array No
DataSubscriptions DataSubscriptions No
FioriToolbar FioriToolbar No
OnActivityBackPressed ActionOrRule No
OnBackButtonPressed ActionOrRule No
OnCustomEventDataReceived ActionOrRule No
OnLoaded ActionOrRule No
OnResume ActionOrRule No
OnReturning ActionOrRule No
OnUnloaded ActionOrRule No
PrefersLargeCaption boolean No false
PullDown PullDown No
Result TargetPath No
ToolBar ToolBar No
_Name string No
_Type const Yes

ActionBar

The navigation bar that is typically at the top of the page.


Caption

Title caption of the app.

  • type: string

Controls

List of controls appearing in page content. Typically, it only supports a maximum of 1 control. It supports 2 controls only when the first control is a SectionedTable that contains ObjectHeader, ProfileHeader, KPIHeader, or other controls and extensions, and the second control is a Tab control.

  • type: array

All items must be of the type:

One of the following conditions need to be fulfilled.

Condition 1

Condition 2

Condition 3

Condition 4

Condition 5

Condition 6

Condition 7


DataSubscriptions

Array of data change events to subscribe to.


FioriToolbar


OnActivityBackPressed

This event is triggered when a user presses the system Back button. To cancel the default back navigation, call the context.getAppEventData() Client API and set the cancel property of the returned JS object to true in your event handler.

This is applicable to Android platforms only. PLT formatter is not supported.


OnBackButtonPressed

This event is triggered when a user presses the back button in the action bar. This event will not be triggered when ClosePage action is triggered or System Back button (Android) is pressed. If a false is returned from the handler then the back navigation is cancelled, if true or void or undefined or null is returned then the back navigation continued.


OnCustomEventDataReceived

This event is not triggered automatically. It is triggered by calling the executeCustomEvent PageProxy API from extensions, rules and etc. In your event handler, calling the context.getAppEventData() returns a JS object containing the EventType and EventData properties.


OnLoaded

The event handler that will be triggered when the page is loaded for the first time. It will not be triggered on returning from another page. It will only be triggered again if the page is closed and reopened. PLT formatter is supported.


OnResume

The event handler that will be triggered when the app is resuming from background and the page is the current active page. PLT formatter is supported.


OnReturning

The event handler that will be triggered when the app return to the page from another page through backward navigation or closing of modal page. PLT formatter is supported.


OnUnloaded

The event handler that will be triggered when the page is unloaded i.e. when user navigate back or close the modal page. PLT formatter is supported.


PrefersLargeCaption

Page control now supports PrefersLargeCaption property that’s only available in iOS.

Currently, only Section Pages support this property. Other types of Pages such as BottomNavigation, Tabs, SideDrawer, FormCellContainer and FlexibleColumn don’t support this property yet.

Please note that if a Section or FormCell page is used within one of the unsupported page types, the PrefersLargeCaption property is ignored.

  • type: boolean
  • default: false

PullDown

The event that will be executed when the page pull down operation is performed, i.e. when user swipes down on the page.


Result

  • type: TargetPath[]

All array items must be of the type: TargetPath


ToolBar


_Name

  • type: string

_Type

  • type: const

The value of this property must be:

"Page"

Examples

{
  "_Name": "MyMDKApp",
  "_Type": "Page",
  "Caption": "My MDK App",
  "Controls": [
    {
      "Sections": [
        {
          "ObjectCells": [
            {
              "ObjectCell": {
                "AccessoryType": "disclosureIndicator",
                "DetailImage": "/MyMDKApp/Images/workorder.png",
                "DetailImageIsCircular": true,
                "OnPress": "/MyMDKApp/Actions/Navigation/NavToWorkOrderList.action",
                "StatusText": "/MyMDKApp/Rules/OData/TotalWorkOrders.js",
                "Title": "Work Orders"
              }
            },
            {
              "ObjectCell": {
                "AccessoryType": "disclosureIndicator",
                "Description": "Examples using MDK Client",
                "DetailImage": "/MyMDKApp/Images/component.png",
                "OnPress": "/MyMDKApp/Actions/NavToAppModelerFeatures.action",
                "StatusText": "See More",
                "Title": "MDK Components"
              }
            }
          ],
          "_Name": "WorkOrdersSection",
          "_Type": "Section.Type.ObjectTable"
        }
      ],
      "DataSubscriptions": "/MyMDKApp/Rules/OData/DataSubscriptions.js",
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable"
    }
  ],
  "ToolBar": {
    "Controls": [
      {
        "SystemItem": "FlexibleSpace",
        "_Type": "Control.Type.ToolbarItem",
        "_Name": "FlexibleSpaceb"
      },
      {
        "_Name": "LogoutToolbarItem",
        "_Type": "Control.Type.ToolbarItem",
        "Caption": "Log out",
        "OnPress": "/MyMDKApp/Actions/LogoutUser.action"
      }
    ]
  }
}

Example for Tab Control with header

// the section type of the first SectionedTable must be Section.Type.ObjectHeader/ProfileHeader/KPIHeader 
{
  "Caption": "Tabs with ObjectHeader",
  "Controls": [
    {
      "Sections": [
        {
          "ObjectHeader": {
            "BodyText": "BodyText",
            "Description": "Description",
            "DetailImageIsCircular": true,
            "Footnote": "Footnote",
            "HeadlineText": "HeadlineText",
            "StatusText": "High",
            "StatusImage": "res://n_icon.png",
            "Subhead": "Subhead",
            "SubstatusImage": "res://test_png.png",
            "SubstatusText": "Error",
            "Tags": "Tags"
          },
          "_Type": "Section.Type.ObjectHeader"
        }
      ],
      "_Name": "ObjectHeaderSection",
      "_Type": "Control.Type.SectionedTable"
    },
    {
      "Items":[
        {
          "_Name": "ActionsTab",
          "Caption": "Actions",
          "Image": "font://",
          "OnPress": "/MyMDKApp/Actions/Messages/Message.action",
          "PageToOpen": "/MyMDKApp/Pages/Examples/TabActionExamples.page",
          "_Type": "Control.Type.TabItem"
        },
        {
          "_Name": "ControlsTab",
          "Caption": "/MyMDKApp/Rules/ControlsCaption.js",
          "Image": "res://map_icon",
          "ResetIfPressedWhenActive": "/MyMDKApp/Rules/AlwaysTrue.js",
          "OnPress": "/MyMDKApp/Rules/TabControl/TabControlRule.js",
          "PageToOpen": "/MyMDKApp/Pages/Examples/ControlExamples.page",
          "_Type": "Control.Type.TabItem"
        },
        {
          "_Name": "OData",
          "Caption": "OData",
          "ResetIfPressedWhenActive": "/MyMDKApp/Rules/AlwaysTrue.js",
          "PageToOpen": "/MyMDKApp/Pages/Examples/ODataExamples.page",
          "_Type": "Control.Type.TabItem"
        }
      ],
      "Position": "/MyMDKApp/Rules/AlwaysTop.js",
      "_Type": "Control.Type.Tabs",
      "_Name": "TabsControl"
    }
  ],
  "_Type": "Page",
  "_Name": "TabsWithObjectHeader"
}