注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。

ウィジェットセットにウィジェットを追加する

ウィジェットセットを使用すると、1つのコードリポジトリから複数のウィジェットを公開し、コードの共有やパフォーマンスの最適化を行えます。このページでは、ウィジェットセットにウィジェットを追加する方法を説明します。React、Vite、および @osdk/widget.vite-plugin ↗ を使用する、提供されているテンプレートを基にしたプロジェクト構造を前提としています。

ウィジェットセットには最大50個のウィジェットを含めることができます。

次のプロジェクト構造には2個のウィジェットが含まれています。

Copied!1
2
3
4
5
6
7
8
9
10
11
repo/
├── src/
│   ├── first.tsx
│   ├── first.config.ts
│   ├── second.tsx
│   ├── second.config.ts
│   └── ...
│── first.html
│── second.html
│── vite.config.ts
└─ ...

追加のウィジェットを定義する

新しい TypeScript ファイルを作成し、型安全性を確保するために defineConfig を使用してウィジェットのメタデータを定義します。

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

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

ウィジェットをレンダリングするエントリーポイントとして新しい TypeScript ファイルを作成し、パラメーターとイベントのコンテキストを提供します。

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>,
);

追加のウィジェットをウィジェットマニフェストに含める

エントリーポイントのスクリプトを読み込むための新しい HTML ファイルを作成します。

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>

ビルド時に新しい HTML ファイルが含まれるように Vite を設定します。

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"],
    },
  },
});

npm run build を実行します。本番ビルドで生成される .palantir/widgets.config.json マニフェストに、追加のウィジェットが含まれるようになります。

追加のウィジェットをプレビューして公開する

開発モードを使用して、カスタムウィジェットのプレイグラウンドまたは VS Code ワークスペースで未公開のウィジェットをプレビューします。開発を続ける前にウィジェットを公開する必要はありません。

Workshop で追加のウィジェットを選択できるようにするには、ウィジェットセットの新しいバージョンを公開する必要があります。初回リリース後は、開発モードを使用して、その後の未公開の変更を Workshop で直接プレビューできます。

←

PREVIOUSパラメーターとイベント

NEXTMarketplace 製品にウィジェットセットを追加する

→