Cambiar el estado de registros utilizando Cuadrículas Interactivas de Oracle Application Express 18.1 - Parte II

Por Mónica Godoy Millán Oracle ACE
Publicado en Noviembre 2018

Revisado por Juan Pablo Guizado




En el primer artículo les mostré como podrían diseñar una cuadricula interactiva para cambiar el estado de los empleados usando Acciones Dinámicas e íconos Font Awesome. En esta segunda parte veremos cómo incluir botones y funciones adicionales a la cuadrícula, de manera que al señalar varios registros podamos cambiar el estado de los empleados.

La versión utilizada en esta práctica es la versión 18.2.0.00.12.



Cuadrícula Interactiva

Lo primero que necesitamos es crear la región de tipo cuadrícula interactiva, con una consulta básica a la tabla de empleados.

 



Introducimos un identificador estático a la región. Mas adelante la necesitaremos en el código JavaScript.




Elementos

Igualmente necesitamos dos elementos para contener el id del empleado a activar o inactivar.




Acción Dinámica

Las acciones dinámicas también serán muy similares. Cuando el elemento cambie de valor, actualizará la columna de estado del empleado basado en el ROWID. Pero en esta ocasión no necesitamos crear una acción para refrescar la cuadrícula.

 



 




Código JavaScript de la Cuadrícula

Esta función nos permite añadir funcionalidades, modificar la apariencia y comportamiento de la cuadrícula. Debemos suministrar código JavaScript y podemos hacer referencia a elementos de la aplicación, página y variables del sistema. Es importante que después de haber realizado los cambios requeridos, se retorne dicha configuración.

  




Para nuestra práctica requerimos definir dos nuevos botones cada uno con su acción correspondiente, los cuales se mostrarán en la barra de herramientas de la Cuadrícula.

Definimos los atributos de cada botón, principalmente nombre, ícono y acción.




Ahora definimos lo que ejecutará cada acción definida en los botones. Para hacer referencia a la cuadrícula que estamos usando, en la variable view debemos pasar el identificador estático que previamente habiamos escrito.

Solo si la cuadrícula tiene activa la propiedad de Editar podrá recorrer los registros que hayan sido marcados por el usuario. Por cada registro marcado por el usuario, la función tomará el valor de la columna ROWID, lo asignará al elemento P5_ACTIVAR/P5_INACTIVAR y generará un mensaje indicando la acción que se acaba de realizar “Empleados activados” ó “Empleados descativados”. Al finalizar cada acción, refrescara la cuadrícula haciendo uso nuevamente del identificador estático.




Finalmente tendremos el siguiente código JavaScript:


function (config){
  var $ = apex.jQuery,
      toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
      toolbarGroup = toolbarData.toolbarFind("actions3");
  
  toolbarGroup.controls.push({
    type: "BUTTON",
    action: "activar",
    icon: "fa fa-thumbs-up",
    iconBeforeLabel: true,
    hot: true,
  });
  toolbarGroup.controls.push({
    type: "BUTTON",
    action: "inactivar",
    icon: "fa fa-thumbs-down",
    iconBeforeLabel: true,
    hot: true,
  });  
    config.toolbarData = toolbarData;
  
    config.initActions = function(actions)
    {
      actions.add({
        name: "activar",
        label: "Activar",
        action: function(event, focusElement)
        {
          var i, records, model, rowid, record,
              view = apex.region("ig_acciones").widget().interactiveGrid("getCurrentView");

          if(view.supports.edit)
          {
            model = view.model;
            records = view.getSelectedRecords();
            if (records.length > 0)
            {                 
              for (i=0; i<records.length;i++)
              {
                record = records[i];
                rowid = model.getValue(record,"ROWID");
                apex.message.showPageSuccess("Empleados activados");
                  $s("P5_ACTIVAR",rowid);
              }
                apex.region("ig_acciones").refresh();
            }
          }
        }
      });
     actions.add({
        name: "inactivar",
        label: "Inactivar",
        action: function(event, focusElement)
        {
          var i, records, model, rowid, record,
              view = apex.region("ig_acciones").widget().interactiveGrid("getCurrentView");

          if(view.supports.edit)
          {
            model = view.model;
            records = view.getSelectedRecords();
            if (records.length > 0)
            {                 
              for (i=0; i<records.length;i++)
              {
                record = records[i];
                rowid = model.getValue(record,"ROWID");
                apex.message.showPageSuccess("Empleados desactivados");
                  $s("P5_INACTIVAR",rowid);
              }
                apex.region("ig_acciones").refresh();
            }
          }
        }
      });   
    }    
  return config;
}



Y nuestra cuadrícula lucirá así, con dos botones adicionales cada uno con el ícono definido en la función JavaScript.




Después de señalar los empleados y dar clic en el botón Inactivar, cambiará el estado, se refrescará la cuadrícula y se generará un mensaje en este caso “Empleados desactivados”.




Similarmente sucederá cuando el usuario active los empleados, solo que activará los empleados y el mensaje será “Empleados activados”.



La interacción a través de los botones permite al usuario modificar el estado de varios registros al mismo tiempo, perfecto en los casos en que se requiere activar / inactivar registros masivamente sin necesidad de dar otro clic adicional para guardar los cambios.




Mónica Godoy Millán tiene 10 años de experiencia en el desarrollo de software. Actualmente trabaja como consultora de tecnología independiente y desarrolladora de aplicaciones web en Oracle APEX. Fundó el meetup de Oracle APEX Colombia en 2015 para dar a conocer esta gran herramienta en su país y de esa manera impulsar las empresas. Ha sido ponente en conferencias como: OTN y ODT Colombia y es miembro activo de Oracle Developer Community, y blogger en https://community.oracle.com/blogs/monicagodoy/

Este artículo ha sido revisado por el equipo de productos Oracle y se encuentra en cumplimiento de las normas y prácticas para el uso de los productos Oracle.