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

> Aprenda a renderizar Forms con Actions.

# Renderizar Forms con Actions

Una vez creado un formulario, puede renderizarlo con [Actions](/es/docs/customize/actions) mediante el método `api.prompt.render()`:

```javascript lines theme={null}
// Ejemplo usando el trigger post-login

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

exports.onContinuePostLogin = async (event, api) => {
  // Agrega tu lógica después de completar el formulario
}
```

Reemplace form\_id por el ID del formulario. Puede encontrar el ID en la URL del formulario, por ejemplo:  `ap_pUMG...`, o seleccionarlo en la pestaña **Render** del editor de formularios.
En el [editor de código de Actions](/es/docs/customize/actions/write-your-first-action#create-an-action), puede definir la lógica de negocio para decidir cuándo y cómo renderizar el formulario.

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

  // Solo renderizar el formulario si al usuario le falta el metadato company_name
  if (!event.user.user_metadata.company_name) {
    api.prompt.render(':form_id');
  }
}

exports.onContinuePostLogin = async (event, api) => {
  // Agrega tu lógica después de completar el formulario
}
```

Para obtener más información sobre estos objetos, consulta:

* [Event Object](/es/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-event-object): Obtén más información sobre los objetos y las propiedades de Event.
* [API object](/es/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-api-object): Obtén más información sobre los objetos y los métodos de API.

<div id="populate-values-for-existing-fields-and-hidden-fields-client-side">
  ## Rellenar valores en campos existentes y campos ocultos (del lado del cliente)
</div>

Puede rellenar valores en campos existentes y campos ocultos mediante la propiedad `fields` como segundo argumento en su método de renderizado.

En el ejemplo siguiente, el valor `Jane` rellena el campo `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) => {
  // Agrega tu lógica después de completar el formulario
}
```

<Warning>
  No introduzca información confidencial; los valores introducidos quedan expuestos en el navegador (del lado del cliente).
</Warning>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Asegúrese de que el campo `ID` al que se hace referencia en el segundo argumento esté disponible del lado del cliente en sus [nodos y componentes](/es/docs/customize/forms/nodes-and-components); de lo contrario, el valor no se rellenará.
</Callout>

<div id="inject-custom-data-with-shared-variables-server-side">
  ## Inyectar datos personalizados con variables compartidas (del servidor)
</div>

Puede inyectar variables del servidor mediante la propiedad `vars` como segundo argumento de su método de renderizado. Esto permite inyectar información sensible sin exponerla del lado del cliente.

En el siguiente ejemplo, el valor `123456789` se asigna a 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) => {
  // Agrega tu lógica después de completar el formulario
}
```

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Las variables compartidas `{{vars.*}}` no tienen restricciones de tipo de datos.

  Las variables compartidas `{{vars.*}}` siempre se enmascaran automáticamente.

  A diferencia de las variables `{{fields.*}}`, la propiedad `{{vars.*}}` no necesita existir en su formulario antes de inyectar valores.

  Puede usar la propiedad `{{vars.*}}` para hacer referencia a variables compartidas en sus Forms y en los Flows vinculados. Para obtener más información, consulte [Variables](/es/docs/customize/forms/variables).
</Callout>

<div id="fields-and-shared-variables-data-in-actions">
  ## Datos de campos y variables compartidas en Actions
</div>

Los datos recopilados de campos y variables compartidas en sus formularios están disponibles automáticamente en `event.prompt` dentro de la función de reanudación de la Action actual:

* La propiedad `id`, con el ID de la pantalla que se está renderizando.
* El objeto `fields`, que contiene todos los datos de sus campos y campos ocultos.
* El objeto `vars`, que contiene todos los datos de sus variables compartidas.

<Accordion title="Ejemplo del objeto 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>

En el ejemplo siguiente, `api.user.setUserMetadata` establece el atributo `company_name` de `user_metadata` con el valor de la propiedad `event.prompt.fields.company_name` recopilada de su formulario.

```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">
  ## Restricciones y limitaciones
</div>

* No puede [redirigir](/es/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/redirect-with-actions) a un usuario y renderizar un formulario en la misma Action. Si necesita usar ambas opciones, considere usar distintas Actions.
* Solo puede renderizar un formulario por Action. Si necesita renderizar más de un formulario, debe hacerlo en distintas Actions.
* El límite de tamaño de la propiedad `fields` es de 24 KB.
* El método `api.prompt.render()` está disponible en los siguientes triggers:

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