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

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

始める前に

必要なロール：admin

注:

画像、テキスト、およびリッチテキストの説明要素は モバイルアプリビルダーで構成され、カードの説明要素は ServiceNow AI Platformで構成されます。カードの説明要素の構成については、「 入力フォーム画面のカード説明要素の構成」を参照してください。

このタスクについて

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

説明要素を作成する前に、次の要素を設定する必要があります。

• 少なくとも 1 つの要素識別子を含むデータソース。データソースは、説明要素を入力フォーム画面にマッピングしやすくなります。詳細については、「データソース」を参照してください。
• 入力セクションまたは入力フォームセクションのいずれかにすることができるレコードセクション:
  • 入力フォームセクションは、入力フォーム画面で定義された領域にある入力のグループであり、通常は定義されたヘッダーがあります。
  • 入力は、入力フォーム画面内でユーザーが入力する個々のフィールドです。入力は、セクション内またはセクションから独立して配置できます。

注:

各入力または各入力フォームセクションには、複数の説明要素が存在する場合があります。ただし、すべての入力の説明要素ごとに個別のレコードを作成する必要があります。

説明要素を作成するときは、次のステージが必要です。 まず、説明要素とは何か、何に関連しているのかを宣言します。次に、説明要素が入力セクションまたは入力フォームセクションに関連付けられているかどうかを判断します。次に、選択した説明要素のタイプごとに属性を作成します。最後に、説明要素を入力フォーム画面の UI 要素にマップします。

入力フォーム画面の画像とリッチテキストの説明要素	入力フォーム画面の画像とプレーンテキストの説明要素

手順

1. 移動先 すべて > システムモバイル > モバイルアプリビルダー.
   モバイルアプリビルダー が新しいブラウザータブで開き、アプリケーションスコープ選択画面が表示されます。
2. 作業しているアプリケーションスコープを検索し、アプリケーションスコープの名前を選択します。
   モバイルアプリビルダー カテゴリのホーム画面が表示されます。
3. メニューから [すべてのモバイルレコード ] を選択します。
4. レコードの種類 フィールドから、説明要素 [sys_sg_descriptive_element] を選択し、新規 を選択します。
5. 必要に応じて次のフィールドに入力します。

   フィールド	値
   プロパティ
   名前	説明要素の一意の名前。
   ラベル	説明要素の上に表示されるラベル。
   設定
   説明要素タイプ	この モバイルアプリビルダー 構成では、次の 3 つの説明要素を使用できます。 注: カードの説明要素は、 ServiceNow AI Platformで構成されます。カードの説明要素の構成については、「 入力フォーム画面のカード説明要素の構成」を参照してください。 リッチテキスト:太字、下線、斜体、箇条書き、番号付きリスト、フォントの色などの HTML タグをサポートします。 テキスト:リッチテキスト要素を含まないプレーンテキスト。 画像:説明要素に付随する 1 つの画像。 注: [ 説明要素の属性 ] フィールドで使用できる属性は、選択した説明要素によって異なります。
   順序	この説明要素が入力前に表示される順番。
   説明要素の配置
   親テーブル	指定された領域内に説明要素を配置するオプション。次のオプションが使用可能です。 入力:説明要素は入力の前にあります。 入力フォームセクション:説明要素は特定のセクション内に存在します。 注: 通常、説明要素はセクションの上部に配置されます。ただし、入力を表示せずにセクション内に説明要素を含めるオプションもあります。構成手順については、ステップ 8 を参照してください。
   親レコード	親テーブルが関連する入力または入力フォームセクション。
   説明要素の属性	属性を使用して、モバイルデバイスでの説明要素の表示方法を決定します。[ 新規 ] を選択して属性を追加します。次の属性は、すべての説明要素タイプ (リッチテキスト、テキスト、および画像) で使用できます。 DataSourceId 操作しているデータソースの一意の識別子。この属性は、説明要素に使用する必要があります。 ElementIdentifier 各 UI 要素の一意の識別子。この属性は、説明要素に使用する必要があります。 注: この識別子は、データソーススクリプトで valuesMapper.addRecordMapping としてリストされます MergeWithNextUIElement 説明要素は入力フォーム画面にこのように表示されます。true としてマークすると、入力または入力セクションの間にギャップが作成されます。 注: 次のデフォルト値が存在します。 入力タイプの親テーブルの値は false です。 入力フォームセクションのタイプの親テーブルの値は true です。 次の属性は、説明要素タイプの画像にも使用できます。 AlternativeText ユーザーに読み上げる代替テキストを入力する機能。 MediaHeight 画像の高さ。デフォルト値は 210 ピクセルです。 スケーリング [ フィット] を選択すると、フレームが画像にフィットし、縦横比が維持されます。[ 塗りつぶし] を選択すると、フレーム全体が画像がトリミングされます。これがデフォルト値です。

6. 説明要素の [名前 ] を入力します。
7. 入力値の前に表示する 説明要素のタイプ (リッチテキスト、テキスト、または画像のいずれか) を選択します。
8. [ 親テーブル] フィールドで、説明要素を入力の前に表示するか、セクションの上部に表示するかを選択します。
   注:

   通常、説明要素はセクションの上部に配置されます。ただし、入力を表示せずにセクション内に説明要素を含めるオプションもあります。このレイアウトを適用するには、次の構成を適用する必要があります。

   1. Web ベースの UI を開きます。
   2. 移動先 すべて > sys_sg_section_attribute.list.
   3. [New (新規)] を選択します。
   4. [ 名前 ] フィールドに、属性名 HideIfDescriptiveOnly を追加し、値を false にします。この設定は、そのセクションに入力がない場合でも説明要素が表示されることを示します。
   5. [選択] フィールドで、この属性を適用する入力フォームのセクションを選択します。
   6. [Submit (送信)] を選択します。
9. [ 親レコード ] フィールドで、親テーブルが関連する入力または入力フォームセクションを選択します。
10. [ 説明要素の属性 ] フィールドで、[ 新規 ] を選択し、次の操作を行います。
    1. [名前] フィールドで [DataSourceID] を選択します。
    2. [ 値 ] フィールドで、データソーススクリプトにリストされている値を選択します。
    3. [Save (保存)] を選択します。
    4. [名前] フィールドで [ElementIdentifier] を選択します。
    5. データソーススクリプトに記述されている要素識別子を入力します。
    6. [Save (保存)] を選択します。

    注:

    データソースに使用できる値と要素識別子の詳細については、データソーススクリプトを参照してください。この説明要素に使用する要素識別子へのマッピングが含まれているデータソースを選択します。
11. オプション: 作業している説明要素に関連する他の説明要素属性を選択します。
12. [Save (保存)] を選択します。