Embedding Additional Screens

In addition to the embedded workflow builder and marketplace, you can also embed:

• The customer dashboard, giving your customers a one-stop shop for managing integrations, instances, reusable connections and workflows, and monitoring executions and logs.
• Component screens, allowing customers to view all components or a specific component's details.
• Logs, providing customers with access to logs for all of their instances and workflows.
• Connections, enabling customers to manage their reusable connections in one place.

Showing the customer dashboard

To provide your customer with a comprehensive view of their integrations, workflows, instances, etc., you can display the customer dashboard.

Showing the customer dashboard

import prismatic from "@prismatic-io/embedded";
import { useEffect } from "react";

const id = "dashboard-div";

function Dashboard() {
  useEffect(() => {
    prismatic.showDashboard({ selector: `#${id}` });
  }, []);

  return <div id={id}>Loading...</div>;
}

export default Dashboard;

Hiding tabs in the dashboard

By default, all tabs are displayed to customers when showDashboard() is invoked. To hide specific tabs, include the screenConfiguration.dashboard.hideTabs parameter when calling showDashboard():

Hiding tabs in the customer dashboard

prismatic.showDashboard({
  selector: `#${id}`,
  theme: "LIGHT",
  screenConfiguration: {
    dashboard: {
      hideTabs: ["Attachments"], // Hide the Attachments tab
    },
  },
});

Showing the connection screen

Customers can manage all of their reusable connections in one place when you embed the connections screen (requires @prismatic/embedded@4.2.0 or later).

Showing the connections screen

import prismatic from "@prismatic-io/embedded";
import { useEffect } from "react";

const id = "connections-div";

function Connections() {
  useEffect(() => {
    prismatic.showConnections({ selector: `#${id}` });
  }, []);

  return <div id={id}>Loading...</div>;
}

export default Connections;

Clicking on a connection from the listview will open the connection detail screen. From there, users can view the instances and workflows that use that connection, as well as edit or delete the connection.

Showing component screens

You can embed component screens in your application using the prismatic.showComponents and prismatic.showComponent functions.

Showing all components

To display all components available in your organization, use the showComponents() function:

Showing all components

import prismatic from "@prismatic-io/embedded";
import { useEffect } from "react";

const id = "my-embedded-builder-div";

function ComponentListView() {
  useEffect(() => {
    prismatic.showComponents({ selector: `#${id}` });
  }, []);

  return <div id={id}>Loading...</div>;
}

export default ComponentListView;

Showing a specific component

To show details about a specific component, use the showComponent() function and provide the component's ID. You will need to get the component ID using the prismatic.graphqlRequest function:

Showing a specific component

import prismatic from "@prismatic-io/embedded";
import { useEffect } from "react";

const id = "my-embedded-builder-div";

function DropboxComponent() {
  useEffect(() => {
    const showDropboxComponent = async () => {
      if (authenticated) {
        const query = `query getComponentByKey($componentKey: String!) {
                   components(key: $componentKey) {
                      nodes {
                        id
                      }
                    }
                  }`;
        const result = await prismatic.graphqlRequest({
          query,
          variables: { componentKey: "dropbox" },
        });
        prismatic.showComponent({
          selector: `#${embeddedDivId}`,
          theme: "LIGHT",
          componentId: result.data.components.nodes[0].id,
        });
      }
    };
    showDropboxComponent();
  }, []);

  return <div id={id}>Loading...</div>;
}

export default DropboxComponent;

Additional documentation on querying the Prismatic API as a customer user from the embedded SDK is available in the Embedded API Requests article.

Showing logs

The prismatic.showLogs function presents customer users with the logs listview page. This allows them to view logs from all their instances in one location. It is the same view you would see as an organization team member when opening a customer's logs tab.

Showing all instance logs

import prismatic from "@prismatic-io/embedded";
import { useEffect } from "react";

const id = "logs-div";

function AllInstanceLogs() {
  useEffect(() => {
    prismatic.showLogs({ selector: `#${id}` });
  }, []);

  return <div id={id}>Loading...</div>;
}

export default AllInstanceLogs;