• Documentation
    • Search documentation
    karat

    +

    K

    API Reference ↗
    Use case developmentCustom widgetsAdd an additional widget to a widget set

    Add an additional widget to a widget set

    Widget sets allow you to publish multiple widgets from a single code repository for code sharing and performance optimizations. This page explains how to add an additional widget to a widget set and assumes a project structure starting from our provided templates using React, Vite, and @osdk/widget.vite-plugin ↗.

    A widget set can contain a maximum of ten widgets.

    The following example project structure is for a widget set containing two widgets:

    repo/
├── src/
│   ├── first.tsx
│   ├── first.config.ts
│   ├── second.tsx
│   ├── second.config.ts
│   └── ...
│── first.html
│── second.html
│── vite.config.ts
└─ ...

    Define an additional widget

    Create a new TypeScript file to define the widget's metadata with defineConfig for type safety:

    Copied!
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { defineConfig } from "@osdk/widget.client";

export default defineConfig({
  id: "secondWidgetId",
  name: "Second Widget",
  description: "A second widget",
  type: "workshop",
  parameters: {
    ...
  },
  events: {
    ...
  },
});

    Create a new TypeScript file as the entrypoint to render your widget, and provide the context for parameters and events:

    Copied!
    1
2
3
4
5
6
7
8
9
10
11
import { FoundryWidget } from "@osdk/widget.client-react";
import { createRoot } from "react-dom/client";
import Second from "./second.config.js";

const root = document.getElementById("root")!;

createRoot(root).render(
  <FoundryWidget config={Second}>
    {/* Render something for the widget! */}
  </FoundryWidget>,
);

    Include the additional widget in the widgets manifest

    Create a new HTML file to load the entrypoint script:

    Copied!
    1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Widget: Ontology SDK + React</title>
    </head>
    <body>
        <script type="module" src="/src/second.tsx"></script>
    </body>
</html>

    Configure Vite to include the new HTML file during builds:

    Copied!
    1
2
3
4
5
6
7
8
9
10
11
import foundryWidgetPlugin from "@osdk/widget.vite-plugin";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [foundryWidgetPlugin()],
  build: {
    rollupOptions: {
      input: ["./first.html", "./second.html"],
    },
  },
});

    The .palantir/widgets.config.json manifest file created in the production build of the widget set should now contain information about your additional widget.

    Publish an additional widget

    Follow the instructions in our documentation to publish a new version of the widget set. Your additional widget will be available for use after publication. Note that you must have a first release of the additional widget before you can continue developing it.