Skip to content

Business Application Studio

Abstract

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

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

Accessing Business Application Studio

To gain access to business application studio, please refer to the following use-cases.

Once you have access to your 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 you are building. For building SAP Mobile Cards, select the SAP Cloud Platform Mobile Services application type. Doing so includes all the extensions necessary for Mobile Application development.

Steps to Create Your Dev Space

  1. Log into your Business Application Studio.

  2. Click Create Dev Space.

    Business Application Studio Home

  3. Enter a name for your Dev Space.

  4. Select SAP Cloud Platform Mobile Services, in the kind of application list,.

  5. Verify that Mobile Services App Development Tools is present in the SAP Predefined extensions list.

    Business Application Studio Extension for Mobile Development

  6. Click Create Dev Space.

  7. You can now see the Dev Space you created.

    Business Application Studio Home - List of Dev Spaces

Note

For developing cards on Business Application Studio, ensure 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.

Mobile Cards Find Command

This will open 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
Mobile Cards: Deploy Deploys the card
Mobile Cards: Deploy As Prototype Deploys the card as Prototype
Mobile Cards: Publish Card is published and the status is changed to Development
Mobile Cards: New From Template Creates a new Card
Mobile Cards: Retrieve Data Retrieves userdata.json from the destination
Mobile Cards: Check Card Status Checks if the card exists and if the card is edited, it displays an ascii table containing the list of all the versions of the card
Mobile Cards: Restore Default Cloud Foundry Mobile Services Connection Creates a default Cloud Foundry connection "cf_default" i.e. the service will run on the same account and dev space as BAS
Mobile Cards: Create Mobile Services Connection Creates or edits a mobile service connection. If the mobile services name exists, it updates the url.
Mobile Cards: Switch To New Mobile Services Switches to a different mobile service connection. You have to select the connection from the drop-down list.
Mobile Cards: Retrieve Mobile Services Configuration Retrieves configurations such as, backend destinations, gatekeepers, and server url of emulator(appServer)
Mobile Cards: Preview Opens the preview pane. The preview automatically updates based on the selection made in the BAS explorer.

Connecting to Your Mobile Services Account

You need to connect your Business Application Studio workspace with a cloud platform mobile services server. Doing so will allow 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 Mobile Cards, and select Mobile Cards: Create Mobile Service Connection.

    Mobile Cards palette highlighting service connection option in Business Application Studio Editor

  4. You can see the success output message as a toast message and a message in the output window.

    Mobile Cards Output Window for Service Creation

    Note

    Ensure that the Mobile Cards is selected as the option in the output window.

  5. Enter a name for your mobile service connection.

  6. Copy & paste the Admin API from your Mobile Service Cockpit.

    Admin API link in Mobile Services Cockpit

  7. In the command palette, type 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 mobile services cockpit, Business Application Studio will prompt you to re-enter your username and password if the Business Application Studio window times out.

Creating a New Card

SAP Cards can be created using the command palette or the project template.

Create a Card Using the Command Palette

To create an SAP Mobile Card:

  1. In the command palette, type 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.

  4. A new folder is created in your workspace.

Create a Card Using Project Template

To create an SAP Mobile Card:

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

  2. Select SAP Mobile Cards Template and click Next.

  3. Select a template from the drop-down list, enter the card name and click Next.

    Note

    The templates specified in the drop-down list is based on the source defined in settings.json file. To know more see, Specifying the Template Source.

  4. 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 Cloud Platform Mobile Services server. Alternatively, you can create additional templates in a GitHub repository and access them in 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 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 from the drop-down list.

Editing a Card

  1. In your 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 view metadata.json file details.

    Note

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

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

Previewing a Card

To access the preview pane:

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

  2. A preview window opens to the side. It previews the latest changes.

Deploying a Card

SAP Business Application Studio enables you to deploy a card from within the studio to you SAP Cloud Platform Mobile Services server.

Note

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

Deploy Using Command Palette

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

  2. Select the card you want to deploy.

  3. Upon successful deployment, you will get a notification message that card was successfully published.

  4. On the Mobile Services Cockpit, you should see your card deployed in the Development state.

Deploy Using Context Menu

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

  2. Upon successful deployment, you will get a notification message that card was successfully published.

  3. On the Mobile Services 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 Cloud Platform 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 to emulate it.

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

  2. Select the Lifecycle tab.

  3. Click emulator.

Note

Currently, actions cannot be performed on the emulator.

Publishing a Card

When a card is deployed from business application studio, it uploads the card to the mobile services server in Development state. To make your card available to the end users, you need to publish the card. For more information about the card life cycle here.

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

Note

A card must be deployed before publishing.

Publish Using Command Palette

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

  2. Select the card you want to deploy.

  3. Upon successful deployment, you will get a notification message that the card was successfully published.

  4. On the Mobile Services Cockpit, you should see your card published in the Productive state.

Publish Using Context Menu

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

  2. Upon successful deployment, you will get a notification message that card was successfully published.

  3. On the Mobile Services Cockpit, you should see your card published in the Productive state.


Last update: October 14, 2020