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 Next > 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.

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, 2022