Example: Mapping a Hotel Card Widget for Agentforce

This example shows how Agentforce action output rendered in Lightning Experience flows through an Apex-based custom Lightning type named hotelInfo to the hotelCard widget.

This example uses two schema files that serve different purposes:

  • The Lightning type schema describes the data shape—the data structure of hotel information returned by your data source
  • The widget schema describes the UI shape—the attribute contract that defines what the card component needs to render

You map the data shape to the UI shape by using the renderer file.

Download these sample data files.

This layout shows where the custom UiWidgetBundle and related LightningTypeBundle component files belong in your Salesforce DX project.

In this directory structure, renderer.json sits directly parallel to schema.json. For widget references, create this file at the root level without using channel-specific subfolders. See Connect Your Widget to a Custom Lightning Type.

See Also

The widget schema file (uiWidgets/hotelCard/schema.json) defines the attributes that your widget accepts. These attributes become available as {!$attrs.attributeName} bindings in your widget’s composition file and as mapping targets in the Lightning type’s renderer.json file.

See Also

The composition file (uiWidgets/hotelCard/hotelCard.json) defines the widget’s visual structure and binds the widget’s schema attributes to UI components by using {!$attrs.attributeName} expressions.

See Also

The configuration file (uiWidgets/hotelCard/hotelCard.uiwidget-meta.xml) declares the widget bundle type required for deployment.

See Also

The custom Lightning type schema file (lightningTypes/hotelInfo/schema.json) defines the data structure. This schema establishes the properties available for mapping to your widget.

See Also

The renderer file (lightningTypes/hotelInfo/renderer.json) maps the Lightning type’s data properties to the widget’s attributes.

For detailed information about widget references and attribute mapping, see Connect Your Widget to a Custom Lightning Type.

See Also

To deploy both the Lightning type and Widget together, include them in a single package.xml manifest.

This example shows a manifest that includes both the hotelCard widget and hotelInfo Lightning type.

When you deploy a Lightning type that references a widget, deploy the widget first or include it in the same package. Metadata API resolves deployment ordering automatically within a single package.

If you deploy the components independently across separate deployments, maintain this sequential order:

  1. Deploy the UiWidgetBundle package to your target org first.
  2. Deploy the LightningTypeBundle package to your target org second.

After you deploy the widget and the custom Lightning type, the widget is ready to render Agentforce action output in Lightning Experience.

See Also