1# Updating Widget Content Through UIAbility 2 3 4On the widget page, the **postCardAction** API can be used to trigger a router or call event to start the UIAbility, which then updates the widget content. The following is an example of this widget update mode. 5 6 7- On the widget page, register the **onClick** event callback of the button and call the **postCardAction** API in the callback to trigger the event to the FormExtensionAbility. 8 9 ```ts 10 let storage = new LocalStorage(); 11 @Entry(storage) 12 @Component 13 struct WidgetCard { 14 @LocalStorageProp('detail') detail: string = 'init'; 15 16 build() { 17 Column() { 18 Button ('Jump') 19 .margin('20%') 20 .onClick(() => { 21 console.info('postCardAction to EntryAbility'); 22 postCardAction(this, { 23 'action': 'router', 24 'abilityName': 'EntryAbility', // Only the UIAbility of the current application is allowed. 25 'params': { 26 'detail': 'RouterFromCard' 27 } 28 }); 29 }) 30 Text(`${this.detail}`).margin('20%') 31 } 32 .width('100%') 33 .height('100%') 34 } 35 } 36 ``` 37 38- In the **onCreate()** or **onNewWant()** lifecycle callback of the UIAbility, use the input parameter **want** to obtain the ID (**formID**) and other information of the widget, and then call the [updateForm](../reference/apis/js-apis-app-form-formProvider.md#updateform) API to update the widget. 39 40 ```ts 41 import UIAbility from '@ohos.app.ability.UIAbility'; 42 import formBindingData from '@ohos.app.form.formBindingData'; 43 import formProvider from '@ohos.app.form.formProvider'; 44 import formInfo from '@ohos.app.form.formInfo'; 45 46 export default class EntryAbility extends UIAbility { 47 // If the UIAbility is started for the first time, the onCreate lifecycle callback is triggered after the router event is received. 48 onCreate(want, launchParam) { 49 console.info('Want:' + JSON.stringify(want)); 50 if (want.parameters[formInfo.FormParam.IDENTITY_KEY] !== undefined) { 51 let curFormId = want.parameters[formInfo.FormParam.IDENTITY_KEY]; 52 let message = JSON.parse(want.parameters.params).detail; 53 console.info(`UpdateForm formId: ${curFormId}, message: ${message}`); 54 let formData = { 55 "detail": message +': onCreate UIAbility.', // Matches the widget layout. 56 }; 57 let formMsg = formBindingData.createFormBindingData(formData) 58 formProvider.updateForm(curFormId, formMsg).then((data) => { 59 console.info('updateForm success.' + JSON.stringify(data)); 60 }).catch((error) => { 61 console.error('updateForm failed:' + JSON.stringify(error)); 62 }) 63 } 64 } 65 // If the UIAbility is running in the background, the onNewWant lifecycle callback is triggered after the router event is received. 66 onNewWant(want, launchParam) { 67 console.info('onNewWant Want:' + JSON.stringify(want)); 68 if (want.parameters[formInfo.FormParam.IDENTITY_KEY] !== undefined) { 69 let curFormId = want.parameters[formInfo.FormParam.IDENTITY_KEY]; 70 let message = JSON.parse(want.parameters.params).detail; 71 console.info(`UpdateForm formId: ${curFormId}, message: ${message}`); 72 let formData = { 73 "detail": message +': onNewWant UIAbility.', // Matches the widget layout. 74 }; 75 let formMsg = formBindingData.createFormBindingData(formData) 76 formProvider.updateForm(curFormId, formMsg).then((data) => { 77 console.info('updateForm success.' + JSON.stringify(data)); 78 }).catch((error) => { 79 console.error('updateForm failed:' + JSON.stringify(error)); 80 }) 81 } 82 } 83 84 ... 85 } 86 ``` 87