Skip to content

Creating Apps in Web IDE

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, select 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, Mobile Transaction Bridge Project 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, provide the application name.

    You can choose the application name to be same as the project name, which is fetched by default, or assign a different name.

  7. In the Service Configuration page: | Field | Description | |:------------------------------ |:--------------------------------------------------------------| | Name | Enter a service name. | | Service Source Type | Select from the drop down. | | Path Suffix | Append a path to your OData service if required.|

    To add a REST service, select the Rest Service checkbox. 1. 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 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 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, see 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 Cloud Platform Mobile Services 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 Cloud Platform Mobile Services cockpit.

  1. In the editor, right-click the project folder, and select MDK Deploy and Activate. 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 one of the following:

    • To upload your app metadata directly to the SAP Cloud Platform Mobile Services cockpit, select Upload application bundle to Mobile Services.
    • To download the app metadata to your local machine, select Download application bundle to local machine.
  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 popup 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 Cloud Platform 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 settings 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

Migrating App Metadata

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

Since Mobile Development Kit features a cloud-based editor, users who consume the latest 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 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. Right-click on your application folder under Workspace and select Metadata Migrate. This option is available for Actions, Globals, Services and Pages sub-folders as well. A migration report appears that lists all files that are updated in the cloud and can be migrated. You can choose a file category (All by default) or provide a specific string to filter the list.
  2. Select any file from the list to open two editor views that compare the current version of the file's metadata with the cloud version. Here, you can verify the metadata changes. Only object property or value changes are highlighted as differences and formatting changes are ignored.
  3. Enable the check box next to the file and select Confirm to migrate the file. The file is updated to the cloud version, and it is no longer available in the list of files pending for migration.

Last update: October 16, 2020