- Implementation
- MultipleRecommendationCard API
- Shared Types
Common Examples
Basic Usage
Present a multi-select choice:import { MultipleRecommendationCard } from "@servicetitan/anvil2-ext-atlas";
function MultiSelectExample() {
const handleSubmit = (response) => {
console.log("Selected options:", response.optionIds);
};
return (
<MultipleRecommendationCard
recommendationId="rec-456"
message="Select the issues you're experiencing:"
options={[
{ id: "opt-1", label: "Water heater issues" },
{ id: "opt-2", label: "Low water pressure" },
{ id: "opt-3", label: "Drainage problems" },
{ id: "opt-4", label: "Fixture leaks" },
]}
actions={[
{ id: "submit", name: "Submit", type: "primary" },
]}
onSubmit={handleSubmit}
/>
);
}
With Multiple Actions
Include cancel option:import { MultipleRecommendationCard } from "@servicetitan/anvil2-ext-atlas";
function MultiSelectWithCancel() {
return (
<MultipleRecommendationCard
recommendationId="rec-456"
message="Select all that apply:"
options={options}
actions={[
{ id: "submit", name: "Submit", type: "primary" },
{ id: "skip", name: "Skip", type: "ghost" },
]}
onSubmit={handleSubmit}
/>
);
}
Submitted State
Show previously selected values:import { MultipleRecommendationCard } from "@servicetitan/anvil2-ext-atlas";
function SubmittedExample() {
return (
<MultipleRecommendationCard
recommendationId="rec-456"
message="Select the issues:"
options={options}
actions={actions}
onSubmit={() => {}}
submitted={true}
selected={["opt-1", "opt-3"]}
/>
);
}
<MultipleRecommendationCard
recommendationId="rec-456"
message="Select options"
options={[
{ id: "opt-1", label: "Option 1" },
{ id: "opt-2", label: "Option 2" },
]}
actions={[
{ id: "submit", name: "Submit", type: "primary" },
]}
onSubmit={handleSubmit}
submitted={false}
selected={[]}
/>
MultipleRecommendationCard Props
Array of action buttons with
id, name, and optional type.The prompt message to display above the options.
Callback fired when an action button is clicked. Receives
sourceMessageId, optionIds, and actionId.Array of selectable options with
id, label, and optional description.Unique identifier for this recommendation, included in the submit response.
Array of selected option IDs to display when
submitted is true.When true, disables all inputs and shows the selected state.
Options Interface
interface Options {
id: string;
label: string;
description?: string;
value?: string;
}
RecommendationAction Interface
interface RecommendationAction {
id: string;
name: string;
type?: "primary" | "secondary" | "ghost" | "danger" | "link";
url?: string;
}
ConfirmationResponse Interface
interface ConfirmationResponse {
sourceMessageId?: string;
optionIds: string[];
actionId: string;
parameters?: Record<string, string | number | undefined>;
}