Create Your First Card in SAP Business Application Studio

1. Open Business Application Studio and enter your dev workspace.

   

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

   

   For faster development, you can use the shortcut key.

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

   

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

   

5. 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.

   

1. Open Find Command, search for Create Project from Template and select SAP Business Application Studio: Create Project from Template.

   

2. Select SAP Mobile Cards → Click Start.

   

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

   

4. In your File Explorer, expand Welcome BAS Folder.

   

   You can learn more about the file structure here.

1. In your File Explorer, click metadata.json.

   

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

   

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

   

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

   

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

   

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>
   

   

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

   

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

   

1. Open your Mobile Services Cockpit.

   

2. Click SAP Mobile Cards.

   

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

   

4. In the Versions table, click the

   
   icon to change the state to Productive.
   

5. Choose Yes to confirm.

   

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