Skip to main content

Additional Screens Overview

In addition to the embedded workflow builder and marketplace, you can embed additional Prismatic screens in your application:

  • Customer dashboard - Gives customers a comprehensive view for managing integrations, instances, connections, and monitoring executions
  • Connections screen - Allows customers to manage their reusable connections in one place
  • Component screens - Enables customers to view all components or specific component details
  • Logs screen - Provides customers with access to logs for all instances and workflows

Common configuration options​

All embedded screen functions share the following configuration options:

selector​

Type: string (required when usePopover is false)

A CSS selector for the HTML element where the screen should be embedded. The screen will be rendered inside this element as an iframe.

prismatic.showDashboard({
  selector: "#my-container",
});

usePopover​

Type: boolean

Default: true

When set to true, the screen opens in a popover/modal window. When false, you must provide a selector to specify where to embed the screen inline.

// Open in a popover (default)
prismatic.showDashboard({ usePopover: true });

// Embed inline in a specific element
prismatic.showDashboard({
  selector: "#dashboard-div",
  usePopover: false,
});

theme​

Type: "LIGHT" | "DARK"

Controls the visual theme of the embedded screen. You can match your application's theme for a consistent user experience.

prismatic.showDashboard({
  selector: "#dashboard-div",
  theme: "DARK",
});

See the Theming article for more information about customizing the visual appearance of embedded screens.

autoFocusIframe​

Type: boolean

Automatically focuses the embedded iframe when it loads. This can improve keyboard navigation for users.

prismatic.showDashboard({
  selector: "#dashboard-div",
  autoFocusIframe: true,
});

screenConfiguration​

Type: object

Customizes the behavior and appearance of embedded screens. The available configuration options vary by screen type. See each screen's documentation for specific configuration options:

prismatic.showDashboard({
  selector: "#dashboard-div",
  screenConfiguration: {
    dashboard: {
      hideTabs: ["Attachments", "Components"],
    },
  },
});

filters​

Type: object

Apply filters to limit what the customer sees in embedded screens. The available filter options vary by screen type:

  • components - Filter components by category, label, or custom filter query
  • integrations - Filter integrations by category or label
  • marketplace - Filter marketplace items by category, label, filter query, and more
prismatic.showDashboard({
  selector: "#dashboard-div",
  filters: {
    marketplace: {
      category: "Data Platforms",
      label: "Available Integrations",
    },
  },
});

translation​

Type: object

Provide custom translations for internationalization. This allows you to display the embedded screens in different languages or customize the text to match your application's terminology.

See the Translations and Internationalization article for detailed information about providing translations.

Next steps​

Choose which screen you want to embed: