UI ビルダー ランディングページのチュートリアル

従来の UI ビルダー を使用してカスタムランディングページを作成する方法について説明します。

始める前に

重要:

このページで説明するビルダーは、CSM を除くすべてのワークスペースでランディングページを構築および編集するためのものです。新しい UI Builder で CSM ワークスペースのすべてのページを構築および編集する方法の詳細については、「 UI Builder」を参照してください。

このタスクは、ランディングページの作成のみを可能にする従来の UI ビルダー に関連しています。新しいバージョンの UI Builder (UI ビルダー) を使用して、構成可能なワークスペースを作成します。詳細については、「UI ビルダー」を参照してください。

必要なロール：workspace_admin または ui_builder_admin

このタスクについて

ランディングページを作成する前に、既存のランディングページを調べて UI ビルダー 仕組みを見てみましょう。

手順

1. 移動先 すべて > ワークスペースエクスペリエンス > 管理 > すべてのワークスペース をクリックし、ワークスペースをクリックして開きます。
2. 開いたページが編集可能でない場合は、[このレコードを編集するにはここをクリックしてください] の [ここ] リンクをクリックしてページを編集可能にします。
3. [UI Builder で開く] をクリックします。
4. [ページ管理] ペインの [ ページ ] タブで、[ インシデントの概要 ] ランディングページをクリックします。
   このランディングページは [ステージ] ペインに表示されます。[Configuration] ペインの上にある [ Status ] フィールドと [Application ] フィールドに注目してください。アクティブステータスは、ランディングページが現在使用されていることを意味します。[アプリケーション] フィールドには、ランディングページが ITSM エージェントワークスペースによって使用されていることが示されます。以下をクリックした場合:

   • 非アクティブ化すると、ステータスが 非アクティブ に変わり、ランディングページがワークスペースに表示されなくなります。

     [非アクティブ化 ] ボタンは [アクティブ化 ] ボタンに置き換えられ、ワークスペースでランディングページを公開できるようになります。

     通常、ランディングページは作業中に非アクティブ化します。たとえば、現在のランディングページを更新するには、次のようにします。

     1. 現在のランディングページをクローンします。
     2. 非アクティブ状態で作業します。
     3. 更新されたバージョンを アクティブにします。
     4. 元のバージョンを 非アクティブにします。
   • [保存 ] ボタンをクリックすると、ランディングページに加えた変更が保存されます。ステータスが次の場合:
     • [アクティブ] の場合、変更はすぐにワークスペースに反映されます。
     • 非アクティブの場合、変更は保存されますが、公開はされません。
5. コンポーネントをクリックし、[構成] ペインで設定パラメーターがどのように変化するかを確認します。
6. [ Happening Now] をクリックします。

   コンテナは、4 つの小さなコンポーネントの周囲に表示されます。「Happening Now 」はコンテナのラベルです。[ Label] の下の [Configuration] ペインを確認します。コンテナは、他のコンポーネントをグループ化する方法です。

7. コンテナを強調表示したまま、[ 境界線を表示 ] スライダーを右にスライドします。

   コンテナを示す境界線が表示されます。

8. [ 折りたたみ可能 ] スライダーを右にスライドします。

   コンテナの上にキャレットアイコン ( ) が表示されます。エージェントはキャレットをクリックして、コンテナとその中にあるすべてを折りたたむことができます。

9. [構成] ペインの右上にある右矢印 (>) をクリックしてペインを折りたたみます。
10. [ステージ] ペインで、コンテナをクリックし、その設定アイコン ( ) をクリックします。

    

    [構成] ペインが再び開きます。

    また、コンポーネントをドラッグするのに使用できる移動アイコン ( ) にも注意してください。まだ行わないでください。

    [Configuration] ペインの [Collapsed] スライダーは、コンテナが折りたたまれた状態で開始され、エージェントがクリックしてコンテナを展開できる下向き矢印 ( ) として表示されることを意味します。

    インターフェイスのさまざまな部分の使用方法を確認したので、ランディングページの作成方法を見てみましょう。

新しいランディングページの作成チュートリアル

新しいランディングページを作成します。

手順

1. [ページ] タブで、プラスアイコン (+) をクリックして新しいランディングページを開きます。

   

   をクリックして新しいページを作成することもできます ページアクション > + 新規ページ.

2. [では、このページの一般的な情報を取得しましょう] モーダルで、ランディングページの名前を入力して、[ランディングページの作成] をクリックします。

   このタイトルはステージの上に表示されますが、ランディングページには表示されません。

   

コンポーネントの追加と構成のチュートリアル

ランディングページでコンポーネントを追加および構成します。

手順

1. [ + コンポーネントを追加 ] タブをクリックし、画像コンポーネントをステージペインにドラッグします。

   イメージのパラメーターが [構成] ペインに表示されます。

2. データ可視化コンポーネントを画像のはるか下にドラッグアンドドロップします。

   コンポーネントは [ステージ] ペインに表示されません。

3. データ可視化コンポーネントを画像コンポーネント上にドラッグしますが、ドロップはしないでください。
   データ可視化コンポーネントを画像コンポーネントの端に移動します。

   画像コンポーネントの側面は、データ可視化コンポーネントをその上に移動するとハイライト表示されます。

4. データ可視化コンポーネントを画像の左側にかざしてドロップします。

   データ可視化コンポーネントは、画像コンポーネントの左側に表示されます。

5. データ可視化コンポーネントの上にある移動アイコン ( ) をクリックして、画像コンポーネントの下端にドラッグアンドドロップします。

   これで、ランディング スペースでコンポーネントを移動する方法がわかりました。データビジュアル化コンポーネントが空白です。見えるように塗りつぶしましょう。

6. [構成] ペインの [レポート ] フィールドに「 incident」と入力します。

   使用可能なエントリの先行入力リストが表示されます。

7. リスト内の [ Open incidents by Priority ] をクリックします。
   そのレポートがコンポーネントで開きます。
8. [構成] ペインで [ Open incidents by Priority ] を削除し、[ PA ウィジェット] フィールドに 「incident」と入力します。
   使用可能なエントリの先行入力リストが表示されます。これらのエントリは パフォーマンスアナリティクス (PA) ウィジェットです。

   コンポーネントに配置できるデータ可視化は 1 つだけです。したがって、レポートまたは PA ウィジェットのいずれかを表示できますが、両方を表示することはできません。レポートと PA ウィジェットの両方にエントリを配置した場合、 UI ビルダー ではレポートのみが表示されます。

   これで、ランディングページにコンポーネントを追加して配置する方法がわかりました。次に、それらをグループ化する方法を見てみましょう。

コンポーネントのグループ化と配置のチュートリアル

ランディングページでコンポーネントをグループ化して配置します。

手順

1. [ ページ アクション] をクリックし、[ ページの削除] を選択して、削除を確認します。
2. データ可視化コンポーネントを選択し、ゴミ箱アイコン ( ) をクリックしてから、コンポーネントの上にあるチェックマークを削除アイコン ( ) をクリックして削除します。
   これで、ランディングページのコンポーネントが削除されました。必要に応じて、画像コンポーネントを削除することもできます。
3. コンテナコンポーネントを [ステージ] ペインにドラッグします。
4. [コンポーネント] ペインで、コンテナの [ラベル ] フィールドに値を入力し、[ 境界線の表示 ] スライダーを右に押すと、コンテナが表示されます。
5. [ ラベル ] フィールドで、コンテナーにタイトル ( 重要なリストなど) を追加します。
6. リストコンポーネントをコンテナにドラッグします。
7. [コンポーネント] ペインの [テーブル ] フィールドに、レコードリストの取得元のテーブルの値 ( インシデントなど) を入力します。
8. 別のリストコンポーネントをコンテナにドラッグします。

   リストはコンテナの内部または外部にドロップできます。容器の中に落とします。

   

9. [コンポーネント] ペインの [テーブル ] フィールドに、レコードリストの取得元である別のテーブル (タスクなど) の値を入力します。

   これで、リストを説明するラベルを持つコンテナコンポーネント内に 2 つのリストコンポーネントが作成されました。

10. コンテナの内部または外部にコンポーネントを追加し、移動アイコン ( ) を使用してコンポーネントをドラッグして、コンポーネントの追加、削除、移動、グループ化に慣れることができます。
11. [保存] をクリックします。

    実際のランディングページを作成する場合は、[ アクティブ化]もクリックします。このチュートリアルでは実際のランディングページを作成していないため、この練習用ランディングページを削除しましょう。

ランディングページの削除チュートリアル

ランディングページを削除します。

手順

1. [ページ] タブで、ランディングページを選択します。
2. [ページアクション] で、[ページを削除] をクリックします。

次のタスク

UI ビルダー の使用方法を理解しました。最初のランディングページを作成する準備ができました。