Intermediate
// Explore More Tutorials
Implement A Card With Content-Based Actions
2019-06-14
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 enable cards to trigger content-based actions, including native mobile device capabilities
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
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 | ContentActionCard |
| Destination | com.sap.edm.sampleservice.v2 |
| Template Source | Template Manager |
| HTML Template | Sample Product Template |
If you see a pop-up, click OK for the confirmation.
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.
Copy and paste the following <div> tag before {{street}} into the address <span> to declare the address:
<div class="c2g_address">
Add the closing <div> tag before the closing <span> tag:
</div>
By adding the
c2g_addresstag to the address, SAP Mobile Cards client can now parse the address and offer the user to show it on a map.
Next, copy and paste the following <div> tag before {{SupplierEmailDetailAddress}} into the email <span> to declare the email address:
<div class="c2g_email">
Add the closing <div> tag right before the closing <span> tag:
</div>
By adding the
c2g_emailtag 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.
Next, copy and paste the following <div> tag after the address <class> tag to add a phone number and website address to the card:
<div class="listitem" style="padding-top: 28px;">
<span style="font-weight:normal;float:left;font-size:12px">
Supplier Phone
</span>
<br>
<span class="listitem-value" >
<div class="c2g_phoneNumber">
{{PhoneNumber}}
</div>
</span>
<br>
<span class="c2g_website"> http://www.sap.com</span>
</div>
By adding the
c2g_phoneNumbertag 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_websitetag 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.
×
Step 4: Subscribe to the card in SAP Mobile Cards
In the SAP Mobile Cards application, click More | Subscriptions.
Click ContentActionCard under the All tab.
Click Subscribe to activate the ContentActionCard subscription.
Click All Cards or New Cards to view this card.
Click the action icon at the bottom-left to open the available actions on the card.
Congratulations, you added content based actions to your card.
In case of any failure, you can navigate to Activity Logs by clicking on More | Logs and then look in Pending Actions.
