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	UI Insertion Point
Attribute view widget	TypeScript // The value of the specific attribute attribute: StateObservable<string \| number \| boolean \| null \| undefined>; // The value of the entire asset 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<MfeAssetForAttributeWidgets> \| 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	These mfes can be inserted from the Settings page, within the Plugins tab.
Attribute edit widget	TypeScript // The value of the specific attribute attribute: StateObservable<string \| number \| boolean \| null \| undefined>; // The value of the entire asset that the attribute belongs to, including all the custom_data entity: StateObservable<MfeAssetForAttributeWidgets>; // 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 that the attribute belongs to setEntity: (entity: Partial<AssetV3Response>) => 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	These mfes can be inserted from the Settings page, within the Plugins tab.
Dashboard	No customProps are passed to dashboard microfrontends at this time	These mfes can be inserted from the Dashboards page, within the modal that pops up when you create a new dashboard. Select the “Plugin” type.
Asset tab	TypeScript `// The entire value of the selected asset asset: StateObservable<AssetV3Response \| undefined>;`	These mfes can be inserted from the Asset Type page, within the modal that pops up when you create or edit an asset type. Go to the “Tab settings”.
Full Page	No customProps are passed to full page microfrontends at this time	These mfes can be inserted from the Settings page, within the Main menu tab. Add a custom page to the General or Admin menu, and choose the “Plugin” destination type.
AI Components	TypeScript // The AssetType Schema on which the component is being configured schema: AssetType['frontend']['schema']; // The AssetType label assetTypeName: string // The Component info and metadata component: {id: string; name: string; meta: Pick<Components['frontend']['settings'], 'model_meta'>;} // This is a state setter function for setting the features and any component related settings setValues: React.Dispatch<React.SetStateAction<{schema: AssetType['frontend']['schema']; componentsMeta: Record<string, unknown>}>>;

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