入力フォーム画面の説明要素の構成

  • リリースバージョン: Yokohama
  • 更新日 2025年03月05日
  • 所要時間：5分

    • 入力フォーム画面内の入力フィールドの前に、シンプルなテキスト、リッチテキスト、画像などの説明要素を追加します。この追加の画面上の情報は、ユーザーにコンテキストを提供し、ユーザーが入力フォームにデータを入力するときに何が必要かをよりよく理解できるようにします。

    始める前に

    必要なロール：admin

    このタスクについて

    入力フィールド、入力フィールドを含むセクション、または入力のない入力フォームセクションに、説明要素を追加できます。説明要素には、シンプルなテキスト、リッチテキスト、または入力の前に配置された画像の選択を指定できます。

    説明要素を構成するには、次の要素を構成する必要があります。
    • 少なくとも 1 つの要素識別子を含むデータソース。データソースは、説明要素を入力フォーム画面にマッピングしやすくなります。詳細については、「データソース」を参照してください。
    • 入力セクションまたは入力フォームセクションのいずれかにすることができるレコードセクション:
      • 入力フォームセクションは、入力フォーム画面で定義された領域にある入力のグループであり、通常は定義されたヘッダーがあります。
      • 入力は、ユーザーが入力フォーム画面で入力するための個々のフィールドです。入力は、セクション内またはセクションから独立して配置できます。
    注:
    各入力または各入力フォームセクションには、複数の説明要素が存在する場合があります。ただし、すべての入力の説明要素ごとに個別のレコードを作成する必要があります。
    説明要素を作成するときは、次のステージが必要です。 まず、説明要素とは何か、何に関連しているのかを宣言します。次に、説明要素が入力セクションまたは入力フォームセクションに関連付けられているかどうかを判断します。次に、選択した説明要素のタイプごとに属性を作成します。最後に、説明要素を入力フォーム画面の UI 要素にマップします。
    入力フォーム画面の画像とリッチテキストの説明要素 入力フォーム画面の画像とプレーンテキストの説明要素
    入力フォーム画面の画像とリッチテキストの説明要素。 入力フォーム画面の画像とプレーンテキストの説明要素。

    手順

    1. 次のように移動する。 All (すべて) > システムモバイル > Mobile App Builder (モバイルアプリビルダー).
      モバイルアプリビルダー が新しいブラウザータブで開き、アプリケーションスコープ選択画面が表示されます。
    2. 作業しているアプリケーションスコープを検索し、アプリケーションスコープの名前を選択します。
      モバイルアプリビルダー カテゴリのホーム画面が表示されます。
    3. メニューから [すべてのモバイルレコード ] を選択します。
    4. レコードの種類 フィールドから、説明要素 [sys_sg_descriptive_element] を選択し、新規 を選択します。
    5. 必要に応じて次のフィールドに入力します。
      フィールド 値
      プロパティ
      [Name (名前)] 説明要素の一意の名前。
      ラベル 説明要素の上に表示されるラベル。
      設定
      説明要素タイプ 次の 3 つの説明要素を使用できます。
      • リッチテキスト:太字、下線、斜体、箇条書き、番号付きリスト、フォントの色などの HTML タグをサポートします。
      • テキスト:リッチテキスト要素を含まないプレーンテキスト。
      • 画像:説明要素に付随する 1 つの画像。
      注:
      [ 説明要素の属性 ] フィールドで使用できる属性は、選択した説明要素によって異なります。
      順序 この説明要素が入力前に表示される順番。
      説明要素の配置
      親テーブル 指定された領域内に説明要素を配置するオプション。次のオプションが使用可能です。
      • 入力:説明要素は入力の前にあります。
      • 入力フォームセクション:説明要素は特定のセクション内に存在します。
      注:
      通常、説明要素はセクションの上部に配置されます。ただし、入力を表示せずにセクション内に説明要素を含めるオプションもあります。
      この表示を実行するには:
      1. Web ベースの UI を開きます。
      2. 次のように移動する。 All (すべて) > sys_sg_section_attribute.
      3. 「New」を選択します
      4. [ 名前 ] フィールドに、属性名 HideIfDescriptiveOnly を追加し、値を false にします。この設定は、そのセクションに入力がない場合でも説明要素が表示されることを示します。
      親レコード 親テーブルが関連する入力または入力フォームセクション。
      説明要素の属性 属性を使用して、モバイルデバイスでの説明要素の表示方法を決定します。[ 新規 ] を選択して属性を追加します。次の属性は、すべての説明要素タイプ (リッチテキスト、テキスト、および画像) で使用できます。
      • DataSourceId: 操作しているデータソースの一意の識別子
      • ElementIdentifier: 各 UI 要素の一意の識別子。
        注:
        この識別子は、データソーススクリプトで valuesMapper.addRecordMapping としてリストされます
      • MergeWithNextUIElement:説明要素は入力フォーム画面にこのように表示されます。true としてマークすると、入力または入力セクションの間にギャップが作成されます。
        次のデフォルト値が存在します。
        • 入力タイプの親テーブルの値は false です。
        • 入力フォームセクションのタイプの親テーブルの値は true です。
      注:
      説明要素には、属性 DataSourceId と ElementIdentifier の値が含まれている必要があります。
      次の属性は、説明要素タイプの画像にも使用できます。
      • AlternativeText:ユーザーに読み上げる代替テキストを入力する機能。
      • MediaHeight: 画像の高さ。デフォルト値は 210 ピクセルです。
      • 拡大/縮小: [合わせ] を選択すると、フレームが画像に収まり、縦横比が維持されます。[ 塗りつぶし] を選択すると、フレーム全体が画像がトリミングされます。これがデフォルト値です。
    6. [説明要素の属性] フィールドで、[ 新規 ] を選択し、次の操作を行います。
      1. [名前] フィールドで [DataSouceId] を選択します。
      2. [ 値 ] フィールドで、データソーススクリプトにリストされている値を選択します。
      3. [Save (保存)] をクリックする。
      4. [名前] フィールドで [ElementIdentifier] を選択します。
      5. データソーススクリプトに記述されている要素識別子を入力します。
      6. [Save (保存)] をクリックする。
      注:
      データソースに使用できる値と要素識別子の詳細については、データソーススクリプトを参照してください。この説明要素に使用する要素識別子へのマッピングが含まれているデータソースを選択します。
    7. オプション: 作業している説明要素に関連する他の説明要素属性を選択します。
    8. [Save (保存)] をクリックする。