Skip to Content

Create Your First Card in SAP Business Application Studio

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

Create Your First Card in SAP Business Application Studio

December 1, 2020
Created by
August 16, 2020
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.

You will learn

  • 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 Cloud Platform Mobile Services from SAP Business Application Studio

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


Step 1: Create Mobile Service connection
  1. Open Business Application Studio and enter your dev workspace.

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

    Open Command Pallete

    For faster development, you can use the shortcut key.

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

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

    Service Connection Name
  5. 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.

    Success toast message
  6. Open settings.json file, under .vscode folder in the project explorer.

    Settings JSON File
  7. 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
      }
    ]
    
Log on to answer question
Step 2: Create a new card
  1. Open Find Command, search for Mobile Cards and select Mobile Cards: New From Template.

    Command for New Card

    If prompted to enter your username & password, enter the login details you use to login to the Mobile Service cockpit.

  2. Select Welcome Card Template - Single Instance.

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

    Enter a name for the card
  4. In your File Explorer, expand Welcome BAS Folder.

    Card Structure

    You can learn more about the files here.

Which of the following is NOT PRESENT inside the new card folder created in this step?
×
Step 3: Modify the card
  1. In your File Explorer, click metadata.json.

    Metadata.json View
  2. Add a description; e.g. Created in SAP Business Application Studio.

    Description View
  3. In your File Explorer, click template_en.html.

    HTML File view
  4. 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
  5. 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 and publish card
  1. Open Find Command, search for Mobile Cards and select Mobile Cards: Deploy.

    Card Structure
  2. 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.

    Success toast message
Log on to answer question
Step 5: Publish card in Mobile Service cockpit
  1. Open your Mobile Services Cockpit.

    CPMS Cockpit
  2. Click SAP Mobile Cards.

    Mobile Cards Cockpit View
  3. Click on your card; e.g. Welcome BAS.

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

    Card in development status
  5. 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 card on your device

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

  1. Perform Pull Refresh in the SAP Mobile Cards Android client.

    Android Pull Refresh

    If the card is not downloaded automatically, re-subscribe to the Supplier Contact Card in the All Subscriptions section.

    Android Subscriptions View
  2. Tap on the card to open it, and notice the changes you made to the html file.

    Android Card Detail View
  1. Perform Pull Refresh in the SAP Mobile Cards iOS client.

    iOS Pull Refresh

    If the card is not downloaded automatically, re-subscribe to the Supplier Contact Card in More → Subscriptions → All → Supplier Contact Card.

    iOS Subscriptions View
  2. Tap on the card to open it, and notice the changes you made to the html file.

    iOS Card Detail View
Log on to answer question

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.


Next Steps

Back to top