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

NavigationType¶

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.

type: PageOrRule

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: Transition

_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
}