4.1 管理画面の作成

ここでは、登録画面とは別に画面コンテンツを作成し、検索フォームやテーブルなどのエレメントを配置して、データの検索や一覧表示を行う管理画面のレイアウトを作成します。

管理画面を作成する

資産管理画面を作成するため、新しく画面コンテンツを用意します。登録画面とは表示する内容が異なるため、別の画面コンテンツとして作成します。ここでは、検索フォームやテーブルなどのエレメントを配置し、資産情報を一覧・検索するための画面レイアウトを作成します。

画面コンテンツを追加する

「アプリケーション管理」画面を表示し、アプリケーションに「画面コンテンツ」リソースを追加します。追加した画面コンテンツをもとに、管理画面のレイアウトを作成します。

Step 0. 事前準備

操作手順

画面コンテンツを追加する前に、以下の内容を確認してください。

• コンテンツカテゴリが作成されていること
  └ 「intra-mart環境の確認 > コンテンツカテゴリ」を参照してください。
• リソース管理表およびデータ項目管理表を参照できること
  • └ 「アプリケーション管理」画面の［ドキュメント］タブをクリックすると、「資産管理アプリ（試作品）」というWikiファイルが表示されます。
  • └ 各管理表の内容については、「1. アプリの生成 > アプリで使用するリソース名を決める」を参照してください。

Step 1. コンテンツ定義を追加する

操作手順

1. ［画面］タブをクリックします。
2. ［リソースを追加］→［画面を新規作成］の順にクリックします。
3. ［画面コンテンツ］をクリックします。

4. ［デベロップモード］を選択し、［次へ］をクリックします。
5. ［テンプレートを使用しない］にチェックが入った状態で、［次へ］をクリックします。

6. ［検索］をクリックして、カテゴリを選択します。

• ［資産管理アプリ（試作品）］を選択→［決定］をクリック

7. 必須事項を入力します。

• コンテンツID：tmp_asset_list
• コンテンツ名：資産管理画面 -TOP-（試作品）
• コンテンツ種別：imds

8. ［登録］をクリックします。
   └ 「確認」ダイアログで［登録］をクリックします。
   └ 画面編集用のデザイナが表示されます。

参考

• コンテンツカテゴリを作成していない場合は、「intra-mart環境の確認 > コンテンツカテゴリ」を参照してください。
• 画面コンテンツの概要や操作手順について、詳細は「ローコード操作マニュアル - 画面コンテンツの作成」を参照してください。その他にも、各コンテンツ種別の概要やデザイナ画面の項目について確認できます。

メモ

本チュートリアルでは、ローコード開発の基本的な流れを学ぶため、テンプレートは使用せず、レイアウトを一から作成します。また、コンテンツ種別を「imds」に設定した場合を例に説明します。コンテンツ種別について、詳細は「ローコード操作マニュアル - 画面コンテンツの作成 > コンテンツ種別について」を参照してください。

エレメントをコピーする

ヘッダなどの共通レイアウトを再利用するため、登録画面からエレメントをコピーし、不要なエレメントを削除します。

Step 1. エレメントをコピーする

操作手順

1. コピー元となる登録画面を表示します。

• ［資産登録画面（試作品）］をクリック
  └ 登録画面のデザイナが表示されます。

メモ

「アプリケーション管理」画面、「資産登録画面」、「資産管理画面-TOP-」が同じブラウザ内でタブに表示されている状態にします。以降は、これらのタブを切り替えながら作業を進めます。

2. 登録画面のエレメントをコピーします。

• 編集エリア：外側の［コンテナ］を選択
• ツールバー：［ ］をクリック

3. ブラウザのタブをクリックして、管理画面のデザイナを表示します。
4. 管理画面にエレメントを貼り付けます。

• ツールバー：［ ］をクリック

メモ

• エレメントを貼り付けできない（［ ］が表示されない）場合は、管理画面のデザイナを一度閉じてから、「アプリケーション管理」画面で［資産管理画面 -TOP-］をクリックし、管理画面のデザイナを開き直してください。
• エレメントを貼り付けた後、デザイナにコピーしたエレメントが表示されます。ただし、エレメントに設定されていた画面変数はコピーされないため、編集エリアの文言は空欄の状態になります。

参考

エレメントのコピー・貼り付けは、ショートカットキーを利用することも可能です。詳細は「ローコード操作マニュアル - 画面レイアウトとデザイン調整 > エレメントの切り取り・コピー・貼り付けを行う」を参照してください。

Step 2. 不要なエレメントを削除する

操作手順

1. 入力フォームのエレメントを削除します。

• 編集エリア：［フィールドグループ］を選択
• ツールバー：［ ］をクリック

2. 登録ボタンを含むエレメントを削除します。

• 編集エリア：［中央揃え水平コンテナ］を選択
• ツールバー：［ ］をクリック

参考

エレメントの削除は、ショートカットキーを利用することも可能です。詳細は「ローコード操作マニュアル - 画面レイアウトとデザイン調整 > エレメントを削除する」を参照してください。

ヘッダを編集する

コピーしたヘッダの内容を編集し、タイトルやボタンなどを管理画面向けの内容に変更します。

操作手順

コピーしたヘッダのラベルやボタンを管理画面向けの文言に変更します。文言は、該当するエレメントを選択し、「エレメント固有」の設定を変更します。

1. ヘッダのページタイトルを入力します。

• 編集エリア：［ヘッダタイトル］を選択
• エレメント固有：［固有値］を選択し、以下のテキストを入力
  • title：資産管理画面 -TOP-
  • subTitle：資産管理アプリケーション

2. 登録画面からコピーした一覧ボタンを、リロードボタンに変更します。

• 編集エリア：［ボタン要素］を選択
• エレメント固有：［固有値］を選択し、以下の内容を設定
  • textContent：空欄
  • color：dark（灰色）
  • buttonStyle：ghost（枠無し）
  • size：large
  • leftIconClass：fa-solid fa-arrow-rotate-right

参考

リロードボタンに使用したアイコンは、Font AwesomeというWebサイトやスマートフォンアプリ向けのアイコンライブラリを利用しています。Font Awesomeにはさまざまな用途に対応したアイコンが用意されており、画面の視認性向上に活用できます。アイコンの探し方や設定方法の詳細については、「CookBook - IM-BloomMaker Bulmaエレメントに使用するアイコンの探し方」を参照してください。

コンテンツ部分のレイアウトを作成する

コンテンツ部分は、「タイトル＋新規作成ボタン」「検索フォーム＋件数表示」「一覧」の3つの領域を縦方向に配置して構成します。

操作手順

エレメントの操作は、パレットから該当するエレメントを選択し、配置したい場所を選択した状態でダブルクリックします。必要に応じて、「エレメント固有」の設定を変更します。

1. エレメントの配置先を選択します。

• 編集エリア：［コンテナ］を選択

2. コンテナを選択した状態で、コンテンツ全体を構成する枠を配置します。

• パレット：［レイアウト］→［フレックスコンテナ］をダブルクリック

3. フレックスコンテナの設定を表示します。

• 編集エリア：［フレックスコンテナ］を選択

4. フレックスコンテナの方向を「横 (row)」から「縦 (column)」に変更します。

• エレメント固有：「flexDirection」で［column］を選択

5. エレメントを折り返さずに縦方向へ順番に配置します。

• エレメント固有：「flexWrap」で［nowrap］を選択

メモ

フレックスコンテナを縦方向に設定した場合、「flexWrap」の設定によってエレメントの配置方法が変わります。

• nowrap：エレメントを縦方向に順番に配置します。折り返されず、複数列にはなりません。
• wrap：コンテナの高さが不足すると、エレメントが隣の列へ折り返される場合があります。

管理画面では、検索フォームと一覧を上から下へ順番に表示したいため、「nowrap」を設定し、意図せず複数列に折り返されないようにします。

「タイトル＋新規作成ボタン」を作成する

縦方向のフレックスコンテナの一番上の領域に、「アイコン」「タイトル」「新規作成ボタン」を横方向に配置するためのレイアウトを作成します。

Step 1. 各要素を配置する枠を設定する

操作手順

「アイコン」「タイトル」「新規作成ボタン」の3つの要素を配置するための枠を設定します。

1. エレメントの配置先を選択します。

• 編集エリア：一番上にある［フレックスアイテム］を選択

2. フレックスアイテム内にタイトルやボタンを構成する枠を配置します。

• パレット：［レイアウト］→［フレックスコンテナ］をダブルクリック

3. フレックスコンテナの設定を表示します。

• 編集エリア：［フレックスコンテナ］を選択

4. エレメントを折り返さずに1行に配置します。

• エレメント固有：「flexWrap」で［nowrap］を選択

5. フレックスコンテナ内のエレメントを中央揃えに設定します。

• エレメント固有：「alignItems」で［center］を選択

メモ

• 「flexWrap」は、エレメントを折り返して表示するかどうかを設定します。ここでは、タイトルと新規作成ボタンを1行に配置するため、「nowrap」を設定します。
• 「alignItems」は、フレックスコンテナ内の各エレメントを交差軸方向にどのように配置するかを設定します。ここでは、フレックスコンテナを横方向（「flexDirection」が「row」）に設定しているため、交差軸は縦方向になります。そのため、タイトルと新規作成ボタンを縦方向の中央に揃えるために「center」に設定します。

参考

エレメントの詳細は、「ローコード操作マニュアル - IM-BloomMakerのエレメント > 基本レイアウト」の「コンテナ」を参照してください。

6. アイコンを配置するエレメントを選択します。

• 編集エリア：左側にある［フレックスアイテム］を選択

7. アイコンを必要な幅だけ表示するように設定します。

• エレメント固有：「flexGrow」で［0］を選択

8. ボタンを配置するエレメントを選択します。

• 編集エリア：右側にある［フレックスアイテム］を選択

9. ボタンを必要な幅だけ表示するように設定します。

• エレメント固有：「flexGrow」で［0］を選択

メモ

「flexGrow」は、フレックスコンテナ内の余ったスペースを各エレメントがどの割合で使用するかを設定します。ここでは、以下のように設定することで、タイトルが余った横幅を使用し、ボタンを右端に配置できます。

• アイコン：「flexGrow」を「0」に設定（必要な幅だけ表示する）
• タイトル：「flexGrow」を「1」に設定（余った横幅を使用して広がる）
• ボタン：「flexGrow」を「0」（必要な幅だけ表示し、右端に配置する）

Step 2. アイコンを配置する

操作手順

左側のフレックスアイテムにアイコンを配置します。

1. エレメントの配置先を選択します。

• 編集エリア：左側の［フレックスアイテム］を選択

2. フレックスアイテム内にアイコンを配置します。

• パレット：［パーツ（imds）］→［アイコン］をダブルクリック
• 編集エリア：［アイコン］を選択

3. アイコンの設定を表示します。

• 編集エリア：［アイコン］を選択

4. アイコンの装飾を設定します。

• エレメント固有：「iconClass」に「fa-solid fa-list」を入力

5. アイコンのサイズを設定します。

• エレメント固有：「size」で［large］を選択

参考

• アイコンの探し方や設定方法の詳細については、「CookBook - IM-BloomMaker Bulmaエレメントに使用するアイコンの探し方」を参照してください。
• エレメントの詳細は、「ローコード操作マニュアル - IM-BloomMakerのエレメント > 汎用表示・制御部品」の「アイコン」を参照してください。

Step 3. タイトルを配置する

操作手順

中央のフレックスアイテムにタイトルを配置します。

1. エレメントの配置先を選択します。

• 編集エリア：中央の［フレックスアイテム］を選択

2. フレックスアイテム内に見出しを配置します。

• パレット：［レイアウト（imds）］→［見出しレベル4］をダブルクリック

3. 見出しレベル4の設定を表示します。

• 編集エリア：［見出しレベル4］を選択

4. 見出しのテキストを入力します。

• エレメント固有：「textContent」に「資産一覧」と入力

5. フォントの太さを設定します。

• エレメント固有：「fontWeight」で［bold］を選択

参考

エレメントの詳細は、「ローコード操作マニュアル - IM-BloomMakerのエレメント > 見出し」を参照してください。

Step 4. ボタンを配置する

操作手順

右側のフレックスアイテムにボタンを配置します。

1. エレメントの配置先を選択します。

• 編集エリア：右側の［フレックスアイテム］を選択

2. フレックスアイテム内にボタンを配置します。

• パレット：［フォーム部品（imds）］→［ボタン］をダブルクリック

3. ボタンの設定を表示します。

• 編集エリア：［ボタン要素］を選択

4. ボタンのテキストを入力します。

• エレメント固有：「textContent」に「新規作成」と入力

5. ボタンの色を青に設定します。

• エレメント固有：「color」で［primary］を選択

6. ボタンの表示スタイルを枠線のみに設定します。

• エレメント固有：「buttonStyle」で［outlined］を選択

7. テキストの左側にアイコンを設定します。

• エレメント固有：「leftIconClass」に「fa-solid fa-plus」と入力

参考

• アイコンの探し方や設定方法の詳細については、「CookBook - IM-BloomMaker Bulmaエレメントに使用するアイコンの探し方」を参照してください。
• エレメントの詳細は、「ローコード操作マニュアル - IM-BloomMakerのエレメント > アクションボタン」を参照してください。

「検索フォーム＋件数表示」を作成する

縦方向のフレックスコンテナの中央の領域に、「検索フォーム」と「件数表示」を横方向に配置するためのレイアウトを作成します。

Step 1. 各要素を配置する枠を設定する

操作手順

「検索フォーム」と「件数表示」の2つの要素を配置するための枠を設定します。

1. エレメントの配置先を選択します。

• 編集エリア：2番目の［フレックスアイテム］を選択

2. フレックスアイテム内にフォームや件数を構成する枠を配置します。

• パレット：［レイアウト］→［フレックスコンテナ］をダブルクリック

3. フレックスコンテナの設定を表示します。

• 編集エリア：［フレックスコンテナ］を選択

4. エレメントを折り返さずに1行に配置します。

• エレメント固有：「flexWrap」で［nowrap］を選択

5. フレックスコンテナ内のエレメントを中央揃えに設定します。

• エレメント固有：「alignItems」で［center］を選択

6. フレックスコンテナ内の要素を2つに設定します。

• エレメント固有：「elementCount」で［2］を選択

メモ

• 「flexWrap」は、エレメントを折り返して表示するかどうかを設定します。ここでは、検索フォームと件数表示を1行に配置するため、「nowrap」を設定します。
• 「alignItems」は、フレックスコンテナ内の各エレメントを交差軸方向にどのように配置するかを設定します。ここでは、フレックスコンテナを横方向（「flexDirection」が「row」）に設定しているため、交差軸は縦方向になります。そのため、検索フォームと件数表示を縦方向の中央に揃えるために「center」に設定します。

参考

エレメントの詳細は、「ローコード操作マニュアル - IM-BloomMakerのエレメント > 基本レイアウト」の「コンテナ」を参照してください。

7. 検索フォームを配置するエレメントを選択します。

• 編集エリア：左側にある［フレックスアイテム］を選択

8. 検索フォームを固定幅で表示するように設定します。

• エレメント固有：「flexGrow」で［0］を選択

メモ

「flexGrow」は、フレックスコンテナ内の余ったスペースを各エレメントがどの割合で使用するかを設定します。ここでは、検索フォームの幅を固定し、件数表示を右端に配置するため、以下のように設定します。

• 検索フォーム：「flexGrow」を「0」に設定（固定幅で表示する）
• 件数表示：「flexGrow」を「1」に設定（余った横幅を使用する領域を確保し、右端に配置する）

Step 2. 検索フォームを配置する

操作手順

左側のフレックスアイテムに検索フォームを配置します。

1. エレメントの配置先を選択します。

• 編集エリア：左側の［フレックスアイテム］を選択

2. フレックスアイテム内に検索フォームの枠を配置します。

• パレット：［フォーム部品（imds）］→［インプットグループ］をダブルクリック

3. インプットグループを選択します。

• 編集エリア：［インプットグループ］を選択

4. 入力フォームを配置します。

• パレット：［テキスト入力］をダブルクリック

5. 検索ボタンを配置します。

• パレット：［ボタン］をダブルクリック

参考

各エレメントの詳細は、「ローコード操作マニュアル - IM-BloomMakerのエレメント」を参照してください。

• インプットグループ：「コンポーネント・組み合わせ部品 > フィールド」
• テキスト入力：「フォーム・入力部品 > 入力フィールド」
• ボタン：「フォーム・入力部品 > アクションボタン」

6. 入力フォームを選択します。

• 編集エリア：［テキスト入力要素］を選択

7. 入力フォームが空欄の場合に表示する入力例を設定します。

• エレメント固有：「placeholder」に「資産名」と入力

8. 入力フォームに表示する値を設定します。

• エレメント固有：「value」に「資産名」と入力

9. アイコンを選択します。

10. アイコンの装飾を変更します。

• エレメント固有：「iconClass」に「fas fa-search」と入力

参考

アイコンの探し方や設定方法の詳細については、「CookBook - IM-BloomMaker Bulmaエレメントに使用するアイコンの探し方」を参照してください。

11. ボタンを選択します。

12. ボタンのテキストを入力します。

• エレメント固有：「textContent」に「検索」と入力

メモ

この時点では、管理画面で利用する変数をまだ設定していないため、入力フォームの検索対象の値やボタンのテキストは「固有値」を設定しています。後の手順で変数や多言語変数をそれぞれ設定した後、「変数値」に変更します。

Step 3. 件数表示を配置する

操作手順

右側のフレックスアイテムに件数表示を配置します。「件数」と「件表示（文言）」の2つの要素を並べます。

1. エレメントの配置先を選択します。

• 編集エリア：右側の［フレックスアイテム］を選択

2. フレックスアイテム内にフォームや件数を構成する枠を配置します。

• パレット：［レイアウト］→［フレックスコンテナ］をダブルクリック

3. フレックスコンテナの設定を表示します。

• 編集エリア：［フレックスコンテナ］を選択

4. エレメントを折り返さずに1行に配置します。

• エレメント固有：「flexWrap」で［nowrap］を選択

5. フレックスコンテナ内のエレメントを右端に配置します。

• エレメント固有：「justifyContent」で［flex-end］を選択

6. フレックスコンテナ内の要素を2つに設定します。

• エレメント固有：「elementCount」で［2］を選択

7. 件数を配置するエレメントを選択します。

• 編集エリア：左側にある［フレックスアイテム］を選択

8. 件数を必要な幅だけ表示するように設定します。

• エレメント固有：「flexGrow」で［0］を選択

9. フレックスコンテナ内にラベルを配置します。

• パレット：［汎用］→［ラベル］をダブルクリック

10. 件表示（文言）を配置するエレメントを選択します。

• 編集エリア：右側にある［フレックスアイテム］を選択

11. 件表示（文言）を必要な幅だけ表示するように設定します。

• エレメント固有：「flexGrow」で［0］を選択

12. フレックスコンテナ内にラベルを配置します。

• パレット：［汎用］→［ラベル］をダブルクリック

メモ

「flexGrow」は、フレックスコンテナ内の余ったスペースを各エレメントがどの割合で使用するかを設定します。ここでは、「件数」と「件表示」を必要な幅だけ表示するため、以下のように設定します。

• 件数：「flexGrow」を「0」に設定（必要な幅だけ表示する）
• 件表示：「flexGrow」を「0」に設定（必要な幅だけ表示する）

これにより、どちらのエレメントも余ったスペースを使用せず、右端に配置した状態で横並びに表示されます。

参考

エレメントの詳細は、「ローコード操作マニュアル - IM-BloomMakerのエレメント > 汎用表示・制御部品」の「テキスト表示」を参照してください。

13. 左側のラベルの設定を表示します。

• 編集エリア：［ラベル］を選択

14. 件数を表す数値を入力します。

• エレメント固有：「textContent」に「10］を選択

15. 右側のラベルの設定を表示します。

• 編集エリア：［ラベル］を選択

16. 件表示（文言）のテキストを入力します。

• エレメント固有：「textContent」に「件表示」と入力

メモ

この時点では、管理画面で利用する変数をまだ設定していないため、件数や件表示のテキストは「固有値」を設定しています。後の手順で変数や多言語変数をそれぞれ設定した後、「変数値」に変更します。

「一覧」を作成する

縦方向のフレックスコンテナの一番下の領域に、「一覧」を配置するためのレイアウトを作成します。

Step 1. テーブルを配置する

操作手順

1. エレメントの配置先を選択します。

• 編集エリア：3番目の［フレックスアイテム］を選択

2. フレックスアイテム内にテーブルを配置します。

• パレット：［繰り返し（imds）］→［テーブルコンテナ（繰り返し）］をダブルクリック

3. テーブルを選択します。

• 編集エリア：［テーブル（繰り返し）］を選択

4. テーブルの列数を設定します。

• エレメント固有：「columnCount」で［4］を選択

メモ

この時点では、管理画面で利用する変数をまだ設定していないため、テーブルに紐づける配列の変数はまだ指定できません。「エレメント固有」の「list」は空欄のままにしてください。

参考

エレメントの詳細は、「ローコード操作マニュアル - IM-BloomMakerのエレメント > テーブル表示」を参照してください。

Step 2. 列見出しとソートを設定する

操作手順

1. エレメントの配置先を選択します。

• 編集エリア：左から1列目の［テーブルヘッダセル］を選択

2. テーブルヘッダセル内に、列見出しやソートアイコンを構成する枠を配置します。

• パレット：［レイアウト］→［フレックスコンテナ］をダブルクリック

3. フレックスコンテナの設定を表示します。

• 編集エリア：［フレックスコンテナ］を選択

4. エレメントを折り返さずに1行に配置します。

• エレメント固有：「flexWrap」で［nowrap］を選択

5. フレックスコンテナ内の要素を2つに設定します。

• エレメント固有：「elementCount」で［2］を選択

6. 列見出しを配置するエレメントを選択します。

• 編集エリア：左側にある［フレックスアイテム］を選択

7. 列見出しを必要な幅だけ表示するように設定します。

• エレメント固有：「flexGrow」で［0］を選択

8. ソートアイコンを配置するエレメントを選択します。

• 編集エリア：右側にある［フレックスアイテム］を選択

9. ソートアイコンを必要な幅だけ表示するように設定します。

• エレメント固有：「flexGrow」で［0］を選択

メモ

「flexGrow」は、フレックスコンテナ内の余ったスペースを各エレメントがどの割合で使用するかを設定します。ここでは、「列見出し」と「ソートアイコン」を必要な幅だけ表示するため、以下のように設定します。

• 列見出し：「flexGrow」を「0」に設定（必要な幅だけ表示する）
• ソートアイコン：「flexGrow」を「0」に設定（必要な幅だけ表示する）

これにより、どちらのエレメントも余ったスペースを使用せず、左端に配置した状態で横並びに表示されます。

10. 列見出しを配置するエレメントを選択します。

• 編集エリア：左側にある［フレックスアイテム］を選択

11. フレックスアイテム内に列見出しを配置します。

• パレット：［汎用］→［ラベル］をダブルクリック

12. ラベルの設定を表示します。

• 編集エリア：［ラベル］を選択

13. 列見出しのテキストを入力します。

• エレメント固有：「textContent」に「資産管理番号」と入力

14. ソートアイコンを配置するエレメントを選択します。

• 編集エリア：右側にある［フレックスアイテム］を選択

15. フレックスアイテム内にフレックスコンテナを配置します。

• パレット：［レイアウト］→［フレックスコンテナ］をダブルクリック

16. フレックスコンテナの設定を表示します。

• 編集エリア：［フレックスコンテナ］を選択

17. エレメントを縦方向に配置します。

• エレメント固有：「flexDirection」で［column］を選択

18. フレックスコンテナ内の要素を2つに設定します。

• エレメント固有：「elementCount」で［2］を選択

19. 昇順ソートアイコンを配置するエレメントを選択します。

• 編集エリア：上側にある［フレックスアイテム］を選択

20. フレックスコンテナ内にアイコンを配置します。

• パレット：［パーツ（imds）］→［アイコン］をダブルクリック

21. アイコンの設定を表示します。

• 編集エリア：［アイコン］を選択

22. アイコンの装飾を設定します。

• エレメント固有：「iconClass」に「fas fa-sort-up」と入力

23. 降順ソートアイコンを配置するエレメントを選択します。

• 編集エリア：下側にある［フレックスアイテム］を選択

24. フレックスコンテナ内にアイコンを配置します。

• パレット：［パーツ（imds）］→［アイコン］をダブルクリック

25. アイコンの設定を表示します。

• 編集エリア：［アイコン］を選択

26. アイコンの装飾を設定します。

• エレメント固有：「iconClass」に「fas fa-sort-down」と入力

参考

• アイコンの探し方や設定方法の詳細については、「CookBook - IM-BloomMaker Bulmaエレメントに使用するアイコンの探し方」を参照してください。
• エレメントの詳細は、「ローコード操作マニュアル - IM-BloomMakerのエレメント > 汎用表示・制御部品」の「アイコン」を参照してください。

Step 3. 列見出しを複製する

操作手順

1. エレメントの配置先を選択します。

• 編集エリア：左から2列目の［テーブルヘッダセル］を選択

2. テーブルヘッダセル内に、列見出しを構成する枠を配置します。

• パレット：［レイアウト］→［フレックスコンテナ］をダブルクリック

3. フレックスコンテナ内の要素を1つに設定します。

• エレメント固有：「elementCount」で［1］を選択

4. 列見出しを配置するエレメントを選択します。

• 編集エリア：［フレックスアイテム］を選択

5. フレックスアイテム内に列見出しを配置します。

• パレット：［汎用］→［ラベル］をダブルクリック

6. コピーしたいエレメントを選択します。

• 編集エリア：［フレックスコンテナ］を選択

7. エレメントをコピーします。

• ツールバー：［ ］をクリック

8. 貼り付けたいエレメントの位置を選択します。

• 編集エリア：左から3列目の［テーブルヘッダセル］を選択

9. エレメントを貼り付けます。

• ツールバー：［ ］をクリック

10. 貼り付けたいエレメントの位置を選択します。

• 編集エリア：左から4列目の［テーブルヘッダセル］を選択

11. エレメントを貼り付けます。

• ツールバー：［ ］をクリック

参考

エレメントのコピー・貼り付けは、ショートカットキーを利用することも可能です。詳細は「ローコード操作マニュアル - 画面レイアウトとデザイン調整 > エレメントの切り取り・コピー・貼り付けを行う」を参照してください。

メモ

ソートしない列は、ラベルだけを配置しても問題ありません。ただし、列見出しをすべてフレックスコンテナで構成しておくと、後からソートアイコンやフィルターアイコンなどを追加する場合でも、レイアウトを変更することなく対応できます。

12. 列見出しのテキストをそれぞれ入力します。

• 編集エリア：［ラベル］を選択
• エレメント固有：以下のテキストを入力
  • textContent：資産名
  • textContent：所有組織
  • textContent：所有者

13. データを表示するため、テーブルセルを選択します。

• 編集エリア：左側にある［テーブルセル］を選択

14. テーブルセルを選択した状態で、ラベルを配置します。

• パレット：［汎用］→［ラベル］をダブルクリック

15. エレメントをコピーします。

• 編集エリア：［ラベル］を選択
• ツールバー：［ ］をクリック

16. 貼り付けたいエレメントの位置を選択し、貼り付けます。

• 編集エリア：左から2～4列目の［テーブルセル］を選択
• ツールバー：［ ］をクリック

メモ

この時点では、管理画面で利用する変数をまだ設定していないため、列見出しのテキストやテーブルセルの値は「固有値」を設定しています。後の手順で変数や多言語変数をそれぞれ設定した後、「変数値」に変更します。

プレビューで確認する

ここまで設定した内容を確認するため、プレビューを表示します。画面レイアウトやエレメントの配置が意図した通りに表示されていることを確認します。

操作手順

1. ［ ］をクリックします。
   └ プレビュー画面が別タブまたは別ウィンドウに表示されます。

参考

プレビュー画面を表示したまま画面デザインを変更した場合、変更内容がプレビューに反映されないことや、意図しない動作が発生することがあります。プレビュー利用時の注意事項については、「ローコード操作マニュアル - 画面のプレビューとデバッグ」を参照してください。

エレメントのデザインを調整する

プレビューで表示結果を確認した後、必要に応じて「エレメント固有」の設定で余白やボタンの大きさを調整します。画面全体のバランスを確認しながら、見やすいレイアウトに整えます。

Step 1. エレメントの余白を調整する

操作手順

各エレメントの余白を調整し、ユーザが見やすい画面レイアウトにします。

1. タイトルと検索フォームの余白を調整します。

• 編集エリア：検索フォームの［フレックスアイテム］を選択
• 余白：「外余白（上）」に「1.5em」と入力

2. 検索フォームと一覧の余白を調整します。

• 編集エリア：一覧の［フレックスアイテム］を選択
• 余白：「外余白（上）」に「2em」と入力

Step 2. アイコンとタイトルを調整する

操作手順

アイコンとタイトルの間に余白を設けることで、要素同士が重なって見えないようにし、見やすいレイアウトにします。

1. アイコンとタイトルの余白を調整します。

• 編集エリア：タイトルの［フレックスアイテム］を選択
• 余白：「外余白（左）」に「1em」と入力

Step 3. 検索フォームとボタンを調整する

操作手順

検索フォームとボタンを固定幅で表示することで、必要以上に横幅が広がることを防ぎ、入力しやすいレイアウトにします。

1. 検索フォームの幅を固定します。

• 編集エリア：［テキスト入力要素］を選択
• 幅・高さ：「横幅」に「350px」と入力

2. 検索ボタンの幅を固定します。

• 編集エリア：［ボタン要素］を選択
• 幅・高さ：「横幅」に「90px」と入力

Step 4. 件数表示を調整する

操作手順

件数と件表示（文言）の間に余白を設けることで、要素を見やすく配置します。また、件数は文字サイズを大きくし、一目で確認できるようにします。

1. 件数の文字サイズと太さを設定します。

• 編集エリア：［ラベル］を選択
• フォント：以下の設定および数値と単位を入力
  • 太さ：bold
  • サイズ：1.5em

2. 件表示（文言）の余白を調整します。

• 編集エリア：［ラベル］を選択
• 余白：以下の数値と単位を入力
  • 外余白（上）：0.5em
  • 外余白（左）：0.25em

Step 5. ソートの位置を調整する

操作手順

ソートアイコンの位置を調整することで、列見出しとのバランスを整えます。

1. 列見出しとソートアイコンの余白を調整します。

• 編集エリア：昇順・降順ソートアイコンを配置している［フレックスアイテム］を選択
• 余白：「外余白（左）」に「1em」と入力

2. 昇順と降順のソートアイコンの縦幅をそれぞれ固定します。

• 編集エリア：昇順・降順ソートアイコンをそれぞれ囲む［フレックスアイテム］を選択
• 幅・高さ：「縦幅」に「5px」と入力

コラム

最後に［ ］をクリックして、画面デザインやエレメントの配置をプレビューで確認します。意図した通りに表示されていることを確認したら、［ ］をクリックしてコンテンツを上書き保存します。詳細は「ローコード操作マニュアル - 新規コンテンツ定義の保存 > 画面コンテンツを保存する」を参照してください。

こんなときは

操作中に不明な点や問題が発生した場合は、以下の項目から該当する内容を選択してください。

• Q. コンテンツIDを変更したい
• Q. コンテンツ種別を変更したい
• Q. コンテンツを削除したい
• Q. エレメントの操作を元に戻したい

• Q. エレメントが選択した位置に入らない
• Q. サイズ指定で使用できる単位について知りたい

管理画面を作成した後は、画面で利用する値を設定します。登録画面とは設定する変数が一部異なるため、変数、定数、多言語変数、環境情報変数の役割を確認しながら、それぞれ設定していきましょう。