コンポーネントの追加と構成
UI ビルダー でページにコンポーネントを追加する方法を学習します。ページはコンポーネントを追加することでビルドされます。
始める前に
必要なロール：ui_builder_admin
このタスクについて
コンポーネントは、UI ビルダー でカスタムページを作成するために使用される構成要素です。 コンポーネントをページに追加する方法を学習します。ページにコンポーネントを追加した後、コンポーネントを構成する必要があります。コンポーネントの構成の詳細については、ServiceNow 開発者サイトで「コンポーネントドキュメント」を参照してください。
手順
-
コンポーネントをページに追加します。
UI ビルダー には、選択可能なコンポーネントのライブラリが付属しています。コンポーネントはページの構成要素として追加します。たとえば、見出しやデータ表示方法などを追加できます。次の表は、コンポーネントをページに追加するさまざまな方法を示しています。
コンポーネントの追加元 必要な操作 ページから直接 ページで [+] を選択し、ツールボックスからコンポーネントを選択します。コンポーネントを検索したり、リストをスクロールしたりできます。 ページ上のフローティングメニュー コンポーネントの上にあるフローティングメニューを選択します。 - [前に追加] または [後ろに追加] を選択します。
- ツールボックスからコンポーネントを選択します。
コンテンツツリー 次の 2 とおりの方法でコンテンツツリーからコンポーネントを追加できます。 - コンテンツツリーのコンテナの下にある [+ コンテンツを追加] を選択します。次に、ツールボックスからコンポーネントを選択します。
- コンテンツツリーのコンテナ上にマウスデバイスを移動し、メニューアイコンを選択して、[コンポーネントを追加] を選択します。次に、ツールボックスからコンポーネントを選択します。
-
追加したコンポーネントのプロパティを構成します。
コンポーネントを構成することは、ニーズに合わせてそれらをカスタマイズすることを意味します。コンポーネントの構成の詳細については、次を参照してください。 ネクストエクスペリエンス コンポーネント.
-
構成可能な JSON プロパティがあるコンポーネントの場合は、UI ビルダー のローコード JSON エディターを使用すれば、JSON コードを編集せずにコンポーネントのプロパティを編集できます。
JSON エディターの UI には、ダミーデータや定義済みの値で定義されていないプロパティも含め、使用可能なすべてのプロパティが表示されます。JSON エディター内でプロパティを更新するか、または独自のカスタムプロパティを追加できます。コンポーネントの構成の詳細については、「Now コードエディターでコードを編集する (高度な機能)」を参照してください。
注:ローコード JSON エディターは、スキーマを持ちかつ JSON 入力がそのスキーマと一致するプロパティでのみ使用できます。ローコード JSON エディターは、単純なオブジェクト、単純なアレイプロパティ、複雑なアレイ、オブジェクトのアレイをサポートし、複雑なオブジェクトも部分的にサポートします。複雑なアレイでは、アレイアイテムの位置を追加、削除、または移動できます。[未設定のアイテムを非表示] を選択して、値が空または null のオブジェクトを非表示にして、編集エクスペリエンスを簡素化することもできます。
-
コンテナコンポーネントを操作するときは、フローティングパネルを使用して一部のスタイルを編集できます。
メニューアイコンを選択してメニューを表示します。
[レイアウト]、[サイジング]、または [スペース] オプションを選択して、最も一般的なオプションが表示されたフローティングパネルを開きます。必要に応じて、フローティングパネルを別の場所にドラッグします。一度に開くことができるフローティングパネルは 1 つだけです。
コンポーネントの構成の詳細については、次を参照してください。 ネクストエクスペリエンス コンポーネント. -
構成可能な JSON プロパティがあるコンポーネントの場合は、UI ビルダー のローコード JSON エディターを使用すれば、JSON コードを編集せずにコンポーネントのプロパティを編集できます。
- オプション:
ページのコンポーネントの上部または下部にある [+] を選択して、ページにコンポーネントを追加します ([+] が [+ 追加] に変化します)。
- コンポーネントの上部にある [+] を選択して既存のコンポーネントの前にコンポーネントを追加するか、コンポーネントの下部にある [+] を選択してコンポーネントをその後に挿入します。
- コンポーネントをコンポーネントリストからドラッグして、既存のコンポーネントの前または後に挿入します。
次のタスク
ページにコンポーネントを追加して構成しました。詳細については、「UI ビルダーページでデータを動的に公開する (高度な機能)」を参照してください。UI ビルダー 内のデータリソースは、コンポーネントにコンテンツを表示するためにページがフェッチするデータです。コンポーネントは、さまざまなエクスペリエンス間でデータと構成を再利用し、コンポーネントをページ上で動的なものにする方法としてデータリソースを使用します。
UI ビルダー コンポーネント式エディターでサポートされている関数
UI ビルダー コンポーネント式エディターでサポートされているさまざまな関数について学習します。
次の表は、 UI ビルダー コンポーネント式エディターで使用できる関数を一覧表示しています。コンポーネント式エディターの詳細については、「コンポーネントを使用した UI ビルダー ページのカスタマイズ」を参照してください。
| 演算子ラベル | 条件の例 | 同等のクエリ演算子 | サンプルクエリ | 出力例 |
|---|---|---|---|---|
| 空であるものすべて (All empty) | [Short description][ALL_EMPTY] | ALL_EMPTY | short_descriptionALL_EMPTY | [Short description] フィールドに値がないすべてのレコード。 |
| 次の値に等しいすべて (All equal) | [Short description][ALL_EQ][Network storage unavailable] | ALL_EQ | short_description=network storage unavailable | [Short description] フィールドの値が「Network storage is unavailable」と等しいすべてのレコード。 |
| 次の値より大きいすべて (All greater than) | [Impact][ALL_GT][2 - Medium] | > | impact>2 | [Impact] フィールドの値が [3 - Low] であるすべてのレコード |
| 次の値以上のすべて (All greater than or equal) | [Impact][ALL_GTE][2 - Medium] | >= | impact>=2 | [Impact] フィールドの値が [2 - Medium] または [3 - Low] であるすべてのレコード |
| 次の値未満のすべて (All less than) | [Reassignment count][ALL_LT][2] | < | reassignment_count <2 | [Reassignment count] フィールドの値が 2 未満のすべてのレコード。 |
| 次の値以下のすべて (All less than or equal) | [Reassignment count][ALL_LTE][2] | <= | reassignment_count<=2 | [Reassignment count] フィールドの値が次のいずれかであるすべてのレコード。
|
| 次の値と等しくないすべて (All not equal to) | [Impact][ALL_NEQ][1 - High] | != | impact!=1 | [Impact] フィールドの値が [1 - High] 以外のすべてのレコード。 |
| 空でないものすべて (All not empty) | [Impact][ALL_NOTEMPTY] | ALL_NOTEMPTY | impactALL_NOTEMPTY | [Impact] フィールドに何らかの値があるすべてのレコード。 |
| 次のいずれでもないすべて (All not one of) | [Impact][ALL_NOTONEOF][1 - High, 2 - Medium] | ALL_NOTONEOF | impactALL_NOTONEOF1,2 | [Impact] フィールドに次の値以外の値が入力されているすべてのレコード。
|
| 次のいずれかであるすべて (All one of) | [Impact][ALL_ONEOF][1 - High, 2 - Medium] | ALL_ONEOF | impactALL_ONEOF1,2 | [Impact] フィールドに次のいずれかの値が入力されているすべてのレコード。
|
| 空であるもののいずれか (Any empty) | [Short description][ANY_EMPTY] | ANY_EMPTY | short_descriptionANY_EMPTY | [Short description] フィールドに値がないいずれかのレコード。 |
| 次の値に等しいいずれか (Any equal) | [Short description][ANY_EQ][Network storage unavailable] | ANY_EQ | short_description=network storage unavailable | [Short description] フィールドの値が「Network storage is unavailable」と等しいいずれかのレコード。 |
| 次の値より大きいいずれか (Any greater than) | [Impact][ANY_GT][2 - Medium] | ANY_GT | impactANY_GT2 | [Impact] フィールドの値が [3 - Low] であるいずれかのレコード。 |
| 次の値以上のいずれか (Any greater than or equal) | [Impact][ANY_GTE][2 - Medium] | ANY_GTE | impactANY_GTE2 | [Impact] フィールドの値が [2 - Medium] または [3 - Low] であるいずれかのレコード。 |
| 次の値未満であるいずれか (Any less than) | [Reassignment count][ANY_LT][2] | ANY_LT | reassignment_countANY_LT2 | [Reassignment count] フィールドの値が 2 未満のいずれかのレコード。 |
| 次の値以下であるいずれか (Any less than or equal) | [Reassignment count][ANY_LTE][2] | ANY_LTE | reassignment_countANY_LTE2 | [Reassignment count] フィールドの値が次のいずれかであるいずれかのレコード。
|
| 次の値に等しくないいずれか (Any not equal) | [Impact][ANY_NEQ][1 - High] | ANY_NEQ | impactANY_NEQ1 | [Impact] フィールドの値が [1 - High] 以外のいずれかのレコード。 |
| 空でないもののいずれか (Any not empty) | [Impact][ANY_NOTEMPTY] | ANY_NOTEMPTY | impactANY_NOTEMPTY | [Impact] フィールドに何らかの値があるいずれかのレコード。 |
| 次のいずれでもないいずれか (Any not one of) | [Impact][ANY_NOTONEOF][1 - High, 2 - Medium] | ANY_NOTONEOF | impactANY_NOTONEOF1,2 | [Impact] フィールドに次の値以外の値が入力されているいずれかのレコード。
|
| 次のいずれか (Any one of) | [Impact][ANY_ONEOF][1 - High, 2 - Medium] | ANY_ONEOF | impactANY_ONEOF1,2 | [Impact] フィールドに次のいずれかの値が入力されているいずれかのレコード。
|
| CONCAT | CONCAT(value) | CONCAT | CONCAT("Welcome, ",@context.session.user.firstName) | 指定されたすべての文字列を 1 つに結合した新しい文字列を作成します |
| EMPTY | EMPTY(value) | EMPTY | EMPTY(@context.session.user.roles) | 値が null または未定義の場合は true を返します |
| IF | IF(if, then, else) | IF | IF(@context.props.bare,"bare page","not bare page") | 条件が true の場合、値 then を返します。条件が false の場合、値 else を返します。 |
| LEN | LEN(list) | LEN | LEN([1,2,3]) | アレイ内のアイテムの数を返します |
| Pick | PICK(array, field) | Pick | PICK(@context.session.user.preferences,"name") | アレイ内の各アイテムのフィールドから各アイテムが選択された新しいアレイを作成します。フィールドが存在しない場合、新しいアレイのアイテムは空になります |
| Range | RANGE(from, to) | 範囲 | RANGE(1,10) | from から to までの、段階的に増分される数値のアレイを作成します |
| 合計 | SUM(array) | 合計 | SUM([1,2,3]) | 0 から開始し、アレイ内の各アイテムの数値を加算して、結果の合計を返します |
| Translate | TRANSLATE(text) | 翻訳 | TRANSLATE("Welcome back") | 2 番目の引数で指定された文字が 3 番目の引数で指定された文字に変換された後、最初の引数の文字列を返します。 |
| 空の場合 (Where empty) | [Short description][WHERE_EMPTY] | WHERE_EMPTY | short_descriptionWHERE_EMPTY | [Short description] フィールドに値がないレコードを抽出します。 |
| 等しい場合 (Where equal) | [Short description][WHERE_EQ][Network storage unavailable] | WHERE_EQ | short_descriptionWHERE_EQnetwork storage unavailable | [簡単な説明] フィールドが「Network storage is unavailable」と等しいすべてのレコードを抽出します。 |
| 次の値より大きい (Where greater than) | [Impact][WHERE_GT][2 - Medium] | WHERE_GT | impactWHERE_GT2 | [Impact] フィールドの値が [3 - Low] であるレコードを抽出します。 |
| 次の値以上である (Where greater than or equal) | [Impact][WHERE_GTE][2 - Medium] | WHERE_GTE | impactWHERE_GTE2 | [Impact] フィールドの値が [2 - Medium] または [2 - Low] であるレコードを抽出します。 |
| 次の値未満である (Where less than) | [Reassignment count][WHERE_LT][2] | WHERE_LT | reassignment_countWHERE_LT2 | [Reassignment count] フィールドの値が 2 未満のレコードを抽出します。 |
| 次の値以下である (Where less than or equal ) | [Reassignment count][WHERE_LTE][2] | WHERE_LTE | reassignment_countWHERE_LTE2 | [Reassignment count] フィールドの値が次のいずれかであるレコードを抽出します。
|
| 等しくない (Where not equal) | [Impact][WHERE_NEQ][1 - High] | WHERE_NEQ | impactWHERE_NEQ1 | [Impact] フィールドの値が [1 - High] 以外のレコードを抽出します。 |
| 空でない (Where not empty) | [Impact][WHERE_NOTEMPTY] | WHERE_NOTEMPTY | impactWHERE_NOTEMPTY | [Impact] フィールドに何らかの値を持つレコードを抽出します。 |
| 次のいずれでもない (Where not one of) | [Impact][WHERE_NOTONEOF][1 - High, 2 - Medium] | WHERE_NOTONEOF | impactWHERE_NOTONEOF1,2 | [Impact] フィールドに次の値以外の値が入力されているレコードを抽出します。
|
| 次のいずれかである (Where one of) | [Impact][WHERE_ONEOF][1 - High, 2 - Medium] | WHERE_ONEOF | impactWHERE_ONEOF1,2 | [Impact] フィールドに次のいずれかの値が入力されているレコードを抽出します。
|