Create Pages¶

The Pages folder contains the metadata definitions for you application's pages. After you have created your new Mobile Development Kit project, a Main.page file is automatically created under the Pages folder.

Prerequisites¶

You must have a valid Mobile Development Kit project.

Procedure¶

Under your newly created project, right-click the Pages folder and click MDK: New Page.
In the Template Section pane, select one of the following, based on the type of page you want to create:
- Bottom Navigation
- Extension
- Form Cell
- Flexible Column Layout
- Section
- Side Drawer Navigation
- Tabs
Provide a name for the page and click Finish. A new blank page of the desired type is created under the Pages folder.
To start working with a page, click it or right-click on it, choose Open With and then select Text Editor or Page Editor.

Note

Changes made in the page editor simultaneously appear in the code editor.

MDK Editor is the default editor. You can change the default editor in the status bar.

Bottom Navigation A Bottom Navigation Page is suitable for top level navigation, treated as navigation menu, where the separate tabs don't have shared context. Bottom Navigation control renders a list of tab items along with content for each tab.

Extension An Extension Page is suitable for a page with one extension control (for example, a Map control or a Chart control). When you create an extension page, a page with an extension control is created.

Form Cell A Form Cell Page is suitable for pages that generate new objects or modify existing objects. It includes a form cell container by default. You can add form sections, multiple containers or action controls to this page. Under each container section, you can add various container items.

Flexible Column Layout A Flexible Column Page control will always render as a full screen control taking over the entire space of the page content. If flexible column page has no title, no action bar item, and is the first page of application, the action bar is hidden.

Section A Section Page is suitable for pages that are used to display items, for example, a list of items or details of a single item. It includes a sectioned table by default. When you create a section page, a page with a blank section is created.

Side Drawer Navigation A Side Drawer Navigation Page is suitable for lateral navigation between app destinations or features. It is typically used when there are more than 5 destinations. This page comprises of Header, Sections, and Item elements.

Tabs A Tabs Page is suitable for organizing or allow navigation between group of content that are related and at the same level of hierarchy. Tabs control renders a list of tab items along with content for each tab.

Page Editor¶

The Page Editor view contains the Controls and Outline tabs on the left-hand side, where you can see the controls applicable for your app. Each of the three page types contains different controls.You can simply drag and drop UI elements from the Controls tab directly into the Page Editor of the page you created.

The Outline tab shows the control hierarchy of the page you are designing. When you add a control, it is displayed under the Outline tab. Also, you can easily choose nested controls from this view.

On the right-hand side of the Page Editor, you can see the Properties and Events tabs, which contain the properties of the currently selected control and the events that you can associate with the selected controls.

To improve Mobile Development Kit service validation, we use DesignTimeTarget property for page. This property is similar to Target, but it is only used for design time.

For example:

When you are on a page that has an Object Table control bound to a Customers entity set, navigating to the detail page will pass the binding context in runtime.

During design time, if the detail page has binding but there is no Target defined, you can use DesignTimeTarget to bind data. Thus, it can help you validate the binding context of current page, and it can also provide you code completion.

Binding an Object Table to the Customers entity set on a page:

{
  "ObjectCell": {
    "Title": "{FirstName}",
    "Subhead": "{City}",
    "Footnote": "{CustomerId}",
    "Description": "{Country}",
    "StatusText": "{DateOfBirth}",
    "SubstatusText": "{EmailAddress}",
    "OnPress": "/TestApp/Actions/Customers/NavToCustomers_Detail.action"
  },
  "Target": {
    "EntitySet": "Customers",
    "QueryOptions": "",
    "Service": "/TestApp/Services/CustomerManagementService.service"
  },
  "_Type": "Section.Type.ObjectTable"
}

Use DesignTimeTarget in the detail page:

{
 "Controls": [
  {
   "_Type": "Control.Type.SectionedTable",
   "_Name": "SectionedTable",
   "Sections": [
    {
     "ObjectHeader": {
      "Subhead": "{City}",
      "Footnote": "{CustomerId}",
      "Description": "{Country}",
      "StatusText": "{DateOfBirth}",
      "SubstatusText": "{EmailAddress}",
      "Tags": [
      ],
      "HeadlineText": "{FirstName}"
     },
     "_Type": "Section.Type.ObjectHeader",
     "_Name": "SectionObjectHeader0"
    },
   ]
  }
 ],
 "DesignTimeTarget": {
  "Service": "/TestApp/Services/CustomerManagementService.service",
  "EntitySet": "Customers"
 },
 "_Type": "Page",
 "_Name": "Customers_Detail",
 "Caption": "Customer",
 "PrefersLargeCaption": true
}

For Card Collection control, you can use it as below:

Dynamic Card Collection
1. In the page editor, expand Data Bound Container, and drag Card Collection control into the page area.
2. Expand Static Items, drag Extended Header Item control in the Card Collection control, now you can edit the properties of Extended Header Item.
Static Card
1. In the page editor, expand Static Container and drag the Static Card Collection control into the page area.
2. Expand Static Items and drag the Card Item control in the Static Card Collection control.
3. Drag the Extended Header Item control in the Card Item control, now you can edit the properties of Extended Header Item.

Code Editor¶

The Code Editor view displays the codes for your metadata elements. As you add or modify contents in the Page Editor, the changes simultaneously reflect in the Code Editor.

Last update: August 28, 2024