Microfrontend types and props

All microfrontends have access to our exported utilities, but certain microfrontend types can also receive customProps specific to their usage in the app. The following is a list of our current microfrontend offerings and the props you can expect each to receive:

Mfe Type

Props

Attribute view widget

TYPESCRIPT

  // The value of the specific attribute
attribute: StateObservable<string | number | boolean | null | undefined>;
  // The value of the entire asset or area that the attribute belongs to, including all the custom_data
  // Note: Entity is only undefined when your plugin is used as a preview of what your view widget will look like
entity: StateObservable<Asset['frontend'] | Area['frontend']> | undefined;
  // The settings associated with your attribute view widget
  // Note: There is no UI yet to allow setting values for these, but you can modify the asset_types collection (schema.custom_view_settings) to include your properties and values
settings: any; (this will match whatever interface you use)

StateObservable comes from React-RxJs

Attribute edit widget

TYPESCRIPT

  // The value of the specific attribute
attribute: StateObservable<string | number | boolean | null | undefined>;
  // The value of the entire asset or area that the attribute belongs to, including all the custom_data
entity: StateObservable<Asset['frontend'] | Area['frontend']>;
  // A setter for updating the specific attribute value
setAttributeValue: (value: string | number | boolean | null | undefined) => void;
  // A setter for updating any value on the entire asset or area that the attribute belongs to
setEntity: (entity: Partial<Asset['frontend']> | Partial<Area['frontend']>) => void;
  // The settings associated with your attribute view widget
  // Note: There is no UI yet to allow setting values for these, but you can modify the asset_types collection (schema.custom_edit_settings) to include your properties and values
settings: any; (this will match whatever interface you use)

StateObservable comes from React-RxJs

Dashboard

No customProps are passed to dashboard microfrontends at this time

Observable State

Suppose the mfe type you are building receives an observable prop, and you are building your mfe using React. In that case, we recommend leveraging the useStateObservable hook and <Subscribe> from React-RxJs to easily access the observable's value.

For mfe applications, see https://github.com/ClearBlade/ia-microfrontends