Render Cards Based On User Input With Content-Based Actions
- 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
- Step 1
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.
- Step 2
-
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
andDescription
. -
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
fromSingleInstance
toQuery
. -
Change
Description
andDescriptionEnglish
fromShow products
toAvailable 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
toQuery
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.
At the end of this step, what is the Card Template type of your card?
-
- Step 3
-
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
.
-
- Step 4
-
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. -
- Step 5
-
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 thetemplate_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.
HTMLCopy<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 thetemplate_en.html
file.HTMLCopy<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 thetemplate_en.html
file.HTMLCopy<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?
-
- Step 6
-
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.
-
- Step 7
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.
-
- Step 8
-
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
.
-
- Step 9
-
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 version1.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.
-
- Step 10
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.
Congratulations! You have built a card which takes user input to show the data and then provides contextual actions.
Which of the following categories is not a part of the Subscription List?
-
- The real-world use case
- Create a new product card
- Identify product categories from the back end
- Prepare test data for designing
- Design your card
- Deploy and publish the card
- View the card on your mobile device
- Add category selection
- Deploy and publish a new version of the card
- View the new version of the card on your mobile device