列レイアウト

列レイアウトは、UI ビルダー ページを設計および整理するために使用されます。

列レイアウトを使用して、エクスペリエンスで役に立つ視覚的に魅力あるページを作成することができます。列レイアウトはコンポーネントを保持できる柔軟性に優れたコンテナの一種です。列レイアウトは事前設定されたシンプルなレイアウトであり、効率的で魅力的なページをすばやく設計できます。コンポーネントを追加する前に、列レイアウトを使用してページの構造を定義して設定すると便利です。

列レイアウトでは同じ幅または異なる幅の列を使用できます。

列レイアウト全体を構成し、レイアウト内の個々の列も構成できます。たとえば、列レイアウトとレイアウト内の個々の列に異なる境界線の幅と色を設定します。

注:

現在、条件に基づく列レイアウトでの列の非表示/表示はサポートされていません。

列レイアウトの追加

列レイアウト UI ビルダー を追加して、エクスペリエンスページ上で構造を構築し、コンポーネントを整理します。

始める前に

必要なロール：ui_builder_admin

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または [+ 作成] を選択してエクスペリエンスを作成します。
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. 「UI ビルダー でのページの作成」の手順を実行するか、またはページを開きます。
4. コンテンツツリーで [+ コンポーネントを追加] を選択します。
5. [レイアウト] タブで [基本] オプションのいずれかを選択します。
   
   列レイアウトはステージに表示されるため、コンポーネントを列に追加できます。詳細については、「コンポーネントの追加と構成」を参照してください。
6. 上または下に列レイアウトを追加します。
   • コンテンツツリーで、列レイアウト名を選択したままにするか (または右クリック)、列レイアウトのメニューアイコンを選択します。次に、一覧から [前に追加 ] または [ 後に追加 ] を選択し、レイアウトを選択します。

     

   • ステージで列レイアウトを選択し、上部または下部のプラス記号を選択します。

     

列レイアウトの構成

UI ビルダー で列レイアウトを構成して、エクスペリエンスページに必要な適切な数の列と外観を追加します。

始める前に

必要なロール：ui_builder_admin

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または [+ 作成] を選択してエクスペリエンスを作成します。
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. 「UI ビルダー でのページの作成」の手順を実行するか、またはページを開きます。
4. ページに列レイアウトがまだ含まれていない場合は、列レイアウトの追加。
5. コンテンツツリー、ステージ、または構成パネルを使用して列を追加します (最大 6 つ)。
   • コンテンツツリーで、列名を選択したままにするか (または右クリック)、列の [メニュー] アイコンを選択して、リストから [ 前に 列を追加] または [ 後に列を追加 ] を選択します。

     

   • ステージで 1 つの列を選択し、列名の横にある [メニュー] アイコンを選択して、リストから [ 前に 列を追加] または [ 後に列を追加 ] を選択します。

     

   • ステージで、列を長押し (または右クリック) し、リストから [ 前に 列を追加] または [ 後に列を追加 ] を選択します。

     

   • コンテンツツリーで列レイアウトを選択し、ステージで [+] プラスアイコンを選択して列レイアウトの右側に列を追加します。

     

   • コンテンツツリーで列レイアウトを選択し、構成パネルで [列 ] の横にある [+] プラスアイコンを使用して、列レイアウトの右側に列を追加します。

     

   注:

   列は相互にネストできますが、多くの場合、ページではこのレベルの複雑さは必要ありません。
6. コンテンツツリー、ステージ、または構成パネルから列ラベルを編集して、列の名前を変更します。
   • コンテンツツリーで、列名を選択したままにするか (または右クリック)、列の [メニュー] アイコンを選択して、[ 名前の変更] を選択します。
   • ステージで、列名の横にある [メニュー] アイコンを選択し、[ 名前の変更] を選択します。
   • 構成パネルで、列名の横にある情報アイコンを選択します。
   列の名前を変更すると、ステージとコンテンツツリーの異なる列を区別するのに役立ちます。多数の列レイアウトと列を含む複雑なページがある場合は、列の名前を変更すると便利です。
7. レイアウト内の列の幅を変更するには、(コンテンツツリーまたはステージで) 列レイアウトを選択してから、ステージ上の列の分割線を左右にドラッグして列の幅を狭くしたり広くしたりします。
   
   列分割線をドラッグすると、列の上部の幅のパーセンテージが自動的に変更されます。パーセンテージの合計は 100% になります。列のサイズを変更するときは、列内のコンポーネントに必要なスペースに注意してください。たとえば、リストおよびフォームコンポーネントは通常、幅の狭い列では適切に表示されません。
8. コンテンツツリー、ステージ、または構成パネルを使用して、レイアウト内の列を水平方向に均等に配置します。
   • コンテンツツリーで、列レイアウト名を選択したままにするか (または右クリック)、列レイアウトのメニューアイコンを選択して、リストから [列を均等に配分 ] を選択します。
   • ステージで列レイアウトを選択し、列レイアウト名の横にあるメニューアイコンを選択して、リストから [列を均等に配分 ] を選択します。
   • コンテンツツリーまたはステージで列レイアウトを選択し、構成パネルで [列を均等に配分] を選択します。
9. コンテンツツリーまたはステージを使用して、列レイアウト内の列 (その内容を含む) を並べ替えます。
   • コンテンツツリーで、列を選択し、新しい位置にドラッグします (青い横線は、列をドロップできる場所を示します)。
   • ステージで列ヘッダーを選択し、列を新しい位置にドラッグして、垂直マゼンタの線で定義されたドロップゾーンに列をドロップします。
   コンテンツツリーで列を並べ替えるとステージが更新され、ステージで並べ替えるとコンテンツツリーが更新されます。
10. コンテンツツリー、ステージ、または構成パネルの列間のスペースを指定します。
    • コンテンツツリーで、列レイアウト名を選択したままにするか (または右クリック)、列レイアウトの [メニュー] アイコンを選択してリストから [ レイアウト ] を選択し、[ 列ギャップ] でサイズオプションを選択します。
    • ステージで列レイアウトを選択し、列レイアウト名の横にあるメニューアイコンを選択し、リストから レイアウト を選択して、[ 列ギャップ] でサイズオプションを選択します。
    • コンテンツツリーまたはステージで列レイアウトを選択し、構成パネルで [列ギャップ] でサイズオプションを選択します。
11. ツリーアイコンを選択して、コンテンツの別のレイヤーに移動します。たとえば、列から親の列レイアウトや子コンポーネント移動します。
    
12. コンテンツツリーまたはステージから列を削除します。
    • コンテンツツリーで、列名を選択したままにするか (または右クリック)、列の [メニュー] アイコンを選択して、リストから [ 列を削除 ] を選択します。
    • ステージで 1 つの列を選択し、列名の横にある [メニュー] アイコンを選択して、リストから [ 列の削除 ] を選択します。
    • コンテンツツリーで列レイアウトを選択し、構成パネルで [列] の横にある - マイナスアイコンを使用して、列レイアウトの右側から列を削除します。

詳細な列レイアウトオプションの設定

スタック幅と列レイアウトの高さを含む詳細な列レイアウトオプション UI ビルダー を設定します。

始める前に

必要なロール：管理者

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または [+ 作成] を選択してエクスペリエンスを作成します。
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. 「UI ビルダー でのページの作成」の手順を実行するか、またはページを開きます。
4. ページに列レイアウトがまだ含まれていない場合は、列レイアウトの追加。
5. コンテンツツリーで少なくとも 2 列を含む列レイアウトを選択します。
   
6. スタック幅を設定するには、レイアウト>構成パネルに移動し、[高度なレイアウトオプションを表示]を選択します。
   注:

   スタック幅を設定すると、幅の狭いブラウザーウィンドウ、タブレット、またはモバイルデバイスでの列レイアウトを含むページの外観を制御できます。

   
7. 下の [スタック列] に幅を入力します。
8. [保存] を選択します。
9. 新しいスタック幅をテストするには、[ プレビュー ] の横にある矢印を選択し、[ URL パスを開く] を選択します。
10. ブラウザー ウィンドウの幅を指定したスタック幅より小さくして、右側の列が最初の列より下に移動することを確認します。
11. URL パスで開いたブラウザータブを閉じます。
12. 列レイアウトの高さを制御するには、コンテンツツリーで少なくとも 2 列を含む列レイアウトを選択し、[ レイアウト] > [構成パネル] に移動して、[ 詳細レイアウトオプションを表示] を選択します。
    注:

    高さの設定は、リストコンポーネントなどの高さを設定できるコンポーネントが列レイアウトに含まれている場合に便利です。
13. [ サイズ設定] で、1 つ以上のオプションに数値を入力します ([高さ]、[ 最小] H、および 最大。H)、サイズ単位 ( px、 %、 em など) を設定します。
    
14. [保存] を選択します。
15. 新しいサイズ設定をテストするには、 [ プレビュー ] の横にある矢印を選択し、 [ URL パスを開く] を選択します。
16. ブラウザー ウィンドウの高さを小さくしたり広げたりして、指定した値をテストします。
17. URL パスで開いたブラウザータブを閉じます。