0 %

Create Your First Card in SAP Business Application Studio

Details

Create Your First Card in SAP Business Application Studio

June 18, 2021

Created by

August 16, 2020

Beginner

30 min.

Create a simple SAP Mobile Cards app by using a template, then make simple HTML modifications, and deploy the app and use it on your device.

How to create a card using a template in SAP Business Application Studio
How to design and develop SAP Mobile Cards in SAP Business Application Studio
How to deploy a card to SAP Mobile Services from SAP Business Application Studio

Prerequisites

Click here to learn more about SAP Mobile Cards in SAP Business Application Studio.

Step 1: Create Mobile Service connection

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.

Log on to answer question

Step 2: Create a new card

Open Find Command, search for Create Project from Template and select SAP Business Application Studio: Create Project from Template.
Select SAP Mobile Cards → Click Start.
Select Welcome Card Template - Single Instance → Enter a name for the card; e.g. Welcome BAS → Click Finish.
In your File Explorer, expand Welcome BAS Folder.

You can learn more about the file structure here.

Which of the following is NOT PRESENT inside the new card folder created in this step? metadata.json template_en.html sapmobilecards.js template.css

Step 3: Modify the card

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>
```

Log on to answer question

Step 4: Deploy and publish card

Open Find Command, search for Mobile Cards and select Mobile Cards: Deploy.
Select the card you have created; e.g. Welcome BAS.

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

Log on to answer question

Step 5: Publish card in Mobile Service cockpit

After clicking **Yes**, what is the State of your card?

Step 6: View card on your device

Make sure you are choosing the right device platform tab ( Android or iOS ) above.

Perform Pull Refresh in the SAP Mobile Cards Android client.

If the card is not downloaded automatically, re-subscribe to the Supplier Contact Card in the All Subscriptions section.
Tap on the card to open it, and notice the changes you made to the html file.

Perform Pull Refresh in the SAP Mobile Cards iOS client.

If the card is not downloaded automatically, re-subscribe to the Supplier Contact Card in More → Subscriptions → All → Supplier Contact Card.
Tap on the card to open it, and notice the changes you made to the html file.