Create Your First Card in SAP Business Application Studio

Open Business Application Studio and enter your dev workspace.

In the menu bar, go to View → Find Command, click Find Command.

For faster development, you can use the shortcut key.

Type Mobile Cards and select Mobile Cards: Create Service Connection.

Enter a name for your Mobile Services connection; e.g. cf-ms-trial.

Enter the Admin API of your Mobile Services Cockpit.

You can find the Admin API in the Important Links section of your Mobile Services cockpit.

Upon successful connection, you will see a toast message at the bottom right corner of your screen.

Open settings.json file, under .vscode folder in the project explorer.

Add the following code to add this Git repository as source for the templates.

"mck.github": [
  {
    "url": "https://github.com/SAP-samples/mobile-cards-templates",
    "isRepository": true,
    "inline": true
  }
]

In your File Explorer, click metadata.json.

Add a description; e.g. Created in SAP Business Application Studio.

In your File Explorer, click template_en.html.

Open Find Command, search for Mobile Cards and select Mobile Cards: Preview.

A preview window for your card will open to the side.

Collapse <div class="card-content"> and replace the enclosing code inclusive of the div tags with the following code and save the file.

<div class="card-content">
  This is my first card in Business Application Studio.
</div>