Skip to content

Creating Apps in Web IDE

Please note that the new Mobile Development Kit features in SAP Web IDE > mobile services App Development Tools extension are no longer supported. However, the existing Mobile Development Kit extension will continue to be available. Please migrate your Mobile Development Kit development to SAP Business Application Studio, the successor of SAP Web IDE. SAP Business Application Studio Mobile Development Kit editor additionally supports deploying to Neo mobile services to make switching simple. For more information, refer to this blog post.

Setting Up SAP Web IDE Full-Stack to Work with Mobile Development Kit

Set up SAP Web IDE Full-Stack Development by subscribing to it in the cloud, creating destinations, configuring Git, and connecting remote systems, to work with Mobile Development Kit.

Set up Description Procedure
SAP Web IDE for Full-Stack Development Enable SAP Web IDE for Full-Stack Development in the cloud. Opening SAP Web IDE
Destination for mobile services Create destinations for mobile services on the SAP Business Technology Platform cockpit, to connect to the back-end system and to upload your app metadata.
You can create your destinations in either Neo or Cloud Foundry platform, based on the environment you use to access the SAP Business Technology Platform cockpit.
Creating Destination for mobile services in Neo Environment

Creating Destination for mobile services in Cloud Foundry Environment
Git Configure the corporate Git connectivity service to manage the metadata sources. Connecting to your Corporate Git System

Creating Destination for Mobile Services in Neo Environment

If you are accessing the SAP Business Technology Platform cockpit in the Neo environment, you can create a destination for mobile services, and connect to the back-end system from the Mobile Development Kit editor.

  1. Go to the SAP Business Technology Platform cockpit from SAP Web IDE Full-Stack by selecting Tools > SAP Business Technology Platform Cockpit.
  2. In the SAP Business Technology Platform cockpit, select Connectivity > Destinations > New Destination to create a new destination for mobile services.
  3. In the Destination Configuration wizard, enter the following:

    Field Value
    Destination Name Provide a name for the destination.
    Type HTTP
    Description Provide a description for your destination. This is optional.
    URL Provide the URL that the app uses to access data on the back-end system or service.
    The format for the URL is https://<URL>/org/<organization name>/space/<space name>/.
    You can obtain this URL by selecting Important Links in the bottom left corner. In the important links page, SAP Business Technology Platform SDK Tools section, the Copy Admin API URL is the required URL.
    Proxy Type Internet
    Authentication AppToAppSSO
    HandleRedirects false
    SkipSSOTokenGenerationWhenNoUser true
    WebIDEUsage mobile
    WebIDEEnabled true

    Note

    Few values might not appear in the drop-down menu. For those values that do not appear, type in the name of the property.

  4. Check the Use default JDK truststore option.

  5. Click Save.

Creating Destination for Mobile Services in Cloud Foundry Environment

If you are accessing the SAP Business Technology Platform cockpit in the Cloud Foundry environment, you can create a destination for mobile services and connect to the back-end system from the Mobile Development Kit editor.

  1. Go to the SAP Business Technology Platform cockpit from SAP Web IDE Full-Stack by selecting Tools > SAP Business Technology Platform Cockpit.
  2. In the SAP Business Technology Platform cockpit, select Connectivity > Destinations > New Destination to create a new destination for mobile services.
  3. In the Destination Configuration wizard, enter the following:

    Field Value
    Destination Name Provide a name for the destination.
    Type HTTP
    Description Provide a description for your destination. This is optional.
    URL Provide your mobile service URL that the app uses to access data on the back-end system.
    In the URL, include the organization and space information that you provided while logging in to your Cloud Foundry environment.
    The format for the URL is https://<URL>/org/<organization name>/space/<space name>/.
    You can obtain this URL by selecting Important Links in the bottom left corner. In the important links page, SAP Business Technology Platform SDK Tools section, the Copy Admin API URL is the required URL.
    Proxy Type Internet
    Authentication BasicAuthentication
    In the Cloud Foundry environment, only basic authentication is supported in runtime.

    If you select the AppToAppSSO as the authentication type, it will be downgraded to BasicAuthentication in runtime, and prompt you to provide your username and password.
    HandleRedirects false
    SkipSSOTokenGenerationWhenNoUser true
    WebIDEUsage mobile
    WebIDEEnabled true

    Note

    Few values might not appear in the drop-down menu. For those values that do not appear, type in the name of the property.

  4. Check the Use default JDK truststore option.

  5. Click Save.

Setting Up the Editor in SAP Web IDE Full-Stack

To create and develop applications using the Mobile Development Kit editor feature, you must first enable the feature on SAP Web IDE Full-Stack. It is not enabled by default.

  1. On the SAP Web IDE Full-Stack home page, choose Tools > Preferences .
  2. Choose Extensions.
  3. From the Extensions list, select Mobile Services App Development Tools.
  4. To enable this editor, turn the switch button next to the Mobile Services App Development Tools extension ON.
  5. Choose Save.
  6. Refresh your browser.

You can now use the Mobile Development Kit editor feature to create and develop your project.

Creating or Editing App

You can either create a new project, import a project or clone a project from Git.

Creating a New Project

You can create a new Mobile Development Kit project by using the predefined templates provided with SAP Web IDE Full-Stack.

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. On the SAP Web IDE Full-Stack version, right click Workspace, choose New > Project from Template.
  2. Under Environment, select Neo or Cloud Foundry based on your preferred environment.
  3. Under Category, select Mobile Services.
  4. Choose from Mobile Development Kit Empty Template Application, Mobile Development Kit Base Application, Mobile Development Kit List-Detail Application, or Mobile Development Kit CRUD Application, then assign a name to the new project and click Next. The last two project templates have default pages, actions and rules generated for you.

    Note

    If you are working in the MDK Development perspective, you can create an Mobile Development Kit project directly by right-clicking the workspace folder and selecting the desired project template type.

  5. In the Basic Information tab, enter a name for the project.

  6. In the Application Creation Page:

    Field Description
    Application Name You can reuse the project name as your application's name, which is fetched by default, or assign a different name.
    Schema Version By default, the project uses the latest schema version. However, you can select a previous schema version from the drop-down.
  7. In the Service Configuration page:

    Field Description
    Name Enter a service name.
    Data Source Select a source from the drop-down. The available source types are: Mobile Services, BTP Destination, Service URL and Local File.
    Service URL Select a Service URL from the drop-down.
    Application ID Select an application from the drop-down. This field appears only when you have selected Mobile Services as the Data Source type.
    Destination Select a Destination from the drop-down.
    Path Suffix Append a path to your OData service if required.
    Language URL Param Select a Language URL from the drop-down.
    Enable offline By default, it's enabled when you have selected Mobile Services as the Data Source type. Select No to disable it.
    Local Metadata XML Select an XML file from the local storage.

    To add a REST service, select the Rest Service checkbox.

  8. Click Finish.

Your selected Mobile Development Kit project is created.

Importing App Metadata Into the Editor

You can import the generated code for an application and the resources that are contained in a project into the Mobile Development Kit editor workspace using SAP Web IDE Full-Stack.

  1. Import your application for use with the Mobile Development Kit editor by following the steps contained in Importing Projects from an Archive.
  2. To confirm that your project type is correct, perform the following steps in the editor:
    • From the left navigation panel of the repository browser, right-click your Mobile Development Kit project and select Project Settings.
    • Select Project Types.
    • Select Mobile Development Kit if not already selected.
    • Select Save.

Cloning App Metadata From Git Repository

You can clone the generated code for an app and the resources that are contained in the Git repository into the Mobile Development Kit editor workspace.

  1. In the editor workspace, right-click the Workspace folder and select Git Clone Repository.
  2. Provide the URL of the Git repository containing the app resources that you want to clone and click Clone.

    You can see the app cloned into the editor with the same folder structure as present in the Git repository. If your app metadata folder is not at the root path in the Git repository, the cloned app will display the same folder structure in the editor workspace.

    For example, your app metadata could be in /<app name>/src/metadata/definitions/.

  3. Right-click the root folder of your cloned repository, choose Project Settings > Mobile Development Kit, and click Save.

  4. To filter out all the non-related apps from the project folder structure and view only the Mobile Development Kit apps, click the MDK Development perspective on the left panel.

    You can switch between the MDK Development perspective and the SAP Web IDE Full-Stack Development perspective at any time.

Reusing App Components

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 SAP Web IDE Full-Stack workspace.

Create Component Integration Metadata (CIM) files using the editor in SAP Web IDE Full-Stack, 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 editor workspace, right-click the Mobile Development Kit project folder and select New MDK CIM File.
  2. On the CIM Creation Page, choose the desired Mobile Development Kit component app from the drop-down list under Project Name. When you choose a Mobile Development Kit component app, the other property fields, like CIM File Name, Application Name, and Display Name are automatically fetched and populated from the Application.app file of the selected component app.

  3. Fill the Component Version field manually if applicable.

  4. To complete creation of the CIM file, click Next > Finish.
  5. To define an integration point on the new CIM file, click Add and select a metadata object type from the drop-down.
  6. Under New Integration Point, specify the Source and Target metadata and click Accept.

    A new integration point is created. This means that the content of the source file would overlay the content of the target file at the time of metadata bundling.

Results:

A <component_name>.cim app component file is created and is ready for reuse. To know about deploying the app via webpack bundling, check Deploying App Metadata from Editor to mobile services.

Note

For an 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 that you can use the metadata from these reference apps by browsing. To know more about the settings for component validation, see Application.app file.

Deploying App Metadata From Editor to Mobile Services

Build, bundle and upload your updated app directly from the Mobile Development Kit editor to the SAP mobile service cockpit.

Once you have finished editing your app, upload it and choose to deploy it directly from the Mobile Development Kit editor to the SAP mobile service cockpit.

  1. In the editor, right-click the project folder, and select MDK Deploy to Mobile Services. In the Deploy to Mobile Services wizard, the application name is automatically fetched and populated from the Application.app file.

  2. Under Filter Files, specify the files from your app that you want to exclude from the bundling process.

  3. Under Externals, specify the list of modules that you have imported in your app that you want to exclude from the bundling process. By default, the webpack bundling tool will automatically try to find all the modules you have imported (via import and require) in your metadata and will attempt to bundle their content into the generated bundle file. If you have any modules that should not be bundled in to the metadata bundle e.g. modules in any 'NativeScript' plugins that you have added to your custom client, then you should add those modules' name in this Externals array.

  4. Perform optional selection of the following:

    • To upload your app metadata directly to the SAP mobile service cockpit, select Upload application bundle to Mobile Services.
    • To download the app metadata to your local machine, select Download application bundle to local machine.
    • Choose to deploy for the newest version of client or use 5.x version of the client. This field appears only when the Schema Version of the application is lower than 6.0 and there are .ts files in Extensions folder.
  5. Click Next.

    If you selected Download application bundle to local machine, you can later manually upload the app metadata to mobile services.

    If you selected Upload application bundle to Mobile Services, a factory project folder that bundles your app metadata and uploads it to the mobile services is created automatically the first time you deploy your Mobile Development Kit project.

    Note

    Do not edit or manipulate the contents of the factory project folder.

    A pop-up message displays the latest version of the app in the server.

  6. In the Deploy to Mobile Services wizard, provide the destination name and application ID.

    • If the application already exists in the mobile services, you see the following message: Successfully found application in mobile services.
    • If the application does not exist in the mobile services, you see the following error message: Application not found in mobile services.
    • If the destination is not configured in the mobile services, the server connection might fail, and you see the following error message: Failed to connect mobile services destination.

    For details about configuring the destination, see Setting Up SAP Web IDE Full-Stack to Work with Mobile Development Kit.

  7. Click the icon next to the Application ID tab, scan the QR code on your iOS or Android device for onboarding and then click Close after the scanning is completed.

  8. Perform one of the following:

    • If you want to deploy your app automatically to mobile services after the upload is complete, check Automatically deploy after uploading.
    • If you want the admin to deploy the app using the app update service on mobile services, do not check the Automatically deploy after uploading option.

    For details, see Managing Your App Life Cycle with App Update.

Results:

The latest revision of the app is now available on SAP Mobile Services.

Metadata Validation

The metadata validation feature in Mobile Development Kit identifies and highlights errors in the code.

When you edit code in a metadata file in the editor, the code is validated on the go and a live hint notifies you of any deviation from the schema definition.

Also, when a Mobile Development Kit project file (.ZIP) is imported into the editor, metadata validation over the entire project is triggered, and the SAP Web IDE Full-Stack Problems view appears if any errors are found. Additionally, you can right-click on the application folder, or any of the sub-folders (Actions, Globals, Services or Pages) and select Metadata Validate to manually run metadata validation over the specific folder.

Note

For this feature to work, the following prerequisites must be met: *Mobile Development Kit is enabled under Project Type in Project Settings * Application.app file is present in the application folder

For a component project imported into the editor, set the Reference Applications setting to ensure that there are no validation errors due to reference apps. To know more about the settings for component validation, see Application.app file.

The following table describes validation errors that may appear in the SAP Web IDE Full-Stack Problems view:

Metadata Validation Errors

Error Type Reason
Syntax Error Invalid JSON string in the code
Schema Error Incorrect metadata definition
File Reference Error Incorrect file name or invalid file path
OData Reference Error Incorrect OData value or invalid OData service
Target Reference Error Incorrect Control, Page or OData target

Metadata Migration

You can view changes, and selectively update your app metadata to the latest version.

Since Mobile Development Kit is a cloud-based editor, users who consume the metadata that is imported from the cloud may face issues on their devices. A metadata migration report allows users to view changes in the metadata, before they choose to update their application. Thus, users can proactively inform the editor or client teams if issues are found.

The following file 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:

    • Right-click on your application folder under Workspace and select MDK Metadata Migrate. This option is available for Actions, Globals, Services and Pages sub-folders as well.
    • Switch to the MDK Development perspective, right-click on your application folder under Workspace and select MDK Metadata Migrate.
    • Open Application.app file in application editor. If current schema version is not the latest, a pop-up message will appear asking you to migrate. You can click Start to Migrate.
  2. After the migration process is complete, switch to the MDK Development perspective, and open the MDK Migration Report panel if it is not opened. You will see all the pending files listed in the table.

  3. Select any file from the list to open two editor views that compare the current version of the file's metadata with the previous version. Here, you can verify the metadata changes. Only object property or value changes are highlighted as differences, formatting changes are ignored.
  4. Enable the check box next to the file and select Confirm to migrate the file.

The file is updated to the latest version, and it is no longer available in the list of files pending for migration.


Last update: January 25, 2024