Getting started with SAP Mobile Cards from WebIDE

[former_member260148]

With our latest release of SAP Cloud Platform Mobile Services, I am excited to share our initial support for SAP Mobile Card development within the SAP WebIDE Full-Stack.  By enabling the SAP Mobile Services App Development Tools feature, developers can work within a more robust web development environment to create new or modify existing SAP Mobile cards. It helps separate Mobile Card development from Mobile Card administration by presenting the developer the primary items they need for connecting to a data service and card design.

In this blog, I'll share how to enable this feature within WebIDE; the scope of features available in this first release; and how to create a card using the SAP Cloud Platform sample data service. As you will see the first release, this is really about providing the developer a better experience for HTML, CSS, Javascript editing with features like autocomplete features and syntax highlights. In subsequent releases the plugin will catchup to the existing functionality within the SAP Mobile Cards administrator screens.

 

Features included in first release of the Mobile Cards Editor plugin:

• Initial release supports the card types of Automatic Instance Generation


• Ability to create new cards by importing templates from SAP Mobile Cards Template Manager.


• Ability to choose and load an existing card from SAP Cloud Platform Mobile Services into Web IDE


• Provide metadata editor screen for the metadata.json file, which allows you to configure the basic mobile card properties.


• Ability to load from different SAP Cloud Platform mobile service destinations into the card creation wizard.


• Ability to use the Web IDE's native capabilities to provide much better syntax highlighting and auto-completion capabilities, making card design easier.


• Javascript Editor that provides syntax highlights and auto-complete capabilities


• Mobile Card preview pane that shows the card with sample data


• Ability to deploy the developed card to your choice of Mobile Service instances

 

Prerequisites: 

• SAP Cloud Platform environment available with SAP Cloud Platform Mobile Services and WebIDE - Full Stack services set to "enabled"


• SAP Mobile Cards mobile app installed on your iOS or Android device from Google Play or Apple iTunes

 

How to enable the plugin within SAP Web IDE Full-Stack:

1. Launch SAP Web IDE Full-Stack


2. Within Web IDE click Tools > Preferences


3. Within Features > search for Mobile Services. Find Mobile Services App Development Tools and click ON. Make sure to click the Save button.


4. Choose Yes to Refresh WebIDE to load the plugin.

 

How to create a new card with the SAP Mobile Cards plugin:

In this example, I'll explain how to create a card named SalesOrders. This card uses the example SAP Cloud Platform data service (which is similar to the Northwind sample data service)

1. Within Web IDE find the </> on the left hand side. Click the </> which will take you to Project Explorer.


2. Click File > New > Project from Template.


3. In the Category dropdown, select Mobile Services.


4. Select the Mobile Cards Kit Micro App tile. Click Next


5. Provide a Project Name - and type SalesOrders. Click Next


6. Select the "Create Card from Template" radio button.


7. Under the Category drop down choose "Sample".


8. Select the Sample Sales Orders Template" from the list of templates


9. Click Finish and this will take you to the Workspace and will have created a folder names SalesOrders.

 



 

Within Project Explorer > Workspace you should now see a folder for the SAP Mobile Cards project we created named SalesOrders (see image above). I'll explain the different files within the folder.

Since card development can now be done from within Web IDE make sure to take advantage of the syntax highlights and the auto-complete capabilities. Using the command + space (MAC) or ctrl+space (Windows) option will help you by auto suggesting available html, css, and fields from your userdata.json file for {{handlebar mappings}}.

Workspace > SalesOrders folder contains the following files:

• metadata.json - this file and its settings correspond to the SAP Mobile Cards administrative UI for an individual card and it's INFO tab


• userdata.json - this file contains the JSON "sample data" that is provided within the SAP Mobile Cards administrative UI for an individual card and it's Sample Data tab


• template.css - this file is the CSS definition for an SAP Mobile Card. This file contains the CSS that is provided within the SAP Mobile Cards administrative UI for an individual card and it's Editor tab and CSS sub-tab


• template_en.html & templateBack_en.html - files are the html definitions for an SAP Mobile Card. These file contains the html that is provided within the SAP Mobile Cards administrative UI for an individual card and it's Editor tab and HTML sub-tab


• *** Notice that not all the fields from the Mobile Cards native administrator INFO tab (image below) are shown in the metadata.json file as the goal of this first release was to start the separation of the developer and administrative roles. We provide enough detail for the developer to get the card created and the administrator can define the details like notifications, push details, who gets the cards, etc.

 

Have a look at the SAP Mobile Cards Preview Pane within Web IDE:

From within the SalesOrder folder > expand it and double click on the template_en.html. Click on the cube (highlighted in the image below) to show an SAP Mobile Card preview.



Below are some examples that highlight SAP Mobile Cards editor's auto-complete and suggestion capabilities:

 

From the WorkSpace > SalesOrders to work with the files below:

 

##metadata.json file:

1) Expand the SalesOrders folder

2) Double click on the metadata.json file to bring up the editor

3) Select "SAPCPMobileServices" from the Destination dropdown

4) Edit the Description field. E.g. Show My Orders

5) Command/ctrl+s to save the file

6) Right click on the metadata.json file "Open Code Editor" to show the raw json representation of the file

## userdata.json

Double click on the userdata.json file to bring up the file in the editor

Show the contents within here will be highlighted as we demonstratre auto-suggest and correct in the examples below

## template.css

Double click on the template.css file to bring up the file in the editor

Scroll to the bottom and add your own class.

For example:

.mystyle {

           color: #fafafa;

           font-size: 17px;

         }

Use Command/ctrl+s to save the file.

## template_en.html

This is the main file used for HTML Editor capabilities

Double click on template_en.html to open the file in the HTML editor

Click on the "MCK Preview Pane" on the right hand side tool bar (the 3D box above the clipboard) to show the Card Preview

### Autocomplete from CSS

Scroll to the bottom of template_en.html and find:

        {{/each}}

         </div>

then add -

<br>  hit return

then add -

<div class=""

Place you cursor between the double quotes and try ctrl+space or cmd+space between the double quotes to bring up the autocomplete suggestions for CSS

* select the "mystyle" class that you created in template.css and finish the <div> tag. E.g.

``` ultimately it should look like this below:

<div class="mystyle">

</div>

```

* ctrl+s to Save the file and update the MCK Preview Pane

### Autocomplete from CSS again - but still within template_en.html

* Add a <span> tag to show TaxAmount. Use autocomplete at the <span class=" to add the class d-title for the label

```

<div class="mystyle">

    <span class="d-title">

        Tax Amount

    </span>

    <span>

    </span>

</div>

```

### Autocomplete Handlebar expressions from userdata.json / Sample Data content

* In the <span> tag that you just created, start a handlebars expression with {{ E.g.

```

<div class="mystyle">

    <span class="d-title">

        Tax Amount

    </span>

    <span>

        {{

    </span>

</div>

```

* ctrl+space after the {{ to bring up autocomplete from the userdata.json / sample data

* Scroll through the list and select "d.TaxAmount"

* Finish the handlebars expression }} E.g.

```

<div class="mystyle">

    <span class="d-title">

        Tax Amount

    </span>

    <span>

        {{d.TaxAmount}}

    </span>

</div>

```

* ctrl+s to Save the file and update the MCK Preview Pane

_________________________________________________________

Deploy the card to SAP Cloud Platform Mobile Services.

1. Right click your SalesOrder project and select MCK Deploy


2. Keep the card name,skip the Card ID field


3. On the Mobile Services drop down, location which instance of your SAP Cloud Platform Mobile Services you wish to deploy this card to (example: Production, QA, Dev)


4. Click OK

 

Last, to view this new card within SAP Cloud Platform Mobile Services Mobile Cards admin interface and get the card to your device:

1. In WebIDE, go to Tools > SAP Cloud Platform Cockpit > Services from the left hand side > Mobile Services, std on the right.


2. Click on Mobile Services, std and then click Go to Service


3. Now within the Mobile Services administrator click to expand Mobile Applications on the left hand bar. Click SAP Mobile Cards


4. Within SAP Mobile Cards > Info tab search for your SalesOrders card that you just created. Next lets get the card to your device....


5. Click on the API tab and use your mobile device native camera OR QR code reader to scan the appropriate QR code. This QR code will supply the SAP Mobile Cards app on your device with the right URL to connect to your server.


6. Enter your credentials during the app registration. Upon completion of registration click the + in the upper right hand corner of the app.


7. In Subscriptions, click ALL and find SalesOrders and subscribe.


8. SalesOrders mobile cards will then come down to the mobile device.

 

To learn more about cards check out:  Mobile Cards Tutorials

This is a quick overview of the initial release of the plugin in WebIDE. Will continue to update it with each release.

Thanks!