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

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

始める前に

重要:

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

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

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

このタスクについて

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

手順

1. 移動先 すべて > ワークスペースエクスペリエンス > 管理 > すべてのワークスペース をクリックし、ワークスペースをクリックして開きます。
2. 開いたページが編集可能でない場合は、[このレコードを編集するにはここをクリック (To edit this record click here)]のここリンクをクリックしてページを編集可能にします。
3. [UI Builder で開く] をクリックします。
4. [ページ管理 (Page management)] ペインの [ ページ ] タブで、[ インシデントの概要 (Incident Overview )] ランディングページをクリックします。
   このランディングページは [ステージ] ペインに表示されます。[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. リストで [ 優先度別のオープンインシデント ] を選択します。
   そのレポートがコンポーネントで開きます。
8. [構成] ペインで [ Open incidents by Priority ] を削除し、[ PA ウィジェット] フィールドに 「incident」と入力します。
   入力可能なエントリーの先行入力リストが表示されます。これらのエントリは (PA) ウィジェットです パフォーマンスアナリティクス 。

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

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

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

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

手順

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

   リストはコンテナの内側または外側にドロップできます。コンテナ内にドロップします。

   

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

   これで、コンテナコンポーネント内に 2 つのリストコンポーネントがあり、リストを説明するラベルが付けられました。

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

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

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

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

手順

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

次のタスク

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