💡 Introducción

Las aplicaciones basadas en modelos (Model-Driven Apps) de Microsoft Power Apps son reconocidas por su capacidad de generar interfaces de usuario consistentes y gobernadas por datos de manera ultra rápida. Sin embargo, cuando los requerimientos de negocio superan las capacidades de las Reglas de Negocio estándar, es momento de dar el salto al siguiente nivel. Aquí es donde entra en juego el desarrollo de scripts del lado del cliente utilizando JavaScript.

🛠️ ¿Por qué usar JavaScript en Formularios Model-Driven?

Aunque la filosofía «Low-Code» de Microsoft promueve resolver la lógica de negocio mediante configuraciones visuales, existen escenarios complejos donde la programación tradicional es la forma más limpia y eficiente de resolver un problema técnico. JavaScript brilla especialmente en las siguientes situaciones:

• Validaciones de datos que involucran múltiples campos con lógica condicional compleja o expresiones regulares avanzadas.
• Manipulación dinámica de la visibilidad, requerimiento y bloqueo de campos basados en roles de seguridad o variables externas.
• Llamadas asíncronas a APIs de terceros o flujos de Power Automate directamente desde el navegador, sin necesidad de guardar el registro previamente.
• Personalización del comportamiento al guardar el formulario (evento OnSave), previniendo el autoguardado bajo ciertas condiciones personalizadas.

La Client API: El Corazón de la Extensibilidad

Para desarrollar con éxito scripts en Model-Driven Apps, es fundamental entender el modelo de objetos de la Client API. Históricamente, se utilizaba el objeto global deprecado Xrm.Page. Hoy en día, el estándar moderno exige el paso del Contexto de Ejecución (Execution Context) como primer parámetro de nuestras funciones.

A través del contexto de ejecución, obtenemos el formContext, que actúa como puerta de entrada para interactuar con los atributos (los datos) y los controles (la interfaz visual) del formulario de forma segura y mantenible.

Comparativa: Reglas de Negocio vs. JavaScript

Para elegir la herramienta adecuada en cada escenario de arquitectura de software, analicemos la siguiente comparativa:

Eventos Clave en el Ciclo de Vida del Formulario

Un script de JavaScript en una Model-Driven App responde a eventos (Event Handler) específicos del ciclo de vida del formulario:

• OnLoad: Se ejecuta cuando el formulario ha terminado de cargarse. Es ideal para inicializar valores o cambiar la visibilidad de secciones iniciales.
• OnChange: Se asocia a atributos específicos. Se dispara cuando el valor de un campo cambia, permitiendo actualizar otros campos dinámicamente.
• OnSave: Se dispara antes de que los datos se guarden en Microsoft Dataverse. Permite validar datos de último minuto y, si es necesario, cancelar la operación de guardado utilizando:

 executionContext.getEventArgs().preventDefault().

✍️ Mini Ejercicio Práctico: Control Dinámico de Campos

En este ejercicio práctico, crearemos un script que se ejecutará en el evento OnChange del campo «Tipo de Cliente».

Si el tipo de cliente se selecciona como «Corporativo» (cuyo valor numérico en el OptionSet/Choice es 100000001), el campo «RFC / Identificación Fiscal» se volverá obligatorio y visible. Si se selecciona cualquier otra opción, se ocultará y dejará de ser requerido.

Paso 1: Código JavaScript

Crea un archivo de texto plano, nómbralo contactoForm.js y pega el siguiente fragmento de código:

/**
 * Espacio de nombres para organizar nuestras funciones de formulario.
 */
var MiEmpresa = window.MiEmpresa || {};
MiEmpresa.Contacto = MiEmpresa.Contacto || {};
/**
 * Función principal para gestionar la lógica del tipo de cliente.
 * @param {object} executionContext - Contexto de ejecución provisto por Power Apps.
 */
MiEmpresa.Contacto.evaluarTipoCliente = function (executionContext) {
    // Obtener el contexto del formulario
    var formContext = executionContext.getFormContext();
    // Obtener los atributos y controles correspondientes
    var attrTipoCliente = formContext.getAttribute("new_tipocliente");
    var ctrlIdentificacion = formContext.getControl("new_identificacionfiscal");
    var attrIdentificacion = formContext.getAttribute("new_identificacionfiscal");
    if (attrTipoCliente !== null && attrIdentificacion !== null && ctrlIdentificacion !== null) {
        var valorTipoCliente = attrTipoCliente.getValue();
        // Verificar si es "Corporativo" (Valor de opción: 100000001)
        if (valorTipoCliente === 100000001) {
            // Hacer el campo visible y requerido
            ctrlIdentificacion.setVisible(true);
            attrIdentificacion.setRequiredLevel("required");
        } else {
            // Ocultar el campo, quitar requerimiento y limpiar su valor
            ctrlIdentificacion.setVisible(false);
            attrIdentificacion.setRequiredLevel("none");
            attrIdentificacion.setValue(null);
        }
    }
};

Paso 2: Registro del Web Resource en Power Apps

1. Inicia sesión en tu entorno de Power Apps.
2. Navega a la solución donde estés trabajando y haz clic en Nuevo > Más > Recurso Web (Web Resource).
3. Sube el archivo contactoForm.js, asígnale el nombre único new_contactoFormJS y selecciona el tipo JavaScript (JS).
4. Publica el recurso web.

Paso 3: Configurar los Eventos del Formulario

1. Abre el formulario de la tabla (por ejemplo, «Contacto») en el diseñador de formularios moderno.
2. Haz clic en la pestaña de Eventos en el panel de propiedades del formulario.
3. En la sección OnLoad o agregando un manejador de eventos al campo de origen, añade la biblioteca recién creada (new_contactoFormJS).
4. Asocia la función MiEmpresa.Contacto.evaluarTipoCliente al evento OnChange del campo «Tipo de Cliente» (new_tipocliente) y también al evento OnLoad del formulario para asegurar la consistencia al abrir registros existentes.
5. ¡Muy Importante! Asegúrate de marcar la casilla «Pasar el contexto de ejecución como primer parámetro» (Pass execution context as first parameter) al configurar el manejador del evento.
6. Guarda y publica el formulario. ¡Prueba el comportamiento en tu aplicación!

📚 Fuentes Consultadas

• Modelos de objetos de la Client API de Power Apps – Microsoft Learn
• Referencia de Client API para aplicaciones basadas en modelos – Microsoft Learn
• Tutorial: Escribir el primer script de cliente – Microsoft Learn