Marketplace with Custom UI Elements

In this video we query Prismatic's API for a list of available marketplace integrations and present the data using custom native UI elements. This approach allows you to have complete control over the UI elements and user experience of your embedded marketplace, while still leveraging Prismatic's API and config wizard experience to power your integration marketplace.

GraphQL query and TypeScript type used

This is the GraphQL query and corresponding TypeScript type definition used in the video:

Query for available marketplace integrations
query getMarketplaceIntegrations {
  marketplaceIntegrations(
    includeActiveIntegrations: true
    sortBy: [
      { field: CATEGORY, direction: ASC }
      { field: NAME, direction: ASC }
    ]
  ) {
    nodes {
      id
      name
      allowMultipleMarketplaceInstances
      avatarUrl
      category
      description
      isCustomerDeployable
      marketplaceConfiguration
      overview
      documentation
      versionNumber
      instances {
        nodes {
          id
          name
          enabled
          deployedVersion
        }
      }
      deployedInstances
      deploymentStatus
    }
  }
}

TypeScript types for marketplace integrations query
export interface MarketplaceIntegrationsResponse {
  marketplaceIntegrations: {
    nodes: MarketplaceIntegration[];
  };
}

export interface MarketplaceIntegration {
  id: string;
  name: string;
  allowMultipleMarketplaceInstances: boolean;
  avatarUrl?: string;
  category: string;
  description: string;
  isCustomerDeployable: boolean;
  marketplaceConfiguration: string;
  overview: string;
  documentation: string;
  versionNumber: number;
  instances: { nodes: Instance[] };
  deployedInstances: "ZERO" | "ONE" | "MULTIPLE";
  deploymentStatus: "ACTIVATED" | "PAUSED" | "UNCONFIGURED" | null;
}

export interface Instance {
  id: string;
  name: string;
  enabled: boolean;
  deployedVersion: number;
}

See Also:

GraphQL query and TypeScript type used​

GraphQL query and TypeScript type used