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 in any one of the supported browsers and log in with your credentials.
  2. Choose Create Dev Space.
  3. Enter a name for the Dev Space.
  4. Select SAP Mobile Application.
  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

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:

Enable Cross Context SSO setting under Security for the corresponding app in the mobile services app configuration.

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 App template and choose Start.
  3. If you are not logged in to Cloud Foundry, Cloud Foundry Sign In page will be appear. You can use the following methods to sign in:

    • Credentials

      Enter your username and password. Click Sign in. Select Cloud Foundry Organization and Space. If the login attempt fails, you will not be able to use Mobile Services Data Sources.

    • SSO Passcode

      Click the link to open a new browser page, choose to generate a temporary authentication code, copy the SSO Passcode and paste it back in the Cloud Foundry Sign In page.

  4. In the Basic Information tab:

    Field Description
    MDK template type Based on your requirement, select the MDK template type from the drop-down.
    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 drop-down.
    Choose a target folder By default, the target folder uses project root path. However, you can choose a different folder path.

    Choose Next.

  5. In the Service Configuration tab:

    Field Description
    Data Source Select a source from the drop-down. The available source types are: Mobile Services, BTP Destination, Service Url and Local File.
    Mobile Services Landscape Select your Mobile Services Landscape from the drop-down. 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 drop-down. This is the application that you've created in mobile services.
    Destination Select a destination from the drop-down.
    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 Data Collections tab, select the required OData collections. All the OData Entity Sets from the service .xml file will be listed here. You can either select a few or all the entity sets as per your business requirements.

The newly created project is now available in your workspace. All the web related files are available in the Web folder.

The web folder consists of the following:

  • App_Resources/- Here you can customize the web resources like icon and images.
  • config.json - Here you can customize the properties like DefaultAppLanguage and ApplicationDisplayName. For more information about configuring other properties, see Configure Web Specific Settings.

Storyboard

Storyboard provides a graphical view of the application's runtime resources, external resources, UI of the application, and the connections between them. This allows for a quick understanding of the application’s structure and components.

Storyboard Components and Their Functionalities

Runtime Resources

In the Runtime Resources section, you can see the mobile services application and mobile destination used in the project, with a dotted-line connected to the External Resources.

External Resources

In the External Resources section, you can see the external services used in the project, with a dotted-line connection to the Runtime Resource or the UI app.

UI Applications

In the UI Applications section, you can see the mobile applications.

Configuring the Application Using Storyboard

  1. Adding a mobile services app to your project:
    1. Click on the empty tile in the Runtime Resources column.
    2. Sign in to your Cloud Foundry account and select the Org and Space in which you would like to create your mobile services app.
    3. The Mobile Application Services editor opens up allowing you to access mobile services and perform various actions within the IDE.
    4. Click the + button to add a new Application. Provide a name and ID. (You have the option to create a destination for this app, but you can add one later via the Storyboard as well.) Click Finish.
    5. Once the application is created, you can click on Add App to Project.
    6. In the storyboard window, the app will be added under the Runtime Resources column as it represents the app in mobile services. The application information is saved in the .service.metadata file.
  2. Adding a new external resource for your project:

    1. Click the + button to add a new external resource.
    2. The service center opens up, where you can add a service from the SAP SYSTEM provider to your project.
    3. Once added, a new destination is created on mobile services and the same will be listed in the storyboard as well.

      Note

      Only one external resource can be added for the application.

  3. Adding Mobile UI for your project:

    1. Click the + button in the UI application column header.
    2. Fill in the application details and the data to be displayed in the UI.
  4. Once done, you can deploy by right-clicking on Application.app in the project explorer and select MDK:Deploy command.

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": "",
                    "URL": ""
                }
            ]
        }
    },
    "MobileService": {
        "Type": "standard",
        "AdminAPI": "",
        "AppId": "",
        "Destination": []
    },
    "Build": {
        "SourceMap": true,
        "TSTarget": "es6",
        "WMF": true
    }
}

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.

  1. In the File menu , choose Preferences and Open Preferences, and then type MDK, you will see all the Mobile Development Kit related settings.

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

Create Component Integration Metadata (CIM)

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.

  1. In the File Explorer panel, right-click the Application.app node and select MDK: New CIM.
  2. Choose the desired Mobile Development Kit component app from the drop-down list under Project Name.
  3. 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.
  4. Fill the Component Version field manually if applicable.
  5. Click Finish to create the CIM file.
  6. 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, Fragment, Rule, Service, i18n, Style, Extension and Application.
  7. 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.

Set Reference Applications

For a 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 to use the metadata from these reference apps by browsing.

  1. Right-click on Application.app, choose Open With and then select Application Editor.
  2. In Editor Setting section, set reference applications by clicking Add button.

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, choose Open With and then select MDK Page Map.

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

CSDL Check

You can check if the OData service built using CAP or any other framework is compliant with the OData standard. This ensures that you don't encounter any service-related issues at runtime.

Right-click on any .service file, choose MDK: CSDL Check Service.

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

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

  1. After selecting MDK: Deploy, select Mobile Services as the target.
  2. 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.

    In the .project.json file, Build section contains target client option configuration. Check detailed explanation in the following table:

    TSTarget WMF Target Client Version
    es6 true MDK 23.4
    es6 false MDK 6.x
    es5 false MDK 5.x

    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.

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

    If you want to input new configuration, you can remove it before next deployment.

Deploying to Cloud Foundry

  1. After selecting MDK: Deploy, select Cloud Foundry as the target.
  2. Enter the application ID.
  3. 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.

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

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

  1. After selecting MDK: Deploy, select Your Dev Space as the target.
  2. Enter the application ID.
  3. 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.

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

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

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

Download or Export Mobile Development Kit Metadata

You can download or export Mobile Development Kit metadata to the local machine.

  • In the project explorer, right-click on the project and choose Download.
  • In the workspace, right-click on the empty area and choose Download.

Last update: June 27, 2024