ホームページの ワークスペースビルダー コンポーネント

  • リリースバージョン: Xanadu
  • 更新日 2024年08月01日
  • 所要時間:7分
  • いくつかの UI ビルダー コンポーネントを、ワークスペースビルダー でホームページとコンテキストサイドパネルをビルドする要素として使用できます。ワークスペースビルダー を使用すると App Engine Studio (AES) で素早くワークスペースを作成できます。

    すべての要素とコンポーネントの詳細については、 ServiceNow® 開発者サイト.

    データビジュアル化コンポーネント

    データ可視化コンポーネントは、ワークスペースビルダー ホームページで利用可能なチャートタイプのコンテナです。アプリケーションに応じてさまざまな方法でデータを表示するチャートタイプを選択します。

    サンプルデータの可視化要素

    フィルターコンポーネント

    フィルターを使用すると、ビジュアル化を変更せずにデータのビジュアル化をフィルタリングできます。キャンバスでホームページを操作するときに、フィルター要素を追加します。次に、テーブル、フィールド、およびその他のプロパティを選択してフィルターを構成します。ユーザーがフィールドの値を 1 つ以上選択すると、同じデータソースに基づくデータビジュアル化にフィルターが適用されます。

    フィルターコンポーネントを使用してワークスペースをビルドする方法の詳細については、次のトピックとソースを参照してください。

    見出しコンポーネント

    見出しコンポーネントは、ワークスペースのホームページで使用できます。 見出しコンポーネントを使用してランディングページにタイトルを追加します。

    次の画像は、ランディングページのタイトルとして「自分の見出し (My Heading)」という見出しを示しています。

    次の表で、見出しコンポーネントのパラメーターについて説明します。
    表 : 1. 見出しコンポーネントのパラメーター
    パラメーター 説明
    コンポーネント名 [ステージ] ペインのコンポーネントの上にあるコンポーネントコントロールに表示される名前最大文字数は 18 です。コンポーネント名。
    ラベル 見出しのテキスト。
    スタイル 見出しテキストのサイズ。
    テキストの折り返しを無効化 見出しテキストを折り返すかどうかを切り替えます。見出しテキストを折り返さないように設定し、見出しがランディングページよりも広い場合、UI ビルダー は見出しの末尾を切り捨てて省略記号を追加します。ユーザーがランディングページを広げると、省略されていた見出しテキストが表示されます。

    長いページタイトルは切り捨てられます

    下のマージンを非表示 見出しテキストの下の空白行の表示と非表示を切り替えます。
    見出しコンポーネントの詳細については、次のトピックとソースを参照してください。

    画像コンポーネント

    画像コンポーネントを使用してランディングページに画像を追加します。

    [画像コンポーネント] アイコン (画像コンポーネント) をプレビューペインにドラッグすると、変更やサイズ変更が可能なストック画像が表示されます。画像の URL を指定することで、ストック画像を変更できます。

    次の表で、画像コンポーネントのパラメーターについて説明します。
    表 : 2. 画像コンポーネントのパラメーター
    パラメーター 説明
    コンポーネント名 [ステージ] ペインのコンポーネントの上にあるコンポーネントコントロールに表示される名前最大文字数は 18 です。コンポーネント名。
    代替テキスト WCAG に準拠するように画像にラベルを付ける HTML 代替要素。
    画像 URL 画像の URL。
    枠幅に合わせる (Fit) 画像サイズコントロール。
    • [均等割り付け] は、X 軸と Y 軸の両方に比例して画像を拡大または縮小し、画像がコンテナ全体に表示されるようにします。
    • [拡大して合わせる] を選択すると、コンテナ全体に画像が拡大されますが、画像の比例拡大は行われません。
    • [元のサイズを維持] では、画像が元のサイズで表示されます。このサイズは、コンテナよりも大きい場合も小さい場合もあります。
    ポジション コンテナ内の画像の場所。たとえば、[右下] はコンテナの右下に画像を配置します。このパラメーターは、画像がコンテナよりも小さい場合にのみ機能します。
    高さ 高さのピクセル数で測定される画像の高さ。この高さが画像の高さよりも短い場合、パラメーターは画像の上部を切り取ります。幅は比例縮小されません。

    画像コンポーネントの詳細については、「」を参照してください。

    リストコンポーネント

    リストコンポーネントを使用して、ランディングページにリストを追加します。

    [リストコンポーネント] アイコン (リストコンポーネント) をプレビューペインにドラッグすると、サンプルリストが表示されます。

    次の表で、リストコンポーネントのパラメーターについて説明します。リストコンポーネントのパラメーター値の場所については、前掲の画像を使用してください。
    表 : 3. リストコンポーネントのパラメーター
    パラメーター 説明
    コンポーネント名 [ステージ] ペインのコンポーネントの上にあるコンポーネントコントロールに表示される名前最大文字数は 18 です。コンポーネント名。
    リストのタイトル リストのタイトル。
    テーブル リストに表示されるレコードの取得元であるデータベーステーブル。
    クエリ 条件ビルダーを開くために使用するボタン。これにより、リストに含まれるレコードをフィルタリングできます。たとえば、[アクティブ][は次の値に等しい][True][優先度が 1 – 重大] の条件を満たす [テーブル] のレコードのみを表示できます。バッジとカウントアイコン (クエリバッジ) は、適用されたフィルターの数を示します。バッジがない場合、フィルターはありません。
    デフォルトの列の代わりにリストに表示するように指定した列の数。複数の列を表示するには、パラメーターを複数回使用します。
    最大行数 リストに表示するように指定する行の最大数。デフォルトは 5 です。最大値は 100 です。
    最大列数 リストに表示するように指定する列の最大数。デフォルトは 5 です。列数がこのパラメーターの値より大きい場合は、最初の列のみが表示されます。
    ヘッダーを非表示 リストのヘッダーを表示または非表示に切り替えます。
    タイトルを非表示 リストのタイトルを表示または非表示に切り替えます。
    レコード数でバッジを非表示 リストのバッジとレコード数の表示と非表示を切り替えます。数値は、リスト内のレコードの合計数です。現在の表示には一部のレコードのみが表示されます。
    リフレッシュボタンを非表示 リフレッシュボタンの表示と非表示を切り替えます。
    「前回のリフレッシュ」テキストを非表示 「前回のリフレッシュ」テキストの表示と非表示を切り替えます。
    リンクを非表示 [番号] 列の値をリンクするかどうかを切り替えます。リンクでない場合、番号のテキストは黒です。次の画像で、黒色の数字はリンクではありません。緑色の数字はリンクです。

    列内の番号はリンクではありません

    [すべて表示] フッターを非表示 フッターの [すべて表示] リンクの表示と非表示を切り替えます。
    ハイライト表示された値を非表示 指定されたリストフィールドに表示されるように構成されたハイライトの表示と非表示を切り替えます。詳細については、「Highlight list fields in Workspace (ワークスペースのリストフィールドの強調表示)」を参照してください。
    空ステータスの画像を非表示 フィルター条件によってリストにレコードが表示されない場合に表示される画像の表示と非表示を切り替えます。意図は、リストが空であることをエージェントが認識できるように応答を表示することです。画像を変更することはできません。表示するレコードはありません

    リストコンポーネントの詳細については、「」を参照してください。

    リッチテキストコンポーネント

    ランディングページの一部を説明するリッチテキストコンポーネントを使用してランディングページに追加します (たとえば、「これらの優先度 1 のインシデントに対処してください」)。

    次の表で、リッチテキストコンポーネントのパラメーターについて説明します。
    表 : 4. リッチテキストパラメーター
    パラメーター 説明
    コンポーネント名 [ステージ] ペインのコンポーネントの上にあるコンポーネントコントロールに表示される名前最大文字数は 18 です。コンポーネント名。
    HTML テキストの入力に使用する HTML エディター。

    HTML エディター

    リッチテキストコンポーネントの詳細については、「」を参照してください。