Skip to content

Business Application Studio

Abstract

Details the steps for designing, developing, and deploying SAP Mobile Cards using SAP Business Application Studio.

SAP Business Application Studio is the next generation IDE hosted on SAP Business Technology Platform in the Cloud Foundry environment. Developers can design, build, and deploy cards to the SAP mobile service cockpit. Click here to learn more about SAP Business Application Studio.

Accessing SAP Business Application Studio

To gain access to SAP Business Application Studio, please see the following use cases:

Once you have access to SAP Business Application Studio, you can log in and create a dev space.

Creating a Dev Space

A dev space is a development environment with all the tools, capabilities, and resources needed for developing your application. You can choose to create a dev space based on the type of application that you are building. For building SAP Mobile Cards, select the SAP Mobile Services application type. Doing so includes all the extensions necessary for mobile application development.

How to Create Your Dev Space

  1. Log into your SAP Business Application Studio.

  2. Click Create Dev Space.

    Business Application Studio Home

  3. Enter a name for your dev space.

  4. Select SAP Mobile Services, from the application list.

  5. Verify that Mobile Services App Development Tools is present in the SAP predefined extensions list. If you choose to create a dev space other than SAP Mobile Services, you can select it from the additional SAP extensions.

    Business Application Studio Extension for Mobile Development

  6. Click Create Dev Space.

You can now see the Dev Space you created.

1
 ![Business Application Studio Home - List of Dev Spaces](./images/mck-bas-dev-spaces.png)

Note

To develop cards on Business Application Studio, make sure that the status of your dev space is Running.

Using the Command Palette

The command palette provides access to various functionalities including shortcuts for the most common operations.

To open the command palette in SAP Business Application Studio, select View → Find Command from the menu bar.

This opens a text field at the top of the IDE allowing you to type a command. Content assist then allows you to find commands quickly.

Type ? into the input field to get a list of available commands you can execute from here.

Command Details
SAP Mobile Cards: Deploy Deploys the card
SAP Mobile Cards: Deploy As Prototype Deploys the card as a prototype
SAP Mobile Cards: Publish Publishes the card and the status is changed to Development
SAP Mobile Cards: New From Template Creates a new card
SAP Mobile Cards: Retrieve Data Retrieves userdata.json from the destination
SAP Mobile Cards: Check Card Status Checks if the card exists. If the card is edited, it displays an ascii table containing the list of all the versions of the card.
SAP Mobile Cards: Restore Default Cloud Foundry mobile services Connection Creates a default Cloud Foundry connection "cf_default" meaning that the service will run on the same account and dev space as SAP Business Application Studio
SAP Mobile Cards: Create mobile services Connection Creates or edits a mobile services connection. If the mobile services name exists, it updates the URL.
SAP Mobile Cards: Switch To New mobile services Switches to a different mobile services connection. You have to select the connection from the drop-down list.
SAP Mobile Cards: Retrieve mobile services Configuration Retrieves configurations such as backend destinations, gatekeepers, and the server URL of the emulator (appServer)
SAP Mobile Cards: Preview Opens the preview pane. The preview automatically updates based on the selection made in the SAP Business Application Studio explorer.
SAP Mobile Cards: Download Card from mobile services Allows you to download and edit cards deployed in the SAP mobile service cockpit.

Connecting to Your Mobile Services Account

You need to connect your SAP Business Application Studio workspace with a SAP Mobile Services server. This allows you to use the templates available on the server and deploy cards to the configured server.

  1. Open your Workspace.

  2. Open the command palette either by clicking View → Find Command, or press F1 on your keyboard.

    Tip

    You can reassign the keyboard shortcuts.

  3. In the command palette, type SAP Mobile Cards, and select Mobile Cards: Create Mobile Service Connection.

  4. If the connection is successful, a toast message is displayed along with a success message in the output window.

    Note

    To view the status message for the deployed card in the output window, select SAP Mobile Cards from the drop-down list.

  5. Enter a name for your mobile service connection.

  6. Copy and paste the Admin API from your SAP Mobile Services Cockpit.

    Admin API link in SAP Mobile Services Cockpit

  7. In the command palette, type SAP Mobile Cards, and select Mobile Cards: Create Mobile Service Connection.

  8. Enter your username/e-mail ID and password.

    Note

    To maintain a secure connection to your SAP mobile service cockpit, SAP Business Application Studio prompts you to re-enter your username and password if the SAP Business Application Studio window times out.

Creating a New Card

You can create SAP Mobile Cards using the command palette or the project template.

Create a Card Using the Command Palette

To create a card:

  1. In the command palette, type SAP Mobile Cards, and select Mobile Cards: New From Template.

  2. Select a template from the drop-down list.

    Note

    These templates are fetched from the mobile services server.

  3. Enter a name for your card.

A new folder is created in your workspace.

Create a Card Using a Project Template

To create a card:

  1. In the command palette, type SAP Business Application Studio: Create Project from Template.

  2. Select SAP Mobile Cards and click Start.

  3. Choose either HTML Templates or Annotations.

For HTML Templates:

  • Select a mobile card template from the drop-down list, enter the card name, and click Finish.

    Note

    The templates specified in the drop-down list are based on the source defined in settings.json file. For more information, see Specifying the Template Source.

    For Annotations:

    • Select mobile service and destinations from the drop-down list. Click Next.

    • Select entity set and card type from the drop-down list. Enter the card name and click Next.

    • Enter the card name and click Finish.

  • A new folder is created in your workspace.

Specify the Template Source

While creating a new card from template, the templates are fetched from the SAP Mobile Services server. You can also create additional templates in a GitHub repository and access them in SAP Business Application Studio. You can add either a single Git repository or multiple Git repositories as the template source.

To specify the template source:

  1. In the command palette, type SAP Mobile Cards, and select Mobile Cards: New from Template

  2. Open the .vscode/settings.json file and add the following syntax:

    • For a single Git repository:
      "mck.github":“https://github.com/SAP-samples/mobile-cards-templates`
    
    • For multiple Git repositories:
      "mck.github": [
       {
          "url": "https://github.com/SAP-samples/mobile-cards-templates",
          "isRepository": true,
          "inline": true
       }
          ……
       ],
          ……
    
  3. To use the templates, type Mobile Cards: New from Template in the command palette and choose a template from the drop-down list.

Editing a Card

  1. In your SAP Business Application Studio file explorer, expand the folder created for your card.

  2. Click metadata.json to open the default visual editor. Click here to learn more about the metadata.json file.

    Note

    To edit the metadata.json as a JSON file, right-click the file in the file explorer and select the Open With → Code Editor option.

  3. For details about other files such as template_en.html, templateBack_en.html and userdata.json, navigate to the feature development section.

Editing a Card Deployed in Mobile Services

  1. In the command palette, type SAP Mobile Cards, and select Mobile Cards: Download Card from mobile services.

  2. Select a card from the drop-down list. You can also search for the card.

!!! note If a productive and development/prototype version of a card are present, you can choose the card to edit. If you choose a productive card, the version needs to be updated.

Previewing a Card

To access the preview pane:

  1. In the command palette, type SAP Mobile Cards, and select Mobile Cards: Preview.

  2. A preview window opens to the side showing the latest changes.

Deploying a Card

SAP Business Application Studio lets you deploy a card from within the studio to your SAP Mobile Services server.

Note

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

Deploy Using the Command Palette

  1. In the command palette, type SAP Mobile Cards, and select Mobile Cards: Deploy.

  2. Select the card you want to deploy.

When the deployment is completed successfully, you get a notification message saying that the card was published successfully.

In the SAP mobile service cockpit, you should see your card deployed in the Development state.

Deploy Using the Context Menu

  1. In your SAP Business Application Studio file explorer, right-click on metadata.json and select Mobile Cards: Deploy.

  2. When the deployment is completed successfully, you get a notification message saying that the card was published successfully.

  3. In the SAP mobile service cockpit, you should see your card deployed in the Development state.

.mobilecard.json

To publish a new version of your card, you need to modify the version number of the card in .mobilecard.json.

[
    {
        "DestinationName": "...",
        "isCF": true,
        "Backend": "Optional, not set",
        "Version": "1.0",
        "Validate": false,
        "CardID": "...",
        "ReferenceCardTypeId": "...",
        "LastModifiedAt": "..."
    }
]

Note

The option to edit the version is available after the first version of the card has been deployed.

Emulator

An emulator is a tool that creates a virtual environment of your mobile device. The advantages of using an emulator are:

  • It renders cards by fetching data from the URL appended to the back-end connection defined in the metadata.json.

  • It can be used to test connections, without access to a physical device.

  • It is hosted and run on SAP Mobile Services, which means there is no need for any additional maintenance by the developer.

Using the Emulator

You need to deploy the card before you emulate it.

  1. Select the card and open metadata.json for the selected card.

  2. Select the Lifecycle tab.

  3. Click Emulator.

Note

Actions cannot currently be performed on the emulator.

Publishing a Card

When a card is deployed from SAP Business Application Studio, it uploads the card to the mobile services server in Development state. To make your card available to end users, you need to publish the card. Click here to learn more about the card life cycle.

With SAP Business Application Studio you publish the card directly from your development environment.

Note

A card must be deployed before publishing.

Publish Using the Command Palette

  1. In the command palette, type SAP Mobile Cards, and select Mobile Cards: Publish.

  2. Select the card you want to publish.

  3. If the card is successfully published, you get a notification message saying that the card was published successfully.

  4. In the SAP mobile service cockpit, you should see your card published in the Productive state.

Publish Using the Context Menu

  1. In your SAP Business Application Studio file explorer, right-click metadata.json and select Mobile Cards: PUBLISH.

  2. If the card is successfully published, you get a notification message saying that the card was published successfully.

  3. In the SAP mobile service cockpit, you should see your card published in the Productive state.


Last update: June 4, 2021