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 Cloud Platform 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 New Project From Template. Select MDK Project template and choose Next.

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.

Choose Next.

In the SAP Cloud Platform Connection tab:

Field	Description
`Cloud Foundry Endpoint`	Enter the cloud foundry endpoint.
`Organization`	Select an organization from the dropdown.
`Space`	Select cloud foundry space. This is the `dev space` where you have enabled Mobile Services.

Choose Next.

In the Service Configuration tab:

Field	Description
`Service File Name`	Enter a service name.
`OData Source`	Select a source from the dropdown. The available source types are: `Mobile Services`,`Cloud Foundry` and `Local File`.
`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 `Cloud Foundry` as the `OData Source` type.
`Enter a path to the OData service`	Append a path to your OData service if required. This field appears only when you have selected `Cloud Foundry` as the `OData Source` type.
`Destination in metadata`	Enter the `DestinationName` in metadata. The default value is the same as `Cloud Foundry destination`. This field appears only when you have selected `Cloud Foundry` as the `OData Source` type.
`Local dev space XML`	Select an XML file from the local files. This field appears only when you have selected `Local File` as the `OData 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.

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.

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.

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: July 23, 2020