0
125
VisualizaçõesAgregue una acción dinámica a un botón creado dinámicamente
Según mi publicación anterior , estoy creando una especie de panel en Oracle Apex (v21.1). Mi tablero muestra el estado del inventario de cada departamento. Como puede ver, agregué un botón al final de mi lista que se muestra solo cuando el estado es "Validado" (la línea verde)
Aquí está el código de mi Informe Interactivo:
SELECT PK_DASHBOARD, FK_SERVICE_DASHBOARD, ETAT_DASHBOARD, DATE_DASHBOARD, CASE WHEN etat_dashboard = 1 THEN '<button>Libérer</button>' END as bt_dashboard, CASE WHEN etat_dashboard = 0 THEN '<a href="mailto:'||email_dashboard||'?Subject=RAPPEL - Inventaire communal"><span aria-label="Mail"><span class="fa fa-envelope-o" aria-hidden="true" title="Mail"></span></span></a>' WHEN etat_dashboard = 1 THEN '<span aria-label="Mail"><span class="fa fa-check-circle-o" aria-hidden="true" title="Mail"></span></span>' END as ico_dashboard FROM inv_tb_dashboard Me gustaría agregar una acción dinámica cuando el usuario presiona el botón. No sé cómo vincular una acción dinámica a un botón creado de esta manera. ¿Hay algún tipo de función javascript con getElementById o debo agregar onClick="" a mi botón?
Mi acción dinámica solo sería un código del lado del servidor, como UPDATE inv_tb_dashboard SET etat_dashboard = 0 , no es algo demasiado complicado.
Si tienes alguna idea que pueda llevarme por el buen camino, no lo dudes.
Puedes hacerme más preguntas si necesitas más detalles.
Gracias,
Tomás
2 Respostas
Responde à pergunta0
La forma más limpia de hacer esto es usar un evento personalizado de javascript. Voy a explicar esto con un informe sobre la tabla de muestra EMP.
Paso 1: botón crear. Asegúrese de que el botón tenga (1) una clase personalizada para capturar el evento de clic y (2) un atributo de datos para definir de forma única la fila. Lo mejor es usar el generador de botones en la aplicación de tema universal para proporcionar el marcado. Use Formato de columna> expresión html para colocar el marcado del botón. En mi caso, esto sería
<button type="button" data-ename="#EMPNO#" class="my-button-js t-Button t-Button--tiny t-Button--success t-Button--stretch">My Button</button> Paso 2: cree un elemento de página (oculto) para contener el identificador de la fila en la que hizo clic, en mi caso P1_EMPNO .
Paso 3. Cree una acción dinámica para establecer el valor de P1_EMPNO en el valor empno del botón de fila en el que hizo clic en el informe.
Tipo de selección: Selector de JQuery Selector de JQuery: .my-button-js
Verdadero Acción 1: Acción: "Establecer valor", Tipo de conjunto: "Expresión de Javascript", Expresión de Javascript: this.triggeringElement.dataset['ename'] , Elemento afectado: P1_EMPNO Verdadero Acción 2: Acción: "Ejecutar código de Javascript", Código :
//$(document).trigger('mybuttonclicked'); $.event.trigger("mybuttonclicked");Paso 4: Cree una acción dinámica para activar el evento personalizado que activó en True Action 2 del Paso 3.
Evento: personalizado Evento personalizado: mybuttonclicked Tipo de selección: "Expresión de Javascript" Expresión de Javascript: document
Verdadero Acción 1: Acción: Ejecutar código del lado del servidor, idioma: PL/SQL, código UPDATE EMP SET sal = sal * 1.1 WHERE empno = :P1_EMPNO; , Elementos para enviar: P1_EMPNO Verdadero Acción 2: Actualizar el informe.
Mira a un profesional (Dan McGhan) explicándolo aquí: https://www.youtube.com/watch?v=DzqFXTnAIr8
Nota al margen. También puede controlar la visualización de la columna usando este estilo de botón.
- Agregue una columna a su informe (en este caso, quiero ocultar el botón para el empleado llamado BLAKE)
CASE ename WHEN 'BLAKE' THEN 'none' ELSE 'block' END as DISP_COL_CLASS- Agregue una directiva de estilo al botón, "mostrar"
<button style="display:#DISP_COL_CLASS#" type="button" data-ename="#ENAME#" class="my-button-js t-Button t-Button--tiny t-Button--success t-Button--stretch">My Button</button>Tenga en cuenta que esto no es tan seguro. Oculta el botón, pero cualquier persona con conocimientos de javascript podría hacerlo reaparecer. También tendrá que agregar algunas comprobaciones en el lado del servidor para evitar el uso malintencionado.
0
Si tiene acciones predefinidas, cree una serie de acciones y, según su condición, agregue una acción al botón, esto se puede hacer fácilmente con javascript. Ejemplo:
const actions=['delete','update']; let button=document.getElementByID('btn'); const queryExecutor=action=>{ //run action code } //Add Condition for Button if(user=='admin'){ //add action to button dynamically button.addEventListener('click',queryExecutor('delete')); } if(user=='user'){ //add action to button dynamically button.addEventListener('click',queryExecutor('update')); }