カスタムウィジェットの開発
AngularJS、Bootstrap、および ServiceNow API を使用して、ポータル用のカスタムウィジェットを開発します。
事前準備
- サーバー上でレコード クエリを実行する。
- 更新レコードを作成する。
- クライアント コントローラーに変数をバインドする。
- ウィジェット内のサーバー オブジェクトにアクセスする。
- ユーザー入力を収集する。
必要に応じて、ブートストラップコンポーネントにアクセスして、ブートストラップテンプレートでビルドできます。
ウィジェットの一部
Angular ディレクティブと同様、ウィジェットは サービスポータル ページ内で指定された動作を実行します。ウィジェットには、必須およびオプションのスクリプト コンポーネントが含まれています。
- HTML テンプレート
必須ウィジェット コンポーネントです。
HTML テンプレートには、データを表示および収集するための AngularJS の知識が必要です。HTML テンプレートは、以下の目的で使用します。
- モデルとコントローラーからの情報を使用して、ブラウザーでユーザーに表示される動的ビューをレンダリングする。
- クライアント スクリプト変数をマークアップにバインドする。
- エンド ユーザーからデータを収集する。
- クライアントスクリプト
必須ウィジェット コンポーネントです。
クライアント スクリプトには、 ServiceNow API および AngularJS の両方を使用してクライアント コントローラーを作成する知識が必要です。クライアント スクリプトは、以下の目的で使用します。
- JavaScript および JSON オブジェクトのサーバー データをクライアント オブジェクトにマッピングする。
- データをレンダリングする前に処理する。
- データを HTML テンプレートに渡す。
- ユーザー入力とデータをサーバーに戻して処理する。
- サーバースクリプト
必須ウィジェット コンポーネントです。
サーバー スクリプトには、ServiceNow API を使用してレコード データを操作する知識が必要です。サーバー スクリプトは、以下の目的で使用します。
- ウィジェットの初期状態を設定する。
- data 変数を使用して、ウィジェット クライアント スクリプトにレコード データを送信する。
- サーバー側のクエリを実行する。
- リンク機能
オプションのウィジェット コンポーネントです。
リンク機能には、AngularJS の知識が必要です。リンク機能を使用して、DOM を直接操作します。
- オプション スキーマ
オプションのウィジェット コンポーネントです。
サービスポータル管理者がウィジェットを構成できるようにします。オプション スキーマは、以下の目的で使用します。
- ウィジェットのパラメーターを指定する。
- 管理者ユーザーがウィジェット インスタンスのインスタンス オプションを定義できるようにする。
- 柔軟で再利用可能なウィジェットを開発する。
- Angular プロバイダー
オプションのウィジェット コンポーネントです。
Angular プロバイダーには AngularJS の知識が必要です。Angular プロバイダーは、以下の目的で使用します。
- レコードやフィルターを変更するときにウィジェットの同期状態を保つ。
- ウィジェット間のコンテキストを共有する。
- 状態を維持し、持続させる。
- 再利用可能な動作と UI コンポーネントを作成し、複数のウィジェットに挿入する。
- 依存関係
オプションのウィジェット コンポーネントです。
ウィジェットの依存関係は、JavaScript や CSS ファイルなど、ウィジェットで使用される外部リソースです。
ウィジェット内のグローバル オブジェクト
ウィジェットがページ上で初めてレンダリングを開始すると、まずサーバー スクリプトが実行され、3 つのグローバル オブジェクト (input、options、data) にアクセスします。input 変数は、クライアント スクリプトから送信されたデータ オブジェクトであるため、この変数は初めての初期化時は定義されません。
ウィジェットが初めてインスタンス化されるとき、サーバー スクリプトは以下の処理を行います。
- 空の data オブジェクトを初期化します。
- クライアント コントローラーから送信されたデータを使用して input オブジェクトを初期化するか、ウィジェットを初期化するために使用されるデータを使用して options オブジェクトを使用して初期化します。
- data オブジェクトを JSON としてクライアント コントローラーに送信します。
クライアント スクリプト
c.dataを使用してサーバーの data オブジェクトにアクセスします。注:デフォルトでは、ウィジェットは c 変数を使用し、controller as構文によってコントローラー インスタンスを表します。ウィジェットの作成またはクローン作成時にこの変数を変更することができます。server.update()を使用して、変更をデータ モデルに投稿します。このメソッドは、input オブジェクトを使用してサーバー スクリプトを更新します。注:server.update()を呼び出した後、クライアント スクリプトの data オブジェクトはサーバー スクリプトの data オブジェクトによって自動的に上書きされます。c.optionsを使用し、サーバー上のウィジェットを呼び出すために使用される値にアクセスします。この値は読み取り専用です。
ウィジェット エディターの使い方
ウィジェットを作成すると、sp_widget テーブルにレコードが作成されます。ただし、サービスポータルの構成でスクリプト環境としてウィジェット エディターを使用できます。ウィジェット エディターは、IDE に似たフルページ アプリケーションです。変更をリアルタイムでプレビューしながら、編集するウィジェットの部分を表示し、残りの部分を非表示にすることができます。