フローノードコンポーネントは、カスタムページのプレミアムコンポーネントです。
1. ユースケース
カスタムページのフローノードコンポーネントは、派遣人員情報のエントリやログイン情報の新規登録などのフォーム構築に適しており、基本情報の入力進捗をリマインドできます。コンポーネント属性、使い方および例については、こちらをご確認ください。
2. 基本コンポーネント属性
フローノードコンポーネント属性設定2.1 現在のフローノード属性
数値タイプで、現在のフローノードが位置するフローノードデータのステータスを制御します。すべてのフローノードデータのステータスがデフォルトの場合、現在のフローノードは進行中ステータスで表示され、以前のフローノードは完了、以降のフローノードは待機として表示されます。 現在のフローノード属性2.2 タイプ属性
フローノードコンポーネントのタイプには、cricle(円形)、arrow、dot の3種類があります。それぞれのスタイルは以下の通りです。 フローノードタイプ属性のスタイル2.3 表示方向
フローノードコンポーネントの表示方向は横方向または縦方向に設定できますが、arrow タイプは縦方向スタイルに対応していません。 フローノード表示方向属性のスタイル2.4 コンテンツ整列属性
コンテンツ整列属性は cricle タイプのみ対応しています。arrow および dot タイプは本属性に対応していないため、これら2つのタイプを選択した場合には表示されません。 フローノードコンテンツ整列属性のスタイル2.5 閲覧のみモード
閲覧のみモードはデフォルトでオフになっており、フローノードのノードをクリックして、ノードに設定されたカスタム操作を実行できます。 閲覧のみモードがオンの場合、フローノードのノードはクリックできず、カスタム操作もトリガーされません。 ノードへのカスタム操作の設定: フローノードのカスタム操作以下のコードは JS パネルに直接コピーできます。
3. プレミアムコンポーネント設定
3.1 データ形式
3.2 フローノードデータの動的設定
フローノードコンポーネントのフローノードデータを変数データソースにバインドし、ボタンコンポーネントをドラッグしてクリックアクションを設定します。クリック時に変数データソースの値を変更することで、フローノードデータを動的に設定できます。 変数データソースをバインド ボタンコンポーネントのアクションを設定以下のコードは JS パネルに直接コピーできます。
3.3 代表的な例
デフォルト値が 0 の変数データソースを設定し、その変数データソースをフローノードコンポーネントの現在のフローノード属性にバインドします。 変数データソースをバインド3.3.1 準備
(1) コンテナコンポーネントの固定値識別子を設定し、データ入力が必要なコンポーネントをコンテナコンポーネント内に配置します。次のフローノードで入力するコンポーネントの表示・非表示は、コンテナコンポーネントの表示・非表示状態で制御します。
コンテナコンポーネントの固定値識別子を設定(2) 送信の成功/失敗時のお知らせテキスト、アイコン、およびスタイルを設定します。ここでは、変数データソースを使用してコンテナコンポーネントの表示・非表示を制御します。
データソースを設定してコンテナの表示を制御 block_3 コンテナは変数データソースにバインドされています(3) ボタンコンポーネントにアクションをバインドします。次へ、再送信、および再送信ボタンは同じ onclick アクションを共有します。
ボタンコンポーネントにアクションをバインド(4) フローノードのノードにカスタムクリックアクション onclick2 を設定します。
フローノードにバインドされたアクション + 動作デモ以下のコードは JS パネルに直接コピーできます。注意:コンポーネントの固定値識別子は置き換える必要があります。