Component Application Development¶

A CIM (Component Integration Metadata) file can be used to enable developers to integrate their own component apps into the existing Mobile Development Kit app, or to customize the Mobile Development Kit app with their own branding information.

How to Set up Component Project¶

Create a Mobile Development Kit metadata project from template as mentioned here.
Add necessary app definitions to your Component project.
In your Component project, add a path reference in any of the app definitions. For example, page, global, or action from your Base Project.
- You will notice that there is a red line complaining about the path reference.
- Click on that red line, you will notice a bulb icon appearing on the left side, suggesting some code actions to resolve the unknown path. Click on it and select your base application reference. Once done, error should be resolved.
A file Settings.json is generated under the folder .vscode referencing the Base app as a reference application.
```
{
  "mdk.referenceApplications": [
        {
            "name": "MDKApp",
            "path": "/Desktop/metadata-vsc/MDKApp/Application.app",
            "comp": "UserMenu"
        }
        ]
}
```

Bundling for Component Metadata App¶

When working with a component, bundling is done from the Base app. CIM file that you created in your Base app instructs the bundler to automatically include the component metadata in the resulting bundle.

Bundling supports a chained-dependency structure. It means that the base application of a component can be a component of another base application. The final application being bundled is the upmost one found in the chain.

Prerequisites for Bundling¶

All the involved Mobile Development Kit apps are opened in the current Visual Studio Code workspace.
The CIM file is defined in the base application with the correct project references.

Usage Scenarios¶

All the involved apps share a common parent folder

Open the parent folder in Visual Studio Code and select any app to be bundled. Resolve cross-application references before bundling.

To know about resolving cross-application references, see the Features in cross-application scenarios section in Editing Metadata with Mobile Development Kit.
A workspace contains all the involved apps

Open the workspace file in Visual Studio Code and select any app to be bundled. Resolve cross-application references before bundling.
An unsaved workspace contains all the involved apps

Open any app in Visual Studio Code and then add other apps by using the context menu Add Folder to Workspace..., before selecting any app to be bundled. Resolve cross-application references before bundling.

Last update: November 2, 2022