Skip to content

Create Fragments

Fragments are light-weight UI parts (UI sub-trees) which is expected to have broad reuse. The Fragments folder contains the metadata definitions for your application's fragments. After you have created your new Mobile Development Kit project, an empty Fragments folder is automatically created under your project.


You must have a valid Mobile Development Kit project.


  1. Under your newly created project, right-click the Fragments folder and click MDK: New Fragment.

  2. Provide a name for the fragment and click Finish. A new blank fragment is created under the Fragments folder.

  3. To start working with a fragment, double-click it or right-click and choose Open With and then select MDK Fragment Editor or Code Editor.


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

Fragment Editor

The Fragment Editor view contains the Controls and Outline tabs on the left-hand side, where you can see the controls applicable for your app. You can simply drag and drop UI elements from the Controls tab directly into the Fragment Editor of the fragment you created. After dragging the first control into the Fragment Editor, the controls in Controls tab will be updated and unused controls will be filtered out.

The Outline tab shows the control hierarchy of the fragment 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 Fragment 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.

Use Fragment in Page Editor

Open a page with page editor, all the fragments present in the Fragments folder are displayed in the Fragments section of the control panel. You can simply drag and drop any fragment into this page.


For a compound control in a section page, you can drag a fragment containing one corresponding item control into it, the fragment will replace the corresponding part of this compound control.

You can override the properties of a fragment by modifying its properties in the property pane.

Here are some limitations with fragment editor:

  • Inserting a control or a fragment in a fragment control in the page editor, and nesting of fragments in the fragment editor are not supported.
  • Moving a sub control up/down in a fragment control in the page editor, and nesting of fragments in the fragment editor are not supported.
  • Some controls rendered in fragment are not the same as in page editor, for example: grid row item, data table column, etc.
  • Overriding the properties of a fragment in page editor is not supported.

To make changes, you can switch to the code editor by right-clicking on fragment, choose Open With and then select Text Editor.

For more information about fragments, see Fragments.

Code Editor

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

Last update: January 10, 2023