> ## 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.

# Rendre des formulaires à l’aide d’Actions

> Découvrez comment vous pouvez rendre des formulaires à l’aide d’Actions.

Une fois que vous avez créé un formulaire, vous pouvez le rendre avec [Actions](/docs/fr-ca/customize/actions) en utilisant la méthode `api.prompt.render()` :

```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
}
```

Remplacez form\_id par l’ID du formulaire. Vous pouvez localiser l’ID dans l’URL du formulaire, par exemple :  `ap_pUMG...` ou sélectionnez-le dans l’onglet de l’éditeur de formulaires **Embed**.
Dans les [Éditeur de code d’Actions](/docs/fr-ca/customize/actions/write-your-first-action#create-an-action), vous pouvez définir la logique métier pour décider quand et comment rendre le formulaire.

```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
}
```

Pour en savoir plus sur ces objets, consultez :

* [Objet Event](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-event-object) : En savoir plus sur l’objet Event et ses propriétés.
* [Objet API](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-api-object) : En savoir plus sur les objets et méthodes API.

## Renseigner les valeurs des champs existants et des champs masqués (côté client)

Vous pouvez renseigner des valeurs pour les champs existants et les champs masqués en utilisant la propriété `fields` comme second argument dans votre méthode de rendu.

Dans l’exemple ci-dessous, la valeur `Jane` remplit le champ `first_name`.

```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
}
```

<Warning>
  Ne pas inclure d’informations sensibles, les valeurs fournies sont exposées au navigateur (côté client).
</Warning>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Lorsque vous remplissez des valeurs, assurez-vous que l’`ID` du champ que vous utilisez est disponible dans vos [nœuds et composants](/docs/fr-ca/customize/forms/nodes-and-components), sinon la valeur ne sera pas remplie.
</Callout>

## Injecter des données personnalisées avec des variables partagées (côté serveur)

Vous pouvez injecter des variables côté serveur en utilisant la propriété `vars` comme second argument dans votre méthode de rendu. Cela peut servir à injecter des informations sensibles sans les exposer côté client.

Dans l’exemple ci-dessous, la valeur `123456789` remplit la variable `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">
  Les variables partagées `{{vars.*}}` n’ont pas de restrictions de type de données.

  Les variables partagées `{{vars.*}}` sont toujours masquées automatiquement.

  Contrairement au remplissage des variables `{{fields.*}}`, la propriété `{{vars.*}}` n’a pas besoin d’exister dans votre formulaire avant d’injecter des valeurs.

  Vous pouvez utiliser la propriété `{{vars.*}}` pour référencer des variables partagées dans vos formulaires et ses flux liés. Pour en savoir plus, veuillez consulter [Variables](/docs/fr-ca/customize/forms/variables).
</Callout>

## Champs et données de variables partagées dans Actions

Les champs et données de variables partagées recueillies dans vos formulaires sont automatiquement disponibles avec `event.prompt` dans la fonction de reprise de l’action en cours :‌‌

* La propriété `id`, avec l’identifiant d’invite que vous affichez.
* L’objet `fields`, qui contient toutes vos données de champs et de champs cachés.
* L’objet `vars`, qui contient toutes vos données de variables partagées.

<Accordion title="Exemple d’objet 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>

Dans l’exemple ci-dessous, `api.user.setUserMetadata` remplit l’attribut `user_metadata``company_name` avec la propriété `event.prompt.fields.company_name` qui a été recueillie à partir de votre formulaire.

```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);
}
```

## Restrictions et limites

* Vous ne pouvez pas [rediriger](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/redirect-with-actions) un utilisateur et rendre un formulaire dans la même action. Si vous devez utiliser les deux, envisagez d’utiliser des Actions différentes.
* Vous ne pouvez rendre qu’un seul formulaire par Action. Si vous devez rendre plusieurs formulaires, vous devez l’effectuer dans différentes Actions.
* Le même formulaire ne peut pas être rendu plus d’une fois sur le même déclencheur.
  Par exemple, si vous avez un déclencheur `post-login` avec deux Actions, vous ne pouvez pas rendre le même formulaire dans les deux Actions, vous devez créer des formulaires différents pour chaque Action.
* La taille maximale de la propriété `fields` est de 24 Ko.
* La méthode `api.prompt.render()` est disponible dans les déclencheurs suivants :

  * [post-connexion](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-api-object)
  * [post-défi](/docs/fr-ca/customize/actions/explore-triggers/password-reset-triggers/post-challenge-trigger/post-challenge-api-object)