> For the complete documentation index, see [llms.txt](https://docs-embed.anyflow.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-embed.anyflow.jp/wizard-editor/widget.md).

# ウィジェット

## 概要

ウィザードでは、エンドユーザーがスムーズに値を入力できるように、\
項目ごとに適切な入力方法を提供する必要があります。

例えば：

* Slackのチャンネルを手入力させるのではなく、一覧から選択させる
* ◯◯の場合は✗✗する などの複雑な条件設定を指定できるようにする

Anyflowでは様々な入力ウィジェットを提供しており、状況に合わせて適切なものを選択できます。

<figure><img src="https://files.readme.io/5c1b32e-end-user-variable-input-type.png" alt="1675"><figcaption><p>ウィジェットの指定方法</p></figcaption></figure>

## ウィジェットの種類

### 基本的な入力ウィジェット

一部のエンドユーザー変数を除き、多くのエンドユーザー変数で入力方法として選択できます。

<table><thead><tr><th width="156.421875">入力方法</th><th>説明</th></tr></thead><tbody><tr><td>テキスト</td><td>一般的なテキストウィジェットです。</td></tr><tr><td>パスワード</td><td>入力した文字がマスキングされるため、パスワードや秘密情報を入力するのに適したウィジェットです。</td></tr><tr><td>セレクト</td><td>固定の選択肢の中から選択するためのウィジェットです。</td></tr><tr><td>アシスト</td><td>関連するコネクタのAPIを呼び出して、エンドユーザーごとに固有な選択肢を動的に提示するためのウィジェットです。</td></tr><tr><td>カレンダー</td><td>カレンダーの中から日付の入力をするためのウィジェットです。</td></tr><tr><td>CSV</td><td>CSV（ファイル全体）をエンドユーザーがアップロードするためのウィジェットです。</td></tr><tr><td>CSV項目定義</td><td>CSVの項目（ヘッダー）をエンドユーザーが定義するためのウィジェットです。</td></tr><tr><td>CSV項目選択</td><td>CSVの項目（ヘッダー）をエンドユーザーが選択するためのウィジェットです。</td></tr></tbody></table>

### 応用的な入力ウィジェット

エンドユーザー変数が特定の型の場合のみ利用できます。

| エンドユーザー変数の型                | 入力方法                       | 説明                              |
| -------------------------- | -------------------------- | ------------------------------- |
| マッピング                      | マッピング                      | 異なるアプリでデータのマッピングを行うためのウィジェットです。 |
| チェックボックス/複数選択アシスト/テーブルアシスト | チェックボックス/複数選択アシスト/テーブルアシスト | 固定の選択肢の中から、複数選択が可能なウィジェットです。    |
| コンディション                    | コンディション                    | 条件のルールを入力を受け付けるためのウィジェットです。     |

エンドユーザー変数の型がこれらの場合は、入力方法はこの表に記載の方法に制限されます。

<figure><img src="https://files.readme.io/f9c84af-image.png" alt="型がマッピングの変数では、入力方法はマッピングしか選択できない" width="600"><figcaption><p>型がマッピングの変数では、入力方法はマッピングしか選択できない</p></figcaption></figure>

ただしマッピングウィジェットの中に表示される入力ウィジェットについては、「基本的な入力ウィジェット」を選択することができます。

<figure><img src="https://files.readme.io/533536e-image.png" alt="マッピングの左/右カラムでは、基本的な入力方法を選択できる" width="600"><figcaption><p>マッピングの左/右カラムでは、基本的な入力方法を選択できる</p></figcaption></figure>

## 各ウィジェットの詳細

### テキスト

一般的なテキストウィジェットです。

<figure><img src="https://files.readme.io/c7252e1-image.png" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="success" %}

### 入力パターンを設定する方法

正規表現を記述することで、エンドユーザーがテキストウィジェットに入力する際の入力パターンを定義できます。詳しくはこちら
{% endhint %}

### パスワード

入力した文字がマスキングされるため、パスワードや秘密情報を入力するのに適したウィジェットです。

<figure><img src="https://files.readme.io/29a3bf5-image.png" alt="" width="375"><figcaption></figcaption></figure>

### セレクト

固定の選択肢の中から選択するためのセレクトウィジェットです。

選択肢は「オプション」の欄で追加します。

<figure><img src="https://files.readme.io/c247598-image.png" alt="" width="375"><figcaption></figcaption></figure>

### アシスト

関連するコネクタのAPIを呼び出して、エンドユーザーごとに固有な選択肢を動的に提示します。\
例えば以下の設定ではエンドユーザーのSlackワークスペースに存在するチャンネル名の一覧を提示します。

<figure><img src="https://files.readme.io/a4ea039-image.png" alt="" width="375"><figcaption></figcaption></figure>

アシストの詳細は[こちら](/wizard-editor/widget/assist.md)を確認してください。

### カレンダー

カレンダーの中から日付の入力をするためのウィジェットです。

<figure><img src="https://files.readme.io/485a4abde875ea465faff84690413012504b939b77be41aaceff9dc041bcd26d-image.png" alt="" width="375"><figcaption></figcaption></figure>

### CSV

エンドユーザーからCSVファイルのアップロードを受け付け、中身を文字列としてソリューション内で利用することができます。

<figure><img src="https://files.readme.io/5f5c08e01bd53542e37099ec5e2465b3b238113ce5a4339052522436cec4c1e6-image.png" alt="" width="563"><figcaption><p>CSVアップロード前</p></figcaption></figure>

<figure><img src="https://files.readme.io/2180743e8005de5ddf83179e4ec0b4a01bdeaa99ef733d01b1fa75d2bbe1658e-image.png" alt="" width="563"><figcaption><p>CSVアップロード後</p></figcaption></figure>

CSVについて、詳細は[こちら](/wizard-editor/widget/csv.md)を確認してください。

### CSV項目

「CSV項目**定義**」と「CSV項目**選択**」はセットで利用します。

エンドユーザーが「定義」ウィジェットでCSVファイルをアップロードできます。

<figure><img src="https://files.readme.io/4574976-image.png" alt="" width="375"><figcaption></figcaption></figure>

アップロードをすると、その項目（ヘッダー）がウィザードに読み込まれます。

<figure><img src="https://files.readme.io/5ef4198-image.png" alt="" width="375"><figcaption></figcaption></figure>

その後「選択」ウィジェットで、読み込んだ項目（ヘッダー）をエンドユーザーが**選択**できます。

<figure><img src="https://files.readme.io/8f7dd5c-image.png" alt="" width="375"><figcaption></figcaption></figure>

CSV項目定義やCSV項目選択について、詳細は[こちら](/wizard-editor/widget/csv-header.md)を確認してください。

### マッピング

異なるアプリでデータのマッピングを行うためのウィジェットです。\
エンドユーザー変数の型&#x304C;**「マッピング」**&#x306E;場合に利用できます。

以下の例では、HubSpotとSalesforceのフィールドの紐づけを行っています。

<figure><img src="https://files.readme.io/4925bf3-image.png" alt="" width="563"><figcaption></figcaption></figure>

マッピングの詳細は[こちら](/wizard-editor/widget/mapping.md)を確認してください。

### チェックボックス

チェックボックスは、複数選択が可能なウィジェットです。\
エンドユーザー変数の型&#x304C;**「チェックボックス/複数選択アシスト/テーブルアシスト」**&#x306E;場合に利用できます。

<figure><img src="https://files.readme.io/73d9931-checkbox-wizard-editor.png" alt="" width="563"><figcaption></figcaption></figure>

チェックボックスの詳細は[こちら](/wizard-editor/widget/checkbox.md)を確認してください。

### 複数選択アシスト

複数選択アシストを選択すると、単体ではなく複数のアシストのデータを選択することが可能です。

エンドユーザー変数の型&#x304C;**「チェックボックス/複数選択アシスト/テーブルアシスト」**&#x306E;場合に利用できます。

<figure><img src="https://files.readme.io/481a360-Screen_Shot_2023-03-22_at_6.00.13_PM.png" alt="568" width="375"><figcaption><p>複数選択アシストを設定し、Slackのチャンネル一覧を複数選択する例</p></figcaption></figure>

複数選択アシストの詳細は[こちら](/wizard-editor/widget/multi-select-assist.md)を確認してください。

### テーブルアシスト

テーブルアシストは、テーブル形式でエンドユーザーが項目を選択することが可能なウィジェットです。

エンドユーザー変数の型&#x304C;**「チェックボックス/複数選択アシスト/テーブルアシスト」**&#x306E;場合に利用できます。

<figure><img src="https://files.readme.io/76d8564d2b8669d91729cd2e45c66907e9e7d45a3a519d8bae5b6405ea11162b-image.png" alt="" width="563"><figcaption></figcaption></figure>

テーブルアシストの詳細は[こちら](/wizard-editor/widget/table-assist.md)を確認してください。

### コンディション

条件のルールを入力を受け付けるためのウィジェットです。\
エンドユーザー変数の型&#x304C;**「コンディション」**&#x306E;場合に利用できます。

<figure><img src="https://files.readme.io/399d3c0-image.png" alt="" width="563"><figcaption></figcaption></figure>

コンディションの詳細は[こちら](/wizard-editor/widget/condition.md)を確認してください。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs-embed.anyflow.jp/wizard-editor/widget.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.