[Huawei Developers] Freemind R:
More information like this, you can visit HUAWEI Developer Forum​

Original link: https://forums.developer.huawei.com/forumPortal/en/topicview?tid=0201314254633580183&fid=0101188387844930001

In a previous post I’ve showed you how to make the account binding process to obtain the user’s Open Id. In this article I’m going to explain you how to use the Open Id to send push events to the users of your card ability.

Previous requirements

A card Ability

A developer Enterprise account

Huawei QuickApp IDE V2.5+

Huawei Ability Test Tool V1.0+

Your own server

Preparing the card

Open your card project in the Huawei QuickApp IDE and create a new widget by going to File > New widget.

Select a template for your card and click on "Ok"

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/383/434/2640052000002383434.20200729171018.34521114802953521638770084252237:50510904015823:2800:7DBB30781016608C92CA5BFB379D36E49297C0693D506F35A511F6ED01B8E19D.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/383/434/2640052000002383434.20200729171018.34521114802953521638770084252237:50510904015823:2800:7DBB30781016608C92CA5BFB379D36E49297C0693D506F35A511F6ED01B8E19D.png[/IMG]

New Widget Dialog

Use the selector to choose Config and then select your card

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/383/434/2640052000002383434.20200729171239.01007280581571732312550078127361:50510904015823:2800:13514839B25B049BF9F8E3FCEAB0D956F77E0C24E0001A86098D8D18AF634D89.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/383/434/2640052000002383434.20200729171239.01007280581571732312550078127361:50510904015823:2800:13514839B25B049BF9F8E3FCEAB0D956F77E0C24E0001A86098D8D18AF634D89.png[/IMG]

Card Selector

Use the + button to add parameters, you can define default values for testing.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/383/434/2640052000002383434.20200729171337.13526499175651963910491216103934:50510904015823:2800:2347C66BED5E4977C3C27C23D2ED845A8BC02C6451AADD23DD63FA887250FE21.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/383/434/2640052000002383434.20200729171337.13526499175651963910491216103934:50510904015823:2800:2347C66BED5E4977C3C27C23D2ED845A8BC02C6451AADD23DD63FA887250FE21.png[/IMG]

Card Setup Dialog

Receiving the parameters

When you send push events, the params will be delivered to the card. To be able to render the card dynamically with the params, define an array of properties in your exports in the “script” part of your UX file.

<script>
const locales = {
zh: require('./i18n/zh.js'),
en: require('./i18n/en.js')
}
const device = require("@system.device");
import configuration from '@system.configuration'
const localeObject = configuration.getLocale();
let local = localeObject.language;
const $i18n = new I18n({ locale: local, messages: locales, fallbackLocale: 'en' });
module.exports = {
props: [
'title',
'big_text',
'small_text'
],

Modify the onInit function to receive the parameters using the next notation: this.property=params.paramName. Where property is one of the properties from the props array and paramName is the name you’ve defined in the config dialog.

onInit: function (params) {
this.title=params.title;
this.big_text=params.big_text;
this.small_text=params.small_text;
this.margin = Math.ceil(this.dpConvert(16));

try {
var windowLogicWidth = device.getInfoSync().windowLogicWidth;
this.width = (windowLogicWidth - (this.margin * 2));
this.height = Math.ceil((this.width / 16) * 9);
} catch (error) {
this.width = (750 - (this.margin * 2));
this.height = Math.ceil((this.width / 16) * 9);
}

}

Card Rendering

You can access to your properties from the template part to display your card according to the received params using the next notation: {{property}}

<template>
<div class="maptype_box" widgetid="12e7d1f4-68ec-4dd3-ab17-dde58e6c94c6">
<card_title id='title' title="{{title}}"></card_title>
<div class="maptype_content_box">
<image src="{{$t('message.url')}}" class="maptype_img" style="width: {{width}}px ;height:{{height}}px;"></image>
<div class="maptype_one">
<text class="maptype_text_one">{{big_text}}</text>
</div>
<div class="maptype_two">
<text class="maptype_textFour">{{small_text}}</text>
</div>
</div>
<card_bottom_2 dataSource="Source"></card_bottom_2>
</div>

</template>

Card update

Go to Build > Run release to create a signed RPK package of your card. Don’t forget to update the version name and version number.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/383/434/2640052000002383434.20200729171548.85777576861323195426589532581983:50510904015823:2800:8E9C1B51E53A849A3C505A9DF2502E5AB6D4BC25613CB70A2A140082BAA81F2A.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/383/434/2640052000002383434.20200729171548.85777576861323195426589532581983:50510904015823:2800:8E9C1B51E53A849A3C505A9DF2502E5AB6D4BC25613CB70A2A140082BAA81F2A.png[/IMG]

Card Build Dialog

Once the process is complete, open the AGC console go to “My apps” and select your card. If you don’t have a card in AGC, you can click on “new app” and select RPK as package type.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/383/434/2640052000002383434.20200729171929.64815880482609655760459439287230:50510904015823:2800:0E943B28520FC4AAA2857A8F002FCFDB2E6C08FB57EA79C059A5F0206AF4F604.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/383/434/2640052000002383434.20200729171929.64815880482609655760459439287230:50510904015823:2800:0E943B28520FC4AAA2857A8F002FCFDB2E6C08FB57EA79C059A5F0206AF4F604.png[/IMG]

App Gallery Connect

From version information, scroll down to software version and then click on “Software packages”.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/383/434/2640052000002383434.20200729172005.99345696719674044757203780505056:50510904015823:2800:A5FB904089DDB3C346173F2AD303AABD0C84950851D6AE89B868903C894AC850.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/383/434/2640052000002383434.20200729172005.99345696719674044757203780505056:50510904015823:2800:A5FB904089DDB3C346173F2AD303AABD0C84950851D6AE89B868903C894AC850.png[/IMG]

Package Admin Dialog

Click on upload and select your generated package

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/383/434/2640052000002383434.20200729172040.08612749968657408792048219415871:50510904015823:2800:03E0734EE30BDBB7E1C3E1CADB60266E024EAF79BBDFBF73FBAB072EA47722D5.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/002/383/434/2640052000002383434.20200729172040.08612749968657408792048219415871:50510904015823:2800:03E0734EE30BDBB7E1C3E1CADB60266E024EAF79BBDFBF73FBAB072EA47722D5.png[/IMG]

Upload Progress Dialog

That’s all for AGC, let’s make the ability configuration.

This is not the end. For full content, you can visit https://forums.developer.huawei.com/forumPortal/en/topicview?tid=0201314254633580183&fid=0101188387844930001