SAP Mobile Cards for WeChat Tutorial

[former_member199077]

简体中文版

Introduction

SAP Mobile Cards for WeChat is a cloud-based micro-app platform for WeChat. SAP customers can publish HTML pages combined with backend destination configurations to develop and deliver micro applications in less time than traditional web app development, which requires software and hardware resources, and development management, making developing and running apps cheaper. SAP Mobile Cards for WeChat works in similar way, which reduces the amount of time required to train users. SAP Mobile Cards for WeChat supports WeChat Work.

“Corporate” will be used for “Enterprise” (in Chinese “企业”).

SAP Mobile Cards for WeChat shares the same cloud resources with native iOS and android apps, SAP Mobile Cards. Customers can use either WeChat Work or native apps on the same contents.

Administrators need following 2 links from SAP Mobile Cards for WeChat to configure Mobile Cards for WeChat on the Corporate WeChat account:

https://cardsbroker{landscape}-{account}.cn1.hana.ondemand.com/wechat/portal

https://cardsui{landscape}-{account}.dispatcher.cn1.hana.ondemand.com

Note:

1. Each customer need to find and replace {landscape} and {account} values.

 

Corporate WeChat Account Introduction for Administrator

This section provides system administrators with information on how to locate import configuration and parameters. Corporate WeChat web app, https://work.weixin.qq.com/, should be used to configure and authorize users and applications.



Mobile users can download WeChat Work app by selecting the “下载” button.

Administrator can scan QR-code, which can be opened by selecting the “企业登录” to logon the management portal.



An administrator can find “CorpID” under “Corporate > Info”.  “CorpID” is an important configuration parameter.



An administrator can create and configure SAP Mobile Cards for WeChat in “自建” region under “应用与小程序”.



After selecting “创建应用”, an administrator needs to further configure and authorize the app further.



Every application here is associated with an “AgentId”. “AgentId” and “Secret” are also important configuration parameters like “CorpID”. It’s recommended to use the web app to generate the parameter values.

An administrator also needs to configure “接收消息”.  In this step, https://cardsbroker{landscape}-{account}.cn1.hana.ondemand.com/wechat/portal is used.

Note: “Token” and “EncodingAESKey” are important configuration parameters. It’s recommended to use the web app to generate the parameter values.



Next, the administrator needs to specify a value for web app URL. The value should look like the one in the picture blow: https://cardsui{landscape}-{account}.dispatcher.cn1.hana.ondemand.com. This configuration is under “配置” in “菜单” page.





Summary: Administrators need to find  values for “CorpID”, “AgentId”, “Secret”, “Token” and “EncodingAESKey”. The values will be used in SAP cloud platform mobile service (SAP CPms).

 

An Introduction to SAP Mobile Cards Management for Administrators

Each SAP customer has their own link for SAP Mobile Cards for WeChat Admin on SAP Cloud Platform Mobile Services (SAP CPms). For example, https://mobile{landscape}-{account}.dispatcher.cn1.hana.ondemand.com/sap/mobile/admin/ui/index.html?....

 

WeChat Settings

Steps:

1. After authorization, the administrator lands on the cockpit home page. The administrator needs to navigate to the “SAP Mobile Cards” page.


2. Configure “WeChat Settings”. Parameters used in the previous section are to be used here. Select the icon to edit and submit the parameters.

Once the WeChat Settings have been configured, the SAP Mobile Cards for WeChat and Corporate WeChat Account handshake configuration is completed.

 

Create “Sample Template Welcome Card” Card

The “Sample Template Welcome Card” is one of easiest card templates to configure. The following steps are based on the “Welcome Card” template to demonstrate how to create of cards through the cockpit.

Steps：

1. Navigate to “SAP Mobile Cards > +Create” screen


2. Select the  icon


3. From “Template”, select “Sample Template”


4. From “HTML Template”, select “Sample Template Welcome Card”


5. Provide a name


6. Select “Save”

Note:

1. “Sample Template Welcome Card” is an “Automatic” type. Every customer is automatically given an instance of this card, and customers do not have to subscribe to cards that are added automatically.


2. SAP Mobile Cards for WeChat supports HTML templates only.

Modify “Sample Template Welcome Card” Card

SAP Mobile Cards includes with a set of card templates, and the “Sample Template Welcome Card” is one of them. Administrators can modify the templates to go to production quickly. SAP Mobile Cards editor supports the “What You See Is What You Get” mode.

Steps：

1. Select “Welcome and Instructions” to enter editing mode


2. Navigate to “Editor”


3. In Editor, the left hand side is the editing area for HTML source code, and the right hand side is the preview area. Modify “Welcome to SAP Mobile Cards” as “欢迎与简介”


4. Select “Save”

The “Sample Template Welcome Card” uses only static content. “SAP Mobile Cards” provides a collection of cards using dynamic data. In general, dynamic data are from destination. “SAP Mobile Cards” supports a wide range of applications. For tutorials covering developing a variety of interesting cards, go to the following link:

https://www.sap.com/developer/tutorial-navigator/mobile-interactive-tutorials/content2go.html

 

SAP Mobile Card for WeChat User Guide

After configuration and deployment, cards are available to WeChat Work users.

Steps：

1. To open “WeChat Work” app, select the  icon


2. Find “SAP Mobile Cards”, for example “Mobile Cards Demo” in “Workspace” tab


3. Select Mobile Cards Demo. After authorization, users see a list of cards in default page

  

Open “Welcome and Introductions”

Steps：

1. From the “Subscribed” tab, select “Welcome and Instructions”


2. Select  icon flips the front and back faces of the card

 

Subscribe Card

Users can choose to subscribe or unsubscribe to cards.

Steps：

1. Select “More”, then select “Sales Orders”.


2. In subscription page, select “Subscribe”.


3. After successful subscription and navigating back to “Subscribed” tab, users will see “Sales Orders”.

  

Navigate through Card Instances

Steps:

1. From “Subscribed” tab, select “Sales Orders”.


2. On the bottom, there 3 dots,  icon. Each dot represents an instance of the card. Select  or  to navigate among instances. Swiping left or right is another way to navigate through card instances.


3. The  icon allows flipping between the front and back faces of cards.

  

Perform Actions

Some cards require users’ actions. For example, “Hybris C4C Opportunity” in this tutorial defines 3 options, i.e. “Approve”, “Reject”, and “Revise” for its action.

Steps:

1. From “Subscribed” tab, select “Hybris C4C Opportunity”


2. To bring up action sheet, select the  icon


3. Select one of the three actions to perform a task

 

Unsubscribe Card

To unsubscribe to a card, navigate to “More” tab and click “Sales Orders”.

Steps:

1. Go to the “More” tab, the select “Sales Orders”


2. From “Subscription” screen, select “Unsubscribe”


3. After successfully unsubscribing, return to the “Subscribed” tab to verify that “Sales Orders” is gone

 

Messaging

Get card list

Steps:

1. Select “Close” to exit the card UI


2. Select “Commands”, then “Cards”. “Cards” menu sends a text message “Cards” to the cloud service, that responds with a list of cards owned by the user


3. Same result can be achieved by sending chat message “Cards”


4. Select any cards in the list, users can directly enter the card UI

 

Get action list

Steps:

1. Select “Commands”, then select “Actions”


2. “Actions” menu sends a text message “Actions”. The service responds with a list of actions assigned the the user


3. Same result can be achieved by sending chat message “Actions”


4. Select the title of an action, users will enter the card UI directly. Exit card UI


5. Under the title, action options are listed, such as “Accept”, “Reject”, or “Revise”. Users can directly select any of those options to perform the action


6. If a number follows an action option, users can reply with the number to complete an action

Note:

1. Different cards have different action labels. For action design, please reference https://blogs.sap.com/2017/10/10/content-to-go-how-to-add-action-to-your-cards/.

 

Help

Users can send “帮助” or a “Help” text message to get help information.

WeChat Push Notification

When cards are designed to use push notifications, new cards, card updates, and action push notifications are sent to users like the picture below. Please reference “通知消息/Messaging” for usage.



 

Conclusion

So far, we covered WeChat corporate account management, SAP Mobile Cards management, and end users' guide. The aim is to provide a holistic view on how the 3 products work together.