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

Tutorial

Set Up SAP Business Application Studio for Multi-Channel Development

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
`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 App template and choose Start.
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.

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.

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`	Use the checkboxes to select one or more destinations.
`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.

Select the required OData collections in the Data Collections tab. All the OData Entity Sets from the service .xml file will be listed here. You can choose one or more entity sets according to your business requirements. If you select multiple destinations, the Data Collections tab will be displayed for each selected destination. You must provide a path in the Enter a path to service field and check Enable offline if needed for all selected destinations before selecting OData collections.

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¶

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

In the File menu , choose Preferences and Open Preferences, and then type MDK, you will see all the Mobile Development Kit related settings.
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.

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

Right-click on Application.app, choose Open With and then select Application Editor.
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.

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

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.
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.
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.
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 you must follow to deploy the generated bundle.js and bundle.js.map (bundle.js.BuildInfo.json file for Windows platform) to SAP Mobile Services on Cloud Foundry. Please ensure that you have been assigned the Space Developer role in your SAP BTP space.

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

If you enable Mdk: Deployment For Windows Clients in user settings in SAP Business Application Studio and wish to deploy for Windows clients, select Windows in the select your target MDK platform deployment prompt. Otherwise, choose iOS & Android.

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

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

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

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