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 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 Start from template. Select MDK Project template and choose Start.
  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.
    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.

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

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

  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.

Check Unused Files

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

  1. Open a project in workspace.
  2. 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.

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

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

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

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

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