Skip to content

SAP Web IDE

Abstract

Details the steps for designing, developing, and deploying SAP Mobile Cards using SAP Web IDE.

SAP Web IDE is a service hosted on top of SAP Business Technology Platform, Neo environment that allows developers to build and deploy cards on both Cloud Foundry and Neo. Click here to learn more about SAP Web IDE.

SAP Web IDE Extension

Prerequisite: Enable Mobile Service App Development Tools extension.

To start SAP Mobile Cards development on SAP Web IDE, enable the Mobile Service App Development Tools extension:

  1. Go to SAP Web IDE.
  2. Click the gear Icon action-settings to enter the Preferences section.
  3. Click Extensions.
  4. Search for "mobile".
  5. Enable Mobile Service App Development Tools.
  6. Click Save.
  7. Refresh SAP Web IDE. Web IDE Mobile Development Extension Image

Create a new Mobile Card Project from a predefined project template by following these steps:

  1. Open SAP Web IDE.
  2. Go to the Development Perspective.
  3. Open FileNewProject from Template.

    New SAP Mobile Cards Project Creation in SAP Web IDE

  4. In the Environment drop-down list, select Cloud Foundry.

  5. In the Category drop-down list, select mobile services.
  6. Select the Mobile Card Kit Micro App tile.
  7. Click Next. Mobile Card Kit Micro App Project Template in Web IDE Image
  8. Enter a project name and click Next.
  9. Enter the details and click Finish.

Note

For a step-by-step guide, please visit the tutorials section of developers.sap.com.

Mobile Card Creation Page

Using SAP Web IDE you can create cards using a predefined template or a blank project. SAP Web IDE also lets you edit an existing card. These options are available in the Mobile Creation Page.

Mobile Card Creation Page Wizard Image

Property Details
Name Name of the card as seen by the users on the device.
Mobile Services Destination pointing to mobile services on either Cloud Foundry or Neo.
Create Card From Template Choose a predefined template to create a card.
Category Define the category to access the specific templates, for example, Sample or SuccessFactors.
Flip to Back Switch the view between the front and back side of the selected template.
Edit Existing Card Edit cards that are currently productive on SAP Mobile Services. The modified card can be deployed as a new card or as the next version of the current card.
Create Blank Card Create a blank project to build a card from scratch.

Deploying a Card

Note

Make sure that the SAP Mobile Cards Client is installed on the device before the following steps are completed.

SAP Web IDE provides a mechanism to connect to the SAP Mobile Services server from within the IDE.

Note

Follow this tutorial to set up your SAP Business Technology Platform account and SAP Web IDE for developing SAP Mobile Cards.

To onboard an app:

  1. Right-click Mobile Cards ProjectDeployDeploy Card to mobile services.

    Deploy Card Menu Item Image

  2. In the subsequent dialog, click Expand Group expand-group

    Deployment options:

    Deployment Options Image

    Property Details
    Card Name Name of the card as seen by the users on the device.
    This option is editable only for the first deployment.
    Card ID A unique GUID assigned to the card.
    It changes for each version.
    mobile services Destination pointing to the Mobile Service on either Cloud Foundry or Neo, where the card will be deployed.
    Destination Destination pointing to the data source of the card.
    Version Version Number of the card.
    When modifying the card, if the card's current status is Development, you don't need to increment the version number; however, if the card's current status is Productive, the version must be incremented.
    Create New Card An existing card can be used as a template to create a new card rather than a new version.
    Validate Before Deploy Validates the configurations, code, and actions before deploying the card.
    collapse-group
    Collapse Group
    Collapse the detailed options view.
    bar-code
    Show QR Code for Onboarding
    Show the QR code that can be scanned by the device to connect to the server.
  3. Click Show QR Code for Onboarding bar-code

  4. For an iOS device, scan the top QR code. For an Android device scan the bottom QR code. Sample Onboarding QR codes for iOS and Android

Note

The QR code in this document has been blurred for security reasons.

Complete the onboarding on the device by logging in.


Last update: November 18, 2021