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 and log in with your credentials.
Choose Create Dev Space.
Enter a name for the Dev Space.
Select SAP Mobile Services application type.
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.

Creating or Editing App¶

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 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.
`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 two options available for landscape: `standard` and `preview`. If you have `Mobile Services Preview` edition available in your `Cloud Foundry` account, choose `preview`.
`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.
`Cloud Foundry destination`	Select a destination from the dropdown. This field appears only when you have selected `BTP Destination` as the `Data Source` type.
`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 always be showed to ask 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.

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 message The check is done. Find results in the 'MDK Extension' channel of the Output panel. will be prompted.
In the View menu , choose Output, and select MDK Extension from the drop-down menu.

The unused files will be listed.

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 file explorer panel, right-click on node Application.app and select the menu item MDK:Migrate.
- In the View menu , choose Find Command, and then type MDK, and select MDK:Migrate.
- Switch to the MDK:Migration perspective, click 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 message will prompt. You can click Open button in the message to switch to the MDK:Migration perspective, you will see all the pending files are listed in the project tree.
Click on the file name from the list, it will show all the differs compared with 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.
You can confirm to migrate single file by clicking the check mark next to the file name or click Confirm All button next to the project name to migrate all 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 to Mobile Services¶

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

To trigger the deploy command, perform one of the following sub steps. Select MDK:Deploy menu item to trigger the deploy command.
- In file explorer panel, right click on node Application.app and select the menu item MDK:Deploy.
- In command palette, select MDK:Deploy.
- After selecting MDK:Deploy.
- If the .project.json file already exists in your project, it will deploy directly without any prompt.
- If the .project.json file does not exist in your project, it will prompt you to enter Cloud Foundry information: Cloud Foundry endpoint, organization and space. If you have not logged in to Cloud Foundry, you also need to input username and password to log in first.
- After selecting MDK:Deploy. Select Mobile Services as the target.
- For the first deployment, it will prompt you to choose Mobile Services Landscape.
Select an application from mobile services.

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

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

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: August 30, 2021