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

> Découvrez comment afficher des formulaires avec Actions.

# Afficher des formulaires avec Actions

Après avoir créé un formulaire, vous pouvez l’afficher avec [Actions](/fr-CA/docs/customize/actions) à l’aide de la méthode `api.prompt.render()` :

```javascript lines theme={null}
// Exemple utilisant le déclencheur post-login

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

exports.onContinuePostLogin = async (event, api) => {
  // Ajoutez votre logique après avoir rempli le formulaire
}
```

Remplacez form\_id par l’ID du formulaire. Vous pouvez repérer l’ID dans l’URL du formulaire, par exemple : `ap_pUMG...`, ou le sélectionner dans l’onglet **Render** de l’éditeur du formulaire.
Dans l’[éditeur de code Actions](/fr-CA/docs/customize/actions/write-your-first-action#create-an-action), vous pouvez définir la logique métier pour déterminer à quel moment et comment afficher le formulaire.

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

  // Afficher le formulaire uniquement si l'utilisateur n'a pas les métadonnées company_name
  if (!event.user.user_metadata.company_name) {
    api.prompt.render(':form_id');
  }
}

exports.onContinuePostLogin = async (event, api) => {
  // Ajoutez votre logique après avoir rempli le formulaire
}
```

Pour en savoir plus sur ces objets, consultez :

* [Objet Event](/fr-CA/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-event-object) : Découvrez les objets Event et leurs propriétés.
* [Objet API](/fr-CA/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-api-object) : Découvrez les objets API et leurs méthodes.

<div id="populate-values-for-existing-fields-and-hidden-fields-client-side">
  ## Définir des valeurs pour les champs existants et les champs masqués (côté client)
</div>

Vous pouvez définir des valeurs pour les champs existants et les champs masqués à l’aide de la propriété `fields` comme deuxième argument de votre méthode de rendu.

Dans l’exemple ci-dessous, la valeur `Jane` est définie dans 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) => {
  // Ajoutez votre logique après avoir rempli le formulaire
}
```

<Warning>
  Ne renseignez pas de données sensibles, car les valeurs renseignées sont exposées au navigateur (côté client).
</Warning>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Assurez-vous que le champ `ID` mentionné dans le deuxième argument est disponible côté client dans vos [nœuds et composants](/fr-CA/docs/customize/forms/nodes-and-components) ; sinon, la valeur ne sera pas renseignée.
</Callout>

<div id="inject-custom-data-with-shared-variables-server-side">
  ## Injectez des données personnalisées avec des variables partagées (côté serveur)
</div>

Vous pouvez injecter des variables côté serveur en utilisant la propriété `vars` comme deuxième argument de votre méthode de rendu. Cela permet d’injecter des renseignements sensibles sans les exposer au client.

Dans l’exemple ci-dessous, la valeur `123456789` alimente 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) => {
  // Ajoutez votre logique après avoir complété le formulaire
}
```

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Les variables partagées `{{vars.*}}` ne sont soumises à aucune restriction de type de données.

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

  Contrairement aux variables `{{fields.*}}`, la propriété `{{vars.*}}` n’a pas besoin d’exister dans votre formulaire avant que vous y injectiez des valeurs.

  Vous pouvez utiliser la propriété `{{vars.*}}` pour faire référence à des variables partagées dans vos formulaires et les flux qui y sont liés. Pour en savoir plus, consultez [Variables](/fr-CA/docs/customize/forms/variables).
</Callout>

<div id="fields-and-shared-variables-data-in-actions">
  ## Données des champs et des variables partagées dans Actions
</div>

Les données recueillies dans vos formulaires pour les champs et les variables partagées sont automatiquement accessibles au moyen de `event.prompt` dans la fonction de reprise de l’Action en cours :

* La propriété `id`, qui contient l’ID de l’invite en cours d’affichage.
* L’objet `fields`, qui contient toutes les données de vos champs et de vos champs masqués.
* L’objet `vars`, qui contient toutes les données de vos 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` renseigne l’attribut `company_name` de `user_metadata` à l’aide de la propriété `event.prompt.fields.company_name` 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);
}
```

<div id="restrictions-and-limitations">
  ## Restrictions et limites
</div>

* Vous ne pouvez pas [rediriger](/fr-CA/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/redirect-with-actions) un utilisateur et afficher un formulaire dans la même Action. Si vous devez utiliser les deux, envisagez d’utiliser des Actions distinctes.
* Vous ne pouvez afficher qu’un seul formulaire par Action. Si vous devez en afficher plusieurs, vous devez les afficher dans des Actions distinctes.
* La limite de taille de la propriété `fields` est de 24 KB.
* La méthode `api.prompt.render()` est disponible avec les déclencheurs suivants :

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