Skip to main content
Skip table of contents

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

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.