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.
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.
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>
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.
Step 5: Publish card in Mobile Service cockpit
-
Open your Mobile Services Cockpit.
-
Click SAP Mobile Cards.
-
Click on your card; e.g. Welcome BAS
.
-
In the Versions table, click the
icon to change the state to Productive.
-
Choose Yes to confirm.
The status of the card should now be Productive.
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.
Congratulations! You have created your first card through SAP Business Application Studio.
You can now build more SAP Mobile Cards apps using SAP Business Application Studio.