Creating Apps in SAP Business Application Studio (Cloud Foundry)¶

Setting Up the Editor in SAP Business Application Studio (Cloud Foundry)¶

To create and develop applications using the Mobile Development Kit editor feature, you must first enable the feature on SAP Business Application Studio. It isn’t enabled by default.

Note

This procedure is applicable in the Cloud Foundry environment.

Open SAP Business Application Studio in any one of the supported browsers and log in with your credentials.
Choose Create Dev Space.
Enter a name for the Dev Space.
Select SAP Mobile Application.
Choose Create Dev Space.

Newly created development environment is listed in your Dev Spaces. Choose the newly created Dev Space to launch the editor in SAP Business Application Studio.

Note

If the development environment is in STOPPED state. It is required to start the development environment to launch the editor.

You can now use the Mobile Development Kit editor feature to create and develop your project.

Tutorial

Set Up SAP Business Application Studio for Multi-Channel Development

Creating or Editing App¶

Prerequisite¶

BTP Destination Prerequisite¶

Add one or more OData destinations depending on the business requirement. The OData destination must have the following additional properties:

HTML5.DynamicDestination = true (in order to access metadata from app studio)
WebIDEEnabled = true (in order to be filtered by app studio)
WebIDEUsage = odata_gen (in order to be filtered by OData usage)

Note

To reuse a Cloud Foundry destination, add the following property MobileEnabled = true. For more information, see Enabling Cloud Destinations. For a Cloud Foundry destination, access Cloud Foundry instead of mobile services for creating a project (As we can't access the Cloud Foundry destination from mobile services during design time).

Mobile Services Data Source Prerequisite¶

To retrieve OData collections while creating a new project or syncing a service in an existing project, you will need:

SAP Business Application Studio Developer role if the SSO mechanism for the given mobile destination is set up as No Authentication or Basic Authentication.
SAP Business Application Studio Administrator role if the SSO mechanism for the given mobile destination is set up with other authentication option. This is needed to get the JWT token.

Creating a New Project (Cloud Foundry)¶

Create a new Mobile Development Kit project by using the predefined templates provided with SAP Business Application Studio.

Note

The prerequisite is that you've configured a mobile application on mobile services.

Select the desired template type based on your requirements and the actions supported by each template, as described in the following table:

Template Type	Logout/update	Online/Offline	List Detail Pages	Editable
`Empty`	Yes	No	No	No
`Base`	Yes	Yes	No	No
`List Detail`	Yes	Yes	Yes	No
`CRUD`	Yes	Yes	Yes	Yes

Log on to SAP Business Application Studio and navigate to your workspace.
On the welcome screen, choose Start from template. Select MDK Project template and choose Start.

In the Basic Information tab:

Field	Description
`MDK template type`	Based on your requirement, select the `MDK template type` from the dropdown.
`Your Project Name`	Enter a project name.
`Your Application Name`	By default, the project name is considered as the application name. However, you can also provide a different application name.
`Target MDK Client Version`	By default, the project uses `MDK 6.0` or later clients. However, you can select a previous version from the dropdown.
`Choose a target folder`	By default, the target folder uses project root path. However, you can choose a different folder path.

Choose Next.

If you are not logged in to Cloud Foundry, in the SAP BTP Connection tab:

Field	Description
`Cloud Foundry Endpoint`	Enter your `Cloud Foundry Endpoint`.
`Username`	Enter your username.
`Password`	Enter your password. Click `Login` button. If failed to login, please try with `cf login` CLI and restart the project creation wizard.
`Organization`	Select an organization from the dropdown.
`Space`	Select a space from the dropdown.

Choose Next.

In the Service Configuration tab:

Field	Description
`Data Source`	Select a source from the dropdown. The available source types are: `Mobile Services`, `BTP Destination`, `Service Url` and `Local File`.
`Mobile Services Landscape`	Select your `Mobile Services Landscape` from the dropdown. This field appears only when you have selected `Mobile Services` as the `Data Source` type. There are three options available for landscape: `standard`, `preview`, and `neo`. The first two options are for the Cloud Foundry environment. If you have `Mobile Services Preview` edition available in your `Cloud Foundry` account, choose `preview`. Choose `neo` for the Neo environment.
`Application Id`	Select an application from the dropdown. This is the application that you've created in mobile services.
`Destination`	Select a destination from the dropdown.
`Enter a path to service`	Append a path to your OData service if required.
`Service Url`	Enter the `Service Url`. This field appears only when you have selected `Service Url` as the `Data Source` type.
`Destination Name`	Enter the `DestinationName` in metadata.
`Choose XML odata metadata file from your local dev space`	Select an XML file from the local files. This field appears only when you have selected `Local File` as the `Data Source` type.
`Language URL`	`sap-language` is the default value. However, you can provide a different value.
`Enable offline`	By default, it's enabled. Select No to disable it.

Choose Next.

In the OData Collections tab, select the required OData collections.

The newly created project is now available in your workspace.

Project Settings¶

After you have created your new Mobile Development Kit project, a .project.json file is automatically created under the project folder. This file contains all the information you need to connect to mobile services.

{
    "Credential": "cf",
    "Onboarding": {
        "Schema": "",
        "URL": ""
    },
    "CF": {
        "Target": "",
        "Organization": "",
        "Space": "",
        "Deploy": {
            "Destination": [
                { "CF": "", "MDK": "" }
            ]
        }
    },
    "MobileService": {
        "AdminAPI": "",
        "AppId": "",
        "Destination": []
    }
}

How to generate .project.json file if this file is missing in your project:

Command MDK: Deploy

On triggering this command, a prompt will ask you to enter required mobile services information. Then the .project.json file will be generated and deploy process will start. For more details, see Deploying to mobile services.

Note

If the .project.json file is already in your project. It will deploy directly without any prompt.
Command MDK: Sync Service

On triggering this command, a prompt will appear asking you to enter required mobile services information. Then the .project.json file will be generated. Also the information in .project.json and local .xml files will be updated.

User Settings¶

To display different features based on different schema version, you can set MDK: Show Features setting in SAP Business Application Studio Preferences.

In the File menu , choose Preferences and Open Preferences, and then type MDK, you will see all the Mobile Development Kit related settings.
Find MDK: Show Features and select Current Schema from the drop-down.

There are two options:
- Show All: the default setting, all the features including the newly added will be provided in Mobile Development Kit projects.
- Current Schema: only supported features will be provided based on the specified schema version in Application.app file.

Reusing App Components¶

As an app developer, you can reuse components that you have created for an app in your base (currently selected) app during the metadata building process.

Ensure that you have both the base app project and the component project in your workspace.

Create Component Integration Metadata (CIM) files using the editor in SAP Business Application Studio, to describe references between your base application and dependent components.

Accomplish integration between an app and a component by replacing definitions from one project with those of another, using integration points.

In the File Explorer panel, right-click the Application.app node and select MDK: New CIM.
On the CIM Creation Page, choose the desired Mobile Development Kit component app from the drop-down list under Project Name.
Choose the application name from the drop-down list under Application Name. When you choose a Mobile Development Kit component app, the property field CIM File Name is automatically populated from the Application.app file of the selected component app.
Fill the Component Version field manually if applicable.
To complete creation of the CIM file, click Next > Finish.
To define an integration point on the new CIM file, click Add and select a metadata object type from the drop-down. The available object types are: Action, Global, Page, Rule, Service, I18n, Style, Extension and Application.
Under the newly opened Integration Point section, specify the Source and Target metadata and click Accept.

A new integration point is created. This means that the content of the source file will overlay the content of the target file at the time of metadata bundling.

Note

For an Mobile Development Kit component project imported into the editor, set the Reference Applications settings to ensure that there are no validation errors due to reference apps and that you can use the metadata from these reference apps by browsing. To know more about the settings for component validation, see Application.app file.

Pages Map View¶

To check the pages map view, right-click on the Application.app and choose Open With and then select MDK Page Map.

Check Unused Files¶

Before publishing your project, you can check unused files within your project.

Open a project in workspace.
In the View menu , choose Find Command, and then type MDK, and select MDK: Check Unused Files.

If you execute this command in the Projects Explorer, you will be asked to select an application (from existing projects list) where you want to list down the unused files for, then choose an application.
After the checking process completes, the unused files will be listed in the Output panel. The message The check is done. Results are available in the 'MDK Extension' channel of the Output panel. will be prompted.

Metadata and Script Migration¶

You can view changes, and selectively update your app metadata and script to the latest version.

Since Mobile Development Kit features are cloud-based editor, users who consume the metadata that is imported from the cloud may face issues on their devices. A migration report allows users to view changes in the metadata and in the scripts, before they choose to update their application. Thus, users can proactively inform the editor or client teams if issues are found.

The following files types are applicable for metadata migration:

Actions
Globals
Services
Pages
Application

Note

It is recommended to perform metadata validation before migration to avoid failures due to errors in the code.

To trigger the migrate command, perform one of the following:
- In the File Explorer panel, right-click the Application.app node and select MDK: Migrate.
- In the View menu , choose Find Command, then type MDK, and select MDK: Migrate.
- Switch to the MDK: Migration perspective and click the MDK: Migrate button next to the project.
- Open Application.app file in application editor, if current schema version is not the latest, a message will show to ask you to migrate. You can click Start to Migrate.
After the migration process is complete, a prompt message is displayed. Click the Open button in the message to switch to the MDK: Migration perspective, where all the pending files are listed in the project tree.
Click on the file name from the list. This will show all the differences between the file and the previous version. Here, you can verify the metadata changes. Only object property or value changes are highlighted as differences and formatting changes are ignored.
Confirm the migration of the single file by clicking the check mark next to the file name. Click Confirm All next to the project name to migrate all of the files.

The file is updated to the latest version, and it is no longer available in the list of files pending for migration.

Deploying the Project¶

To trigger the deploy command, perform one of the following sub-steps.

In the File Explorer panel, right-click the Application.app node and select MDK: Deploy.
Select MDK: Deploy in the command palette.

If you have not yet logged in to Cloud Foundry, you will be asked to log in first. After logging in, select your Organization and Space.

Note

After deployment, the deployment configurations will be stored in the mdk_deploy.json file in the .vscode folder under your workspace. This file is used for redeploying the project.

Deploying to Mobile Services¶

This topic describes the steps to deploy the generated bundle.js and bundle.js.map to SAP Mobile Services on Cloud Foundry. Please make sure you have been assigned the Space Developer role in your SAP BTP space.

After selecting MDK: Deploy, select Mobile Services as the target.
For the first deployment, you will be prompted to choose Mobile Services Landscape. You can choose standard, preview or neo.

Select an application from mobile services.

If you want to enable source for debugging, then, in the Include source map file for debugging? deployment prompt, choose Yes.

If the schema version of your project is lower than 6.0 and there are .ts files in the Extensions folder, you will be prompted to choose the target client version.

Note

If you choose neo as the landscape, and it's Canary Neo mobile services, to make sure it can be accessed from SAP Business Application Studio, the mobile services Admin API needs to be configured in SAP Cloud Connector. If it's Factory Neo mobile services, then it doesn't need to be configured.
If the application deploys successfully, a message with the current revision is displayed.

Note

After your first deployment, all the Cloud Foundry information and deployment information will be stored in the .project.json file in your project.

Deploying to Cloud Foundry¶

After selecting MDK: Deploy, select Cloud Foundry as the target.
Enter the application ID.
Enter the application version. The default version is 1.0.0.

If you want to enable source for debugging, choose Yes in the Include source map file for debugging? deployment prompt.
For MDK web runtime deployment option, you can choose:
- preview: to run your application in preview landscape and test it with the latest release.
- production: to run your application in the production landscape.
For any Mobile Development Kit major release, the preview web runtime will be updated first and, after two weeks, the production web runtime will be updated. For any Mobile Development Kit patch release, both the preview web runtime and production web runtime will be updated at the same time.
If the application deploys successfully, the Deployed to Web application successfully! window is displayed. You can open the application by clicking Open Application.

Deploying to Your Dev Space¶

After selecting MDK: Deploy, select Your Dev Space as the target.
Enter the application ID.
Enter the application version. The default version is 1.0.0.

If you want to enable source for debugging, choose Yes in the Include source map file for debugging? deployment prompt.
For Mobile Development Kit web runtime deployment option, you can choose:
- preview: to run your application in preview landscape and test it with the latest release.
- production: to run your application in production landscape.
For any Mobile Development Kit major release, the preview web runtime will be updated first and, after two weeks, the production web runtime will be updated. For any Mobile Development Kit patch release, both the preview web runtime and production web runtime will be updated at the same time.
If the application deploys successfully, the Deployed successfully! Start running... window is displayed, and focus will automatically switch to Debug view from the left activity bar.
If there are previous running threads, stop them before running WebApplicationFactory. If that runs successfully, the A service is listening to port 6004. message popup is displayed.
Click Open in a New Tab to run the application.

Deploying to Mobile Services and Cloud Foundry¶

If you want to deploy your project to both Mobile Services and Cloud Foundry, select MDK: Deploy, and then select Mobile & Cloud as the target.

Redeploying the Project¶

If you want to perform the last deployment, select MDK: Redeploy in the command palette. If there is no last deployment configuration, it will trigger the MDK: Deploy command.

Developing App in SAP Business Application Studio¶

Features supported by Mobile Development Kit editor in SAP Business Application Studio are similar to the features supported by Mobile Development Kit extension for Visual Studio Code. Features supported are:

Last update: September 19, 2022