1# Updating Widget Content Through the message Event
2
3On the widget page, the [postCardAction](../reference/apis-arkui/js-apis-postCardAction.md#postcardaction) API can be used to trigger a message event to start a FormExtensionAbility, which then updates the widget content. The following is an example of this widget update mode.
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](../quick-start/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#updateform) 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 a specified message event defined by the form 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      let formData = new FormDataClass();
86      let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(formData);
87      formProvider.updateForm(formId, formInfo).then(() => {
88        hilog.info(DOMAIN_NUMBER, TAG, 'FormAbility updateForm success.');
89      }).catch((error: BusinessError) => {
90        hilog.info(DOMAIN_NUMBER, TAG, `Operation updateForm failed. Cause: ${JSON.stringify(error)}`);
91      })
92    }
93    //...
94  }
95  ```
96
97  The figure below shows the effect.
98
99  | Initial State                                               | After Clicking                                             |
100  | ------------------------------------------------------- | ----------------------------------------------------- |
101  | ![WidgetUpdateBefore](figures/widget-update-before.PNG) | ![WidgetUpdateAfter](figures/widget-update-after.PNG) |
102