1# Active Update of ArkTS Widgets 2 3This section provides the development guidelines for active update. For details about the update process, see [Active Update](./arkts-ui-widget-interaction-overview.md#active-update). 4 5## Active Update by Widget Provider 6 7The widget provider can call [updateForm](../reference/apis-form-kit/js-apis-app-form-formProvider.md#formproviderupdateform) to actively update the widget. It is recommended that this API be used with the widget lifecycle callbacks [onFormEvent](../reference/apis-form-kit/js-apis-app-form-formExtensionAbility.md#formextensionabilityonformevent), [onUpdateForm](../reference/apis-form-kit/js-apis-app-form-formExtensionAbility.md#formextensionabilityonupdateform), and [onAddForm](../reference/apis-form-kit/js-apis-app-form-formExtensionAbility.md#formextensionabilityonaddform). 8 9```ts 10import { formBindingData, formProvider } from '@kit.FormKit'; 11import { BusinessError } from '@kit.BasicServicesKit'; 12 13let storage = new LocalStorage(); 14 15@Entry(storage) 16@Component 17struct Index { 18 @StorageLink('formId') formId: string = ''; 19 @StorageLink('formData') formData: Object | string = ''; 20 21 build() { 22 Column() { 23 Column() { 24 //... 25 Button() { 26 //... 27 } 28 .onClick(() => { 29 console.info(`click to check updateForm, formId: ${this.formId}`); 30 const formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(this.formData); 31 // formId is the ID of the widget to be updated. 32 formProvider.updateForm(this.formId, formInfo).then(() => { 33 console.info('updateForm success.'); 34 }).catch((error: BusinessError) => { 35 console.error(`updateForm fail, code: ${error?.code}, message: ${error?.message}`); 36 }) 37 }) 38 .margin(5) 39 } 40 //... 41 } 42 //... 43 } 44} 45``` 46<!--Del--> 47 48## Active Update by Widget Host (for System Applications Only) 49 50Due to the time limit of interval-based and time-specific updates, the widget host can call [requestForm](../reference/apis-form-kit/js-apis-app-form-formHost-sys.md#requestform) to request the Widget Manager to actively update the widget. The Widget Manager calls the [onUpdateForm](../reference/apis-form-kit/js-apis-app-form-formExtensionAbility.md#formextensionabilityonupdateform) lifecycle callback in the FormExtensionAbility of the widget provider. In the callback, the [updateForm](../reference/apis-form-kit/js-apis-app-form-formProvider.md#formproviderupdateform) API can be called to update the widget content. 51 52```ts 53import { formHost } from '@kit.FormKit'; 54import { BusinessError } from '@kit.BasicServicesKit'; 55 56let storage = new LocalStorage(); 57 58@Entry(storage) 59@Component 60struct Index { 61 @StorageLink('formId') formId: number = 0; 62 63 build() { 64 Column() { 65 Column() { 66 //... 67 Button() { 68 //... 69 } 70 .onClick(() => { 71 console.info(`click to check requestForm, formId: ${this.formId}`); 72 // formId is the ID of the widget to be updated. 73 formHost.requestForm(this.formId.toString()).then(() => { 74 console.info('requestForm success.'); 75 }).catch((error: BusinessError) => { 76 console.error(`requestForm fail, code: ${error?.code}, message: ${error?.message}`); 77 }) 78 }) 79 .margin(5) 80 } 81 //... 82 } 83 //... 84 } 85} 86``` 87<!--DelEnd--> 88