Providing Workflow Context

When a customer creates a new workflow from the workflow listview screen, they are dropped into a blank canvas. If you can provide your customer with a preconfigured trigger, you can save them time and help them get started with their workflow.

In this video, we show how you can create new workflows with preconfigured triggers from your product surfaces using workflow contexts.

The simple example in the video added a prismatic.createWorkflow() call to a button in the product that, when clicked, created a new workflow and redirected the customer to the workflow builder with a preconfigured trigger.

Create a new workflow with a preconfigured trigger

"use client";

import * as React from "react";

import { SidebarInset } from "@/components/ui/sidebar";
import { AppHeader } from "@/components/app-header";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import prismatic from "@prismatic-io/embedded";
import { useRouter } from "next/navigation";

const RESOURCE_OPTIONS = [
  { value: "invoice", label: "Invoice" },
  { value: "lead", label: "Lead" },
  { value: "ticket", label: "Ticket" },
];

const EVENT_OPTIONS = [
  { value: "created", label: "Created" },
  { value: "updated", label: "Updated" },
  { value: "deleted", label: "Deleted" },
];

export default function SimpleExamplePage() {
  const router = useRouter();
  const [resource, setResource] = React.useState<string>();
  const [event, setEvent] = React.useState<string>();

  async function handleClick(): Promise<void> {
    const result = await prismatic.createWorkflow("my-new-workflow-context", {
      name: `Run when a ${resource} is ${event}`,
      contextData: {
        resourceType: resource,
        event: event,
      },
    });
    const workflowId = result.data.importWorkflow.workflow.id;
    router.push(`/resources/automate/${resource}/${workflowId}`);
  }

  return (
    <SidebarInset>
      <AppHeader
        crumbs={[{ label: "Home", href: "/" }, { label: "Simple Example" }]}
      />

      <div className="flex flex-1 flex-col h-[calc(100vh-4rem)]">
        <div className="p-4 md:p-6 flex flex-col h-full">
          <div className="flex flex-wrap items-end gap-3">
            <div className="flex flex-col gap-1.5">
              <span className="text-sm font-medium">When a...</span>
              <Select value={resource} onValueChange={setResource}>
                <SelectTrigger className="w-40">
                  <SelectValue placeholder="Select resource" />
                </SelectTrigger>
                <SelectContent>
                  {RESOURCE_OPTIONS.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      {option.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="flex flex-col gap-1.5">
              <span className="text-sm font-medium">Is...</span>
              <Select value={event} onValueChange={setEvent}>
                <SelectTrigger className="w-40">
                  <SelectValue placeholder="Select event" />
                </SelectTrigger>
                <SelectContent>
                  {EVENT_OPTIONS.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      {option.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <Button onClick={handleClick}>Create Automation</Button>
          </div>
        </div>
      </div>
    </SidebarInset>
  );
}