Render Cards Based On User Input With Content-Based Actions

0 %

Render Cards Based On User Input With Content-Based Actions

Details

Render Cards Based On User Input With Content-Based Actions

Sandeep TDS

December 22, 2020

Created by

February 27, 2019

Intermediate

1 hr.

Create a card that shows data based on user-input, and then shows actions based on its content, such as triggering a phone call, sending an email, etc..

You will learn

How to implement a card with content-based actions
How to use native mobile device capabilities with SAP Mobile Cards
How to design, deploy and publish a new version of a card
How to implement subscription parameters

Prerequisites

Completed the starter mission or Set up Mobile Services on you SAP Cloud Platform account
Set up SAP Business Application Studio for Mobile Development
Created your first card in SAP Business Application Studio
Install SAP Mobile Cards Application:

Android
iOS

Step 1: The real-world use case

It is your first day in a new organisation. During the orientation program, you are told that if you require any supplies for your work/workspace, you can raise a request through a mobile application.

To make the navigation easy from hundreds of products, you want to select the category of a product and then select an item. You also want the capability to contact the supplier to check the status of your order.

Done

Log on to answer question

Step 2: Create a new product card

Open your Business Application Studio, and enter your Development space.

If your dev space is not running, click the Play Button - to start it.
In the menu bar, go to View → Find Command, click Find Command.

For faster development, you can use the shortcut key.
Type Mobile Cards: New, and select Mobile Cards: New From Template.
Select Product Card Template - Single Instance.
Enter a name for the card; e.g. Office Products.
Open metadata.json file from the project explorer, and notice the Card Template and Description.
Right click on metadata.json, and click Open With ← Code Editor.

By default, the Application Studio launches the Metadata Editor for metadata.json file. To edit the raw json file, you must use the code editor option.
Change CustomType from SingleInstance to Query.
Change Description and DescriptionEnglish from Show products to Available Products.
Open metadata.json file from the project explorer, and verify the following changes.

Field Value

Card Template Multi Instance

Description Available Products

By changing the CustomType to Query makes the card a Multi Instance card. This change is the reason for the Query Refresh Mode and Query Refresh Time options to become visible.

You can learn more about Single Instance and Multi Instance cards here.

Field	Value
Card Template	Multi Instance
Description	Available Products

At the end of this step, what is the Card Template type of your card? Automatic Instance Generation Server Managed Card Multi Instance Card Single Instance Card

Step 3: Identify product categories from the back end

In the Mobile Services cockpit, click Mobile Connectivity under the Features tab.
For the com.sap.edm.sampleservice.v2 sample service, click the Launch in Browser button
In the browser window that opens, add /ProductCategories before ?auth=uaa.
Make a note of 3 Category Names. e.g. Accessories, Software & Headsets.

Done

Log on to answer question

Step 4: Prepare test data for designing

In the project explorer of your Application Studio space, open metadata.json file ← URLs Tab.
Change Collection Handling to OData V2 (SAP) and enter this value /Products?$filter=Category%20eq%20%27Keyboards%27&$expand=SupplierDetails,StockDetails&$format=json in the Query` field.
Open userdata.json file from the project explorer.

Since we have modified the Query URL, we must update our userdata.json to capture how the data would be received by the application.
Open Find Command, search for Mobile Cards and select Mobile Cards: Retrieve Data.

Your will receive a success message when the action is completed successfully.

The data in userdata.json can now be used to design the card. You can learn more about Test Data for card design here.

Done

Log on to answer question

Step 5: Design your card

View Full Instructions

Delete templateBack_en.html file from the project explorer.

By default, every card has two sides: front & back. By deleting this file, we ensure that our card has only one side - the front side.
Open template_en.html file from the project explorer.
Open Find Command, search for Mobile Cards and select Mobile Cards: Preview.

The preview window will open to the side.
Replace {{d.results.[0].Name}} with {{d.Name}} in the template_en.html file.

Since we have updated our userdata.json file, the preview window will now show the name.

Copy the following code to make similar changes throughout the HTML file.

<body>
  <div id="mySimpleTemplate" class="myTemplate" data-type="text/x-handlebars-template">
      <div class="header" style="height: 30px">
          <div style="text-align: left;">
              <span
                  style="font-weight: bold; font-size: 24px; float: left; color: #5f799b; display: inline; padding-top: 8px">
                  {{d.Name}}
              </span>
              <div style="float: right;">
                  <span style="display: block; padding-top: 10px; padding-right:10px;">
                      <img src="{{d.PictureUrl}}" alt="" style=" width: 90px; height: 90px;">
                  </span>
                  <span style="clear: right; display: block; font-size: 16px; color: #5f711b; padding-top: 4px;">
                      {{d.Price}} {{d.CurrencyCode}}
                  </span>
              </div>
          </div>
      </div>
      <br>
      <br>
      <div class="card-content">
          <div class="listitem">
              <div class="listitem-label">
                  <span>
                      Category <br>
                  </span>
              </div>
              <br>
              <div class="listitem-availability">
                  <span>
                      {{d.Category}} <br>
                  </span>
              </div>
          </div>
          <br>
          <div class="listitem">
              <div class="listitem-label">
                  <span>
                      ProductID
                  </span>
              </div>
              <br>
              <div class="listitem-value">
                  <span id="description">
                      {{d.ProductId}}
                  </span>
              </div>
          </div>
          <br>
          <div class="listitem">
              <div class="listitem-label">
                  <span>
                      Product Description
                  </span>
              </div>
              <br>
              <div class="listitem-value">
                  <span id="description">
                      {{d.LongDescription}}
                  </span>
              </div>
          </div>
          <br>
          <div class="listitem">
              <div class="listitem-label">
                  <span>
                      Availability
                  </span>
              </div>
              <br>
              <div class="listitem-availability">
                  <span>
                      {{d.StockDetails.Quantity}}
                  </span>
              </div>
          </div>
          <br>
          <div class="listitem">
              <div class="listitem-label">
                  <span>
                      Supplier
                  </span>
              </div>
              <br>
              <div class="listitem-value">
                  <span>
                      {{d.SupplierDetails.SupplierName}}
                  </span>
              </div>
          </div>
          <br>
      </div>
  </div>
</body>

The Image at the top right corner of the card can’t be seen since, the image refers to a relative URL on the back end.

To place an order with the supplier, we are expected to send an e-mail. Thus, add the following code block under the Supplier <div> in the template_en.html file.
```
<div class="listitem">
    <div class="listitem-label">
        <span>
            Email Address
        </span>
    </div>
    <br>
    <div class="listitem-value">
        <div class="c2g_email">
            <span>
                {{d.SupplierDetails.EmailAddress}}
            </span>
        </div>
    </div>
</div>
<br>
```
c2g_email class validates the data stored in {{d.SupplierDetails.EmailAddress}} and shows an action to send an e-mail.
This tag is called a content-based action. You can learn more about it here.

To format your HTML file, right click on your file and select Format Document.

To follow-up on the order, you want to call or text the supplier. Thus, add the following code block under the Email Address <div> in the template_en.html file.

<div class="listitem">
    <div class="listitem-label">
        <span>
            Phone Number
        </span>
    </div>
    <br>
    <div class="listitem-value">
        <div class="c2g_phoneNumber">
            <span>
                {{d.SupplierDetails.PhoneNumber}}
            </span>
        </div>
    </div>
</div>

c2g_phoneNumber is the content-based action.

Which tags have been implemented in this tutorial? c2g_address c2g_phoneNumber c2g_email c2g_website

Step 6: Deploy and publish the card

Open Find Command, search for Mobile Cards and select Mobile Cards: Deploy.
Select Office Products.

If prompted to enter your username & password, enter the login details you use to login to the Mobile Service cockpit.

Your will receive a success message when your card is successfully deployed.
Open Find Command, search for Mobile Cards and select Mobile Cards: Publish.

If prompted to enter your username & password, enter the login details you use to login to the Mobile Service cockpit.
Select Office Products.

Your will receive a success message when your card is successfully published.

By default, the status of newly created cards is Development, and thereby can’t be seen on the mobile device. By publishing the card, the card becomes productive and accessible on the device. Click here to learn more about the card lifecycle.

Done

Log on to answer question

Step 7: View the card on your mobile device

Make sure you are choosing the right device platform tab ( Android or iOS ) above.

Tap the Add button in the SAP Mobile Cards Android application.
Tap Subcriptions.
Tap Office Products.
Notice the description, and tap Subscribe.
Tap back ← twice to go back to the card view.
Scroll through the carousel, and tap a card to open it.

If you are on a trial landscape, you will see a maximum of 3 card instances, i.e. 3 products.
Tap the actions menu (), and tap Email to send an e-mail to raise an order.
Now that you have raised an order, tap the actions menu (), and tap SMS or Call to contact the supplier for a follow-up on the order.

Tap More → Subscriptions in the SAP Mobile Cards iOS application.
Tap the All tab, and then tap Office Products.
Notice the description, and tap Subscribe.
Tap All Cards.
Tap a card to open it.

If you are on a trial landscape, you will see a maximum of 3 card instances, i.e. 3 products.
Tap the actions menu (), and tap Email to send an e-mail to raise an order.
Now that you have raised an order, tap the actions menu (), and tap SMS or Call to contact the supplier for a follow-up on the order.

Done

Log on to answer question

Step 8: Add category selection

In the project explorer of your Application Studio space, open metadata.json file ← URLs Tab.
Click add button () located above the Parameters table.

The parameter defined here is a Global parameter. As suggested by the name, this parameter is accessible throughout the card. To learn more about URL parameters, click here.

Enter the following details to create the parameter:

Field	Value	Details
Name	`product_Id`	Name of the parameter variable which will be used as the reference.
Value	`d.ProductId`	The product Id value as returned by the back end.
Url	`0`	The URL serial number in the Data Endpoint URL table that returns the respective value.

Click add button () located above the Subscription Parameters table.

The parameter defined here is a Subscription parameter. A Subscription parameter allows the user to provide an input that is used to define the Query URL. To learn more about Subscription parameters, click here.

Enter the following details to create the Subscription parameter:

Field	Value	Details
Name	selected_Category	Name of the parameter variable which will be used as the reference.
Label	Select A Category	The text seen by the end user.
Data Type	SelectList	A drop-down list.
List Name	Product_Categories	You can create multiple lists in SAP Mobile Cards. This option lets you reuse an already created list. This option should be selected after filling the list options.
Is Nullable	Uncheck	The end-user must choose an option to proceed.

Field	Value	Details
Name	Product_Categories	Name of the select list. This name can be seen as an option of the List Name.

Label	Value
Accessories	Accessories
Software	Software
Headsets	Headsets

These values in the select list are categories that will be used to filter the response from the back end.

In the Query URL, replace Keyboards with $selected_Category.

The final query URL should be:

/Products?$filter=Category%20eq%20%27${selected_Category}%27&$expand=SupplierDetails,StockDetails&$format=json
In the Lifecycle tab, update the version to 1.1.

Done

Log on to answer question

Step 9: Deploy and publish a new version of the card

Open Find Command, search for Mobile Cards and select Mobile Cards: Deploy.
Select Office Products.

If prompted to enter your username & password, enter the login details you use to login to the Mobile Service cockpit.

Your will receive a success message when your card is successfully deployed.
In the Lifecycle tab, click the navigate button () to open Mobile Services cockpit.
Click Office Products.
Click Publish button () for version 1.1 in the versions table to make the card productive.

Earlier in this tutorial we published the card in business application studio. The option to publish a card (and maintain the lifecycle of a card) is available in the mobile services cockpit as well.

For details, please click here.
Click Yes.

Done

Log on to answer question

Step 10: View the new version of the card on your mobile device

Make sure you are choosing the right device platform tab ( Android or iOS ) above.

Perform Pull Refresh in the SAP Mobile Cards Android application.
Tap the Add button .
Tap Subscriptions.
Tap Office Products.

You may notice a check mark momentarily.
Notice the version, and tap Subscribe.
Select Headsets, click Submit.

The list we defined in the subscription parameters can be seen here. Upon selection, products from this category will be shown as cards.
Tap back ← twice to go back to the card view.

You can subscribe to other categories. Each category is grouped together and has the content actions.

Perform Pull Refresh in the SAP Mobile Cards iOS application.
Tap More → Subscriptions.
Tap the All tab, and then tap Office Products.

You may notice a check mark momentarily.
Notice the version, and tap Subscribe.
Select Headsets, click Submit.

The list we defined in the subscription parameters can be seen here. Upon selection, products from this category will be shown as cards.
Tap All Cards, and then tap on a card to open it.