Skip to Content

Create Your First Card in Business Application Studio

test
0 %
Create Your First Card in Business Application Studio
Details

Create Your First Card in Business Application Studio

August 16, 2020
Created by
August 16, 2020
Configure SAP Mobile Cards Development for your Business Application and create your first Basic Card.

You will learn


Prerequisites

Step 1: Create Mobile Service Connection

Open Business Application Studio and enter your dev workspace.

Business Application Studio Dashboard

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

Open Command Pallete

For faster development, setup a shortcut key for Find Command and use it.

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

Service Connection Option

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

Service Connection Name

Enter the Admin API of your Mobile Services Cockpit.

Service Connection API

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

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

Sucess toast message
Log on to answer question
Step 2: Create a New Card

Open Find Command, search for mobile cards and select Mobile Cards: New.

Command for New Card

You may be prompted to enter your username & password. If so, please provide the details and proceed.

Select Basic Mobile Card Template.

Template list

Enter a name for the card; e.g. Welcome BAS.

Enter a name for the card

In your File Explorer, expand Welcome BAS Folder.

Card Structure
Which of the following is NOT PRESENT inside the new card folder created in this step?
×
Step 3: Modify the Card

In your File Explorer, click metadata.json.

Metadata.json View

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

Description View

In your File Explorer, click template_en.html.

HTML File view

If you see a confirmation dialog for .mckstate, click Yes.
MCKState dialog

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

Command Pallete Preview

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

Preview Window

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>
Updated HTML File
Log on to answer question
Step 4: Deploy the Card from SAP Business Application Studio

Open Find Command, search for mobile cards and select Mobile Cards: Deploy.

Card Structure

Select the card you have created; e.g. Welcome BAS.

Card Structure

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

Sucess toast message
Log on to answer question
Step 5: Publish the Card in Mobile Service Cockpit

Open your Mobile Services Cockpit.

CPMS Cockpit

Click SAP Mobile Cards.

Mobile Cards Cockpit View

Click on your card; e.g. Welcome BAS.

Cards List

In the Versions table, click the Publish Icon icon to change the state to Productive.

Card in development status

Choose Yes to confirm.

Publish confirmation dialog

The status of the card should now be Productive.

Card in productive status
Log on to answer question
Step 6: View the Card on Your Device

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

In the SAP Mobile Cards Android client, tap + | Subscriptions.

Android: App Home

Tap Welcome BAS under the All Subscriptions tab.

Android: All Subscriptions

Tap Subscribe to trigger the download of the card in your SAP Mobile Cards app.

Android: Card Detail View

Notice the description.

Tap Android: Back Icon ‘Back’ to to see latest cards downloaded on the device.

Android: Card View

In the SAP Mobile Cards iOS client, tap MoreSubscriptions.

iOS: More View

Tap All tab → Welcome BAS.

iOS: All Subscriptions

Tap Subscribe to trigger the download of the card in your SAP Mobile Cards app.

iOS: Card Detail View

Tap New Cards to to see latest cards downloaded on the device.

MobileCardsImage
Log on to answer question

Congratulations! You have completed this tutorial.

You have created your first card through SAP Business Application Studio.


Next Steps

Back to top