【ServiceNow×DocuSign】ServiceNowのカタログアイテムからDocuSignのPowerFormへ遷移する方法

突然ですがDocuSignという製品をご存知ですか？

https://www.docusign.jp

DocuSignとは、世界シェアNo.1・グローバルスタンダードの電子署名サービス「DocuSign eSignature」をコア製品とする、「ビジネスの合意形成」のためのクラウドプラットフォームです。

各企業でテレワークが導入されペーパーレス化が求められている今、大活躍間違いなしの製品ですね。

三井情報でも取り扱いがあるので、ぜひ専用ページをご覧ください。

https://www.mki.co.jp/lp/docusign/


## 遷移する時のイメージ
実装方法の前に連携時の動作をまとめます。
①ServiceNowのカタログアイテムで申請概要、承認者を指定する。
➁カタログアイテムで[送信]をクリックするとDocuSignに作成してある申請フォーム（PowerForm）へ遷移する。
③DocuSignの申請フォーム（PowerForm）で申請内容を入力し[完了]をクリックする。
④後続の承認者へDocuSignから承認依頼メールが送付される。承認作業はDocuSign上で行う。
![画像6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600769/10598e0f-4536-a0a0-20e6-65a12aa76039.png)


※DocuSignのPowerFormについて気になるかたは下記サイトをご覧ください。

https://www.docusign.jp/blog/what-is-powerform-docusign-esignature

https://www.docusign.jp/blog/powerform-tips


## 使用する機能
ServiceNow、DocuSignそれぞれで使用する機能は下図のとおりです。

![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600769/41ef7154-8b8d-8f68-7a56-93f136f438ee.png)

図中の番号順に設定方法を解説します。

## 1.PowerForm（DocuSign）

カタログアイテムから遷移するDocuSignのフォームを作成します。

詳しい作成方法はDocuSign eSignatureユーザーガイドを参照してください。

https://support.docusign.com/jp/guides/ndse-user-guide-using-powerforms


作成する際には 「受信者の追加」ページに必ず申請者や承認者を作成してください。

「役割名」は必須、「名前」と「メール」はカタログアイテムから取得する場合は空白で構いません。
※「役割名」はServiceNowのカタログクライアントスクリプトで使用します。
![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600769/27ff92cc-3143-a34e-ffea-58866da671de.png)

PowerFormを作成するとURLが生成されます。
ServiceNow側の処理で使用するため、控えておきましょう。
![画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600769/ae902a63-ab13-1240-1e79-51dcd67af993.png)

## 2.カタログアイテム（ServiceNow）

カタログアイテムでServiceNowでの申請画面を作成します。
詳しい作成方法はServiceNowの製品ドキュメントを参照してください。

https://docs.servicenow.com/ja-JP/bundle/sandiego-servicenow-platform/page/product/service-catalog-management/task/t_DefineACatalogItem.html


## 3.カタログクライアントスクリプト（ServiceNow）

カタログアイテムで[送信]をクリックした際の処理を作成します。

今回は以下の処理を作成します。
①	[onSubmit]のタイミングでHTML要素を作成
②	DocuSignのPowerFormを別タブで開く

画面上部の設定内容は以下のとおりです。
![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600769/a5fc73e9-3e15-5d0e-7753-ad8a84944df3.png)

次に[スクリプト]欄にスクリプトを記載します。

```javascript:catalog Clinet Script

function onSubmit() {
//カタログの入力値をDocuSignへパスするためHTML要素を生成
  var form = this.document.createElement('form');
  this.document.body.appendChild(form);
  var input = this.document.createElement('input');

//PowerForm署名者情報
//PowerFormの『受信者の追加』ページで作成した受信者分作成する。下記で１人分。
  input = input.cloneNode(false);
  input.setAttribute('name', '作成者_UserName'); //PowerFormの『受信者の追加』ページにて指定した「役割」+「_UserName」
  input.setAttribute('value', g_form.getValue('sakuseisya')); //PowerFormの『受信者の追加』ページの「名前」にセットしたい値
  form.appendChild(input);
  input = input.cloneNode(false);
  input.setAttribute('name', '作成者_Email'); //PowerFormの『受信者の追加』ページにて指定した「役割」+「_Email」
  input.setAttribute('value', g_form.getValue('email')); //PowerFormの『受信者の追加』ページの「メール」にセットしたい値
  form.appendChild(input);

//PowerForm入力フォーム
//入力フォームに作成したフィールドに値をパスする
  input = input.cloneNode(false);
  input.setAttribute('name', 'kenmei'); //PowerForm設定している入力フィールドのデータラベル名を指定
  input.setAttribute('value', g_form.getValue('kenmei')); //PowerFormの「kenmei」フィールドにパスする値を指定
  form.appendChild(input);
  input = input.cloneNode(false);
  input.setAttribute('type', 'hidden'); //値はパスするが直後の承認では表示したくない場合にhiddenを使用する（例：2番目の承認者の作業タイミングで値を表示したい）
  input.setAttribute('name', 'kyokaNo');
  input.setAttribute('value', '12345');
  form.appendChild(input);

//リダイレクト先（PowerFormのURL）
  var url = 'https://～～～～～';

//Submit
  form.setAttribute('target', 'newtab'); 
  form.setAttribute('action', url);
  form.setAttribute('method', 'post');
  form.submit();
}
```

PowerFormのデータラベル名とは以下のことです。
![画像5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600769/6ad65197-6845-beb7-3203-659b771c0f21.png)

以上で設定完了です。

## 終わりに

カタログアイテムで入力した申請者や承認者、その他入力内容がDocuSignのPowerFormにパスされることでServiceNowとDocuSignの連携が実現できました。

今回の処理はDocuSignの電子署名サービスを利用したいけれど申請の入り口はServiceNowが良い、という場合に活用できるのではと思っています。

## 参考サイトまとめ
##### DocuSign
 [DocuSign公式サイト](https://www.docusign.jp/)
 [MKI特設サイト](https://www.mki.co.jp/lp/docusign/)
 [公式ブログ - 電子署名プロセスをセルフセービス化できるPowerFormとは？](https://www.docusign.jp/blog/what-is-powerform-docusign-esignature)
 [公式ブログ - オンデマンド・セルフサービスで署名ができる「PowerForm」の活用術](https://www.docusign.jp/blog/powerform-tips)
 [DocuSign eSignatureユーザーガイド - Using PowerForms](https://support.docusign.com/jp/guides/ndse-user-guide-using-powerforms)
##### ServiceNow
[製品ドキュメント - Create or edit a catalog item](https://docs.servicenow.com/ja-JP/bundle/sandiego-servicenow-platform/page/product/service-catalog-management/task/t_DefineACatalogItem.html)