レイアウト

Workshop のレイアウトでは、モジュールのユーザーインターフェースの構成を設定できます。Workshop モジュールの主なレイアウトコンポーネント（ヘッダー、ページ、セクション、オーバーレイ）については、以下の各セクションで詳しく説明します。レイアウト要素を編集するには、サイドバーパネルのレイアウトを選択して設定する要素を選択するか、メインのモジュールビューで要素を選択します。

ヘッダー

Workshop モジュールのヘッダーは、モジュール全体のタイトル、タブ、ボタンを配置する常設のツールバーとして機能します。新しいモジュールを作成すると、モジュールヘッダーが画面の上部に表示されます。

ヘッダーを選択すると、プラス（+）記号を使用してタブやボタングループなどのウィジェットをヘッダーに追加でき、Workshop モジュールのすべてのページから簡単にアクセスできるようになります。モジュールヘッダーが非表示になっている場合は、サイドバーパネルのレイアウトにあるリストの最上部に表示されるヘッダーオプションを使用して選択できます。

設定オプション

モジュールヘッダーで利用可能な設定オプションは以下のとおりです。

• ヘッダーの表示設定を切り替えます。
• ヘッダーのタイトルを設定します。このタイトルは、ブラウザーのタブ名や Carbon ワークスペースのタブ名にも使用されます。タイトルが設定されていない場合は、代わりに Workshop モジュールのリソース名が使用されます。
• タイトルテキストのカスタムカラーを選択します。
• アイコンを選択するか画像をアップロードして、アプリケーションのロゴを有効にします。
  • アイコン：アイコンとアイコンの色を選択します。
  • 画像：Palantir リソースから画像を選択するか、コンピューターから画像をアップロードします。
    • 画像の高さをカスタマイズします。
    • 画像の位置を設定します。横方向のヘッダーでは左、中央、右から選択し、縦方向のヘッダーでは上、下から選択します。
• 閲覧モードでユーザーがモジュールをお気に入りに登録できるかどうかを切り替えます。
• ヘッダーの背景色を選択します。
• ヘッダーの向きを、モジュールの横方向（上部）または縦方向（左側）から選択します。
• 横方向のヘッダーの高さを設定します。

カスタム画像を使用した横方向のヘッダーを設定すると、以下の例のように表示できます。

縦方向のヘッダーを設定することもできます。このヘッダーはモジュールの左側に表示されます。縦方向を有効にすると、以下の追加設定をカスタマイズできるようになります。

• 縦方向のヘッダーの幅を設定します。
• 折りたたみを有効にし、必要に応じてデフォルトで折りたたんだ状態に設定します。
• Palantir リソースから選択するか、コンピューターからアップロードして、折りたたんだ状態で表示するカスタム画像を追加します。
  • 折りたたんだ状態の画像を表示するには、まず上記の手順に従ってヘッダー画像を設定する必要があります。代わりにアイコンを選択した場合は、折りたたんだ状態でそのアイコンが表示されます。

ヘッダーの折りたたみを有効にすると、ボタングループウィジェットとタブウィジェットにも折りたたんだ状態が適用され、アイコンのみが表示されます。この状態ではテキストは表示されません。モジュールヘッダーが折りたたまれている場合、その他のすべてのウィジェットは非表示になります。

以下の例は、設定済みの縦方向のモジュールヘッダーを示しています。

折りたたんだ状態は以下のとおりです。

ページ

ページを使用すると、モジュール作成者は Workshop で複数の画面からなる複雑なアプリケーションを構築できます。各ページは空白のキャンバスであり、対象のワークフローに対応する独自のウィジェット構成を設定できます。ページ間で維持されるのはモジュールヘッダーのみで、モジュール全体に共通のツールバーとして機能します。

上記のモジュールヘッダーの例では、タブウィジェットの各タブでページを選択するように設定し、各ページに異なるユーザーワークフローを設定できます。

ページの追加

ページは画面左側のレイアウトパネルから追加できます。ページを追加するには、レイアウトパネルを開き、上部のプラス（+）記号を選択します。次に、以下に示す新規ページオプションを選択します。

追加した新しいページはレイアウトパネル内で自動的に選択され、その内容の設定を開始できます。以下のスクリーンショットは、モジュール全体のヘッダーの下に縦方向に分割された 2 個のセクションが配置された、初期状態の未設定のデフォルトページを示しています。

ページ下部のレイアウトテンプレートピッカーを使用して、他のレイアウトテンプレートを探索することもできます。各アイコンにカーソルを合わせると、そのレイアウトの外観をプレビューできます。テンプレートを使用するには、そのアイコンを選択します。ページレイアウトが選択したレイアウトに更新されます。

アプリケーションの編集中、ページは作成された順序で一覧表示されます。編集ビューに表示されるページの順序は、モジュールの動作には影響しません。

セクションの追加と設定によってページに内容を追加する方法の詳細については、以下のセクションのドキュメントを参照してください。

レイアウトイベントによるページの切り替え

モジュールのページ間でユーザーを移動させるには、レイアウトイベントを使用できます。これは、ボタングループやタブなどのウィジェットからトリガーできます。

セクション

セクションは各ページやオーバーレイを構成するコンポーネントであり、モジュール作成者がユーザーインターフェースを細分化するために使用します。各セクションには、1 個以上のウィジェット、またはレイアウトを含めるように設定します。レイアウト自体にも、1 個以上のセクションを含めることができます。

セクションレイアウト

編集モードでは、モジュールのレイアウト内のセクションにカーソルを合わせると、ウィジェットを追加とレイアウトを設定のオプションが表示されます。セクションで利用可能なレイアウトオプションにアクセスするには、モジュール内の空のセクションでレイアウトを設定を選択し、以下に示すレイアウトオプションを確認します。

現在サポートされているレイアウトオプションは以下のとおりです。

• **列：**セクションを縦方向に分割し、モジュール内に新しい列を作成できます。
• **行：**セクションを横方向に分割し、モジュール内に新しい行を作成できます。行レイアウトでは、スクロールを有効化オプションを利用できます。
• **タブ：**セクションの上部にタブを追加し、セクション内の各タブに異なるウィジェット構成を設定できます。
• **フロー：**現在のセクションを縦方向にスクロールするコンテナに変換し、モジュールに表示されるインターフェースの範囲を超えるウィジェットを設定できるようにします。
• **ツールバー：**セクションを横方向のツールバーとして設定します。ボタングループやメトリックカードなどの小さなウィジェットや、単一の入力ウィジェットに最適化されています。
• **ループ：**ループレイアウトでは、オブジェクトセットまたは配列を反復処理し、セット内の各オブジェクトまたは配列内の各要素に対して埋め込みモジュールを表示できます。ループレイアウトのドキュメントで詳しくはこちら。

セクションのドロップゾーン

セクションをドロップゾーンとして設定し、他の Workshop コンポーネントや外部アプリケーションからドラッグペイロードを受け取ることができます。これにより、ユーザーがオブジェクトをセクションにドラッグして変数に値を設定したり、イベントをトリガーしたりするアプリケーション間のインタラクティビティワークフローを実現できます。

セクションをドロップゾーンとして設定するには、セクションを選択し、設定パネルでドロップ処理を切り替えます。詳しい設定手順や対応するドラッグゾーンについては、Workshop のドラッグアンドドロップのドキュメントを参照してください。

条件付き表示設定のインジケーター

セクションには、変数の値に基づいて表示または非表示にする条件付き表示設定を適用できます。レイアウトパネルには、条件付き表示設定が有効になっているセクションを示すアイコンとツールチップが表示されます。これにより、現在モジュールビューで非表示になっている場合でも、条件付きで表示されるセクションを簡単に識別して管理できます。

セクションの複製

モジュール内のセクション全体および個々のウィジェットに対して、切り取り、コピー、貼り付けのオプションを利用できます。これらのツールにより、モジュールをより迅速に作成できます。

セクションやウィジェットを貼り付ける場合、新しいセクションやウィジェットの入力変数を管理する方法として、以下の 2 個の選択肢があります。

• **同じ入力変数で貼り付け：**コピーしたセクションやウィジェットの入力変数を再利用する、新しいセクションやウィジェットを貼り付けます。
• **入力変数を複製して貼り付け：**コピーしたセクションやウィジェットの入力変数に一致する、新たに作成した入力変数を使用する、新しいセクションやウィジェットを貼り付けます。

オーバーレイ

オーバーレイは、ワークフローの文脈に応じて、特定のセクションを必要な場合にのみ表示するために使用できます。オーバーレイは、選択したページの上に重なるレイヤーとして表示されます。

ページと同様に、画面左側のレイアウトパネルからオーバーレイを追加できます。オーバーレイを追加するには、上部の（+）記号を選択します。次に、以下に示す新規オーバーレイオプションを選択します。

設定オプション

• **オーバーレイ名：**Workshop エディター全体でこのオーバーレイを参照する際に使用する名前を指定します。特に、オーバーレイイベントで使用されます。
• **オーバーレイのヘッダーを表示する：**デフォルトのオーバーレイヘッダーを表示するかどうかを指定します。オーバーレイヘッダーにはデフォルトの閉じるボタンがあり、以下の追加設定オプションを利用できます。
  • **タイトル：**オーバーレイのヘッダーに表示するタイトルを設定できます。
  • **アイコン：**オーバーレイのヘッダーでタイトルの左側に表示するアイコンを選択できます。
• **変数に基づく表示設定：**オーバーレイを表示するかどうかを決定するブール変数を選択できます。この設定により、モジュールの読み込み時にオーバーレイを最初から表示したり、オーバーレイの表示状態を詳細に制御したりできます。また、オーバーレイを埋め込みモジュールと組み合わせて使用する場合にも役立ちます。変数値の設定イベントを通じて、親モジュールと子モジュールの間でオーバーレイの状態を共有し、設定できるためです。オーバーレイの表示状態を変更するレイアウトイベントは、この変数の値を更新します。
• **閉じたとき：**必要に応じて、オーバーレイが閉じられたときに実行する Workshop のイベントを設定できます。変数に基づく表示設定に、オブジェクトプロパティまたは変数変換から得られるブール変数を設定している場合、このイベントを使用して、オーバーレイを開いた状態にした条件をリセットできます。
• **背景をクリックしたときにオーバーレイを閉じる：**ユーザーがオーバーレイの外側の領域を選択したときに、オーバーレイを閉じるかどうかを切り替えます。
• **オーバーレイの背後に背景を追加する：**オーバーレイの背後に不透明な背景を追加するかどうかを切り替えます。デフォルトで有効になっており、開いているオーバーレイにユーザーの注意を向けるのに役立ちます。

オーバーレイの種類

現在、Workshop はドロワーとモーダルの 2 種類のオーバーレイをサポートしています。それぞれについて、以下で詳しく説明します。

ドロワー

ドロワーは、画面の側面からスライドして現れるオーバーレイです。ドロワーオーバーレイでは、以下の設定オプションを利用できます。

• **位置：**右または左を選択し、画面のどちら側からドロワーを表示するかを指定します。
• **サイズ：**ドロワーの幅を設定します。

モーダル

モーダルは、画面の中央に表示されるオーバーレイです。モーダルオーバーレイに固有の設定オプションは、サイズのみです。

スタイルの書式設定

Workshop では、さまざまなスタイルの書式設定を制御でき、アプリケーション作成者はモジュールのデザインや印象をより柔軟にカスタマイズできます。設定オプションには、ヘッダーの書式設定、背景色、枠線のスタイルなどがあります。これらのオプションは、ページ、セクション、ウィジェットの各レベルで利用できます。

ヘッダーの書式設定

セクションのヘッダーを有効にすると、ヘッダーの書式設定オプションを適用できます。以下の 3 種類を利用できます。

• **ブロック：**セクションヘッダーは、本文の上に独立したコンテナとして配置されます。
• **一体型：**セクションヘッダーは、本文領域と一体化して表示されます。
• **フローティング：**セクションヘッダーは本文領域の上に配置され、親セクションの背景上に表示されます。

背景色

ページ、セクション、ウィジェットに背景色を適用すると、モジュールの各部分を視覚的に区分できます。ライトモードとダークモードのそれぞれに 5 種類のプリセットの色合いがあり、Blueprint カラー ↗と透明の選択肢も利用できます。

プリセットの色合いに加えて、セクションやページの背景にカスタムの 16 進数カラーを適用できます。カスタムカラーのタイルを選択してカラーピッカーを開き、16 進数コードを入力するか、Blueprint カラー ↗のショートカットから選択します。モジュールレベルで定義した保存済みの色も、セクションやページの背景色の選択肢として利用できます。

セクションにカスタムの背景色を適用すると、そのセクション内のウィジェットは背景の明るさに基づいてライトモードとダークモードを自動的に切り替え、テキストやコントロールの見やすさを維持します。

枠線のスタイル

セクションやウィジェットに枠線のスタイルを設定すると、モジュール内で異なる高さに配置されているような見た目を表現できます。以下の 4 種類を利用できます。

• **枠線あり：**セクションやウィジェットの周囲に標準の単一のアウトラインを表示します。
• **外側のドロップシャドウ：**枠線の外側に影を表示し、セクションやウィジェットが浮き上がって見えるようにします。
• **内側の影：**枠線の内側に影を表示し、セクションやウィジェットがくぼんで見えるようにします。
• **枠線なし：**セクションやウィジェットの周囲にアウトラインを表示せず、背景に溶け込むようにします。

パディング（内側の余白）の制御

ページやセクションにパディングを設定し、内部のすべての子コンポーネントの周囲に一定の余白や間隔を設けることができます。パディングによってコンポーネント間に間隔が生まれ、モジュールの要素が明確に区分され、ゆとりのある表示になります。以下の 5 種類を利用できます。

• **パディングなし：**子コンポーネントの周囲にパディングを追加しない標準のオプションです。
• **コンパクト：**子コンポーネントの周囲に 16 ピクセルのパディングを追加します。
• **標準：**子コンポーネントの上下に 24 ピクセル、左右に 48 ピクセルのパディングを追加します。
• **大：**子コンポーネントの上下に 40 ピクセル、左右に 62 ピクセルのパディングを追加します。
• **カスタム：**子コンポーネントの周囲のパディング量を独自に設定できます。

**内部セクションのスタイル：**必要に応じて、事前定義されたさまざまなセクションスタイルから 1 個を選択し、すべての子セクションに適用できます。