キャンバスを使用した詳細ページのカスタマイズで設定可能な項目

1. 要素： レイアウト内に表示する要素。セクション、タブ、表、テキスト、画像、アイコン、線、ボタンなど。
   
2. データ： レイアウト内に表示するデータやメニュー。項目、関連タブの項目、関連リスト、操作メニュー（編集、送信、次へなどのボタンやリンク）、キオスクなど。
   
3. スタイル： レイアウトの表示要素に適用するスタイル。フォントの種類、フォントのサイズ、背景色、枠線、影、角丸め、余白（内側／外側）、背景画像など。スタイルは、キャンバス編集画面で対象の要素を選択して設定できます。設定できる内容は、選択した要素によって異なります。なお、適用したスタイルを設定集に登録して、後で再利用することもできます。
   
4. 再利用する要素 ：キャンバスを使用したデータ詳細ページの作成時に設定した要素やデータと、そのスタイル設定は、再利用する要素として保存しておくことができます。これにより、保存した要素を複数のタブで共通的に利用することが可能です。
   

メモ

キャンバスを使用した詳細ページには、関連タブ（ルックアップ項目によって関連付けられているタブ）の項目を5件まで追加できます。ただし、関連タブのテリトリー項目、画像アップロード項目、ファイルアップロード項目は、追加できません。ただし、キャンバスを使用した詳細ページで、関連タブのすべての項目を表示するための操作を行うと、これらの項目も表示されます。

データの詳細ページのカスタマイズ

1. ［設定］   → ［カスタマイズ］ → ［キャンバス］ の順にクリックします。 
   
2. 画面右上にある ［新しい詳細ページを作成する］ をクリックします。
   
3. 詳細ページの作成 画面で、一覧から対象の タブ と レイアウト を選択します。
   
4. ［作成する］ をクリックします。  
     
5. キャンバスの編集画面 で、左側のメニューから ［要素］ をクリックします。
   詳細は、 要素と設定可能な項目 をご参照ください。
6. セクション 、 タブ 、 表 、 テキスト、画像、アイコン、線、ボタン から必要な要素を、ドラッグ＆ドロップでキャンバスに追加します。
   
7. 必要に応じて、 スタイル を追加します。
   詳細は、 要素へのスタイルの適用 をご参照ください。
8. 上部のメニューでは、次の操作を実行できます：
   
1. 変更を元に戻す／やり直す
   
2. 保存前にプレビューする
   
3. 全画面で表示する
   
4. 名前を付ける
   

 

設定可能な項目の概要

1. セクション： セクションとは、詳細ページに表示する項目をまとめるための枠（ブロック）です。
   
1. セクションには、項目や画像、メッセージを表示することが可能です。
   
2. 枠線をドラッグすると、セクションのサイズを変更できます。
   
3. アイコンをクリックすると、セクションを複製できます。
   
4. セクションを右クリックすると、項目の追加、要素の固定化／流動化、スタイルのコピー／貼り付け、セクションの削除などができます。
   
5. また、スタイル設定を追加することも可能です（スタイルについての詳細は、関連情報をご参照ください）。
   
   
   
   
2. タブ： タブを使用すると、項目と関連リストを複数の画面に分けて整理できます。表示内容が多い場合に、カテゴリーや手順ごとに内容を分割して各画面に配置し、簡単に切り替えながら表示することが可能です。たとえば、次の画像は、商品データの詳細ページに追加した、［関連情報］（Related Info）という名前のタブ要素の例です。タブ内には、さらに3つのタブ（メモ、添付ファイル、問い合わせ）が表示されています。［+］アイコンをクリックすると、項目または関連リストをタブとしてさらに追加できます。
     
   
   
   
1. 左側の設定画面では、タブ名を入力できます。
   
2. タブを削除するには、対象のタブにカーソルを合わせて、［×］アイコンをクリックします。
   
3. タブの外枠にカーソルを合わせ、両側矢印が表示されたら、枠をクリックしてドラッグ＆ドロップすることで位置を変更できます。
   
4. タブ内を右クリックすると、関連リストの変更、要素の固定化／流動化、関連リストのスタイルのコピー／貼り付け、タブのロックや削除ができます。 
   
   
   
   

1. また、画像や背景色などのスタイルを適用することも可能です。
   
2. テーマごとににタブをグループ化できます。たとえば、[未完了の活動]、[完了した活動]、[招待された予定]、[今後の活動] などの関連する複数のタブを [活動] という1つのタブの中にまとめることができます。
   
3. また、グループ化したタブのメニューに対して、展開（単数）や展開（複数）の処理を設定できます。
4. 展開（複数）の処理を設定すると、複数のタブ内のメニューを同時に展開しておくことができます。あるタブのメニューを展開した後に、他のタブのメニューを展開した際にも、先に展開していたタブのメニューを表示したままにしておくことが可能です。
   
5. 展開（単一）の処理を設定すると、1つのタブ内のメニューのみが展開されます。あるタブのメニューを展開した後、別のタブのメニューを展開すると、先に展開していたタブのメニューは非表示になります。
   
   
   
1. 表： 表を使用すると、データを表形式で表示できます。たとえば、次の画像は、商品名、説明、保管場所といった情報を表形式で表示した例です。表を使用することで、限られたスペースで必要なデータを簡潔に表示することが可能です。
   
   
1. 行や列にカーソルを合わせて、［+］または［-］アイコンをクリックすると、行や列を追加または削除できます。
   
   
   
   
2. 行を右クリックすると、項目の変更、要素の固定化／流動化、スタイルのコピーや貼り付け、項目の削除などが可能です。
   
   
   
   
3. 枠線をドラッグすると、表のサイズを変更できます。
   
4. 行と列に色を追加できます。
   
5. テキストに色を追加できます。
   
6. 表に色を追加できます。
   
   
2. テキスト： 詳細ページに、任意のテキストを追加して表示できます。セクションの見出し、メモや注意事項などを表示できます。
   
1. 枠線をドラッグすると、テキストの表示欄のサイズを変更できます。
   
2. テキストの表示欄を右クリックすると、複製、固定化／流動化、削除などが可能です。
   
   
   
   
3. 画像： 詳細ページに、画像を追加できます。たとえば、連絡先の詳細ページに、画像の要素を追加して、各連絡先のプロフィール写真として設定できます。
   
1. 画像の要素を選択して、キャンバスにドラッグして配置します。
   
   
   
   
2. 画像の要素をクリックすると、アップロード画面が表示されます。
   
   
   
   デバイス内の画像ファイルを参照してアップロードするか、事前にアップロードした画像データから選択するか、インターネット上に公開されている画像のURLを入力することで、画像を追加できます。
3. 追加後、画像のサイズ変更や、枠線、影、角丸め、内側の余白などのスタイル調整が可能です。
   
   
4. アイコン： 通常のテキストによるラベルではなく、アイコンを使用して項目を表すことができます。たとえば、次の画像は商品名と価格をテキストではなくアイコンで表示した例です。
     
   
   
   
1. アイコンの種類は、アイコンの要素をキャンバスにドラッグして追加した後、一覧から選択できます。
   
2. アイコンを右クリックすると、種類の変更や、アイコンの複製／削除ができます。
   
3. 枠線をドラッグすると、サイズを拡大／縮小できます。
   
5. 可変式ボックス ：データの詳細ページで可変式ボックスの表示要素を使用すると、ユーザーに対して表示する詳細ページのレイアウトやその内容を調整できます。可変式ボックスでは、ユーザーに対して表示する内容を動的に変更することが可能です。設計を開始するには、可変式ボックスの要素をキャンバスの設計画面にドラッグ＆ドロップします。可変式ボックスには、以下の3種類が用意されています。
   
   1. 縦：要素内において、項目を縦に並べて表示します。
   2. 横：要素内において、項目を横に並べて表示します。
   3. 折り返し：要素内に表示する項目数がボックスの幅を超える場合、次の行に折り返して項目を表示します。
      
6. グリッド：グリッドを用いては、データや要素を長方形の格子状の枠内に配置できます。グリッドは視覚的なガイドの役割を果たすとともに、ページを動的かつ端末に合った表示にできます。以下の操作が可能です。。
   

可変式ボックス内の項目の配置箇所を指定できます。左上、中央上、右上、左、中央、右、左下、中央下、右下のいずれかを選択することが可能です。

1. 指定値：指定した余白の値に基づいて、要素内の各項目を表示します。
   
2. 均等（両端揃え）：最初と最後の項目を要素内の両端に配置し、各項目の間の余白が均等になるように表示します。
   
3. 均等（すべて均等）：要素内の各項目の間の余白がすべて均等になるように表示します。要素と項目の両端の間の余白も、項目間の余白と同じ幅になります。
   
4. 均等（両端が半分）：要素内の各項目に均等な余白をつけて表示します。要素と項目の両端の間の余白に対して、項目間の余白が広くなります。
   

1. 可変の幅：可変式ボックス内の項目の幅に合わせてサイズを変更します
   
2. 可変の高さ：可変式ボックス内の項目の高さに合わせてサイズを変更します
   
3. 上記の両方をもとに可変式ボックスのサイズを調整することもできます。
   

・子の可変式ボックスを追加するにあたって、左、中央、右のいずれかに配置を指定できます。また、縦、横、その両方のいずれかに子の可変式ボックスを拡大することも可能です。

・子の可変式ボックスの最大幅／最小幅
子の可変式ボックスの最大幅／最小幅を自動で設定できます。また、表示内容を画面サイズに応じて切り替える際の基準となる幅（ブレイクポイント）を設定し、調整可能なサイズの上限／下限の値を指定することも可能です。

1. ［設定］ → ［カスタマイズ］ → ［キャンバス］ をクリックします。
   
2. ［キャンバス］ → ［キャンバスを割り当てる］ をクリックします。
   
3. 一覧からタブとレイアウトを選択し、キャンバスを割り当てます。
   
4. それぞれの権限に対する キャンバス を選択します。チームタブ用のキャンバスの場合、チームタブの権限が表示されます。
   
5. ［保存する］ をクリックします。