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

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

始める前に

重要:

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

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

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

このタスクについて

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

手順

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

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

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

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

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

   コンテナが 4 つの小さなコンポーネントの周囲に見えるようになります。[今すぐ発生 ] はコンテナーのラベルです。[ Label] の下の [Configuration] ペインを確認します。コンテナは、他のコンポーネントをグループ化する方法です。

7. コンテナをハイライト表示したまま、[ Show border ] スライダーを右にスライドします。

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

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

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

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

    

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

    また、コンポーネントをドラッグするために使用できる移動アイコン( コンポーネント )も表示されます。まだやめてください。

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

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

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

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

手順

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

   

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

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

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

   

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

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

手順

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

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

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

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

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

   データビジュアル化コンポーネントを画像コンポーネント上に移動すると、画像コンポーネントの側面がハイライト表示されます。

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

   データビジュアル化コンポーネントは、画像コンポーネントの左側に表示されます。

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

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

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

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

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

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

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

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

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

手順

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

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

   

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

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

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

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

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

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

手順

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

次のタスク

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