Skip to Content

Implement A Card With Content-Based Actions

test
0 %
Implement A Card With Content-Based Actions
Details

Implement A Card With Content-Based Actions

2019-12-09
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.

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

MobileCardsImage

Click the Create a New Card icon.

MobileCardsImage

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.

MobileCardsImage
Log on to answer question
Step 3: Implement the card with content-based actions

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

MobileCardsImage

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>
MobileCardsImage

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>
MobileCardsImage

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.

MobileCardsImage
Which tags were implemented in this tutorial?
×
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.

MobileCardsImage

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

MobileCardsImage

Choose Yes to confirm.

MobileCards

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

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

MobileCardsImage

Tap Content Action Card under the All Subscriptions tab.

MobileCardsImage

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

MobileCardsImage

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

MobileCardsImage

Tap a card to open it.

MobileCardsImage

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

MobileCardsImage

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

MobileCardsImage

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

MobileCardsImage

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

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

MobileCardsImage

Tap v to expand the card action menu.

MobileCardsImage

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

MobileCardsImage

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.

MobileCardsImage

Tap Content Action Card under the All tab.

MobileCardsImage

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

MobileCardsImage

Tap on All Cards.

MobileCardsImage

Tap a card to open it.

MobileCardsImage

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

MobileCardsImage

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

MobileCardsImage

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

MobileCardsImage

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.

MobileCardsImage

In case of any failure, you can navigate to Activity Logs by clicking on More | Logs and then look in Pending Actions.

Congratulations, you have built a content action card that creates action based on the content.

Log on to answer question

Next Steps

Back to top