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