1# Transferring Messages to an Application (message Event) 2 3On the widget page, you can trigger a message event via the [postCardAction](../reference/apis-arkui/js-apis-postCardAction.md#postcardaction-1) API to launch the [FormExtensionAbility](../reference/apis-form-kit/js-apis-app-form-formExtensionAbility.md). The FormExtensionAbility then notifies the application through the [onFormEvent](../reference/apis-form-kit/js-apis-app-form-formExtensionAbility.md#formextensionabilityonformevent) callback. This process enables the functionality of passing messages to the application after a widget is touched. Subsequently, the FormExtensionAbility refreshes the widget content. Below is a simple example. 4 5> **NOTE** 6> 7> This topic describes development for dynamic widgets. For static widgets, see [FormLink](../reference/apis-arkui/arkui-ts/ts-container-formlink.md). 8 9- On the widget page, register the **onClick** event callback of the button and call the **postCardAction** API in the callback to trigger the message event to start the FormExtensionAbility. Use [LocalStorageProp](../ui/state-management/arkts-localstorage.md#localstorageprop) to decorate the widget data to be updated. 10 11 ```ts 12 let storageUpdateByMsg = new LocalStorage(); 13 14 @Entry(storageUpdateByMsg) 15 @Component 16 struct UpdateByMessageCard { 17 @LocalStorageProp('title') title: ResourceStr = $r('app.string.default_title'); 18 @LocalStorageProp('detail') detail: ResourceStr = $r('app.string.DescriptionDefault'); 19 20 build() { 21 Column() { 22 Column() { 23 Text(this.title) 24 .fontColor('#FFFFFF') 25 .opacity(0.9) 26 .fontSize(14) 27 .margin({ top: '8%', left: '10%' }) 28 Text(this.detail) 29 .fontColor('#FFFFFF') 30 .opacity(0.6) 31 .fontSize(12) 32 .margin({ top: '5%', left: '10%' }) 33 }.width('100%').height('50%') 34 .alignItems(HorizontalAlign.Start) 35 36 Row() { 37 Button() { 38 Text($r('app.string.update')) 39 .fontColor('#45A6F4') 40 .fontSize(12) 41 } 42 .width(120) 43 .height(32) 44 .margin({ top: '30%', bottom: '10%' }) 45 .backgroundColor('#FFFFFF') 46 .borderRadius(16) 47 .onClick(() => { 48 postCardAction(this, { 49 action: 'message', 50 params: { msgTest: 'messageEvent' } 51 }); 52 }) 53 }.width('100%').height('40%') 54 .justifyContent(FlexAlign.Center) 55 } 56 .width('100%') 57 .height('100%') 58 .alignItems(HorizontalAlign.Start) 59 .backgroundImage($r('app.media.CardEvent')) 60 .backgroundImageSize(ImageSize.Cover) 61 } 62 } 63 ``` 64 65- Call the [updateForm](../reference/apis-form-kit/js-apis-app-form-formProvider.md#formproviderupdateform) API to update the widget in the **onFormEvent** callback of the FormExtensionAbility. 66 67 ```ts 68 import { BusinessError } from '@kit.BasicServicesKit'; 69 import { formBindingData, FormExtensionAbility, formProvider } from '@kit.FormKit'; 70 import { hilog } from '@kit.PerformanceAnalysisKit'; 71 72 const TAG: string = 'EntryFormAbility'; 73 const DOMAIN_NUMBER: number = 0xFF00; 74 75 export default class EntryFormAbility extends FormExtensionAbility { 76 onFormEvent(formId: string, message: string): void { 77 // Called when the message event of the postCardAction API of the widget provider is triggered. 78 hilog.info(DOMAIN_NUMBER, TAG, `FormAbility onFormEvent, formId = ${formId}, message: ${JSON.stringify(message)}`); 79 80 class FormDataClass { 81 title: string = 'Title Update.'; // It matches the widget layout. 82 detail: string = 'Description update success.'; // It matches the widget layout. 83 } 84 85 // Replace it with the actual widget data. 86 let formData = new FormDataClass(); 87 let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(formData); 88 formProvider.updateForm(formId, formInfo).then(() => { 89 hilog.info(DOMAIN_NUMBER, TAG, 'FormAbility updateForm success.'); 90 }).catch((error: BusinessError) => { 91 hilog.info(DOMAIN_NUMBER, TAG, `Operation updateForm failed. Cause: ${JSON.stringify(error)}`); 92 }) 93 } 94 //... 95 } 96 ``` 97 98 The figure below shows the effect. 99 100 | Initial State | Touch to Refresh | 101 | ------------------------------------------------------- | ----------------------------------------------------- | 102 |  |  | 103
