Event Push for Card Ability - Huawei Developers

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"
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
New Widget Dialog
Use the selector to choose Config and then select your card
Card Selector
Use the + button to add parameters, you can define default values for testing.
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.
Code:
<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.
Code:
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}}
Code:
<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.
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.
App Gallery Connect
From version information, scroll down to software version and then click on “Software packages”.
Package Admin Dialog
Click on upload and select your generated package
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

---

What does RPK stands for ?