サービスセンター
Home

スマートフォームコンポーネントの高度な属性

eSignGlobalスマートフォーム作成時にカスタムコンポーネントの詳細な属性設定をサポート：

  • 【イベント設定】機能を利用すると、複数の情報収集コンポーネントの入力値をリアルタイムで簡単な数式で計算し、計算結果をターゲットコンポーネントに自動的に表示できます。
  • 【アクション設定】機能を利用すると、フォームコントロールで特定のアクションタスクが発生したときにジェネレーターを呼び出すことができます。たとえば、カスタムの複雑な計算を実行して対応するコンポーネントに値を割り当てたり、JavaScriptを使用して独自のビジネスロジックを実装したりできます。
 

イベント設定

機能紹介

数式計算を通じて、複数の情報収集コンポーネントの入力値をリアルタイムで計算し、計算結果をターゲットコンポーネントに自動的に表示します。この機能は、視覚的な数式を通じてコンポーネントのバインドと応答的な更新を実現し、コードを記述せずに複雑なビジネスロジックの計算を完了できます。

1.png

説明：

  • イベント設定機能は現在、加算、減算、乗算、除算のみをサポートしています。

 

応用シーン

簡単な計算後にリアルタイムで表示する必要があるシーンに適しています。例：

  • 購買注文フォームで税込合計金額をリアルタイムで計算：（単価 * 数量） * (1 + 税率/100)
  • デバイスの動作効率を動的に計算：（電流 * 電圧 * 動作時間） / 1000

使い方

購買オーダーでリアルタイムに税込合計金額を計算する場合を例にとります：

  1. フォームに4つの数値フィールド（単価、数量、税率、税込合計金額）をドラッグアンドドロップします。
2.png

説明：

  • 計算機能は数値フィールドにのみ適用されます。
  • テキストフィールドを追加した場合、文字列の連結を実現する「+」機能のみがサポートされます。この場合、ターゲットフィールドのタイプもテキストフィールドである必要があります。
  1. 【単価】フィールドの設定パネルの【高度な属性】>【イベント設定】でイベントを追加します。。
3.png
  1. 【イベント設定】で、【トリガータイプ】が【フィールドの変化】の場合に、関数をトリガーするように設定します。
4.png
  1. 計算式を編集します。「@」+コンポーネント名を入力すると、計算に使用するフィールドを追加できます。
5.png

必要に応じて、（単価 * 数量）*（1 + 税率/100）などの式を記述します。

6.png

注意：

  • 括弧を使用する場合は、必ず英語の括弧「()」を使用してください。
  1. 【ターゲットフィールド】で、計算結果を表示するフィールドを選択します。。ターゲットフィールドのデータ型に基づいて、計算に関与するフィールドの型を強制的に変換します。

注意：

  • ターゲットフィールドのタイプは、計算に関与するフィールドのタイプと同じである必要があります。
7.png
  1. 計算に関与するすべてのフィールドは、計算に関与する各フィールドの値が変化するたびに再計算されるように、この式を設定する必要があります。このシナリオでは、【単価】【数量】【税率】はすべてこのイベント設定を設定する必要があります。

注意：

  • 【目標フィールド】は設定する必要はありません。
  1. 設定が完了したら、フォームを保存します。
8.png

 

アクション設定

機能紹介

ユーザーは、【高度な属性】>【アクション設定】でjavascriptコードを記述して、独自のビジネスロジックを実装できます。

利用シーン

  • 単純な【数式計算】機能では完了できない複雑なフィールド値の計算。たとえば、1行のテキスト入力の内容を数字に変換し、カスタム計算ルールで計算した後、他の1つまたは複数のフィールドに設定するなど。
  • フォームコントロールで特定のアクションが発生したときに、ジェネレーターのメソッドを呼び出します。

使い方

1. js編集パネルを開きます

  1. コントロールを選択します。
  2. 【高度な属性】をクリックして、対応するパネルに切り替えます。
  3. 【動作設定】>【新規動作】をクリックします。
  4. 表示されるドロップダウンメニューで対応する動作を選択すると、対応する動作がトリガーされた後、記述したJSコードが実行されます。現在、次の4つの動作がサポートされています。
    1. mounted，コンポーネントのロード後
    2. onBlur，コンポーネントがフォーカスを失ったとき
    3. onChange，コンポーネントの値が変更されたとき
    4. onFocus，コンポーネントが選択されたとき
9.png

説明：

  • 【mountedコンポーネントのロード後】を設定する必要がある場合は、まず残りの3つの状態のいずれかを選択し、ジャンプ先のページで右上の【保存】をクリックしてから、左側の【mounted】を選択します。
10.png
  1. js編集パネルにコードを書き込みます。通常のコードの記述に加えて、次の章では、入出力パラメータと現在サポートされている関数について説明します。jsパネルのプレビューは次のとおりです。
13.png

 

2. イベントパラメータの取得

パラメータが必要な場合、たとえば、他のコンポーネントの値をコードに渡して処理する場合は、次のように記述します。

function () {

this.models[fieldKey]

//示例：this.models[' input_yi7bli17 ']

}

2.1. 現在のコンポーネント属性の取得

イベント関数では、arguments[0]を使用して属性値を取得できます。以下に例を示します。

function () {

const { field} = arguments[0]

}

また、アクションが異なると、取得できるコンポーネントの属性も異なります。詳細については、以下を参照してください。

2.1.1. onBlur

コンポーネントのfieldKeyを取得できます。fieldKeyはstring型です。例を以下に示します。

function () {

//表示获取当前组件的值

const { field } = arguments[0]

this.models['input_pr13o8wi']=field

}

2.1.2. onChange

コンポーネントのfieldKeyとvalueを取得できます。これらのデータ型は{ field: string, value: any }

属性の意味：

  • field：フィールドキー
  • value：フィールド値

2.1.3. onFocus

onBlurと同様

2.2. 関数 [this] の詳細

コンポーネントの属性を取得する以外に、他のコンポーネントの属性を取得することもサポートしています。

アクション関数では、thisはGenerateFormインスタンスを指し、GenerateFormのメソッドを直接呼び出すことができます。

ここで強調したいのは、this関数では、コンポーネントキーを代入すると、その値を取得したり、対応するfieldKeyに値を書き込んだりできるということです。例：this.models['fieldKey']

function () {

// 获取表单值

this.getData()

// 设置表单字段的值

this.models['id'] = 'new value'

// 触发某个编写好的函数

this.triggerEvent('foo', { a: 123 })

// 显示表单隐藏的字段

this.display('id')

}

3. コードの作成

必要な属性や値を取得した後、次のように直接コードを記述できます。

const keyA = 'input_yi7bli17'const keyB = 'input_78qtmi79'const keyC = 'input_n8qwf66f'this.models[keyC] = this.models[keyA] + this.models[keyB]

3.1. サポートされている関数

関数内で triggerEvent を使用して関数を呼び出す：

function () {

this.triggerEvent('test', { id: '123' })

}

test メソッドでは、次の方法でパラメータを取得できます。

function () {

const { id } = arguments[0]

}

4. 実行

フォームの「プレビュー」をクリックして、対応するアクションをトリガーすると、効果を確認できます。

5. 例

例：現在のコンポーネントの値を取得し、別のコンポーネントに割り当てます。別のコンポーネントのキーは input_69m9x9mj です。

11.png
12.PNG

 

    リンク: