eformsign機能の埋め込み

eformsignの機能をお客様の提供するサービス・サイト内に埋め込むことで、サービス・サイトを利用するユーザー(エンドユーザー)がeformsignのサイトに接続することなく、eformsignの電子帳票をご利用いただくことができます。

※ブログ内にYouTubeの動画を挿入するようなイメージです。

チュートリアル

概要

eformsignの埋め込みは、次のような機能に対応しています。

  • テンプレートで文書作成

  • マイファイルで文書作成

  • 文書の処理(入力・承認・差戻し)

  • 文書のプレビュー

  • テンプレートの生成

  • テンプレートの修正

  • テンプレートの複製

上記の機能を埋め込むためのオブジェクトは、現在EformSignDocumentとEformSignTemplateの2種類をご提供しています。各オブジェクトが対応している機能を確認し、インストールしてください。

eformsignの埋め込みオブジェクト

オブジェクト名

対応機能

EformSignDocument

  • テンプレートで文書作成

  • 文書の処理(入力・承認・差戻し)

  • 文書のプレビュー

EformSignTemplate

  • マイファイルで文書作成

  • テンプレートの生成

  • テンプレートの修正

  • テンプレートの複製

インストール方法

eformsignの機能を使用するウェブページに次のスクリプトを追加します。

<!--jQuery-->
<script src="https://www.eformsign.com/plugins/jquery/jquery.min.js"/>
<!--EformSignDocumentオブジェクト-->
<script src="https://www.eformsign.com/lib/js/efs_embedded_v2.js"/>
<!--EformSignTemplateオブジェクト-->
<script src="https://www.eformsign.com/lib/js/efs_embedded_form.js"/>

注釈

eformsign機能を挿入するページにこのスクリプトを追加することで、eformsign埋め込み用オブジェクトをグローバル変数として使用することができます。 スクリプトはHTMLファイル内のhead、bodyなど、どの位置に追加しても構いませんが、eformsign埋め込み用オブジェクトを使用する前に先に宣言する必要があります。 jQueryの場合、すでに他の方法でウェブページに追加されているなら、重複して追加する必要はありません。

埋め込みオプションの設定

eformsignの機能を埋め込む場合、埋め込む機能の詳細オプションをJSON形式で設定する必要があります。 会社情報、埋め込みモード、ユーザー情報、レイアウト、自動入力などを設定することができます。

各機能の設定値

eformsignの機能埋め込みは、使用するオブジェクト、モードによって動作する機能が異なります。 以下の表から各機能で使用するオブジェクトと埋め込みモードをご確認ください。

注釈

埋め込みモードの設定は、document_optionまたはtemplate_optionサブの"mode" Objectに値を入力することで行います。詳しい設定方法は各機能ページをご参照ください。

埋め込み可能

使用するオブジェクト

埋め込みモード

テンプレートで文書作成

EformSignDocument

"type": "01"

文書の処理

EformSignDocument

"type": "02"

文書のプレビュー

EformSignDocument

"type": "03"

マイファイルで文書作成

EformSignTemplate

"type": "01", "template_type": "unstructured_form"

テンプレートの生成

EformSignTemplate

"type": "01", "template_type": "form"

テンプレートの修正

EformSignTemplate

"type": "02", "template_type": "form"

テンプレートの複製

EformSignTemplate

"type": "03", "template_type": "form"

必要な値の確認

埋め込みオプションを設定する際、挿入する機能によっては、会社ID、テンプレートID、文書IDを入力する必要があります。

会社IDの確認方法

会社IDは、会社管理者または代表管理者アカウントでログイン後、会社管理 > 会社情報 > 基本情報で会社IDを確認することができます。

  1. eformsignのサイドバーメニューから 会社情報 メニューをクリックします。

eformsign 会社情報メニュー
  1. 会社情報 > 基本情報から 会社IDを確認します。

会社情報 > 基本情報

テンプレートIDの確認方法

テンプレート管理メニューに移動し、テンプレートの設定アイコンをクリックすると、テンプレートのURLからform_idを確認することができます。

  1. eformsignサイドバーメニューの テンプレート管理をクリックします。

eformsign メニュー、テンプレート管理
  1. eformsignテンプレート管理画面で、当該テンプレートの 設定 ボタンをクリックします。

eformsign テンプレート管理画面
  1. テンプレートのURLから テンプレートID(=form_id)を確認します。

テンプレートIDの位置

文書IDの確認方法

文書IDは、文書が存在する文書トレイから確認できます。

1.eformsignサイドバーのメニューから 文書が存在する文書トレイ メニューをクリックします。

eformsign メニュー テンプレート管理

2.文書トレイの右上の カラム選択アイコン (image1)をクリック後、文書IDをチェックすると、リストに 文書ID の列が追加され、文書IDを確認することができます。

eformsign 文書トレイ 文書ID列の追加

テンプレート文書作成、文書の処理、文書のプレビュー

eformsignを埋め込んでテンプレートで文書の作成・受信した文書の処理・生成された文書のプレビュー機能を挿入する場合について説明します。

var eformsign = new EformSignDocument();

var document_option = {
   "company" : {
      "id" : "",            // Company IDを入力
      "country_code" : "",  // 国コードを入力 (例: ja)
      "user_key": ""        // 顧客側のシステムにログインしたユーザーのunique key. ブラウザクッキーのeformsignログイン情報との比較に使用
   },
   "user" : {
        "type" : "01" ,         // ユーザーの識別 (01: メンバー、02: 外部者)
        "id": "test1@forcs.com" // ユーザーID(メールアドレス)
        "access_token" : "",    // Access Tokenの入力(eformsign APIの使い方 - OpenAPI Access Tokenを参照)
        "refresh_token" : "",   // Refresh Tokenの入力(eformsign APIの使い方 - OpenAPI Access Tokenを参照)
        "external_token" : "",  // 外部者が処理する際に、ユーザーを認証するExternal Tokenを入力(Webhookから提供)
        "external_user_info" : {
           "name" : ""          // 外部者が処理する際に、外部者の名前を入力

        }
    },
    "mode" : {
        "type" : "02",      // モード (01: 文書の新規作成、02: 文書の検討、03: 文書のプレビュー)
        "template_id" : "", // template idの入力
        "document_id" : ""  // document_idの入力
    },
    "layout" : {
        "lang_code" : "ja" // eformsignの言語 ja, en, ko
    },
    "prefill" : {
        "document_name": "", // 文書タイトルの入力
        "fields": [
            {
                "id" ; "顧客名",       // フィールド名
                "value" : "田中太郎",    // フィールド値
                "enabled" : true,   // true:活性化 false:非活性化
                "required" : true   // true:入力必須 false:入力任意
            }
        ],
        "recipients": [
            {
                "step_idx" : "2",       // ワークフローの順序。受信者がいる場合は2からスタート
                "step_type": "06",      // ステップの種類 05: 参加者、06: 検討者
                "name" : '田中太郎',        // 受信者の氏名
                "id": "test@forcs.com", // 受信者ID/メールアドレス
                "sms": "01023456789",   // 受信者の携帯電話番号
                "use_mail": true,       // true: メール通知を使用 false: 不使用
                "use_sms": true,        // true: SMS通知を使用 false: 不使用
                "auth": {
                    "password": "",     // ワークフロー設定で文書のプレビュー前に本人確認の設定 - 本人確認情報にチェックした場合、パスワードを入力
                    "password_hint": "",// 上記の条件に従ってパスワードを入力する際、表示されるパスワードのヒント
                    "valid": {
                        "day": 7,       // 文書の送信期限 (日)
                        "hour": 0       // 文書の送信期限 (時間)
                    }
                }
            }
        ],
        "comment": "ここにコメントを入力"     // メッセージ
    },
    "return_fields" : ['顧客名']           // Success Callbackで値を確認するためのフィールド名
};

//callback option
var success_callback = function(response){
    console.log(response.code);
    if( response.code == "-1"){
        // 文書作成に成功
        console.log(response.document_id);
        // return_fieldsに渡したデータの表示が可能。 fieldsはフォームを作成する際の入力コンポーネントのIDに当たる。
        console.log(response.field_values["company_name"]);
        console.log(response.field_values["position"]);
    }
};

var error_callback = function(response){
    console.log(response.code);
    // 文書作成に失敗
    alert(response.message);
};


var action_callback = function (response) {
    console.table(response.data);
};

eformsign.document(document_option, "eformsign_iframe", success_callback, error_callback, action_callback);
eformsign.open();

document_option

オプション設定のためのJSONは次のような構造になっています。

変数名

説明

データ型

必須

下位オプション

company

会社情報

Object

O

id, country_code, user_key

mode

組み込みモード

Object

O

type, template_id, document_id

user

ユーザー情報

Object

X

type, id, access_token, refresh_token, external_token, external_user_info

layout

レイアウト

Object

X

lang_code

prefill

自動記入

Object

X

document_name, fields, recipients, comment

return_fields

returnフィールド

Array

X

注釈

会社情報とモードは入力必須項目です。

1.company(会社情報/必須)

変数名

説明

データ型

必須

備考

id

会社ID

String

O

会社管理 - 会社情報から確認

country_code

国コード

String

X

会社管理 - 会社情報の国コードを指定。任意入力項目だが、入力後即open可能

user_key

顧客システムユーザー固有キー

String

X

組み込みをする顧客のシステム上で、対象のユーザーが誰かを明らかにするため、eformsignに渡すユーザーのアカウント情報

ブラウザに既にログイン情報がある場合、対象のkeyと比較を行う。ログイン情報と対象のkeyが一致しない場合、自動的にログアウトする。

var document_option = {
      "company" : {
          "id" : 'f9aec832efef4133a1e849efaf8a9aed',
          "country_code" : "ja",
          "user_key": "eformsign@forcs.com"
      }
 };
2.mode(埋め込みモード/必須)

変数名

説明

データ型

必須

備考

type

機能タイプ

String

O

01: 文書作成、02: 文書処理、03: プレビュー

template_id

テンプレートID

String

O

document_id

文書ID

String

X

文書処理、プレビュー設定時には必須

テンプレートを利用した新規作成

テンプレートを利用して文書を新規作成します。

var document_option = {
    "mode" : {
    "type" : "01" ,  // 01 : 文書作成、02 : 文書処理、03 : プレビュー
    "template_id" : "a2c6ed9df9b642f2ade43c7efe58c9a3" // template idを入力
    }
}

受信した文書を利用した文書作成

受信した文書を利用して、新たに文書を作成します。

var document_option = {
    "mode" : {
    "type" : "02" ,  // 01 : 文書作成、02 : 文書処理、03 : プレビュー
    "template_id" : "a2c6ed9df9b642f2ade43c7efe58c9a3", // template idの入力
    "document_id" : "5c19ff8c703f401c968236837d701e92"  // document_idの入力
  }
}

特定の文書をプレビュー

作成済みの文書をプレビューします。

var document_option = {
    "mode" : {
    "type" : "03" ,  // 01 : 文書作成、02 : 文書処理、03 : プレビュー
    "template_id" : "a2c6ed9df9b642f2ade43c7efe58c9a3", // template idの入力
    "document_id" : "5c19ff8c703f401c968236837d701e92"  // document_idの入力
  }
}
3.user(ユーザー情報/任意)

変数名

説明

データ型

必須

備考

type

ユーザータイプ

String

O

01: 会社メンバー、02: 外部作成者

id

アカウント(メールアドレス)

String

X

ユーザーID/メールアドレスの入力

access_token

Access Token

String

X

Open API > Access Token 発行を参照

refresh_token

Refresh Token

String

X

Open API > Access Token 発行を参照

external_token

外部者処理用トークン

String

X

メンバーではないユーザーが受信した文書を検討する際は必須入力(Webhookで提供)

external_user_info

外部作成者の情報

String

X

メンバーではないユーザーが受信した文書を作成及び処理する際は必須入力

external_user_info.name

外部作成者の氏名

String

X

メンバーではないユーザーが受信した文書を作成及び処理する際は必須入力

会社のメンバーのログインによる文書の作成及び処理

  • ユーザー情報を指定していない場合に該当します。

  • eformsignのログインページが起動し、ログイン後に文書を作成することができます。

会社のメンバーのログインによる文書の作成及び検討(IDの事前入力)

eformsignのログインページが起動し、ログイン後に文書を作成することができます。この際、IDがログイン画面にあらかじめ入力されます。

var document_option = {
    "user":{
        "type" : "01",
        "id" : "eformsign@forcs.com"
    }
};

会社のメンバーのトークンを利用した作成及び処理

埋め込みの際、eformsignにログインすることなく、特定のアカウントのトークンを利用して文書を作成し、受信した文書を作成します。- トークンは、Open APIのAccess tokenで発行可能です。 トークンの発行方法は eformsign APIの使い方 - Access Tokenの発行をご確認ください。

var document_option = {
    "user":{
        "type" : "01",
        "id" : "eformsign@forcs.com",
        "access_token" : "eyJhbGciOiJSUzI1NiJ9.eyJpc3MiOiJlZ...",
        "refresh_token" : "0161ac6c-0f47-4cc3-9301-381f57c41495"
    }
};

メンバーではないユーザーが文書を新規作成

eformsignの会員ではないユーザーが文書を作成することができます。

var document_option = {
    "user":{
        "type" : "02",
        "external_user_info" : {
           "name" : "田中太郎"
        }
    }
};

メンバーではないユーザーが受信した文書に入力

eformsignのメンバーではないユーザーが、受信した文書に入力することができます。

var document_option = {
    "user":{
        "type" : "02",
        "external_token" : "f8e2ff29114445dcac1e2889ac2f8a5e",
        "external_user_info" : {
            "name" : "田中太郎"
        }
    }
};
4.layout(レイアウト/任意)

変数名

説明

データ型

必須

備考

lang_code

eformsign言語

String

X

ja: 日本語、en: 英語、ko: 韓国語

header

ヘッダの表示ON/OFF

Boolean

X

未入力時のデフォルト値: true

ヘッダを非表示(false)にした場合、 '送信' の同意ボタンも非表示となるため、別途ボタンの配置が必要

(画面ロード時のアクションボタン生成を参照)

footer

フッタの表示有無

Boolean

X

未入力時のデフォルト値: true

var document_option = {
    "layout" : {
          "lang_code" : "ja",
          "header" : false,
          "footer" : true
    }
}
5.prefill(自動入力/任意)

文書の作成中に自動でされる情報を設定します。

重要

mode.typeが "03"の場合(文書のプレビュー時)には、自動入力はされません。

変数名

説明

データ型

必須

備考

document_name

文書タイトル

String

X

fields

フィールドリスト

Array

X

フィールド設定Objectのリスト

fields[].id

フィールド名

String

X

フィールド設定Object内では必須(フィールド名をもとに設定を適用)

fields[].value

フィールド値

String

X

  • 設定しない場合、新規作成時にテンプレートのフィールド設定オプションを利用

  • 設定した場合、テンプレートのフィールド設定よりも優先して適用

fields[].enabled

フィールドの活性化

Boolean

X

  • 指定しない場合、テンプレート設定の項目制御オプションを適用

  • 指定した場合、テンプレートの項目制御オプションよりも優先して適用

fields[].required

フィールド必須/任意

Boolean

X

  • 指定しない場合、テンプレート設定の項目制御オプションを適用

  • 指定した場合、テンプレートの項目制御オプションよりも優先して適用

recipients

受信者リスト

Array

X

受信者情報Objectのリスト

recipients[].step_idx

ワークフローの順序

String

X

recipients内の各オブジェクトに設定必須

  • 1人目の受信者: "2"、2人目以降の受信者: 3、4...と順番に沿って1ずつ増加

recipients[].step_type

受信者のステップ種類

String

X

recipients内の各オブジェクトに設定必須

  • 既存ワークフロー: "01"(完了)、"02"(決裁)、"03"(外部受信者)、"04"(内部受信者)

  • 新規ワークフロー: "01"(完了)、"05"(参加者)、"06"(検討者)

recipients[].recipient_type

受信者の種類

String

X

step_typeが、02(決裁), 03(外部受信者), 04(内部受信者)の場合にのみ入力必須

-"01": 受信者がメンバーの場合

-"02": 外部受信者の場合

recipients[].name

受信者の氏名

String

X

recipients[].id

アカウント(メールアドレス)

String

X

  • 会社のメンバーのアカウント情報(ID/メールアドレス)の入力

  • step_typeが05(参加者)もしくは06(検討者)である場合、メンバーではなくてもメールアドレスの入力が可能

recipients[].email

メールアドレス

String

X

step_typeが03(外部受信者)の場合にのみ使用

  • 外部受信者のメールアドレス入力

recipients[].sms

携帯電話番号

String

X

recipients[].use_mail

メールの送信有無

Boolean

X

step_typeが05(参加者)または06(検討者)の場合にのみ使用

recipients[].use_sms

SMS送信

Boolean

X

step_typeが05(参加者)または06(検討者)の場合にのみ使用

recipients[].auth

本人確認及び 文書の送信期限情報

Object

X

recipients[].auth.password

本人確認情報(パスワード)

String

X

ワークフローの設定における本人確認を設定 - 本人確認情報にチェックを入れた場合、パスワードを入力

recipients[].auth.password_hint

本人確認情報のヘルプ (パスワードのヒント)

String

X

上記条件に従ってパスワードを入力する際、表示されるパスワードのヒント

recipients[].auth.valid

文書の送信期限情報

Object

X

未入力時の初期値: 0日0時間(メンバーである場合は無制限、外部受信者の場合は画面上再入力が必要)

recipients[].auth.valid.day

文書の送信期限(日)

Integer

X

recipients[].auth.valid.hour

文書の送信期限(時間)

Integer

X

comment

次の受信者に伝えるメッセージ

String

X

var document_option = {
    "prefill" : {
        "document_name": "個人情報取扱同意書",   // 文書タイトルの入力
        "fields": [
            {
                "id" ; "顧客名",       // フィールド名
                "value" : "田中太郎",    // フィールド値
                "enabled" : true,   // 活性化
                "required" : true   // 必須
            }
        ],
        "recipients": [
            {
                "step_idx" : "2",       // ワークフローの順番。受信者がいる場合2からスタート
                "step_type": "06",      // ステップの種類。 05: 参加者、06: 検討者
                "name" : "田中太郎",        // 受信者の名前
                "id": "test@forcs.com", // 受信者のID/メールアドレス
                "sms": "01023456789",   // 受信者の携帯電話番号
                "use_mail": true,       // メール通知の使用
                "use_sms": true,        // SMS通知の使用
                "auth": {
                    "password": "6789", // ワークフローの設定における本人確認を設定 - 本人確認情報にチェックを入れた場合、パスワードを入力
                    "password_hint": "携帯番号の下3桁を入力してください。", // 上記条件に従ってパスワードを入力する際、表示されるパスワードのヒント
                    "valid": {
                        "day": 7,       // 文書の送信期限(日)
                        "hour": 0       // 文書の送信期限(時間)
                    }
                }
            }
        ],
        "comment": "確認及び署名をお願いします。"  // メッセージ
    }
};
6.リターンフィールド(任意)

文書の作成及び修正後、ユーザーが作成したフィールドの内容のうちcallback関数でリターンする項目を設定します。 "return_fields" Array 内にフィールド名をString型で入力します。

注釈

設定しない場合、基本フィールドの情報のみリターンします。詳しい情報は 作業成功失敗時callBackパラメータをご参照ください。

注釈

mode.typeが"03"の場合(文書のプレビュー時)には動作しません。

var document_option = {
   "return_fields" : ['顧客名']
}

マイファイルで文書作成

eformsignを埋め込むことで、マイファイル作成機能を使用することができます。

var eformsign = new EformSignTemplate();

var template_option = {
   "company" : {
      "id" : "76440d70fae242e09c4b0fac40b6a6be",            // Company IDを入力
      "country_code" : "ja",    // 国コードを入力 (例: ja)
      "user_key": ""        // 埋め込んだ顧客側システムにログインしたユーザーのunique key。ブラウザのクッキーのeformsignログイン情報と比較。
   },
   "user" : {
        "id": "test1@forcs.com"
        "access_token" : "",    // Access Tokenを入力 (OpenAPI Access Tokenを参照)
        "refresh_token" : "",   // Refresh Tokenを入力 (OpenAPI Access Tokenを参照)
    },
    "mode" : {
        "type" : "01",      // 01 : 生成
        "template_id" : "", // template idを入力
        "template_type": "unstructured_form"    // form : テンプレート管理, unstructured_form: マイファイルで文書作成
    },
    "layout" : {
        "lang_code" : "ja", // eformsignの表示言語. ja, en, ko
        "header" : true,    // ヘッダ(青色)の表示有無。非表示の場合アクションボタンから送信などの操作が可能
        "footer" : true     // フッタ(eformsignのロゴ、言語設定など)の表示有無
    },
    "prefill": {
        "template_name": "テンプレート埋め込みテスト_新規",
        "fields": [
            {
                "id": "テキスト1",
                "value": "あいうえお",
                "enabled": true,
                "required": true
            },
            {
                "id": "テキスト2",
                "value": "かきくけこ",
                "enabled": true,
                "required": true
            }
        ],
        "step_settings": [
            {
                "step_type": "05", // 05: 参加者, 06: 検討者
                "step_name": "参加者2",
                "use_mail": true,
                "use_sms": true,
                "use_alimtalk" : true,
                "recipients" : [
                    {
                        "id": "test2@forcs.com",
                        "name" : 'John Doe'
                    },
                    {
                        "id" : "5a3e47a2f5a04909836ddf4189d10fc4",
                        "name" : 'グループ3'
                    }
                ],
                "auth": {
                    "valid": {
                        "day": '7',
                        "hour": '7'
                    }
                },
                "additional_auth" : {  // 追加認証手段
                    use_pincode : true, //メール/SMS PINコード認証
                    use_pincode_result : true, //文書の最終完了時、メール/SMS PINコードで認証
                    use_mobile_verifyAuth : true, //携帯電話本人確認
                    use_mobile_verifyAuth_result : true //文書の最終完了時、携帯電話本人確認を使用
                }
            }
        ],
        "is_form_id_numbering" : false,
        "disabled_form_id" : true,
        "quick_processing" : false
    },
    "template_file": {
        "name": "添付テスト.pdf",
        "mime": "@file/octet-stream",
        "data": "JVBERi0xLjUNCiW1tbW1DQoxIDAgb2JqDQo8PC9UeXBlL0NhdGFsb2cvUGFnZXMgMiAwIFIvTGFuZyhrby1LUikgL1N0cnVjdFRyZWVSb290IDE1IDAgUi..."
    }
};

//callback option
var sucess_callback = function (response) {
    if (response.type ==='template'){
        console.log(response.template_id);
        console.log(response.template_name);
        console.table(response.step_settings);
        if ("-1" == response.code) {
            alert("テンプレートが生成されました。\n" + "- document_id : " + response.template_id + "\n- title : " + response.template_name);
        } else {
            alert("テンプレートの生成に失敗しました。\n" + "- code : " + response.code + "\n- message : " + response.message);
        }
    }
    window.close();
};


var error_callback = function (response) {
    alert("テンプレートの生成に失敗しました。\n" + "- code : " + response.code + "\n- message : " + response.message);
    console.log(response.code);
    console.log(response.message);
    window.close();
};

var action_callback = function (response) {
    console.table(response.data);
};

eformsign.template(template_option, "eformsign_iframe", success_callback, error_callback, action_callback);
eformsign.open();

template_option

オプション設定のためのJSONは次のような構造になっています。

変数名

説明

データ型

必須

下位オプション

company

会社情報

Object

O

id, country_code, user_key

mode

埋め込みモード

Object

O

type, template_id, document_id

user

ユーザー情報

Object

X

type, id, access_token, refresh_token, external_token, external_user_info

layout

レイアウト

Object

X

lang_code

prefill

自動入力

Object

X

document_name, fields, recipients, comment

template_file

テンプレートファイル

Object

X

name, mime, data

注釈

会社情報とモードは必須入力項目です。

1. company(会社情報/必須)

変数名

説明

データ型

必須

備考

id

会社ID

String

O

会社管理 - 会社情報で確認

country_code

国コード

String

X

会社管理 - 会社情報の国に対するコードを指定。任意項目ですが、openが高速化

user_key

顧客システムユーザー固有キー

String

X

埋め込みする顧客システムでユーザーが誰か明確に設定するためにeformsignに残すユーザーアカウント情報

既にブラウザにログイン情報がある場合、keyと比較して一致しない場合にログアウト処理

var template_option= {
     "company" : {
         "id" : 'f9aec832efef4133a1e849efaf8a9aed',
         "country_code" : "ja",
         "user_key": "eformsign@forcs.com"
     }
};
2. mode(埋め込みモード/必須)

変数名

説明

データ型

必須

備考

type

機能タイプ

String

O

01: 生成

template_type

埋め込みタイプ

String

O

"unstructured_form": マイファイルで文書作成

マイファイルで文書作成

マイファイルで文飾作成により、文書を新規作成します。

var template_option= {
   "mode" : {
    "type" : "01",
    "template_type" : "unstructured_form"
  }
}
3. user(ユーザー情報/任意)

変数名

説明

データ型

必須

備考

id

アカウント(メールアドレス)

String

X

ユーザーID/メールアドレスを入力

access_token

Access Token

String

X

Open API > Access Tokenを発行 を参照

refresh_token

Refresh Token

String

X

Open API > Access Tokenを発行 を参照

社内メンバーのログインによる作業(IDの事前入力)

埋め込みの際、eformsignのログインページが起動し、ログイン後にテンプレート管理を行うことができます。この際、IDがログイン画面に自動入力されます。

var document_option = {
    "user":{
        "id" : "eformsign@forcs.com"
    }
};

社内メンバーのトークンによる作業

埋め込みの際、eformsignにログインせず、アカウントのtokenを使ってテンプレート管理を行います。 トークンの発行方法はeformsign APIの使い方 - Access Tokenの発行をご参照ください。

var document_option = {
    "user":{
        "id" : "eformsign@forcs.com",
        "access_token" : "eyJhbGciOiJSUzI1NiJ9.eyJpc3MiOiJlZ...",
        "refresh_token" : "0161ac6c-0f47-4cc3-9301-381f57c41495"
    }
};
4. layout(レイアウト/任意)

変数名

説明

データ型

必須

備考

lang_code

eformsignの言語

String

X

ja: 日本語, en: 英語, ko: 韓国語

header

ヘッダの表示有無

Boolean

X

入力しない場合、デフォルト値に設定: true

ヘッダを非表示(false)にした場合、「送信」などのボタンも非表示になるため、別途ボタンの生成が必要

(画面ロード時のアクションボタン生成を参照)

footer

フッタの表示有無

Boolean

X

入力しない場合、デフォルト値に設定: true

var template_option = {
    "layout" : {
          "lang_code" : "ja",
          "header" : true,
          "footer" : true
    }
}
5. prefill(自動入力/任意)

文書作成中に自動入力を行う場合に使用します。

変数名

説明

データ型

必須

備考

template_name

文書タイトル

String

X

fields

文書作成時のデフォルト値リスト

Array

X

フィールド設定Objectのリスト

fields[].id

デフォルト値を入力するフィールド名

String

X

fields[].value

フィールドに入力するデフォルト値

String

X

fields[].enabled

文書作成時のフィールド活性化有無

Boolean

X

-指定しない場合、「デザインする」ステップの項目制御オプションを適用

-設定する場合、「デザインする」ステップの項目制御オプションより優先して適用

fields[].required

文書作成時のフィールド必須入力有無

Boolean

X

-指定しない場合、「デザインする」ステップの項目制御オプションを適用

-設定する場合、「デザインする」ステップの項目制御オプションより優先して適用

step_settings

ワークフローステップのリスト

Array

X

ステップ情報Objectのリスト

step_settings[].step_type

ワークフロー受信者のタイプ

String

X

-旧ワークフロー: "02"(決裁), "03"(内部受信者), "04"(外部受信者)

-現行ワークフロー: "05"(参加者), "06"(検討者)

step_settings内の各オブジェクトに入力必須

step_settings[].step_name

ワークフローステップ名

String

X

step_settings[].selected

「デザインする」ステップで

デフォルトの文書参加者の表示有無

Boolean

X

-入力しない場合、デフォルト値に設定: false

-すべてのステップで未入力/falseの場合、開始/送信者ステップをデフォルトで表示

step_settings[].recipient

受信者情報

Object

X

受信者情報

step_settings[].recipient.id

受信者メールアドレスまたはID

String

X

特定ステップの受信者のメールアドレスかIDを入力

step_settings[].recipient.name

受信者名

String

X

step_settings[].recipient.sms

受信者の携帯電話番号

String

X

"+819022223333" の形式で入力

step_settings[].recipient.use_mail

メールの送信有無

Boolean

X

入力しない場合、デフォルト値に設定: false

step_settings[].recipient.use_sms

SMSの送信有無

Boolean

X

入力しない場合、デフォルト値に設定: false

step_settings[].recipient.use_alimtalk

SMS送信時カカオトークのの使用有無

Boolean

X

入力しない場合、デフォルト値に設定: false

trueに設定時、カカオトークで送信、失敗時にSMSで送信

step_settings[].recipient.auth

本人確認及び文書の送信期限情報

Object

X

type, password, password_hintがすべて入力されていない場合: 本人確認情報を使用しない

step_settings[].recipient.auth.type

本人確認方法

String

X

入力しない場合、デフォルト値に設定: password (type, password, password_hintがすべて入力されていない場合: 本人確認情報を使用しない)

-qna: 受信者名

-field: 入力フィールドの中から選択

-password: 送信者が入力

step_settings[].recipient.auth.password

本人確認情報

String

X

入力しない場合、デフォルト値に設定: 値なし

-typeがqnaの場合: 空欄にする

-typeがfieldの場合: フィールド名を入力

-typeがpasswordの場合: 空欄にする

step_settings[].recipient.auth.password_hint

本人確認情報のヒント

String

X

入力しない場合、デフォルト値に設定: 値なし

step_settings[].recipient.auth.valid

文書の送信期限情報

Object

X

入力しない場合、デフォルト値に設定: 7日 0時間

step_settings[].recipient.auth.valid.day

文書の送信期限 (日)

Integer

X

step_settings[].recipient.auth.valid.hour

文書の送信期限 (時間)

Integer

X

step_settings[].recipient.additional_auth

追加認証手段 (非定型)

Object

X

step_settings[].recipient.additional_auth.use_pincode

メール/SMS 認証の使用有無

Boolean

X

step_settings[].recipient.additional_auth.use_pincode_result

完了文書の閲覧の際にも メール/SMS 認証使用の有無

Boolean

X

step_settings[].recipient.additional_auth.use_mobile_verifyAuth

携帯電話本人確認の使用有無

Boolean

X

step_settings[].recipient.additional_auth.use_mobile_verifyAuth_result

完了文書の閲覧の際にも 携帯電話本人確認の使用有無

Boolean

X

is_form_id_numbering

コンポーネントの追加の際に

デフォルトIDから番号付与の有無

Boolean

X

テキストコンポーネントの追加の際、コンポーネントIDのデフォルト値

-is_form_id_numberingがtrueの場合: 'テキスト1', 'テキスト2', 'テキスト3'

-is_form_id_numberingがfalseの場合: 'テキスト', 'テキスト', 'テキスト' 入力しない場合、デフォルト値に設定: true

disabled_form_id

「デザインする」ステップで コンポーネントIDの非活性化有無

Booelan

X

入力しない場合、デフォルト値に設定: false

文書名の入力

オプション > 文書タイトルに購入申請書が入力されます。

var template_option = {
   "prefill" : {
       "template_name": "購入申請書"
    }
}

文書参加者と受信者の指定(本人確認情報、追加認証手段の不使用時)

以下のようにワークフローのステップを追加します。

  • ステップの種類: 参加者

  • ステップ名: 参加者1

  • メール通知: 使用

  • SMS通知: 不使用

  • 受信者名: 鈴木三郎

  • 受信者メールアドレス: test1@forcs.com

  • 依頼の有効期間: 7日 7時間

  • 本人確認情報: 不使用

  • 追加認証手段: 不使用

埋め込み実行時には以下のように実行されます。

  • 文書参加者: 2名 (送信者、参加者1)

  • 「デザインする」ステップでデフォルトで表示する文書参加者: 送信者

  • ワークフロー: 送信者-参加者 1-完了

var template_option = {
    "prefill": {
        "step_settings": [
            {
                "step_type": "05",
                "step_name": "参加者 1",
                "selected": false,
                "recipient": {
                    "id": "test1@forcs.com",
                    "name": "鈴木三郎",
                    "sms": "",
                    "use_mail": true,
                    "use_sms": false,
                    "auth": {
                        "valid": {
                            "day": "7",
                            "hour": "7",
                        },
                    }
                }
            }
        ]
    }
};

文書の参加者と受信者の指定(本人確認情報、追加認証手段の使用時)

次のようにワークフローのステップを追加します。

  • ステップの種類

  • ステップ名: 参加者1

  • メール通知: 使用

  • SMS通知: 使用(カカオトーク優先)

  • 受信者名: 鈴木三郎

  • 受信者メールアドレス: test1@forcs.com

  • 受信者携帯電話番号: 010-2222-3333

  • 依頼の有効期間: 7日 7時間

  • 本人確認情報: 使用 (入力フィールドの中から選択 - テキスト1)

  • 追加認証手段: 使用 (メール/SMS認証を使用、完了文書の閲覧時にはメール/SMS認証を不使用、携帯電話本人確認使用、完了文書の閲覧時にも携帯電話本人確認使用)

埋め込み実行時には以下のように実行されます。

  • 文書参加者: 2名 (送信者、参加者1)

  • 「デザインする」ステップでデフォルトで表示する文書参加者: 参加者1

  • ワークフロー: 送信者-参加者 1-完了

var template_option = {
    "prefill": {
        "step_settings": [
            {
                "step_type": "05",
                "step_name": "参加者1",
                "selected": true,
                "recipient": {
                    "id": "test1@forcs.com",
                    "name": "鈴木三郎",
                    "sms": "+821022223333",
                    "use_mail": true,
                    "use_sms": true,
                    "use_alimtalk" : true,
                    "auth": {
                        "type": "field",
                        "password": "テキスト1",
                        "password_hint": "生年月日を6桁で入力してください。",
                        "valid": {
                            "day": "7",
                            "hour": "7",
                        },
                    },
                    "additional_auth" : {
                        "use_pincode": true,
                        "use_pincode_result": false
                        "use_mobile_verifyAuth": true,
                        "use_mobile_verifyAuth_result" : true
                    }
                }
            }
        ]
    }
};

「デザインする」ステップでコンポーネントID入力欄の有効化/無効化を設定

trueに設定することで、「デザインする」ステップでコンポーネントIDの入力欄が無効化されます。 (基本IDで固定されます)

var template_option = {
    "prefill" : {
        "disabled_form_id" : true
    }
}

var template_option = {
    "prefill": {
        "template_name": "購入申請書",
        "step_settings": [
            {
                "step_type": "05",
                "step_name": "参加者1",
                "selected": true,
                "recipient": {
                    "id": "test1@forcs.com",
                    "name": "鈴木三郎",
                    "sms": "+819022223333",
                    "use_mail": true,
                    "use_sms": true,
                    "use_alimtalk" : true,
                    "auth": {
                        "type": "field",
                        "password": "テキスト1",
                        "password_hint": "生年月日を6桁で入力してください。",
                        "valid": {
                            "day": "7",
                            "hour": "7",
                        },
                    },
                    "additional_auth" : {
                        "use_pincode": true,
                        "use_pincode_result": false
                        "use_mobile_verifyAuth": true,
                        "use_mobile_verifyAuth_result" : true
                    }
                }
            },
            {
                "step_type": "06",
                "step_name": "検討者1",
                "selected": false,
                "recipient": {
                    "id": "test2@forcs.com",
                    "name": "鈴木四郎",
                    "sms": "",
                    "use_mail": true,
                    "use_sms": false,
                    "auth": {
                        "valid": {
                            "day": "3",
                            "hour": "0",
                        },
                    }
                }
            }
        ],
        disabled_form_id : true
    }
};
6. template_file(テンプレートファイル/任意)

テンプレートに使用されるファイルが自動的にアップロードされるように設定します。

変数名

説明

データ型

必須

備考

name

ファイル名

String

O

mime

MIMEデータ形式

String

O

-PDF: "application/pdf"

-対応するすべての拡張子(OZR, PDF): "@file/octet-stream"

data

Base64に変換したファイルデータ

String

O

var template_option = {
    "template_file": {
          "name": "添付テスト.pdf",
          "mime": "@file/octet-stream",
          "data": "JVBERi0xLjUNCiW1tbW1DQoxIDAgb2JqDQo8PC9UeXBlL0NhdGFsb2cvUGFnZXMgMiAwIFIvTGFuZyhrby1LUikgL1N0cnVjdFRyZWVSb290IDE1IDAgUi9NY...(以下省略)"
    }
}

テンプレートの生成、テンプレートの修正、テンプレートの複製

eformsignを埋め込んでテンプレートを作成、修正、複製する場合の操作です。

var eformsign = new EformSignTemplate();

var template_option = {
   "company" : {
      "id" : "76440d70fae242e09c4b0fac40b6a6be",            // Company IDを入力
      "country_code" : "ja",    // 国コードを入力 (ex: ja)
      "user_key": ""        // 埋め込んだ顧客システムにログインしたユーザーのunique key。ブラウザクッキーのeformsignのログイン情報と比較
   },
   "user" : {
        "id": "test1@forcs.com"
        "access_token" : "",    // Access Tokenを入力 (OpenAPI Access Tokenを参照)
        "refresh_token" : "",   // Refresh Tokenを入力 (OpenAPI Access Tokenを参照)
    },
    "mode" : {
        "type" : "01",      // 01 : 生成 , 02 : 修正, 03 : 複製
        "template_id" : "", // template idを入力
        "template_type": "form" // form : テンプレート管理、 unstructured_form: マイファイルで文書作成
    },
    "layout" : {
        "lang_code" : "ja", // eformsignの言語. ja, en, ko
        "header" : true,    // ヘッダ(青色部分)の表示有無。非表示の場合、アクションボタンで送信などの動作を指定。
        "footer" : true     // フッタ(eformsignのロゴ、言語設定など)の表示有無。
    },
    "prefill": {
        "template_name": "テンプレートの埋め込みテスト_新規",
        "step_settings": [
            {
                "step_type": "05", // 05: 参加者, 06: 検討者
                "step_name": "参加者2",
                "use_mail": true,
                "use_sms": true,
                "use_alimtalk" : true,
                "recipients" : [
                    {
                        "id": "test2@forcs.com",
                        "name" : 'John Doe'
                    },
                    {
                        "id" : "5a3e47a2f5a04909836ddf4189d10fc4",
                        "name" : 'グループ3'
                    }
                ],
                "auth": {
                    "valid": {
                        "day": '7',
                        "hour": '7'
                    }
                }
            }
        ],
        "quick_processing" : false
    },
    "template_file": {
        "name": "添付テスト.pdf",
        "mime": "@file/octet-stream",
        "data": "JVBERi0xLjUNCiW1tbW1DQoxIDAgb2JqDQo8PC9UeXBlL0NhdGFsb2cvUGFnZXMgMiAwIFIvTGFuZyhrby1LUikgL1N0cnVjdFRyZWVSb290IDE1IDAgUi..."
    }
};

//callback option
var sucess_callback = function (response) {
    if (response.type ==='template'){
        console.log(response.template_id);
        console.log(response.template_name);
        console.table(response.step_settings);
        if ("-1" == response.code) {
            alert("テンプレートが生成されました。\n" + "- document_id : " + response.template_id + "\n- title : " + response.template_name);
        } else {
            alert("テンプレートの生成に失敗しました。\n" + "- code : " + response.code + "\n- message : " + response.message);
        }
    }
    window.close();
};


var error_callback = function (response) {
    alert("テンプレートの生成に失敗しました。\n" + "- code : " + response.code + "\n- message : " + response.message);
    console.log(response.code);
    console.log(response.message);
    window.close();
};

var action_callback = function (response) {
    console.table(response.data);
};

eformsign.template(template_option, "eformsign_iframe", success_callback, error_callback, action_callback);

template_option

オプション設定のためのJSONの構造は以下の通りです。

変数名

説明

データ型

必須

下位オプション

company

会社情報

Object

O

id, country_code, user_key

mode

埋め込みモード

Object

O

type, template_id, document_id

user

ユーザー情報

Object

X

type, id, access_token, refresh_token, internal_token, external_token, external_user_info

layout

レイアウト

Object

X

lang_code, header, footer

prefill

自動記入

Object

X

document_name, fields, recipients, comment

template_file

テンプレートファイル

Object

X

name, mime, data

Callbackパラメータ

注釈

会社情報とモードは必須入力です。

1. company(会社情報/必須)

変数名

説明

データ型

必須

備考

id

会社ID

String

O

会社管理 - 会社情報から確認

country_code

国コード

String

X

会社管理 - 会社情報の国コードを指定。任意入力ですが、入力するとopenが高速化します。

user_key

顧客システムユーザー固有キー

String

X

埋め込む顧客システム内で、ユーザーが誰であるかを明確に設定するために、eformsignに渡すユーザーアカウント情報です。

ブラウザに既にログイン情報がある場合、そのkeyと比較して一致しない場合、ログアウト処理されます。

var document_option = {
     "company" : {
         "id" : 'f9aec832efef4133a1e849efaf8a9aed',
         "country_code" : "ja",
         "user_key": "eformsign@forcs.com"
     }
};
2. mode(組み込みモード/必須)

変数名

説明

データ型

必須

備考

type

機能タイプ

String

O

01: 生成, 02: 修正, 03: 複製

template_id

テンプレートID

String

X

typeが02, 03の場合必須入力

template_type

組み込みタイプ

String

O

"form": テンプレート管理

テンプレートの新規生成

テンプレートを新規生成します。

var document_option = {
   "mode" : {
    "type" : "01",   // 01 : 生成 , 02 : 修正, 03 : 複製
    "template_type" : "form"
  }
}

テンプレートの修正

作成済みのテンプレートを修正します。

var document_option = {
   "mode" : {
    "type" : "02",  // 01 : 生成 , 02 : 修正, 03 : 複製
    "template_id" : "a2c6ed9df9b642f2ade43c7efe58c9a3", // template idを入力
    "template_type" : "form"
  }
}

テンプレートの複製

作成済みのテンプレートを複製して、新規テンプレートを生成します。

var document_option = {
   "mode" : {
    "type" : "03",  // 01 : 生成 , 02 : 修正, 03 : 複製
    "template_id" : "a2c6ed9df9b642f2ade43c7efe58c9a3", // template idを入力
    "template_type" : "form"
  }
}
3. user(ユーザー情報/任意)

変数名

説明

データ型

必須

備考

id

アカウント(メールアドレス)

String

X

ユーザーID/メールアドレスを入力

access_token

Access Token

String

X

Open API > Access Tokenを発行を参照

refresh_token

Refresh Token

String

X

Open API > Access Tokenを発行を参照

テンプレート管理権限のあるメンバーログインによる作業(IDを事前入力)

埋め込み時、eformsignのログインページが起動し、ログイン後にテンプレート管理作業を行うことができます。この際、IDがログイン画面にあらかじめ入力されます。

var document_option = {
    "user":{
        "id" : "eformsign@forcs.com"
    }
};

テンプレート管理権限を持つメンバーのトークンによる作業

埋め込みの際、eformsignにログインすることなく、特定のアカウントのトークンを利用してテンプレート管理作業を行います。 トークンの発行方法はeformsign APIの使い方 - Access Tokenの発行をご確認ください。

var document_option = {
    "user":{
        "id" : "eformsign@forcs.com",
        "access_token" : "eyJhbGciOiJSUzI1NiJ9.eyJpc3MiOiJlZ...",
        "refresh_token" : "0161ac6c-0f47-4cc3-9301-381f57c41495"
    }
};
4. layout(レイアウト/任意)

変数名

説明

データ型

必須

備考

lang_code

eformsignの言語

String

X

ja: 日本語, en: 英語, ko: 韓国語

header

ヘッダの表示有無

Boolean

X

入力しない場合、デフォルト値に設定: true

ヘッダが非表示(false)の場合、「保存」などの機能のボタンも非表示になるため、別途機能ボタンの生成が必要です。

(画面ロード時のアクションボタン生成)

footer

フッタ表示の有無

Boolean

X

入力しない場合、デフォルト値に設定: true

var document_option = {
    "layout" : {
          "lang_code" : "ja",
          "header" : true,
          "footer" : true
    }
}
5. prefill(自動入力/任意)

文書作成時に値を自動的に入力する際に使用します。

変数名

説明

データ型

必須

備考

template_name

文書タイトル

String

X

step_settings

ワークフローステップのリスト

Array

X

ステップ情報Objectのリスト

step_settings[].step_type

ワークフローの受信者タイプ

String

X

-旧ワークフロー: "02"(決裁), "03"(内部受信者), "04"(外部受信者)

-現行ワークフロー: "05"(参加者), "06"(検討者)

step_settings内の各オブジェクトに設定必須

step_settings[].step_name

ワークフローステップの名前

String

X

step_settings[].selected

「デザインする」ステップで

デフォルトの文書参加者の表示有無

Boolean

X

入力しない場合、デフォルト値に設定: false

-すべての段階で入力なし/falseの場合、開始/送信者ステップがデフォルトで表示されます。

step_settings[].use_mail

メール送信の有無

Boolean

X

入力しない場合、デフォルト値に設定: false

step_settings[].use_sms

SMS送信の有無

Boolean

X

入力しない場合、デフォルト値に設定: false

step_settings[].use_alimtalk

SMS送信時にカカオトークの使用有無

Boolean

X

入力しない場合、デフォルト値に設定: false

trueに設定した場合、カカオトークで送信し、失敗時にSMSで送信

step_settings[].recipient[]

受信者情報のリスト

Object

X

当該ステップの受信者指定時のみ

受信者情報Objectのリスト

step_settings[].recipient[].id

受信者に指定するグループ/メンバーID

String

X

当該ステップの受信者指定時のみ

-メンバー: 会社メンバーのアカウント情報(ID/メールアドレス)入力

-グループ: グループIDの入力

step_settings[].recipient[].auth

本人確認及び文書送信期限の情報

Object

X

当該ステップの受信者指定時のみ

step_settings[].recipient[].auth.valid

文書の送信期限情報

Object

X

当該ステップの受信者指定時のみ

入力しない場合、デフォルト値に設定: 7日 0時間

step_settings[].recipient[].auth.valid.day

文書の送信期限 (日)

Integer

X

当該ステップの受信者指定時のみ

step_settings[].recipient[].auth.valid.hour

文書の送信期限 (時間)

Integer

X

当該ステップの受信者指定時のみ

step_settings[].auth

本人確認及び文書の送信期限情報

Object

X

当該ステップの受信者の指定をしない場合のみ

type, password, password_hintをすべて入力しない場合:本人確認情報を使用しない

step_settings[].auth.type

本人確認の方法

String

X

当該ステップの受信者の指定をしない場合のみ

入力しない場合、デフォルト値に設定: password ( type, password, password_hintをすべて入力しない場合:本人確認情報を使用しない)

-qna: 受信者名

-field: 入力フィールドの中から選択

-password: 送信者が入力

step_settings[].auth.password

本人確認情報

String

X

当該ステップの受信者の指定をしない場合のみ

入力しない場合、デフォルト値に設定: 空欄

-typeがqnaの場合: 空欄

-typeがfieldの場合: フィールド名を入力

-typeが passwordの場合: 空欄

step_settings[].auth.password_hint

本人確認情報についてのヒント

String

X

当該ステップの受信者の指定をしない場合のみ

入力しない場合、デフォルト値に設定: 空欄

step_settings[].auth.valid

文書の送信期限情報

Object

X

当該ステップの受信者の指定をしない場合のみ

入力しない場合、デフォルト値に設定: 7日 0時間

step_settings[].auth.valid.day

文書の送信期限 (日)

Integer

X

当該ステップの受信者の指定をしない場合のみ

step_settings[].auth.valid.hour

文書の送信期限 (時間)

Integer

X

当該ステップの受信者の指定をしない場合のみ

step_settings[].additional_auth

追加認証手段 (非定型)

Object

X

当該ステップの受信者の指定をしない場合のみ

step_settings[].additional_auth.use_pincode

メール/SMS認証の使用有無

Boolean

X

当該ステップの受信者の指定をしない場合のみ (旧 use_mail)

step_settings[].additional_auth.use_pincode_result

完了文書の閲覧時にも メール/SMS認証の使用有無

Boolean

X

当該ステップの受信者の指定をしない場合のみ

step_settings[].additional_auth.use_mobile_verifyAuth

携帯電話番号本人確認の使用有無

Boolean

X

当該ステップの受信者の指定をしない場合のみ (旧 use_sms)

step_settings[].additional_auth.use_mobile_verifyAuth_result

完了文書の閲覧時にも 携帯電話本人確認の使用有無

Boolean

X

当該ステップの受信者の指定をしない場合のみ (旧. use_sms_result)

is_form_id_numbering

コンポーネント追加時の基本IDから

番号付与の有無

Boolean

X

テキストコンポーネントの追加時、コンポーネントIDのデフォルト値

-is_form_id_numberingがtrueの場合: 'テキスト1', 'テキスト2', 'テキスト3'

-is_form_id_numberingがfalseの場合: 'テキスト', 'テキスト', 'テキスト'

入力しない場合、デフォルト値に設定: true

quick_processing

文書送信時のポップアップ省略有無

Booelan

X

入力しない場合、デフォルト値に設定: false

テンプレート名の記入

一般設定 > 基本設定 > テンプレート名 に「購入申請書」と入力されます。

var template_option = {
   "prefill" : {
       "template_name": "購入申請書"
    }
}

ワークフローステップの設定 (受信者を指定しない場合)

以下のようにワークフローのステップを追加します。

  • ステップの種類: 参加者

  • ステップ名: 参加者1

  • メール通知: 使用

  • SMS通知: 使用 (カカオトーク優先)

  • 受信者の指定: X

  • 依頼の有効期間: 7日 0時間

埋め込んで実行すると、以下のように設定されます。

  • 文書参加者: 2名 (開始、参加者1)

  • ワークフロー: 開始-参加者 1-終了

var template_option = {
    "prefill": {
        "step_settings": [
            {
                "step_type": "05",
                "step_name": "参加者1",
                "use_mail": true,
                "use_sms": true,
                "use_alimtalk" : true,
                "auth": {
                    "valid": {
                        "day": 7,
                        "hour": 0
                    }
                }
            }
        ]
    }
};

ワークフローステップの設定(受信者としてメンバーを指定)

以下のようにワークフローのステップを追加します。

  • ステップの種類: 参加者

  • ステップ名: 参加者1

  • メール通知: 使用

  • SMS通知: 使用 (カカオトーク優先)

  • 受信者の指定: test2@forcs.com メンバー指定

  • 依頼の有効期間: 7日 0時間

埋め込んで実行すると、以下のように設定されます。

  • 文書の参加者: 2名 (開始、参加者1)

  • ワークフロー: 開始-参加者 1-完了

var template_option = {
    "prefill": {
        "step_settings": [
            {
                "step_type": "05",
                "step_name": "参加者1",
                "use_mail": true,
                "use_sms": true,
                "use_alimtalk" : true,
                "recipients" : [
                    {
                        "id": "test2@forcs.com"
                    }
                ],
                "auth": {
                    "valid": {
                        "day": 7,
                        "hour": 0
                    }
                }
            }
        ]
    }
};

ワークフローのステップ設定 (受信者にグループを指定)

以下のようにワークフローのステップを追加します。

  • ステップの種類: 参加者

  • ステップ名: 参加者1

  • メール通知: 使用

  • SMS通知: 使用 (カカオトーク優先)

  • 受信者の指定: 5a3e47a2f5a04909836ddf4189d10fc4 グループを指定

  • 依頼の有効期間: 7日 0時間

埋め込んで実行すると、以下のように設定されます。

  • 文書の参加者: 2名 (開始、参加者1)

  • ワークフロー: 開始-参加者 1-完了

var template_option = {
    "prefill": {
        "step_settings": [
            {
                "step_type": "05",
                "step_name": "参加者1",
                "use_mail": true,
                "use_sms": true,
                "use_alimtalk" : true,
                "recipients" : [
                    {
                        "id": "5a3e47a2f5a04909836ddf4189d10fc4"
                    }
                ],
                "auth": {
                    "valid": {
                        "day": 7,
                        "hour": 0
                    }
                }
            }
        ]
    }
};

ワークフローステップの設定 (受信者としてメンバーとグループを指定)

以下のようにワークフローのステップを追加します。

  • ステップの種類: 参加者

  • ステップ名: 参加者1

  • メール通知: 使用

  • SMS通知: 使用 (カカオトーク優先)

  • 受信者の指定: test2@forcs.com メンバー, 5a3e47a2f5a04909836ddf4189d10fc4 グループの指定

  • 以来の有効期間: 7日 0時間

埋め込んで実行すると、以下のように設定されます。

  • 文書の参加者: 2名 (開始、参加者1)

  • ワークフロー: 開始-参加者 1-完了

var template_option = {
    "prefill": {
        "template_name": "購入申請書",
        "step_settings": [
            {
                "step_type": "05",
                "step_name": "参加者1",
                "use_mail": true,
                "use_sms": true,
                "use_alimtalk" : true,
                "recipients" : [
                    {
                        "id": "test2@forcs.com"
                    },
                    {
                        "id": "5a3e47a2f5a04909836ddf4189d10fc4"
                    }
                ],
                "auth": {
                    "valid": {
                        "day": 7,
                        "hour": 0
                    }
                }
            }
        ]
    }
};

文書送信時のポップアップの省略有無の設定

全般 > 文書の設定 > 文書送信 時にポップアップ省略にチェックが入ります。

var template_option = {
    "prefill" : {
        "quick_processing" : true
    }
}

var template_option = {
    "prefill": {
        "template_name": "購入申請書",
        "step_settings": [
            {
                "step_type": "05",
                "step_name": "参加者1",
                "use_mail": true,
                "use_sms": true,
                "use_alimtalk" : true,
                "recipients" : [
                    {
                        "id": "test2@forcs.com"
                    }
                ],
                "auth": {
                    "valid": {
                        "day": 7,
                        "hour": 0
                    }
                }
            },
            {
                "step_type": "06",
                "step_name": "検討者1",
                "use_mail": true,
                "use_sms": false,
                "use_alimtalk" : false,
                "recipients" : [
                    {
                        "id": "5a3e47a2f5a04909836ddf4189d10fc4"
                    }
                ],
                "auth": {
                    "valid": {
                        "day": 7,
                        "hour": 0
                    }
                }
            }
        ],
        quick_processing : true
    }
};
6. template_file(テンプレートファイル/任意)

テンプレートに使用されるファイルが自動的にアップロードされるように設定します。

変数名

説明

データ型

必須

備考

name

ファイル名

String

O

mime

MIMEデータ形式

String

O

-PDF: "application/pdf"

-対応するすべての拡張子(OZR, PDF): "@file/octet-stream"

data

Base64に変換したファイルデータ

String

O

var document_option = {
    "tempalte_file": {
          "name": "添付テスト.pdf",
          "mime": "@file/octet-stream",
          "data": "JVBERi0xLjUNCiW1tbW1DQoxIDAgb2JqDQo8PC9UeXBlL0NhdGFsb2cvUGFnZXMgMiAwIFIvTGFuZyhrby1LUikgL1N0cnVjdFRyZWVSb290IDE1IDAgUi9NY...(후략)"
    }
}

応答確認とコールバックの設定(オプション)

eformsignの機能を埋め込んで使用する場合、特定の状況でeformsignから情報を含む応答を受け取ることができます。 また、その応答を利用して特定の動作を実行するようにコールバックを設定することができます。

応答とコールバックの種類

- 作業成功時(Success Callback)

埋め込みで実行する操作が成功した場合、実行結果の情報を含む応答を受信し、コールバックを使用することができます。 文書プレビューのように追加で実行できる作業がない機能を埋め込んだ場合は、使用することができません。

- 作業失敗時(Error Callback)

埋め込みで実行する作業が失敗した場合、実行結果の情報を含む応答を受信し、コールバックを使用することができます。 文書のプレビューなど、追加で実行できる作業がない場合は使用できません。

- 画面ロード時(Action Callback)

埋め込んだ画面がロードされると、その画面で実行できるアクションのリスト情報を含む応答を受信し、コールバックを使用することができます。 受信した応答のアクションリストに基づいて、ヘッダのアクションボタンに置き換わるボタンを設定することができます。

作業の成功/失敗時

eformsignを埋め込んで実行した作業が成功/失敗した時に返される応答と、応答の受信後に特定の機能を実行できるコールバック関数Success Callback / Error Callbackについて説明します。

応答(Response)

文書の作成/処理、テンプレートの作成/修正/複製などの作業に成功/失敗した場合、次のようなresponseが返されます。

EformSignDocument(テンプレートで文書作成、文書処理)

変数名

データ型

説明

備考

type

String

組み込んで作成した作業の種類

  • document

  • その他の機能については今後提供予定

fn

String

実行した機能

  • "saveSuccess" : 保存成功

  • その他 : エラー

code

String

文書の作成・処理の際、結果コードを返却

  • "-1" : 文書の作成/処理成功

  • "0" : ログアウト成功

  • その他 : エラー

message

String

文書の作成・処理の際、成功・エラーメッセージを返却

  • "成功しました。" : 文書作成/処理成功

  • その他 : エラー

document_id

String

文書提出の成功時、作成した文書のdocument_idを返却

例) "910b8a965f9402b82152f48c6da5a5c"

title

String

文書提出の成功時、作成した文書タイトルを返却

例) "契約書"

values

Object

document_optionに定義されたreturn_fieldsに

入力したフィールド名に対してユーザーが入力した値を返却

{"フィールド名": "フィールド値"} 型のObjectで返却

例) {"名前": "田中太郎"}

recipients

Array

次の受信者の情報Objectリストを返却

recipients[].step_idx

String

ワークフローの順序

1人目の受信者: "2"、2人目以降の受信者: 3, 4...と順番に沿って1ずつ増加

recipients[].step_type

String

受信者の種類

旧ワークフロー: "01"(完了)、"02"(決裁)、"03"(外部受信者)、"04"(内部受信者)

現行ワークフロー: "01"(完了)、"05"(参加者)、"06"(検討者)

recipients[].recipient_type

String

受信者の種類

"01" : 会社のメンバー

"02" : 外部受信者

recipients[].use_mail

Boolean

メール送信

recipients[].use_sms

Boolean

SMS送信

recipients[].id

String

アカウント(メールアドレス)

recipients[].name

String

受信者の名前

recipients[].sms

String

携帯電話番号

recipients[].auth

Object

本人確認及び文書の送信期限情報

recipients[].auth.password

String

本人確認情報(パスワード)

recipients[].auth.password_hint

String

本人確認情報のヘルプ(パスワードのヒント)

recipients[].auth.valid

Object

文書の送信期限情報

recipients[].auth.valid.day

Integer

文書の送信期限(日)

recipients[].auth.valid.hour

Integer

文書の送信期限(時間)

{
  "type": "document",
  "fn": "saveSuccess",
  "code": "-1",
  "message": "成功しました。",
  "document_id": "c59c522ea9294660bfa84263c95c4e54",
  "title": "個人情報取扱同意書",
  "values": {
    "名前": "田中太郎"
  },
  "recipients": [
    {
      "step_idx": 2,
      "step_type": "06",
      "recipient_type": "02",
      "use_mail": true,
      "use_sms": true,
      "id": "test@forcs.com",
      "name": "田中太郎",
      "sms": "+821023456789",
      "auth": {
        "password": "",
        "password_hint": "",
        "valid": {
          "day": 7,
          "hour": 0
        }
      }
    }
  ]
}
EformSignTemplate (マイファイルで文書作成、テンプレート生成、テンプレート修正、テンプレート複製)

変数名

データ型

説明

備考

type

String

組み込んで作成した作業の種類

-"template"

fn

String

実行した機能

-"saveSuccess" : 保存成功

-それ以外 : エラー

code

String

文書の作成・処理の際、結果コードを返却

-"-1" : テンプレート作業に成功

-"0" : ログアウト成功

-それ以外 : エラー

message

String

テンプレート作業時、成功/エラーメッセージを返却

-"成功しました。" : 文書作成/処理成功

-それ以外 : エラー

template_id

String

テンプレート作業の成功時、作業したテンプレートのIDを返却

例) "910b8a965f9402b82152f48c6da5a5c"

template_name

String

テンプレート作業の成功時、作業したテンプレート名を返却

例) "契約書"

step_settings

Array

ワークフローステップのリスト

step_settings[].step_type

String

ワークフローステップの種類

-共通: "00"(開始)、 "01"(完了)

-旧ワークフロー: "02"(検討)、 "03"(外部受信者)、 "04"(内部受信者)

-現行ワークフロー: "05"(参加者)、 "06"(検討者)

step_settings[].step_name

String

ワークフローステップ名

例) "参加者1"

{
    "type": "template",
    "fn": "saveSuccess",
    "code": "-1",
    "message": "成功しました。",
    "template_id": "9a368e9409bc4351865637e85882cf01",
    "template_name": "テンプレート埋め込みテスト_新規",
    "step_settings": [
        {
            "step_type": "00",
            "step_name": "開始"
        },
        {
            "step_type": "05",
            "step_name": "参加者2"
        },
        {
            "step_type": "06",
            "step_name": "検討者1"
        },
        {
            "step_type": "05",
            "step_name": "参加者3"
        },
        {
            "step_type": "01",
            "step_name": "完了"
        }
    ]
}

コールバック(Callback)

Success CallbackとError Callbackは、各タスクの成功時、失敗時に実行される関数です。 タスクの成功/失敗時に返されるresponseを受け取り、目的のタスクを実行するように設定することができます。

例えば、必要に応じて必要な値をコンソールに出力(console.log)、警告ウィンドウを表示(alert)、条件文などを利用して、状況応じて必要な機能を実行させることができます。

EformSignDocument 実行例
var eformsign = new EformSignDocument();

var document_option = { /* 省略 */ };

var success_callback= function(response){
    console.log(response.document_id);
    console.log(response.title);
    console.log(response.values["名前"]);
};

var error_callback= function(response){
    alert(response.message);
    console.log(response.code);
    console.log(response.message);
};

eformsign.document(document_option, "eformsign_iframe", success_callback, error_callback);

eformsign.open();
EformSignTemplate 実行例
var eformsign = new EformSignTemplate();

var document_option = { /* 省略 */ };

var success_callback= function(response){
    if (response.type ==='template'){
        console.log(response.template_id);
        console.log(response.template_name);
        console.table(response.step_settings);
        if ("-1" == response.code) {
            alert("テンプレートを生成しました。\n" + "- document_id : " + response.template_id + "\n- title : " + response.template_name);
        } else {
            alert("テンプレートの生成に失敗しました。\n" + "- code : " + response.code + "\n- message : " + response.message);
        }
    }
};

var error_callback= function(response){
    alert(response.message);
    console.log(response.code);
    console.log(response.message);
};

eformsign.document(document_option, "eformsign_iframe", success_callback, error_callback);

画面のロード時

eformsignを埋め込んだ画面がロードされた際の応答と、応答の受信時に特定の機能を実行することができるコールバック関数Action Callbackについて説明します。 また、ヘッダにあるアクションボタンを代替するボタンの生成方法についても説明します。

応答(Response)

埋め込んだeformsign機能の画面がロードされると、responseによってその画面で実行できる機能に関する情報が返却されます。 Responseの構造と例は以下の通りです。

EformSignDocument (テンプレート文書作成、文書処理)

変数名

データ型

説明

備考

type

String

埋め込んで作成した作業の種類

-EformSignDocument使用作業: "document"

-EformSignTemplate使用作業: "template"

fn

String

実行した機能

-"actionCallback"

-それ以外 : エラー

data

Array

画面内で実行できる機能の一覧

-{"name":"名前", "code":"00"} 形式のObjectのリスト

-{"name": "func_get_return_fields", code: "99"}は戻り値フィールドを処理するための機能で、常に表示されます。

data[].name

String

機能の名称

data[].code

String

機能のコード

{
  "type": "document",
  "fn": "actionCallback",
  "data": [
    {
      "name": "送信",
      "code": "21"
    },
    {
      "name": "func_get_return_fields",
      "code": "99"
    }
  ]
}

コールバック (Callback)

Action Callbackは機能画面のロード時に、responseを受信後に実行される関数です。 Responseと無関係の別作業を自動的に実行するように設定したり、文書画面の読み込み時に返されるresponseを受け取り、それに応じて必要な作業を実行するように設定することができます。

コード例
var eformsign = new EformSignDocument();

var document_option = { /* 省略 */ };

var success_callback= function(response){
    // 省略
};

var error_callback= function(response){
    // 省略
};


var action_callback= function(response){
    alert("赤色で強調表示されている入力欄に値を入力してください。");
    console.table(response.data);   // 機能リストの出力
}

eformsign.document(document_option, "eformsign_iframe", success_callback, error_callback, action_callback);

アクションボタンの生成

機能オプションの設定時、ヘッダを非表示にするオプションがあります。 しかし、ヘッダを非表示にすると、ヘッダに存在するアクションボタン(送信、リクエストなど)が同時に非表示となるため、別途アクションボタンを生成する必要があります。

EformsignDocumentオブジェクトとEformsignTemplateオブジェクトの両方に存在するsendAction関数を使うと、特定のアクションを実行することができます。 任意の形式でボタンを生成し、クリックするとsendAction関数が実行されるように設定してください。


  • EformSignDocument.sendAction(action)

  • EformSignTemplate.sendAction(action)

パラメータ名

パラメータの種類

必須/任意

説明

action

JSON

必須

アクション情報

action.type

String

必須

区分 (01: 文書、 02: テンプレート)

action.code

String

必須

アクションコード

sendAction関数で使えるアクションコードのリストは以下の通りです。

action.type

action.code

ボタン名

ボタンテキスト

説明

01

00

btn_close

閉じる

01

01

btn_save_as_draft

下書き保存

文書作成中に下書き保存

01

02

btn_process_request

依頼

内部受信者/内部受信者を含む複数の受信者に文書作成を依頼(旧ワークフローを使用した文書作成時)

01

03

btn_outsider

依頼

外部受信者に文書作成を依頼(旧ワークフローを使用した文書作成時)

01

04

btn_approval

依頼

決裁者に文書作成を依頼(旧ワークフローを使用した文書作成時)

01

05

btn_write_complete

完了

文書作成の完了 (ワークフロー上、次の受信者がいない場合)

01

06

btn_acceptStepReject

承認

差戻し依頼の承認

01

07

btn_stepReject

差戻し

文書の差戻し(内部受信者)

01

08

btn_cancelStepReject

差戻し

差戻し依頼の差戻し

01

09

btn_active

承認

文書の承認(旧ワークフローを使用した文書決裁時)

01

10

btn_approvalReject

差戻し

文書の差戻し (決済者)

01

11

btn_delete_approval

承認

文書の削除の承認

01

12

btn_delete_refuse

差戻し

文書の削除の差戻し

01

13

btn_revoke_approval

承認

文書の無効化の承認

01

14

btn_revoke_refuse

差戻し

文書の無効化の差戻し

01

15

btn_change_title

タイトル変更

文書タイトルの変更

01

16

btn_show_history

履歴確認

文書プレビューの埋め込み時、もっと見る( ⋮ ) → 履歴を見るボタン

01

18

btn_send_pdf

完了文書の送信

もっと見る( ⋮ ) → 完了文書送信ボタン

01

19

btn_draft

下書き保存

文書処理中の一時保存

01

20

btn_unstructured_write_complete

送信

文書作成完了 (マイファイルで文書作成時、受信者がいない場合)

01

21

btn_unstructured_process_request

送信

文書の送信 (現行ワークフローを使用して文書作成時、次の受信者がいる場合)

01

22

btn_unstructured_active

送信

文書の送信(現行ワークフローを使用した文書処理時)

01

99

func_get_return_fields

リターンフィールドの取得(文書の送信/完了/依頼時に自動実行)

02

00

閉じる

文書作成画面から出てフォーム設定に戻る(マイファイルで文書作成時)

02

01

anotherTemplateBtn

完了

テンプレート一覧に戻る (テンプレート管理)

02

02

saveFormBtn

保存

テンプレートを保存(テンプレート管理

02

03

designTab

デザインする

[デザインする]タブ

02

04

setupTab

設定/オプション

[設定]タブ(テンプレート管理) / [オプション]タブ(マイファイルで文書作成)

02

05

receipientTab

受信者の指定

[受信者を指定する]タブ(マイファイルで文書作成)

02

06

writeDocumentBtn

文書の作成を始める

[文書の作成を始める]ボタン(マイファイルで文書作成)

02

99

func_get_return_fields

リターンフィールドのインポート (文書送信/完了/依頼時に自動実行)

例)クリックすると(現行ワークフローを使用し、次の受信者がいる文書を作成後)送信するボタンは次のように作成することができます。

<button id="btn_21" onclick="eformsign.sendAction({type: "01", code: "21"});">送信</button>

Tip

上記のアクションコード一覧で確認できるように、ワークフローの構成や文書の状態などによって、使用するボタンの種類は異なります。 また、同じテキストのボタンであっても、状況によって異なるアクションコードを使用しなければならない場合が存在します。 したがって、特定の機能を実行するボタンを固定で配置しておくと、ボタンがその状況に合わずに誤動作が発生する可能性があります。 エラーの発生する可能性を減らすために、画面ロード時に受信する応答で、その画面で実行できるアクションのリストを確認後、そのリストに基づいてボタンを生成・表示する可変型方式の使用を推奨します。

以下は可変ボタンのコード例です。すべてのアクションコードに対して見えないボタンを生成しておき、その画面で実行できるアクションに該当するボタンだけを表示するように設定します。

var eformsign = new EformSignDocument();

var document_option = { /* 省略 */ };

var success_callback= function(response){
    // 省略
};

var error_callback= function(response){
    // 省略
};


var action_callback= function(response){
    $('#buttonList').find('button').css('display','none');      // div id=buttonListのすべてのボタンを非表示に設定
    $(response.data).each(function(idx, action){                // response.dataの各値について
        $('#buttonList').find('button').each(function(idx, btn){    // div id=buttonListのすべてのボタンで
            if ($(btn).attr('id').replace('btn_','') === action.code){  // もしdata[].codeに該当するボタンがあれば
                $(btn).attr('title',action.name).text(action.name);     // ボタンのタイトルをdata[].nameに設定し
                $(btn).css('display', '');                              // ボタンが見えるよう設定
            }
        });
    });
    console.table(response.data);
}


function actionTest(action) {   // より簡単にsendAction関数にJSONを入力して実行するための関数の例であり、必ずしもこのような形で使う必要はありません。
    var action = {
        type : '01',    // type : 01 : 文書 , 02 : テンプレート
        code : action
    }
    eformsign.sendAction(action);
}

eformsign.document(document_option, "eformsign_iframe", success_callback, error_callback, action_callback);
<!-- すべてのアクションのボタンを生成しておき、非表示に設定後、action_callbackで必要なボタンだけを表示するように処理 -->
<div id="buttonList" style="padding: 10px;">
    <button id="btn_01" style="width:80px; height:30px; display: none;" onclick="actionTest('01');"></button>
    <button id="btn_02" style="width:80px; height:30px; display: none;" onclick="actionTest('02');"></button>
    <button id="btn_03" style="width:80px; height:30px; display: none;" onclick="actionTest('03');"></button>
    <button id="btn_04" style="width:80px; height:30px; display: none;" onclick="actionTest('04');"></button>
    <button id="btn_05" style="width:80px; height:30px; display: none;" onclick="actionTest('05');"></button>
    <button id="btn_06" style="width:80px; height:30px; display: none;" onclick="actionTest('06');"></button>
    <button id="btn_07" style="width:80px; height:30px; display: none;" onclick="actionTest('07');"></button>
    <button id="btn_08" style="width:80px; height:30px; display: none;" onclick="actionTest('08');"></button>
    <button id="btn_09" style="width:80px; height:30px; display: none;" onclick="actionTest('09');"></button>
    <button id="btn_10" style="width:80px; height:30px; display: none;" onclick="actionTest('10');"></button>
    <button id="btn_11" style="width:80px; height:30px; display: none;" onclick="actionTest('11');"></button>
    <button id="btn_12" style="width:80px; height:30px; display: none;" onclick="actionTest('12');"></button>
    <button id="btn_13" style="width:80px; height:30px; display: none;" onclick="actionTest('13');"></button>
    <button id="btn_14" style="width:80px; height:30px; display: none;" onclick="actionTest('14');"></button>
    <button id="btn_15" style="width:80px; height:30px; display: none;" onclick="actionTest('15');"></button>
    <button id="btn_16" style="width:80px; height:30px; display: none;" onclick="actionTest('16');"></button>
    <button id="btn_17" style="width:80px; height:30px; display: none;" onclick="actionTest('17');"></button>
    <button id="btn_18" style="width:80px; height:30px; display: none;" onclick="actionTest('18');"></button>
    <button id="btn_19" style="width:80px; height:30px; display: none;" onclick="actionTest('19');"></button>
    <button id="btn_20" style="width:80px; height:30px; display: none;" onclick="actionTest('20');"></button>
    <button id="btn_21" style="width:80px; height:30px; display: none;" onclick="actionTest('21');"></button>
    <button id="btn_22" style="width:150px; height:30px; display: none;" onclick="actionTest('22');"></button>
</div>


<!-- 埋め込むiframeを生成 -->
<iframe id="eformsign_iframe" name="eformsign_iframe" style="width: 100%; height: 700px;"></iframe>

機能の埋め込みと実行

先ほど生成したオプションとコールバックを使用してeformsignの機能を実際に埋め込み、実行するためのコードを作成します。

eformsign機能の埋め込み領域の作成

まず、eformsign機能を埋め込んで表示するための領域を作成します。 eformsign機能を埋め込むための領域はiframe形式に対応しています。

<iframe id="eformsign_iframe" width="1440" height="1024"> </iframe>

例)上記のように横1440ピクセル、縦1024ピクセルのiframeを生成することができます。 領域生成時にidを設定する必要があります。上の例では、idを"eformsign_iframe"に設定しました。

eformsign機能の埋め込み用コードの作成

先ほど生成したiframe領域にeformsign機能を埋め込んで表示されるようにコードを作成します。 まず、埋め込む機能に合うオブジェクトを変数形式で生成します。下記の例では変数名を"eformsign"に設定しました。

var eformsign = new EformSignDocument();

先ほど生成した埋め込みオプションとコールバック関数を変数形式で入力します。

var document_option = {
    // 中略
    "mode" : {
        "type" : "01",
        "template_id" : "a2c6ed9df9b642f2ade43c7efe58c9a3"
    },
    // 中略
}


var success_callback= function(response){
    // 省略
};

var error_callback= function(response){
    // 省略
};

var action_callback= function(response){
    // 省略
};

eformsign機能の実行のためのオプションを設定する関数を作成します。この際、先ほど生成したiframe領域と各種変数と関数を使います。 機能実行のための関数は、 EformsignDocumentオブジェクトの場合は document関数EformSignTemplateオブジェクトの場合は template関数を使用します。


EformSignDocument.document(document_option, iframe_id, success_callback , error_callback, action_callback)

パラメータ名

パラメータの種類

必須/任意

説明

document_option

JSON

必須

eformsignを埋め込んで実行する会社、ユーザー、テンプレートなどのオプションを指定

iframe_id

String

必須

eformsignを埋め込んで表示するiframeのID

success_callback

Function

任意

eformsign文書の作業成功時、呼び出されるcallback関数

error_callback

Function

任意

eformsign文書の作業失敗時、呼び出されるcallback関数

action_callback

Function

任意

eformsignの画面読み込み時、呼び出されるcallback関数


EformSignTemplate.template(template_option, iframe_id, success_callback , error_callback, action_callback)

パラメータ名

パラメータの種類

必須/任意

説明

template_option

JSON

必須

eformsignを埋め込んで実行する会社、ユーザー、テンプレートなどのオプションを指定

iframe_id

String

必須

eformsignを埋め込んで表示するiframeのID

success_callback

Function

任意

eformsignテンプレート/文書の作業成功時、呼び出されるcallback関数

error_callback

Function

任意

eformsignテンプレート/文書の作業失敗時、呼び出されるcallback関数

action_callback

Function

任意

eformsignの画面読み込み時、呼び出されるcallback関数

eformsign.document(document_option, "eformsign_iframe", success_callback, error_callback, action_callback);

eformsign機能の実行

eformsign機能を実行するにはopen関数の呼び出しが必要です。 open関数は設定するパラメータがなく、オプション設定を終えたEformSignDocumentオブジェクトまたはEformSignTemplateオブジェクトに使用して、挿入された機能を実行する役割を持ちます。 機能実行のためのオプションを設定するdocumentまたはtemplate関数を作成したら、その後open関数を作成します。

eformsign.open();

サンプルコード

インストール作業を含む全体的なサンプルコードは以下の通りです。

<html>
<head>
    <title>embedding test</title>

    <script src="https://www.eformsign.com/plugins/jquery/jquery.min.js"/>
    <script src="https://www.eformsign.com/lib/js/efs_embedded_v2.js"/>
</head>


<body>
    <iframe id="eformsign_iframe" width="1440" height="1024"> </iframe>


    <script>
        var eformsign = new EformSignDocument();

        var document_option = {
            // 中略
            "mode" : {
               "type" : "01",
               "template_id" : "a2c6ed9df9b642f2ade43c7efe58c9a3"
            },
            // 中略
        };

        var success_callback= function(response){
            // 省略
        };

        var error_callback= function(response){
            // 省略
        };

        var action_callback= function(response){
            // 省略
        };

        eformsign.document(document_option, "eformsign_iframe", success_callback, error_callback, action_callback);
        eformsign.open();
    </script>
</body>