レイアウト

Workshop のレイアウトでは、ビルダーがモジュール全体のフレームを設定し、ユーザーインターフェースがどのように整理されているかを定義することができます。Workshop モジュール内のレイアウトの主要な要素である、ヘッダー、ページ、セクション、レイヤーについては、以下で詳しく説明します。

ヘッダー

Workshop モジュールのヘッダーは、モジュール全体のタイトル、タブ、ボタンのための永続的なツールバーとして機能します。新しいモジュールを作成すると、モジュールは画面の上部ですでにヘッダーが表示された状態で始まります。

ヘッダーが選択されると、プラス (+) マークが表示され、タブやボタングループなどのウィジェットがヘッダーに追加され、Workshop モジュールのすべてのページで簡単にアクセスできるようになります。選択すると、ヘッダーの設定パネルが画面の右側に表示されます。ここで提供される設定オプションには次のようなものがあります：

• モジュールの外観のためのライトテーマとダークテーマの切り替え。
• ヘッダーの表示/非表示の切り替え。
• ヘッダーのアイコンとアイコン色の選択。
• ヘッダーのタイトルの設定。
• ヘッダーの高さの調整。

設定すると、ヘッダーは以下の例のようになります：

ページ

ページは、ビルダーが Workshop で複雑なマルチスクリーンのアプリケーションを構築するのを支援します。各ページは空白のキャンバスで、ビルダーは対象のワークフローをサポートするための独自のウィジェットセットを設定することができます。モジュールのヘッダーのみがページ間で持続し、特定のモジュールのための包括的なツールバーを提供します。

以下のスクリーンショットの例は、現在選択されている機器ページを表示している2ページのメンテナンス最適化インボックスを示しています。このページは、フィルターリストとオブジェクトテーブルの2つのウィジェットで構成されており、両方とも機器データを含んでいます。ユーザーがモジュールの2ページ目に移動すると、代わりに部品要求データが表示されます。

ページの追加

ページは、画面の左側にあるレイアウトパネルから追加することができます。ページを追加するには、レイアウトパネルを開き、その上部のプラス (+) マークを選択します。次に、以下に示すように新しいページのオプションを選択します：

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

また、ページ下部のレイアウトテンプレートピッカーを使用して他のレイアウトテンプレートを探索することもできます。各レイアウトがどのように見えるかは、そのアイコンにマウスを置くことでプレビューできます。テンプレートを使用したい場合は、そのアイコンを選択することができます。その場合、ページのレイアウトが選択したものに更新されます。

アプリケーションを編集する際、ページは作成された順序でリストされます。編集ビューで見たページの順序は、モジュールの動作に影響を与えません。

セクションを追加したり設定したりする方法の詳細については、以下のセクションのドキュメンテーションを参照してください。

レイアウトイベントを介したページの切り替え

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

セクション

セクションは各ページの構成要素であり、ビルダーがユーザーインターフェースを細分化することを可能にします。モジュール内の各セクションは、1つ以上のウィジェットまたは希望するレイアウトを含むように設定されています。

セクションの設定

セクションを設定するオプションを表示するには、まず所望のセクション内からレイアウトを設定を選択し、表示される設定オプションを確認します。このポップオーバーの上部では、ビルダーがセクションのレイアウトを選択でき、ここで提供されるオプションは以下で詳細に説明されています。ポップオーバーの下部では、利用可能なウィジェットのリストが表示されます。

セクションのレイアウトオプション

セクションの利用可能なレイアウトオプションにアクセスするには、モジュール内の任意の空のセクションでレイアウトを設定を選択し、以下に示すようにレイアウトオプションを確認します：

現在サポートされているレイアウトオプションには以下のものがあります：

• 行： セクションを垂直に分割して、モジュール内に新たな行を効果的に作成します。
• 列： セクションを水平に分割して、モジュール内に新たな列を効果的に作成します。行レイアウトではスクロールを有効にするオプションが利用できます。
• タブ： セクションの上部にタブを追加し、ビルダーがセクションの各タブ内で異なるウィジェットの設定を行うことができます。
• フロー： 現在のセクションを垂直スクロールコンテナに変換し、モジュールの表示される UI を超えてウィジェットを設定することをビルダーに許可します。
• ツールバー： セクションを水平ツールバーとして機能するように設定し、ボタングループ、メトリックカード、単一入力ウィジェットなどの小さなウィジェットに最適化します。

セクションの複製

セクション全体とモジュール内の個々のウィジェットに対して、カット、コピー、ペーストのオプションが利用可能で、これらはモジュールの作成を高速化するツールを提供します。

セクションやウィジェットを貼り付けるとき、ビルダーは新しいセクションやウィジェットの入力変数を管理するための2つのオプションを持っています：

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

レイヤー

レイヤーは、最初は隠されているモジュールのユーザーインターフェースのコンポーネントで、ビルダーに追加のデザインの柔軟性を提供します。一般的に、レイヤーは特定のセクションがワークフローに関連性のあるコンテキストでのみ表示されるべき場合に使用されます。

現在、Workshop は一つのレイヤーオプション - ドロワー - をサポートしており、これについては以下で詳しく説明します。

ドロワー

ドロワー（または「フライアウト」）は、最初は隠されているモジュールのレイヤーで、Workshop レイアウトイベントによってトリガーされると表示されるように設定することができます。トリガーされると、ドロワーは画面の側面からスライドアウトし、モジュールのコアページの上に視覚的に表示されます。ドロワーは、ワークフローで必要なときにのみ追加のコンテキストに基づいた有益な情報を表示することができます。 （レイアウトイベントの設定方法の詳細については、レイアウトイベントを参照してください。

同様に、ドロワーは画面の左側にあるページ＆レイヤーパネルから追加することができます。ドロワーを追加するには、まずページ＆レイヤーパネルを展開し、その上部の右側にあるプラス (+) マークを選択します。次に、以下に示すように新しいドロワーのオプションを選択します：

追加されると、新しいドロワーはページ＆レイヤーパネル内で自動的に選択され、その内容の設定を開始することができます（上記で説明したセクション設定と同様です）。以下のスクリーンショットは、画面の右側から表示されるように初期化され、2つの水平に分割されたセクションから始まる、デフォルトの未設定のドロワーを示しています。ドロワー固有の設定オプション（ドロワー位置、ドロワーサイズ、背景があるの切り替えなど）があるため、ビルダーはこのドロワーが自分のモジュール内でどのように表示されるかを簡単に変更することができます。

以下のスクリーンショットは、ユーザーがこのモジュールのオブジェクトテーブルから行を選択したときに、画面の右側から表示されるように設定されたドロワーの例を示しています。ここに表示されているドロワーは、オブジェクトテーブルで選択された機器オブジェクトの完全なオブジェクトビューを表示しています。

変数バックのレイアウト

変数バックのレイアウトは、モジュールビルダーがより反応性のあるユーザーインターフェースを持つアプリケーションを構築できるようにする2つの高度なレイアウト機能で構成されています。

1. セクション：変数ベースの折りたたみ状態 は、セクションが展開されているか（表示）、折りたたまれているか（非表示）を制御できます。
2. ページ：変数ベースのページ選択 は、複数ページのモジュールで現在表示されているページを制御する機能を提供します。

これらのオプションは、動的なアプリケーションを構築するためのかなりの柔軟性を提供し、以下で詳しく説明します。

セクション：変数ベースの折りたたみ状態

この機能は、ビルダーがセクションが展開されているか（表示）、折りたたまれているか（非表示）を制御できるようにします。

この機能を利用するために、ビルダーは、真偽値の変数（true または false の値で構成される）をセクションの 変数ベースの折りたたみ状態 変数として選択します。選択された真偽値変数の値が、このセクションが折りたたまれているか（true）、展開されているか（false）を決定します。この機能は、ビルダーがセクションの表示状態をよりダイナミックに制御できるようになります。たとえば、関数で定義されたカスタムビジネスロジック、選択したオブジェクトのプロパティ値、またはURL内のプロモートされた真偽値変数を使用します。

以下の画像に示すように、変数ベースの折りたたみ状態 は、セクションの「折りたたみ可能」設定の一部として設定できます。

この機能の詳細と完全なチュートリアルについては、こちらをご覧ください。

ページ：変数ベースのページ選択

この機能は、ビルダーが複数ページのモジュールで現在表示されているページを動的に制御できるようにします。この機能を有効にするには、モジュールビルダーが2つのコンポーネントを設定する必要があります。

1. 各モジュールページを一意に識別するための Page ID パラメーター（各ページの設定内で設定）。
2. 表示されるページを決定する 変数ベースのページ選択 文字列変数（モジュールヘッダーの設定内で設定）。

変数ベースのページ選択変数 の値がモジュール内の特定のページのPage IDと等しい場合、そのページがモジュールに表示されます。この機能により、ビルダーはモジュールの現在の表示ページを動的に制御できます。たとえば、関数で定義されたカスタムビジネスロジック、選択されたオブジェクトのプロパティ値、または初期表示ページを決定するURL内のプロモートされた文字列変数を使用します。

以下の画像に示すように、変数ベースのページ選択 は、モジュールの設定の設定パネルの ページ の下で設定されます。

スタイルの書式設定

Workshopでは、さまざまなスタイル書式設定の設定を制御できるため、アプリケーションビルダーはモジュールのデザインと感触にさらにカスタマイズできます。設定オプションには、ヘッダーの書式設定、背景色、ボーダースタイルなどがあります。これらのオプションは、ページ、セクション、およびウィジェットのレベルで利用できます。

ヘッダーの書式設定

ヘッダーの書式設定オプションは、セクションでヘッダーが有効になっている場合に追加できます。以下の3つが利用できます。

• ブロック： セクションヘッダーが本文の上にある独自のコンテナになります。
• コンテナ内： セクションヘッダーは本文領域内に含まれているように見えます。
• フローティング： セクションヘッダーは本文領域の上にあり、親セクションの背景に視覚的に存在します。

背景色

背景色は、ページ、セクション、ウィジェットに追加でき、モジュールの部分を視覚的に区切るのに役立ちます。ライトモードとダークモードの両方に5つの色が用意されており、透明なオプションもあります。

ボーダースタイル

ボーダースタイルは、セクションとウィジェットに設定でき、モジュール内の異なる昇降レベルの外観を提供します。以下の4つのオプションが利用できます。

• ボーダー付き： セクションまたはウィジェットの周囲に標準の単一のアウトラインがあります。
• 外部ドロップシャドウ： ボーダーの外側に影があり、セクションまたはウィジェットが浮き上がっているように見えます。
• 内側の影： ボーダーの内側に影があり、セクションまたはウィジェットが押し込まれているように見えます。
• ボーダーなし： セクションまたはウィジェットの周囲にアウトラインがなく、背景に溶け込んでいます。

パディング制御

パディングは、ページとセクションで設定でき、すべての子コンポーネントの周囲に一貫したパディングまたはスペースを設定します。パディングは、コンポーネント間にスペースを追加して、モジュールに分離と通気性を提供します。以下の5つのオプションが利用できます。

• パディングなし： 子コンポーネントの周囲にパディングが追加されていない標準のオプション。
• コンパクト： 子コンポーネントの周囲に16ピクセルのパディングを追加します。
• レギュラー： 子コンポーネントの周囲に上下24ピクセル、左右48ピクセルのパディングを追加します。
• ラージ： 子コンポーネントの周囲に上下40ピクセル、左右62ピクセルのパディングを追加します。
• カスタム： 子コンポーネントの周囲に設定されたパディングレベルをカスタムで定義できます。

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