Implement A Card With Content-Based Actions

0 %

Implement A Card With Content-Based Actions

Details

Implement A Card With Content-Based Actions

2019-12-09

Intermediate

20 min.

Create a card with various actions on its content, such as trigger a phone call, send an email, open maps app or launch a website with more details.

You will learn

How to implement a card with content-based actions
How to use native mobile device capabilities with SAP Mobile Cards

Content-based actions allow users to trigger a phone call, send an email, open maps app, or launch a website with more details from a card.

Step 1: Get familiar with real world use case

A procurement manager at a company is about to visit the company’s partner vendor. Rather than making a note of the company’s details, the procurement manager uses SAP Mobile Cards with content based actions. The procurement manager can call the vendor, open the address in the maps app or send an e-mail to the vendor from within SAP Mobile Cards App.

Done

Log on to answer question

Step 2: Create a new action card

Make sure you have logged into the SAP Cloud Platform Mobile Services cockpit. Navigate to SAP Mobile Cards to look into Mobile Cards configuration.

Click the Create a New Card icon.

Provide the required information:

Field	Value
Name	`Content Action Card`
Destination	`com.sap.edm.sampleservice.v2`
Template Source	`Template Manager`
HTML Template	`Sample Product Template`
Card Template	`Server Managed Card`

If you see a pop-up, click OK for the confirmation.

Done

Log on to answer question

Step 3: Implement the card with content-based actions

View Full Instructions

Navigate to the Editor tab, and click Flip to Back to implement actions on the content.

Replace the Supplier Address span, as highlighted in the image, with the following code.

<span class="listitem-value">
    <div class="c2g_address">
        {{d.results.[0].SupplierDetails.Street}}
        &nbsp;
        {{d.results.[0].SupplierDetails.HouseNumber}}
        <br>
        {{d.results.[0].SupplierDetails.PostalCode}}
        &nbsp;
        {{d.results.[0].SupplierDetails.City}}
        ,
        {{d.results.[0].SupplierDetails.Country}}
    </div>
</span>

MobileCardsImage

By adding the c2g_address tag to the address, SAP Mobile Cards client can now parse the address and offer the user to show it on a map.

Next, replace the Supplier Email span, as highlighted in the image, with the following code.

<span class="listitem-value">
    <div class="c2g_email">
      {{d.results.[0].SupplierDetails.EmailAddress}}
    </div>
</span>

By adding the c2g_email tag to the email, SAP Mobile Cards client can now parse the email correctly and offer the user to start writing an email directly to the contact email address of the card.

Finally, add new entries for Supplier Phone Number and Supplier Website by pasting the entire code-block below.

<div class="listitem" style="padding-top: 28px;">
    <span style="font-weight:normal;float:left;font-size:12px">
        Supplier Phone Number
    </span>
    <br>
        <span class="listitem-value" >
        <div class="c2g_phoneNumber">
            {{d.results.[0].SupplierDetails.PhoneNumber}}
        </div>
    </span>
    <br>
    <span style="font-weight:normal;float:left;font-size:12px">
        Supplier Website
    </span>
    <br>
    <span class="listitem-value" >
        <div class="c2g_website">
            http://www.sap.com
        </div>
    </span>
</div>

By adding the c2g_phoneNumber tag to the phone number, SAP Mobile Cards client can now parse the phone number correctly and offer the user to start a call or send an SMS directly to the contact number of the card.

By adding the c2g_website tag to a link the card will allow the user to open an external link from a card. This allows to show more details to a card or give users direct access to relevant information outside the card.

Click Save.

Which tags were implemented in this tutorial? c2g_address c2g_phoneNumber c2g_email c2g_website

Step 4: Set card status to productive

By default, status of newly created cards is Development. Cards can be subscribed to only when they are in a Productive state.

Click Content Action Card in the Card Templates Tab.

Under Actions, click the highlighted icon to change the state to Productive.

Choose Yes to confirm.

You will notice that the State has been changed to Productive.

Done

Log on to answer question

Step 5: Subscribe to the card in SAP Mobile Cards

Make sure you are choosing the right device platform tab above.

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

Tap Content Action Card under the All Subscriptions tab.

Tap Subscribe to trigger the download of the Content Action Card in your SAP Mobile Cards app.

Tap <- ‘Back’ to to see latest cards downloaded on the device.

Tap a card to open it.

Tap on the flip button to view the other side of the card.

Tap on the Action Bar button to view the content based actions.

Tap on Open Maps action to view the location of the supplier on the default maps client.

SAP Mobile Cards App passes the supplier’s address to the maps application.

Tap <- ‘Back’ to to see latest cards downloaded on the device.

Tap v to expand the card action menu.

Tap on Email abc@xyz.com action to draft an e-mail to the supplier.

SAP Mobile Cards launches the default mail client and populates the receiver’s email id.

In the SAP Mobile Cards iOS client, tap More | Subscriptions.

Tap Content Action Card under the All tab.

Tap Subscribe to trigger the download of the Content Action Card in your SAP Mobile Cards app.

Tap on All Cards.

Tap a card to open it.

Tap on the flip button to view the other side of the card.

Tap on the flip button to return to the front view of the card.

Tap on the Action Menu button to view the content based actions.

Tap on Email abc@xyz.com action to draft an e-mail to the supplier, or tap on Open Maps action to view the location of the supplier on the default maps client.