Meta-service card data transmission

Read the original article：Meta-service card data transmission

work request data and deliver it to a meta-service card so the card UI updates accordingly.

Background Knowledge

• formProvider: Interfaces for card providers (update cards, set update time, query info, request publishing).
• updateForm(formId, formBindingData): Provider-side API (Promise) to push data to a specific card.
• formBindingData.FormBindingData: Key-value payload used when updating a card.
• LocalStorageProp (in card UI): Receives provider-pushed data for rendering.
• The card framework may trigger refresh callbacks according to timing policies declared by the developer.

Parameter	Name	Type Required	Description
formId	string	Yes	Request for updated card identification.
formBindingData	formBindingData.FormBindingData	Yes	Data used for updates.

Implementation Steps

1. Provider side:
   • Import formBindingData and formProvider from @kit.FormKit.
   • Build a FormBindingData object via createFormBindingData({...}).
   • Call formProvider.updateForm(formId, payload) and handle Promise success/failure.
2. Card UI side:
   • Use @LocalStorageProp (or LocalStorageProp decorator) to receive pushed values.
   • Update the UI on message/refresh events using the received data (convert to string if needed).

Code Snippet / Configuration

import { formBindingData, formProvider } from '@kit.FormKit';
import { BusinessError } from '@kit.BasicServicesKit';


let formId: string = '12400633174999288';
let param: Record<string, string> = {
  'temperature': '22c',
  'time': '22:00'
}
let obj: formBindingData.FormBindingData = formBindingData.createFormBindingData(param);
try {
  formProvider.updateForm(formId, obj).then(() => {
    console.log(`formProvider updateForm success`);
  }).catch((error: BusinessError) => {
    console.error(`promise error, code: ${(error as BusinessError).code}, message: ${(error as BusinessError).message})`);
  });
} catch (error) {
  console.error(`catch error, code: ${(error as BusinessError).code}, message: ${(error as BusinessError).message})`);
}

In the card page, use the LocalStorageProp decorator to receive the required card data. For specific details, please refer to the LocalStorageProp guide and refresh the card content through the message event.

Test Results

• After calling updateForm with a valid formId and payload, the card receives updated values through LocalStorageProp and re-renders accordingly on a real device.

Written by Muhammet Cagri Yilmaz