> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# フローノード

> 本ページでは、フローノードコンポーネントのユースケース、基本属性設定、およびプレミアム設定について紹介します。現在のフローノード属性、タイプ属性、表示方向を含み、フローノードデータの動的な設定方法と代表的な例をご案内します。

| **機能** | **Freeプラン** | **ベーシック版** | **プロフェッショナル版** | **専用版** |
| ------ | ----------- | ---------- | -------------- | ------- |
| フローノード | 非対応         | 非対応        | 対応             | 対応      |

フローノードコンポーネントは、カスタムページのプレミアムコンポーネントです。

## 1. ユースケース

カスタムページのフローノードコンポーネントは、派遣人員情報のエントリやログイン情報の新規登録などのフォーム構築に適しており、基本情報の入力進捗をリマインドできます。

<Note>
  コンポーネント属性、使い方および例については、[**こちら**](/ja/open/yida/components/advanced/steps)をご確認ください。
</Note>

フローノードのデモ

## 2. 基本コンポーネント属性

フローノードコンポーネント属性設定

### 2.1 現在のフローノード属性

数値タイプで、現在のフローノードが位置するフローノードデータのステータスを制御します。すべてのフローノードデータのステータスがデフォルトの場合、現在のフローノードは進行中ステータスで表示され、以前のフローノードは完了、以降のフローノードは待機として表示されます。

現在のフローノード属性

### 2.2 タイプ属性

フローノードコンポーネントのタイプには、cricle（円形）、arrow、dot の3種類があります。それぞれのスタイルは以下の通りです。

フローノードタイプ属性のスタイル

### 2.3 表示方向

フローノードコンポーネントの表示方向は横方向または縦方向に設定できますが、arrow タイプは縦方向スタイルに対応していません。

フローノード表示方向属性のスタイル

### 2.4 コンテンツ整列属性

コンテンツ整列属性は cricle タイプのみ対応しています。arrow および dot タイプは本属性に対応していないため、これら2つのタイプを選択した場合には表示されません。

フローノードコンテンツ整列属性のスタイル

### 2.5 閲覧のみモード

閲覧のみモードはデフォルトでオフになっており、フローノードのノードをクリックして、ノードに設定されたカスタム操作を実行できます。

閲覧のみモードがオンの場合、フローノードのノードはクリックできず、カスタム操作もトリガーされません。

ノードへのカスタム操作の設定：

フローノードのカスタム操作

<Note>
  以下のコードは JS パネルに直接コピーできます。
</Note>

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function onClick(index) {
  this.utils.toast({
    title: `Current clicked index: ${index}`
  });
  if(index == 0){
    this.utils.router.push('https://www.yidaapps.com', {}, true, true)
  }
}
```

## 3. プレミアムコンポーネント設定

### 3.1 データ形式

| **フィールド** | **名前** | **説明**                                                                           |
| --------- | ------ | -------------------------------------------------------------------------------- |
| title     | タイトル   |                                                                                  |
| content   | コンテンツ  | 渡されない場合は、外側のフローノードの現在のフローノード（current）属性に基づいて生成されます。有効な値は wait、process、finish です。 |
| status    | ステータス  |                                                                                  |
| icon      | アイコン   |                                                                                  |
| percent   | パーセント  |                                                                                  |
| disabled  | 無効     |                                                                                  |

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
[
    {
        "title": "step1",
        "content": "Content",
        "status": "wait",
        "icon": "smile",
        "percent": 100,
        "disabled": false,
    },
    {
        "title": "step2",
        "content": "Content",
        "status": "wait",
        "icon": "smile",
        "percent": 100,
        "disabled": false,
    },
]
```

### 3.2 フローノードデータの動的設定

フローノードコンポーネントのフローノードデータを変数データソースにバインドし、ボタンコンポーネントをドラッグしてクリックアクションを設定します。クリック時に変数データソースの値を変更することで、フローノードデータを動的に設定できます。

変数データソースをバインド

ボタンコンポーネントのアクションを設定

<Note>
  以下のコードは JS パネルに直接コピーできます。
</Note>

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
//Add an item bound Action Settings
export function onClickAdd(){
  console.log('onClick');
  const data = this.state.demoData
  data.push({
    'title': 'newStep',
    'content': 'New Content'
  })
  this.setState({
    demoData: data,
    currentData: this.state.currentData + 1
  })
}
```

### 3.3 代表的な例

デフォルト値が 0 の変数データソースを設定し、その変数データソースをフローノードコンポーネントの現在のフローノード属性にバインドします。

変数データソースをバインド

#### 3.3.1 準備

##### (1) コンテナコンポーネントの固定値識別子を設定し、データ入力が必要なコンポーネントをコンテナコンポーネント内に配置します。次のフローノードで入力するコンポーネントの表示・非表示は、コンテナコンポーネントの表示・非表示状態で制御します。

コンテナコンポーネントの固定値識別子を設定

##### (2) 送信の成功／失敗時のお知らせテキスト、アイコン、およびスタイルを設定します。ここでは、変数データソースを使用してコンテナコンポーネントの表示・非表示を制御します。

データソースを設定してコンテナの表示を制御

block\_3 コンテナは変数データソースにバインドされています

##### (3) ボタンコンポーネントにアクションをバインドします。次へ、再送信、および再送信ボタンは同じ onclick アクションを共有します。

ボタンコンポーネントにアクションをバインド

##### (4) フローノードのノードにカスタムクリックアクション onclick2 を設定します。

フローノードにバインドされたアクション ＋ 動作デモ

<Note>
  以下のコードは JS パネルに直接コピーできます。注意：コンポーネントの固定値識別子は置き換える必要があります。
</Note>

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
/**
* button onClick
*/
export function onClick() {
  let formCurrent = this.state.formCurrent
  switch (formCurrent) {
    //On the first click, formCurrent is 0
    case 0:
        this.$("block_1").set("behavior", "HIDDEN")
        this.$("block_2").set("behavior", "NORMAL")
        this.setState({
          formCurrent: formCurrent + 1
        })
      break;
    case 1:
        this.$("block_2").set("behavior", "HIDDEN")
        //Randomly succeed or fail. Later, you can call a Data Source and use the returned request result to determine Success or Failed.
        const isSuccess = Math.random() < 0.5 ? "block_3_type" : "block_4_type";
        console.log(isSuccess)
        this.setState({
          formCurrent: formCurrent + 1,
          [isSuccess]: "NORMAL",
          action: "HIDDEN"
        })
      break;
    case 2:
    //Reset the Component values in container 1 to empty
      this.$("textField_ktjfxslga").reset()
      this.$("textField_ktjfxslh").reset()
      this.$("textField_ktjfxslj").reset()
      this.$("textField_ktjfxslk").reset()
      this.$("textareaField_ktjfxslm").reset()
    //Reset the Component values in container 2 to empty
      this.$("textField_ktjfxsln").reset()
      this.$("textField_ktjfxslo").reset()
      this.$("textField_ktjwwsj5").reset()
      this.$("textareaField_ktjfxsls").reset()

    //Show container 1, hide container 2
      this.$("block_1").set("behavior", "NORMAL")
      this.$("block_2").set("behavior", "HIDDEN")
      this.setState({
        formCurrent: 0,
        action: "NORMAL",
        block_3_type: "HIDDEN",
        block_4_type: "HIDDEN"
      })
      break;
  }
}

/**
 * FusionStep onClick
 * @param value node index
 */
export function onClick2(index) {
  this.utils.toast({
    title: `Current clicked index: ${index}`
  });
  if(index == 0){
    this.setState({
      formCurrent: 0,
      action: "NORMAL",
      block_3_type: "HIDDEN",
      block_4_type: "HIDDEN"
    })
    this.$("block_1").set("behavior", "NORMAL")
    this.$("block_2").set("behavior", "HIDDEN")
  }
}
```