1# Updating Widget Content Through the message Event 2 3On the widget page, the **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/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 storage = new LocalStorage(); 13 @Entry(storage) 14 @Component 15 struct WidgetCard { 16 @LocalStorageProp('title') title: string = 'Title default'; 17 @LocalStorageProp('detail') detail: string = 'Description default'; 18 19 build() { 20 Column() { 21 Column() { 22 Text(`${this.title}`) 23 .margin(5).fontWeight(FontWeight.Medium).fontSize('14fp') 24 Text(`${this.detail}`) 25 .margin(5).fontColor(Color.Gray).fontSize('12fp').height('25%') 26 }.width('100%').alignItems(HorizontalAlign.Start) 27 Button('UPDATE') 28 .margin(15).width('90%') 29 .onClick(() => { 30 postCardAction(this, { 31 'action': 'message', 32 'params': { 33 'msgTest': 'messageEvent' 34 } 35 }); 36 }) 37 }.width('90%').height('90%').margin('5%') 38 } 39 } 40 ``` 41 42- Call the [updateForm](../reference/apis/js-apis-app-form-formProvider.md#updateform) API to update the widget in the **onFormEvent** callback of the FormExtensionAbility. 43 44 ```ts 45 import formBindingData from '@ohos.app.form.formBindingData'; 46 import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility'; 47 import formProvider from '@ohos.app.form.formProvider'; 48 49 export default class EntryFormAbility extends FormExtensionAbility { 50 onFormEvent(formId: string, message: string) { 51 // Called when a specified message event defined by the form provider is triggered. 52 console.info(`FormAbility onFormEvent, formId = ${formId}, message: ${JSON.stringify(message)}`); 53 let formData = new Map<Object, string>(); 54 formData.set('title', 'Title Update.'); // It matches the widget layout. 55 formData.set('detail', 'Description update success.'); // It matches the widget layout. 56 let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(formData); 57 formProvider.updateForm(formId, formInfo).then(() => { 58 console.info('FormAbility updateForm success.'); 59 }); 60 } 61 62 ... 63 } 64 ``` 65 66 The figure below shows the effect. 67 68 | Initial State | After Clicking | 69 | ------------------------------------------------------- | ----------------------------------------------------- | 70 |  |  | 71
