Skip to content

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.

  1. Open SAP Business Application Studio and log in with your credentials.
  2. Choose Create Dev Space.
  3. Enter a name for the Dev Space.
  4. Select SAP Cloud Platform Mobile Services application type.
  5. 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
  1. Log on to SAP Business Application Studio and navigate to your workspace.
  2. On the welcome screen, choose New Project From Template. Select MDK Project template and choose Next.
  3. 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.

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

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

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

  1. 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.
  2. 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