Skip to Content

Create Your First Card in SAP Business Application Studio

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 Mobile Services from SAP Business Application Studio
sandeep-tdsSandeep T D SJune 18, 2021
Created by
sandeep-tds
August 16, 2020
Contributors
sandeep-tds
sandeep-tds

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

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.

  • Step 1
    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
  • Step 2
    1. Open Find Command, search for Create Project from Template and select SAP Business Application Studio: Create Project from Template.

      Command for New Card
    2. Select SAP Mobile Cards → Click Start.

      Command for New Card
    3. Select Welcome Card Template - Single Instance → Enter a name for the card; e.g. Welcome BAS → Click Finish.

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

      Card Structure

      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?

  • Step 3
    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.

      HTML
      Copy
      <div class="card-content">
        This is my first card in Business Application Studio.
      </div>
      
      Updated HTML File
  • Step 4
    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
  • Step 5
    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

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

  • Step 6

    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
Back to top