Saltar a contenido

4.26 Param

Los parámetros pueden ser fundamentales para la interacción entre formularios y acciones, permitiendo la transferencia de datos y la personalización dinámica del comportamiento de la aplicación.

Parámetro que pasaremos a otro formulario:

En el ejemplo se utiliza en un formulario de edición (editParam1) donde se definen dos campos de entrada (param1 y param2). Al hacer clic en el botón "Ir a Editar Param 2", se navega al formulario editParam2, y los valores de param1 y param2 se pasan como parámetros. El formulario editParam2 muestra y utiliza estos parámetros para configurar sus campos de entrada.

<edit id="editParam1">
    <form>
        <input id="param1" label="Parámetro 1: " value="Uno"/>
        <input id="param2" label="Parámetro 2: " value="Dos"/>
        <button label="Nav Edit Param 2" route="formParam-editParam2">
            <param name="nameParam1" value="${view.param1}"/>
            <param name="nameParam2" value="${view.param2}"/>
        </button>
     </form>
</edit>
<edit id="editParam2">
    <form>
        <input label="Parametro 1: " value="${params.nameParam1}"/>
        <input label="Parametro 2: " value="${params.nameParam2}"/>
    </form>
</edit>

Parámetro usado en una acción:

En el ejemplo dado, hay un botón con una acción asociada (Acción botón formulario). Al hacer clic en el botón, se ejecuta una función JavaScript (accionBotonFormulario) que toma un mensaje como parámetro. El valor de este parámetro se obtiene de un campo de entrada (inputAccionFormulario). Este escenario muestra cómo un parámetro puede ser utilizado dinámicamente en una acción para realizar ciertas operaciones o mostrar información específica.

<script>
    function accionBotonFormulario(msg) {
        vh.setWidgetValue('inputAccionFormulario',msg);
    }
</script>

<input label="Input acción formulario: " id="inputAccionFormulario" />
<button label="Acción botón formulario">
    <action type="js">
        <param name="method" value="accionBotonFormulario" />
        <param name="message" value="Acción botón formulario" />
    </action>
</button>
Atributo Valor por defecto Tipo Descripción
name null String Nombre del parámetro
value null String o JEXLExpression Expresión EL para calcular el valor del componente. 
<main id="formParam" name="Param" repo="pruebaRepo">
    <list id="listParam" name="Param">
        <buttonbar type="fab">
            <button id="btnFab">
                <action id="accionFAB" type="nav" route="formParam-editParam1">
                    <param name="repo" value="pruebaRepo"/>
                </action>
            </button>
        </buttonbar>
    </list>
    <edit id="editParam1">
        <script>
            function accionBotonFormulario(msg) {
                vh.setWidgetValue('inputAccionFormulario',msg);
            }
        </script>
        <form>
            <input label="Input acción formulario: " id="inputAccionFormulario" />
            <button label="Acción botón formulario">
                <action type="js">
                    <param name="method" value="accionBotonFormulario" />
                    <param name="message" value="Acción botón formulario" />
                </action>
            </button>
            <input id="param1" label="Parámetro 1: " value="Uno"/>
            <input id="param2" label="Parámetro 2: " value="Dos"/>
            <button label="Nav Edit Param 2" route="formParam-editParam2">
                <param name="nameParam1" value="${view.param1}"/>
                <param name="nameParam2" value="${view.param2}"/>
            </button>
         </form>
    </edit>
    <edit id="editParam2">
        <form>
            <input label="Parametro 1: " value="${params.nameParam1}"/>
            <input label="Parametro 2: " value="${params.nameParam2}"/>
        </form>
    </edit>
</main>

Imagen 1 Imagen 2 Imagen 2