OpenHarmony @CnapData

On 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.

NOTE

This topic describes development for dynamic widgets. For static widgets, see FormLink.

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 to decorate the widget data to be updated.

let storage = new LocalStorage();
@Entry(storage)
@Component
struct WidgetCard {
  @LocalStorageProp('title') title: string = 'Title default';
  @LocalStorageProp('detail') detail: string = 'Description default';

  build() {
    Column() {
      Column() {
        Text(`${this.title}`)
          .margin(5).fontWeight(FontWeight.Medium).fontSize('14fp')
        Text(`${this.detail}`)
          .margin(5).fontColor(Color.Gray).fontSize('12fp').height('25%')
      }.width('100%').alignItems(HorizontalAlign.Start)
      Button('UPDATE')
        .margin(15).width('90%')
        .onClick(() => {
          postCardAction(this, {
            action: 'message',
            params: {
              msgTest: 'messageEvent'
            }
          });
        })
    }.width('90%').height('90%').margin('5%')
  }
}

Call the updateForm API to update the widget in the onFormEvent callback of the FormExtensionAbility.

import formBindingData from '@ohos.app.form.formBindingData';
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
import formProvider from '@ohos.app.form.formProvider';

export default class EntryFormAbility extends FormExtensionAbility {
  onFormEvent(formId: string, message: string) {
    // Called when a specified message event defined by the form provider is triggered.
    console.info(`FormAbility onFormEvent, formId = ${formId}, message: ${JSON.stringify(message)}`);
    class FormDataClass{
      title: string ='Title Update.' // It matches the widget layout.
      detail: string ='Description update success.' // It matches the widget layout.
    }
    let formData = new FormDataClass();
    let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(formData);
    formProvider.updateForm(formId, formInfo).then(() => {
      console.info('FormAbility updateForm success.');
    });
  }
  ...
}

The figure below shows the effect.

Initial State	After Clicking

Updating Widget Content Through the message Event