> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-docs-event-stream-action-templates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Actionsを使用したフォームの表示

> Actionsを使用してフォームを表示する方法をご説明します。

<Warning>
  フォームは現在、早期アクセスで使用できます。Auth0のリリース段階については、「[製品のリリース段階](/docs/ja-jp/troubleshoot/product-lifecycle/product-release-stages)」を参照してください。
</Warning>

フォームを作成し終えたら、api.prompt.render()メソッドを使用して[Actions](/docs/ja-jp/customize/actions)で表示できます。

```javascript lines theme={null}
// Example using the post-login trigger

exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id');
}

exports.onContinuePostLogin = async (event, api) => {
  // Add your logic after completing the form
}
```

form\_id部分をフォームIDで置き換えます。IDは、フォームのURLに、`ap_pUMG...`のように表示されます。または、フォームエディターの **［Embed（組み込み）］** タブで選択してください。[Actionsコードエディター](/docs/ja-jp/customize/actions/write-your-first-action#create-an-action)では、ビジネスロジックを定義して、フォーム表示のタイミングと方法を決定することができます。

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {

  // Only render the form if user is missing company_name metadata
  if (!event.user.user_metadata.company_name) {
    api.prompt.render(':form_id');
  }
}

exports.onContinuePostLogin = async (event, api) => {
  // Add your logic after completing the form
}
```

* ユーザーを[リダイレクト](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/redirect-with-actions)して、同じアクションでフォームを表示することはできません。両方使用する必要がある場合は、別のアクションの使用を検討してください。
* アクションごとに1つのフォームしか表示できません。複数のフォームを表示する必要がある場合は、別のアクションでフォームを表示しなければなりません。

## 既存のフィールドと非表示のフィールドの値を入力する（クライアント側）

イベントオブジェクトとそのコンテキスト情報についての詳細は、「[Actionsトリガー： post-login- eventオブジェクト](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-event-object)」をお読みください。

既存のフィールドと非表示のフィールドの値を入力したい場合は、`api.prompt.render()`メソッドが`fields`プロパティを使用した第二引数をサポートしています。下記の例では、IDが`first_name`のフィールドに、`Jane`という値が入力されます。

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id', {
    fields: {
      first_name: 'Jane',
    }
  });
}

exports.onContinuePostLogin = async (event, api) => {
  // Add your logic after completing the form
}
```

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  値を入力する際は、そのフィールドIDが[ノードやコンポーネント](/docs/ja-jp/customize/forms/nodes-and-components)で使用できることを確認してください。使用できない場合、値は入力されません。
</Callout>

カスタムデータを、クライアント側に表示することなく注入する必要がある場合は、`vars`プロパティを使用することができます。

## 共有変数によるカスタムデータの注入（サーバー側）

下記の例では、`123456789`の値を使って`external_user_id`変数を注入します。

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id', {
    vars: {
      external_user_id: '123456789',
    }
  });
}

exports.onContinuePostLogin = async (event, api) => {
  // Add your logic after completing the form
}
```

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  共有変数`{{vars.*}}`には、データタイプの制限はありません。

  共有変数`{{vars.*}}`は、常に自動的にマスクされます。

  `{{fields.*}}`変数を入力する場合と異なり、値の注入前に`{{vars.*}}`プロパティがフォームに存在している必要はありません。

  `{{vars.*}}` プロパティを使用して、フォームとそれにリンクされたフローで共有変数を参照できます。詳細については、「[変数](/docs/ja-jp/customize/forms/variables)」を参照してください。
</Callout>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  共有変数`{{vars.*}}`には、データタイプの制限はありません。

  共有変数`{{vars.*}}`は、常に自動的にマスクされます。

  `{{fields.*}}`変数を入力する場合と異なり、値の注入前に`{{vars.*}}`プロパティがフォームに存在している必要はありません。

  `{{vars.*}}` プロパティを使用して、フォームとそれにリンクされたフローで共有変数を参照できます。詳細については、「[変数](/docs/ja-jp/customize/forms/variables)」を参照してください。
</Callout>

## 制約と制限

フォーム内で、収集されたフィールドと共有変数データは自動的に現在のアクションのresume関数の`event.prompt`で利用可能になります。

* `id`プロパティはレンダリング対象のプロンプトIDを定義します。
* `fields`オブジェクトにはすべてのフィールドと非表示のフィールドのデータがあります。
* `vars`オブジェクトにはすべての共有変数データがあります。

<Accordion title="event.promptオブジェクトの例">
  ```json lines theme={null}
  {
    "id": "ap_fuVuFiiQWN3mTEujWTy966",
    "fields": {
      "first_name": "Jane",
      "company_name": "Okta"
    },
    "vars": {
      "external_crm_uuid": "f8f32e6f-2329-49bd-bf21-fa8b0bea2652",
      "api_hostname": "api.example.com"
    }
  }
  ```
</Accordion>

以下の例では、`api.user.setUserMetadata`にフォームから収集された`event.prompt.fields.company_name`プロパティのある`user_metadata`の`company_name`属性が入力されます。

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id');
}

exports.onContinuePostLogin = async (event, api) => {
  api.user.setUserMetadata('company_name', event.prompt.fields.company_name);
}
```

## 制約と制限

* ユーザーを[リダイレクト](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/redirect-with-actions)して、同じアクションでフォームをレンダリングすることはできません。両方とも使用する必要がある場合は、別のアクションを検討してください。
* 1つのアクションからは1つのフォームのみをレンダリングできます。複数のフォームをレンダリングしなければならない場合は、別のアクションを使用します。
* 同じフォームを同じトリガーで複数回レンダリングすることはできません。
  たとえば、1つの`post-login`トリガーに2つのアクションがある場合、両方のアクションで同じフォームはレンダリングできません。それぞれのアクションに別のフォームを作成する必要があります。
* `fields`プロパティのサイズは24 KBが上限です。
* `api.prompt.render()`メソッドは以下のトリガーで利用できます。

  * [post-login](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-api-object)
  * [post-challenge](/docs/ja-jp/customize/actions/explore-triggers/password-reset-triggers/post-challenge-trigger/post-challenge-api-object)