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 Cloud Platform - Neo and allows developers to build and deploy cards on both Cloud Foundry and Neo. To learn more about SAP Web IDE, please click here.

Web IDE Extension

To start 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 Web IDE Web IDE Mobile Development Extension Image

Prerequisite: Enable Mobile Service App Development Tools extension.

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 Mobile Cards Project Creation in SAP Web IDE

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

  5. In the Category drop-down, select Mobile Services.
  6. Select the Mobile Cards Kit Micro App tile.
  7. Click Next. Mobile Cards Kit Micro App Project Template in Web IDE Image
  8. Enter a project name and click Next.
  9. Enter the details
  10. 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. Web IDE also enables editing an existing card. These options are present 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 Service 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 - e.g. 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 Cloud Platform Mobile Services. Upon editing, the modified card can be deployed as a new card or the next version of the current card.
Create Blank Card Create a blank project to build a card from scratch.

Deploying A Card

Note

Please ensure 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 Cloud Platform Mobile Services server from within the IDE.

Note

Please follow this tutorial to set up your Cloud Platform Account and Web IDE for developing SAP Mobile Cards.

Steps to Onboard an app:

  1. Right-click on the 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.
    Upon modifying the card, if the card's current status is Development, the version need not be incremented; 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 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 the document has been blurred for security reasons.

Complete the onboarding on the device by logging in.


Last update: November 4, 2020