Embedding Dashboard

In addition to the embedded workflow builder and marketplace, you can also embed Prismatic's dashboard, component, and log screens in your app. This provides a one-stop shop for your customers to manage their integrations, workflows, and instances.

Showing the customer dashboard

To provide your customer with a comprehensive view of their integrations, workflows, instances, etc., you can display 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 embedded customer 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():

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

Showing component screens

You can embed component screens in your application using the prismatic.showComponents and prismatic.showComponent functions. To display all components available in your organization, use the showComponents() function:

Showing all components - ReactJS example

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";

const getComponentId = async (key: string) => {
  const query = `query getComponentByKey($componentKey: String!) {
  components(key: $componentKey) {
    nodes {
      id
    }
  }
}`;
  const result = await prismatic.graphqlRequest({
    query,
    variables: { componentKey: key },
  });
  return result.data.components.nodes[0].id;
};

function DropboxComponent() {
  useEffect(() => {
    const showDropbox = async () => {
      const componentId = await getComponentId("dropbox");
      prismatic.showComponent({
        componentId,
        selector: `#${id}`,
      });
    };
    showDropbox();
  }, []);

  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.

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

const id = "logs-div";

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

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

export default InstanceLogs;