UI ビルダー のチュートリアル

UI ビルダー の基本を使用して、「My チュートリアル」と呼ばれるページを作成する方法を学びます。

始める前に

必要なロール：ui_builder_admin

この UI ビルダー チュートリアルでは、UI ビルダー でページをビルドするために次のタスクを実行します。

• UI ビルダー を起動します。
• ワークスペースまたはカスタムポータルエクスペリエンスのページを作成します。ページの作成の詳細については、「UI ビルダー でのページの作成」を参照してください。
• ページのレイアウトを 2 列に変更します。詳細については、「UI ビルダーページでコンポーネントを整理する」を参照してください。
• 2 つのコンテナコンポーネントを追加してページをビルドします。
• コンテンツツリーでコンテナコンポーネントの名前を変更します。
• 最初のコンテナにヘッダーコンポーネントとボタンコンポーネントを追加します。データビジュアル化コンポーネントを 2 番目のコンテナに追加します。コンポーネントの詳細ついては、「コンポーネントを使用した UI ビルダー ページのカスタマイズ」を参照してください。
• コンポーネントは次のように構成できます。
  • ボタンを ServiceNow® Web サイトにリンクします。
  • データビジュアル化コンポーネントをデータソースに接続して、タスクデータを表示します。データリソースの詳細については、「UI ビルダーページでデータを動的に公開する (高度な機能)」を参照してください。
• ページは頻繁に保存してください。
• ページをプレビューして、ブラウザーでどのように表示されるかを確認します。

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
   フィルターナビゲーターに直接「UI ビルダー」と入力することもできます。

   図 : 1. UI ビルダー の起動

   

2. UI ビルダー ホームページから、作業するエクスペリエンスを選択します。
   作業対象のエクスペリエンスが一覧表示されない場合は、アドミニストレーターに連絡してエクスペリエンスへのアクセス権を取得するか、エクスペリエンスを作成します。詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. ページを作成します。

   実行するタスク

   必要な操作

   ページを作成

   [ページ] セクションの [+] アイコンを選択します。 [新規ページの作成] を選択します。 [代わりに最初から作成します] を選択します。 新しいページの名前を入力します。名前は任意のもので構いません。この例では、「My tutorial page」と入力します。 [パス] フィールドに、ページ名に基づいてパスが自動的に入力されます。この例では、パスは「my-tutorial-page」です。パスはページの URL です。このパスは任意に変更できますが、一意になっている必要があります。パスは小文字で、かつスペースを含めないようにする必要があります。[URL プレビュー] には、ページのパスが表示されます。 [ タイプ ] ドロップダウンリストで URL ページタイプを選択します。URL ページタイプは、エクスペリエンスビューで重要なページを分類して見つけるのに役立ちます。 [Continue (続行)] を選択します。 (オプション) ページの URL にパラメーターを追加します。 [よさそうです]を選択します。 新しいページバリアントの名前を入力します。名前は任意のもので構いません。この例では、「My first page variant」と入力できます。 [対象者の追加] を選択して、ページバリアントの対象者を追加します。この例では、[アドミン] を選択します。 [続行] を選択します。 次の画面で、[レスポンシブをビルド (Build responsive)] を選択します。 [作成] を選択します。 ページを作成すると、ページエディター画面が表示されます。URL 設定やバリアント設定などの詳細設定を変更できます。このチュートリアルでは、これらの詳細オプションをスキップできます。詳細設定の変更の詳細については、「UI ビルダーページの作成：詳細設定」を参照してください。 図 : 2. UI ビルダーページエディター

   お疲れさまでした。チュートリアルページが作成されました。このページにはコンテンツがありません。ページにコンポーネントを追加して機能をビルドします。コンポーネントはページの構成要素です。UI ビルダー には、ページに追加できる多くのコンポーネントが用意されています。コンポーネントは、ヘッダーのようにシンプルにすることも、 リストのように複雑にすることもできます。
4. ページのレイアウトを 2 列レイアウトに変更します。
   レイアウトの詳細については、「UI ビルダーページでコンポーネントを整理する」を参照してください。

   実行するタスク	必要な操作
   ページのレイアウトを 2 列に変更	[コンテンツ] ツリーの [本文] レベルを選択して、ページをハイライト表示します。 コンテンツツリーで [+ コンテンツを追加] を選択します。 2 列レイアウトを選択します。 [Add (追加)] を選択します。 2 列レイアウトが表示されます。

5. ヘッダーコンポーネントと、ボタンコンポーネントを、左の列に追加します。

   実行するタスク	必要な操作
   左列のコンテナへのヘッダーコンポーネントの追加	コンポーネントはさまざまな方法でページに追加できます。コンポーネントをページに追加する方法の詳細については、表 1 を参照してください。 左の列の中央にある [+] ボタンを選択します。 検索フィールドに「Heading」と入力します。 ヘッダーコンポーネントを選択してコンテナに追加します。ヘッダーコンポーネントは、ページにテキストまたはタイトルを追加する方法です。 [Add (追加)] を選択します。 構成パネルでコンポーネント名を選択すると、[コンポーネントラベル] と [コンポーネント ID] が表示されます。一意である限り、任意のものに変更できます。 [適用] を選択します。 ヘッダーコンポーネントを構成します。コンポーネント作成者は、コンポーネントの設定に必要となる適切なプロパティを公開するようにコンポーネントを構成します。 スタイルを [ヘッダー (プライマリ)] に設定します。スタイルは、フォント、太さ、色などのヘッダーテキストのクラスを変更します。たとえば、[ヘッダー (セカンダリ)] を選択すると、テキストが小さくなります。ヘッダーが 2 つあり、セカンダリのヘッダーをプライマリのヘッダーよりも小さくする場合は、異なるサイズのヘッダーが役に立ちます。 [ラベル] フィールドで、ヘッダーテキストとして「My Tutorial」と入力します。 [レベル] は 1 のままにします。
   ボタンコンポーネントを左列のコンテナに追加して構成する	ボタンコンポーネントをページに追加します。テキストと外観を変更してボタンを構成します。次に、ボタンのイベントハンドラーを追加して、ボタンをクリックしたときの動作を変更します。イベントハンドラーは、ServiceNow® ホームページにリンクするボタンにアクションを追加します。ボタンをクリックすると、ServiceNow® ホームページがブラウザーの新しいタブで開きます。コンポーネントの構成の詳細については、「コンポーネント」を参照してください。 前のセクションで追加した見出しコンポーネントの下にある [+] を選択します。 検索フィールドに「Button」と入力します。 リストでボタンコンポーネントを選択します。 コンポーネントのページへの追加の詳細については、表 1 を参照してください。 構成パネルでコンポーネント名を選択すると、[コンポーネントラベル] と [コンポーネント ID] が表示されます。一意である限り、任意のものに変更できます。 ボタンコンポーネントを次のように構成します。 [ラベル] フィールドに「Home Page」と入力してボタンの名前を変更します。 [サイズ] を [大] に変更します。 [アイコン] 検索フィールドに「home」と入力します。 [ホームアウトライン (Home Outline)] を選択します。 イベントハンドラーを追加して、ボタンに適用するアクションを構成します。 構成パネルで [イベント] タブを選択します。 [クリックしたボタン] で、 [+ 新しいイベントハンドラーを追加] を選択します。 [継承されたイベントハンドラー] で、 [宛先へのリンク] を選択します。 [宛先を選択] をクリックします。 [宛先を選択] 画面で、[外部 URL] を選択します。 URL を入力します。このチュートリアルでは、「https://www.servicenow.com」と入力します。[OK] を選択します。 [追加] を選択します。 イベントハンドラーの詳細については、「「Manage actions in UI Builder pages (UI ビルダーページでのアクションの管理)」」を参照してください。 [保存] を選択します。作業時にはページを頻繁に保存することをお勧めします。 [プレビュー] を選択します。 それまでのステップで作成したボタンをテストします。

   ページのヘッダーとボタンコンポーネントを追加して構成しました。

   

6. データビジュアル化コンポーネントをそのコンテナに追加します。
   データビジュアル化コンポーネントには、視覚的に表示するデータが含まれています。データビジュアル化コンポーネントのパラメーターを構成します。次に、それにデータリソースを追加します。

   実行するタスク

   必要な操作

   ビジュアル化コンポーネントを右列のコンテナに追加して構成する

   コンポーネントはさまざまな方法でページに追加できます。コンポーネントをページに追加する方法の詳細については、表 1 を参照してください。 右の列の中央にある [+] ボタンを選択します。 [検索] フィールドに「データビジュアル化」と入力し、データビジュアル化コンポーネントが表示されたら、そのコンポーネントを選択してページに追加します。 構成パネルでコンポーネント名を選択すると、[コンポーネントラベル] と [コンポーネント ID] が表示されます。一意である限り、任意のものに変更できます。 データ可視化コンポーネントにデータリソースを追加して、顧客アカウントデータを取り込みます。 データ可視化コンポーネントを選択し、[構成] タブを選択します。 [データソースを追加] を選択します。 検索フィールドに「タスク [task]」と入力し、 UI ビルダー インスタンスで使用可能なタスクを探します。 [このソースを追加] を選択します。 [データ表示方法タイプ] ドロップダウンを選択し、[ダイヤル] を選択します。 データに最適なさまざまな可視化タイプを選択できます。 構成パネルで [ヘッダーと境界 (Header and border)] を選択します。 [チャートタイトル] フィールドに「My Tasks」と入力します。

   データビジュアル化コンポーネントを右側の列に追加して構成しました。顧客アカウントデータを取り込むデータリソースも追加しました。
7. 新しいページを最後に 1 回保存します。

   実行するタスク	必要な操作
   ページの保存	UI ビルダー の右端にある [保存] を選択します。 ページを保存したので、エクスペリエンスでいつでもアクセスできます。

8. ページをプレビューして、ブラウザーでどのように表示されるかを確認します。

   実行するタスク	必要な操作
   ページのプレビュー	UI ビルダー のヘッダーで、[プレビュー] を選択します。 ページの左の列のヘッダーを確認します。 [ホームページ] ボタンを選択します。ServiceNow® ホームページが別のブラウザーのタブで開きます。ブラウザータブを閉じて、プレビューページに戻ります。 ページの右の列にある顧客アカウントデータのビジュアル化を確認します。 図 : 3. チュートリアルページのプレビュー

   おめでとうございます!UI ビルダー チュートリアルを完了しました。

タスクの結果

1. UI ビルダー にページを作成しました。
2. ページのレイアウトを 2 列に変更します。
3. 左側の列にヘッダーコンポーネントがタイトルとして追加されました。
   • ヘッダーのテキストを変更しました。
   • ヘッダーのラベルを変更しました。
4. ヘッダーコンポーネントの下にボタンコンポーネントを追加しました。
   • ボタンが構成されました。
   • ボタンのイベントハンドラーを追加しました。
   • Web ページへのリンクを設定するイベントハンドラーを追加しました。ボタンをクリックすると、Web ページが開きます。
5. 右側の列のラベルを変更しました。
6. データビジュアル化コンポーネントを追加しました。
   • データビジュアル化コンポーネントを構成しました。
   • タスクデータを取り込むデータリソースを追加しました。
7. 新しいページを保存しました。
8. ページをプレビューします。