Skip to content

Navigation

Define how pages appear and enable a user to navigate through your application. If a modal page is set to full screen, all pages opened from that modal page will also appear in full screen. When you close a full-screen modal page, all full-screen modal pages in the background are closed automatically and the parent page appears.

All the properties defined under Action are applicable to this action.

Property Type Required Default
BackStackVisible boolean No true
ClearHistory boolean No false
ModalPage boolean No false
ModalPageFullscreen boolean No false
NavigationType enum No "Inner"
OuterNavigation boolean No false
PageMetadata multiple No
PageToOpen PageOrRule No
Transition Transition No
_Type const Yes

BackStackVisible

If set to true, MDK records the user navigation in the backstack, allowing the users to navigate back to a page when they press the back button. If set to false, the user navigation will not be recorded, and the user won’t have an option to navigate back to the previously accessed subpages.

  • type: boolean
  • default: true

ClearHistory

If set to true, the navigation backstack will be cleared, and the back button will be disabled.

  • type: boolean
  • default: false

ModalPage

Indicates if a page is modal.

  • type: boolean
  • default: false

ModalPageFullscreen

If true, the modal page appears in full screen.

Note: By design, modal pages always appear in full screen on mobile devices.

  • type: boolean
  • default: false

To trigger navigation based on the defined type.

  • type: enum
  • default: Inner

The value of this property must be one of the known values listed below.

Value Description
Inner Navigation to be triggered on the current page level. For FlexibleColumnLayout, it will be triggered on current column. This is default value for all the scenarios except when it is triggered within the FlexibleColumnLayout.
Outer Navigation to be triggered on the parent page level. This aspect varies for the pages within BottomNavigation, Tabs and FlexibleColumnLayout.
Cross Navigation to be triggered on next column. This aspect varies for the pages within FlexibleColumnLayout. This is the default value if the action is triggered within the FlexibleColumnLayout.

OuterNavigation

Deprecated. Use NavigationType instead.

Specific for navigation triggered from within a tab page, no effect on normal page. If set to true, user would be navigated to the specified page at outer level (parent page with the bottom navigation control). If set to false, user would be navigated to the specified page at tab level / within the tab content.

  • type: boolean
  • default: false

PageMetadata

You can assign a rule to this property and return a Page definition in JSON format. The definition format is the same as what you will get in a .page file. This allows you to dynamically build a page definition and return it from the rule to this property. It will take precedence over the PageToOpen.

The properties defined in Page are also applicable to it.

  • type: multiple

Either one of:

  • string
  • object

PageToOpen

Page/Rule to navigate to, references a .page file.


Transition

Optional transition effect for custom page navigations. It is only applicable for page-to-page navigation (including within modal dialog). It’s not applicable for opening and closing of the modal dialog and for tab switching in BottomNavigation.


_Type

  • type: const

The value of this property must be:

"Action.Type.Navigation"

Action Result

Refer to the MDK Guide to understand what an action result is.

When this action gets executed successfully, the ActionResult is a NavigationEntry. Otherwise, it is an error message.


Examples

// Navigation.action (use PageMetadata)
{
    "PageToOpen": "/MDKApp/Pages/Dummy.page",
    "PageMetadata": "{ \"Caption\": \"PageMetadata Test\", \"_Type\": \"Page\", \"_Name\": \"PageMetadataTest\", \"Controls\": [ { \"Sections\": [ { \"Header\": { \"Caption\": \"Actions\" }, \"ObjectCells\": [ {  \"ObjectCell\": { \"AccessoryType\": \"disclosureIndicator\", \"Description\": \"another pagemetadata\", \"OnPress\": \"/MDKDevApp/Actions/Navigation/PageMetadata.action\", \"Title\": \"Next Page\" } } ], \"_Name\": \"NavigationActionSection\", \"_Type\": \"Section.Type.ObjectTable\" } ], \"_Type\": \"Control.Type.SectionedTable\", \"_Name\": \"NavigationActionSectionTable\" } ] }",
    "Type": "Action.Type.Navigation"
}
// Navigation.action (use PageMetadata object)
{
    "PageToOpen": "/MDKApp/Pages/Dummy.page",
    "PageMetadata": {
        "Caption": "PageMetadata Test",
        "_Type": "Page",
        "_Name": "PageMetadataTest",
        "Controls": [{
            "Sections": [{
            "Header": {
                "Caption": "Actions"
            },
            "ObjectCells": [{
                "ObjectCell": {
                "AccessoryType": "disclosureIndicator",
                "Description": "another pagemetadata",
                "OnPress": "/MDKDevApp/Actions/Navigation/PageMetadata.action",
                "Title": "Next Page"
                }
            }],
            "_Name": "NavigationActionSection",
            "_Type": "Section.Type.ObjectTable"
            }],
            "_Type": "Control.Type.SectionedTable",
            "_Name": "NavigationActionSectionTable"
        }]
    },
    "Type": "Action.Type.Navigation"
}
// Navigation.action (default transition)
{
    "PageToOpen": "/MDKApp/Pages/ListPage.page",
    "Type": "Action.Type.Navigation"
}
// Navigation.action (fade transition)
{
    "PageToOpen": "/MDKApp/Pages/ListPage.page",
    "Type": "Action.Type.Navigation",
    "Transition": {
        "Curve": "Linear",
        "Duration": 2,
        "Name": "Fade"
    }
}
// Navigation.action (NO transition)
{
    "PageToOpen": "/MDKApp/Pages/ListPage.page",
    "Type": "Action.Type.Navigation",
    "Transition": {
        "Name": "None"
    }
}
// Navigation.action (BackStackVisible false)
{
    "PageToOpen": "/MDKApp/Pages/ListPage.page",
    "Type": "Action.Type.Navigation",
    "BackStackVisible": false
}