Implement A Card With Content-Based Actions

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>

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.