Zenn
☃️

sn-record-pickerをカスタマイズしてWidgetで使用する

2021/02/25に公開
ServiceNow
tech

カスタムディレクティブを作成する

以下のページに移動します。
｛instanceName｝は適宜各自のページに書き換えます。
{instanceName}.service-now.com/scripts/sn/common/controls/directive.snRecordPicker.js

表示されたコードを好きなエディタにコピペします。
以下のようにangular.module('sn.common.controls').directive('snRecordPicker',を削除して変更します。

変更前

/*! RESOURCE: /scripts/sn/common/controls/directive.snRecordPicker.js */
angular.module('sn.common.controls').directive('snRecordPicker', function ($timeout, $http, urlTools, filterExpressionParser, escapeHtml, i18n) {
....略
});
;

変更後

/*! RESOURCE: /scripts/sn/common/controls/directive.snRecordPicker.js */
function ($timeout, $http, urlTools, filterExpressionParser, escapeHtml, i18n) {
....略
};
;

好きなところをカスタマイズします。

Widgetのページに移動します。

Angular Providersタブを表示してNewボタンをクリックします。

以下のように入力します。

  • Type:変更なし
  • Name:使用するタグ名を頭文字が小文字のキャメルケースで記載します。(Tagをtest-record-pickerにしたいならtestRecordPickerにします)
  • Client Script: 先ほどコピペしたスクリプトを貼り付けます。

Submitボタンをクリックします。

test-record-pickerタグがWidgetで使用可能になりました。

カスタマイズタブに置き換える

以下のように書き換えます。

変更前

<sn-record-picker ..></sn-record-picker>

変更後

<test-record-picker ..></test-record-picker>

保存して終了です

注意点

カスタマイズタブのソースは基本開発者コンソールでは表示されません。
デバッグするには、コード内にあらかじめconsole.debugを仕込んで、consoleから追跡できるようにしておく必要があります。

sn-record-pickerではServicenowAPIを使用しているため、Widghetから使う場合はユーザーのBasic認証が必要になります。サードパーティの認証基盤と連携している場合は、認証ができないためレコードの取得部分をGlideAjaxに置き換えるなどで対応しましょう。

Discussion