1. [ページ] セクションの [+] アイコンを選択します。

   

2. [新規ページの作成] を選択します。
3. [代わりに最初から作成します] を選択します。

   

4. 新しいページの名前を入力します。名前は任意のもので構いません。この例では、「My tutorial page」と入力します。
5. [パス] フィールドに、ページ名に基づいてパスが自動的に入力されます。この例では、パスは「my-tutorial-page」です。パスはページの URL です。このパスは任意に変更できますが、一意になっている必要があります。パスは小文字で、かつスペースを含めないようにする必要があります。[URL プレビュー] には、ページのパスが表示されます。

   

6. [ タイプ ] ドロップダウンリストで URL ページタイプを選択します。URL ページタイプは、エクスペリエンスビューで重要なページを分類して見つけるのに役立ちます。
7. [Continue (続行)] を選択します。
8. (オプション) ページの URL にパラメーターを追加します。
9. [よさそうです]を選択します。
10. 新しいページバリアントの名前を入力します。名前は任意のもので構いません。この例では、「My first page variant」と入力できます。
11. [対象者の追加] を選択して、ページバリアントの対象者を追加します。この例では、[アドミン] を選択します。
12. [続行] を選択します。
13. 次の画面で、[レスポンシブをビルド (Build responsive)] を選択します。
14. [作成] を選択します。
15. ページを作成すると、ページエディター画面が表示されます。URL 設定やバリアント設定などの詳細設定を変更できます。このチュートリアルでは、これらの詳細オプションをスキップできます。詳細設定の変更の詳細については、「UI ビルダーページの作成：詳細設定」を参照してください。

1. [コンテンツ] ツリーの [本文] レベルを選択して、ページをハイライト表示します。
2. コンテンツツリーで [+ コンテンツを追加] を選択します。

   

3. 2 列レイアウトを選択します。

   

4. [Add (追加)] を選択します。
5. 2 列レイアウトが表示されます。

1. 左の列の中央にある [+] ボタンを選択します。
2. 検索フィールドに「Heading」と入力します。
3. ヘッダーコンポーネントを選択してコンテナに追加します。ヘッダーコンポーネントは、ページにテキストまたはタイトルを追加する方法です。
4. [Add (追加)] を選択します。
5. 構成パネルでコンポーネント名を選択すると、[コンポーネントラベル] と [コンポーネント ID] が表示されます。一意である限り、任意のものに変更できます。
6. [Apply (適用)] を選択します。
7. ヘッダーコンポーネントを構成します。コンポーネント作成者は、コンポーネントの設定に必要となる適切なプロパティを公開するようにコンポーネントを構成します。
   • スタイルを [ヘッダー (プライマリ)] に設定します。スタイルは、フォント、太さ、色などのヘッダーテキストのクラスを変更します。たとえば、[ヘッダー (セカンダリ)] を選択すると、テキストが小さくなります。ヘッダーが 2 つあり、セカンダリのヘッダーをプライマリのヘッダーよりも小さくする場合は、異なるサイズのヘッダーが役に立ちます。
   • [ラベル] フィールドで、ヘッダーテキストとして「My Tutorial」と入力します。
   • [レベル] は 1 のままにします。

ボタンコンポーネントをページに追加します。テキストと外観を変更してボタンを構成します。次に、ボタンのイベントハンドラーを追加して、ボタンをクリックしたときの動作を変更します。イベントハンドラーは、ServiceNow® ホームページにリンクするボタンにアクションを追加します。ボタンをクリックすると、ServiceNow® ホームページがブラウザーの新しいタブで開きます。コンポーネントの構成の詳細については、「コンポーネント」を参照してください。

1. 前のセクションで追加した見出しコンポーネントの下にある [+] を選択します。
2. 検索フィールドに「Button」と入力します。
3. リストでボタンコンポーネントを選択します。

   コンポーネントのページへの追加の詳細については、表 1 を参照してください。

4. 構成パネルでコンポーネント名を選択すると、[コンポーネントラベル] と [コンポーネント ID] が表示されます。一意である限り、任意のものに変更できます。
5. ボタンコンポーネントを次のように構成します。
   • [ラベル] フィールドに「Home Page」と入力してボタンの名前を変更します。
   • [サイズ] を [大] に変更します。
   • [アイコン] 検索フィールドに「home」と入力します。
   • [ホームアウトライン (Home Outline)] を選択します。
6. イベントハンドラーを追加して、ボタンに適用するアクションを構成します。
   • 構成パネルで [イベント] タブを選択します。
   • [クリックしたボタン] で、 [+ 新しいイベントハンドラーを追加] を選択します。

     

   • [継承されたイベントハンドラー] で、 [宛先へのリンク] を選択します。
   • [宛先を選択] をクリックします。
   • [宛先を選択] 画面で、[外部 URL] を選択します。
   • URL を入力します。このチュートリアルでは、「https://www.servicenow.com」と入力します。[OK] を選択します。
   • [追加] を選択します。

     

     イベントハンドラーの詳細については、「「Manage actions in UI Builder pages (UI ビルダーページでのアクションの管理)」」を参照してください。
7. [保存] を選択します。作業時にはページを頻繁に保存することをお勧めします。
8. [プレビュー] を選択します。
9. それまでのステップで作成したボタンをテストします。

1. 右の列の中央にある [+] ボタンを選択します。
2. [検索] フィールドに「データビジュアル化」と入力し、データビジュアル化コンポーネントが表示されたら、そのコンポーネントを選択してページに追加します。
3. 構成パネルでコンポーネント名を選択すると、[コンポーネントラベル] と [コンポーネント ID] が表示されます。一意である限り、任意のものに変更できます。
4. データ可視化コンポーネントにデータリソースを追加して、顧客アカウントデータを取り込みます。
   • データ可視化コンポーネントを選択し、[構成] タブを選択します。
   • [データソースを追加] を選択します。
   • 検索フィールドに「タスク [task]」と入力し、 UI ビルダー インスタンスで使用可能なタスクを探します。
   • [このソースを追加] を選択します。

     

5. [データ表示方法タイプ] ドロップダウンを選択し、[ダイヤル] を選択します。 データに最適なさまざまな可視化タイプを選択できます。
6. 構成パネルで [ヘッダーと境界 (Header and border)] を選択します。
7. [チャートタイトル] フィールドに「My Tasks」と入力します。

1. UI ビルダー の右端にある [保存] を選択します。
2. ページを保存したので、エクスペリエンスでいつでもアクセスできます。

1. UI ビルダー のヘッダーで、[プレビュー] を選択します。
2. ページの左の列のヘッダーを確認します。
3. [ホームページ] ボタンを選択します。ServiceNow® ホームページが別のブラウザーのタブで開きます。ブラウザータブを閉じて、プレビューページに戻ります。
4. ページの右の列にある顧客アカウントデータのビジュアル化を確認します。