Monday, August 6, 2018

Integrando Oracle JET 5.1 + Apache Tomcat y Oracle Apex 5.1 / 18.1 + Ords + Local Machine

Como ya vimos en un tutorial anterior integramos Oracle Jet 5.1 en Apex 5.1 usando librerias online de Oracle, Ahora haremos un proceso similar, pero usando librerias de nuestro servidor local, para esta demo usare Apache Tomcat para subir las librerias.



Link Integrando Jet 5.1 con Apex
Link Instalando Apache Tomcat + Apex + Ords.

Primero descargamos las librerias de JET de la pagina oficial de Oracle.
Link


Extraemos el contenido en un directorio que nos sea de facil acceso, en mi caso lo puse junto a la instacion de Apex que tengo. C:\Install_Apex\Jet_5.1



Vamos donde esta instalado Apache Tomcat y editamos el archivo SERVER.XML dentro del directorio de conf.  C:\Program Files\Apache Software Foundation\Tomcat 9.0\conf



Agregamos la referencia a donde estan nuestras librerias de Oracle Jet y el path; En mi caso le puse "Jet_5.1" , puedes colocar el que gustes.

<Context docBase="C:\Install_Apex\Jet_5.1" path="/Jet_5.1" />


Guardamos los cambios y reiniciamos apache tomcat.
Podemos verificar si esta correctamente accediendo a un link como este, en tu caso puede variar por el puerto o nombre que le colocaste.

http://127.0.0.1:8080/Jet_5.1/js/libs/knockout/knockout-3.4.2.js



Cambiamos las referencias que teniamos en nuestra aplicacion apex, algo similar a esto (dependiendo de que puerto tengas configurado y directorio, cambiara. En mi caso http://127.0.0.1:8080/Jet_5.1


define("knockout",[],function(){return ko;});


requirejs.config({
  // Path mappings for the logical module names
  paths: {       
    //'knockout': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/knockout/knockout-3.4.2',
    'knockout': 'http://127.0.0.1:8080/Jet_5.1/js/libs/knockout/knockout-3.4.2',    
    'jquery': 'http://127.0.0.1:8080/Jet_5.1/js/libs/jquery/jquery-3.3.1.min',
    'jqueryui-amd': 'http://127.0.0.1:8080/Jet_5.1/js/libs/jquery/jqueryui-amd-1.12.1.min',
    'ojs': 'http://127.0.0.1:8080/Jet_5.1/js/libs/oj/v5.1.0/min',
     //'ojs': 'https://static.oracle.com/cdn/jet/v5.1.0/default/js/min',    
    'ojL10n': 'http://127.0.0.1:8080/Jet_5.1/js/libs/oj/v5.1.0/ojL10n',
    'ojtranslations': 'http://127.0.0.1:8080/Jet_5.1/js/libs/oj/v5.1.0/resources',
    'text': 'http://127.0.0.1:8080/Jet_5.1/js/libs/require/text',
    'promise': 'http://127.0.0.1:8080/Jet_5.1/js/libs/es6-promise/es6-promise.min',
    'hammerjs': 'http://127.0.0.1:8080/Jet_5.1/js/libs/hammer/hammer-2.0.8.min',
    'signals': 'http://127.0.0.1:8080/Jet_5.1/js/libs/js-signals/signals.min',
    'ojdnd': 'http://127.0.0.1:8080/Jet_5.1/js/libs/dnd-polyfill/dnd-polyfill-1.0.0.min',
    'css': 'http://127.0.0.1:8080/Jet_5.1/js/libs/require-css/css.min',
    'customElements': 'http://127.0.0.1:8080/Jet_5.1/js/libs/webcomponents/custom-elements.min',
    'proj4js': 'http://127.0.0.1:8080/Jet_5.1/js/libs/proj4js/dist/proj4'
  },
  // Shim configurations for modules that do not expose AMD
  shim: {
    'jquery': {
      exports: ['jQuery', '$']
    }
  }
});

Agregamos las referencias a knockout y require.js


http://127.0.0.1:8080/Jet_5.1/js/libs/knockout/knockout-3.4.2.js
http://127.0.0.1:8080/Jet_5.1/js/libs/require/require.js

Agremos la referencia a las librerias de CSS

Quiero comentar que cuando agregamos las librerias de CSS de JET en mi post anterior,  estas estaban sobreescribiendo las de Apex, asi que junto a Jorge Rimblas, me comento que el mejor camino es referenciar librerias Css de Apex.

Para Apex 18.1  podemos usar :

#JET_CSS_DIRECTORY#/alta/oj-alta-notag-min.css?v=18.1.0.00.45

y para Apex 5.1:

#JET_CSS_DIRECTORY#/alta/oj-alta-notag-min.css

...

<script>
       if (!document.createElement) {
         document.createElement = document.constructor.prototype.createElement;
         document.createElementNS = document.constructor.prototype.createElementNS;
         document.importNode = document.constructor.prototype.importNode;
       }

       // The "oj_whenReady" global variable enables a strategy that the busy context whenReady,
       // will implicitly add a busy state, until the application calls applicationBoostrapComplete
       // on the busy state context.
       window["oj_whenReady"] = true;
</script>

Deberia quedar de esta forma:




Por ultimo para comprobar agregamos un PictoChart ... similar a lo que hicimos aqui.



Y vemos como se cargaron las librerias de nuestro servidor local.











Share:

Monday, July 30, 2018

Integrando Oracle JET v5.1 en Oracle Apex + Jet TimeLine y PictoChart

En este corto tutorial vamos a ver la forma de integrar Oracle Jet v5.1 o cualquier version de JET dentro de APEX.
Cabe mencionar que puede ser cualquier version de apex, lo he probado en versiones de  Apex v5.1 y Apex 18.



Adionalmente en este tutorial he usado referencia a las librerias online de Oracle, en un siguiente tutorial describire como usar nuestro servidor Apache para usar nuestras propias librerias.

Video demostrativo:



Primero agregamos las referencias a las librerias de knockout y require.js:


https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/knockout/knockout-3.4.2.js
https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/require/require.js


Agregamos la referencia al CSS que utiliza oracle JET, esto lo pegamos en HTML Header


<link rel="stylesheet" id="css" href="https://static.oracle.com/cdn/jet/v5.1.0/default/css/alta/oj-alta-min.css">
<script>
       if (!document.createElement) {
         document.createElement = document.constructor.prototype.createElement;
         document.createElementNS = document.constructor.prototype.createElementNS;
         document.importNode = document.constructor.prototype.importNode;
       }

       // The "oj_whenReady" global variable enables a strategy that the busy context whenReady,
       // will implicitly add a busy state, until the application calls applicationBoostrapComplete
       // on the busy state context.
       window["oj_whenReady"] = true;
</script>


Luego creamos una acción dinamica, cuando carga la pagina para agregar las librerias de JET 5.1.
* Podemos aqui utilizar diferentes versiones de jet, en las referencias dejare los links de oracle donde tome el ejemplo.


define("knockout",[],function(){return ko;});


requirejs.config({
  // Path mappings for the logical module names
  paths: {
    'knockout': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/knockout/knockout-3.4.2',
    'jquery': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/jquery/jquery-3.3.1.min',
    'jqueryui-amd': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/jquery/jqueryui-amd-1.12.1.min',
    'ojs': 'https://static.oracle.com/cdn/jet/v5.1.0/default/js/min',
    'ojL10n': 'https://static.oracle.com/cdn/jet/v5.1.0/default/js/ojL10n',
    'ojtranslations': 'https://static.oracle.com/cdn/jet/v5.1.0/default/js/resources',
    'text': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/require/text',
    'promise': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/es6-promise/es6-promise.min',
    'hammerjs': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/hammer/hammer-2.0.8.min',
    'signals': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/js-signals/signals.min',
    'ojdnd': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/dnd-polyfill/dnd-polyfill-1.0.0.min',
    'css': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/require-css/css.min',
    'customElements': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/webcomponents/custom-elements.min',
    'proj4js': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/proj4js/dist/proj4'
  },
  // Shim configurations for modules that do not expose AMD
  shim: {
    'jquery': {
      exports: ['jQuery', '$']
    }
  }
});


Para probar usare el control de TimeLine , el cual saque del CookBook de oracle Jet
Creamos un region de tipo static content y en el text copiamos el codigo HTML del cookbook.


<div id='timeline-container'>
          <oj-timeline id='timeline' aria-label='Timeline Context Menu Demo' 
                     minor-axis='{
                       "scale": "weeks",
                       "zoomOrder": ["months", "weeks", "days"]
                     }'
                     major-axis.scale='quarters'
                     start='[[new Date("Jan 1, 2013").toISOString()]]'
                     end='[[new Date("Dec 31, 2013").toISOString()]]'
                     selection-mode='single'
                     selection='["e4"]'
                     series='[[timelineSeries]]'
                     style='width:100%;height:350px'>
            <oj-menu slot='contextMenu' style='display:none' aria-label='Match Edit' 
                   on-oj-action='[[menuItemAction]]' 
                   on-oj-before-open='[[beforeOpenFunction]]'>
              <oj-option value='action1'>Action 1</oj-option>
              <oj-option value='action2'>Action 2</oj-option>
              <oj-option value='action3'>Action 3</oj-option>
            </oj-menu>
          </oj-timeline>
        
          <p>Last selected menu item:
            <span id='results' class='italic' style='font-weight:bold' data-bind='text: selectedMenuItem'></span>
          </p>
        </div>



Y luego creamos un boton que llame una accion dinamica para crear el ViewModel (JS) del control.


require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojmenu', 'ojs/ojtimeline'],
  function (oj, ko, $)
  {
    function ViewModel()
    {
      var self = this;
      
      self.seriesData = [{
          id: 'e1',
          title: 'ATP VTR Open',
          start: new Date('Feb 4, 2013').toISOString(),
          end: new Date('Feb 10, 2013').toISOString(),
          description: 'Finalist: 3-1'
        }, {
          id: 'e2',
          title: 'ATP Brasil Open',
          start: new Date('Feb 11, 2013').toISOString(),
          end: new Date('Feb 17, 2013').toISOString(),
          description: 'Champion: 4-0'
        }, {
          id: 'e3',
          title: 'ATP Abierto Mexicano Telcel',
          start: new Date('Feb 25, 2013').toISOString(),
          end: new Date('Mar 2, 2013').toISOString(),
          description: 'Champion: 5-0'
        }, {
          id: 'e4',
          title: 'ATP BNP Paribas Open',
          start: new Date('Mar 7, 2013').toISOString(),
          end: new Date('Mar 17, 2013').toISOString(),
          description: 'Champion: 6-0'
        }
      ];
      var items = ko.observableArray(self.seriesData)();
      self.timelineSeries = [{id: 's1', emptyText: 'No Data.', label:'Oracle Events', items: items}];

      self.selectedMenuItem = ko.observable('(None selected yet)');
      var itemTitle;
      self.beforeOpenFunction = function (event)
      {
        var target = event.detail.originalEvent.target;
        var context = document.getElementById('timeline').getContextByNode(target);
        if (context != null && context.subId == 'oj-timeline-item')
        {
          var itemIndex = context['itemIndex'];
          itemTitle = self.seriesData[itemIndex]['title'];
        }
      };
      self.menuItemAction = function (event)
      {
        var text = event.target.textContent;
        if (itemTitle)
        {
          self.selectedMenuItem(text + ' from ' + itemTitle);
          itemTitle = null;
        }
        else
          self.selectedMenuItem(text + ' from timeline background');
      };
    };

    $(
        function()
        {
            ko.applyBindings(new ViewModel(), document.getElementById('timeline-container'));
        }
    );
  }
);


Finalmente tenemos nuestro TimeLine en Apex Oracle



Aplicación demo:




Referencias:




















Share:

Thursday, July 5, 2018

APEX_ITEM Parte 3 Guardando automáticamente los valores de un apex_item con Ajax + Oracle Apex + Jquery

Continuando con los apex_item, en esta oportunidad vamos a ver como usar datepicker, lista de valores y campos de input, haciendo que se guarden automaticamente, cada vez que modifiquemos algun valor.




apex_item parte 1
apex_item parte 2
como integrar alertify / plugin

Link demo: user: demo/ pass: demo

Video explicacion:



Lo primero es crear un interactive report con la siguiente consulta, donde ya he creado mis apex_item de datepicker, lista de valores y entrada de texto.

select e.empno
     , e.ename
   --, e.deptno
   --, e.sal
   --, e.hiredate
    -- apex items
     , apex_item.hidden( p_idx    => 1
                       , p_value  => e.empno)  ||
       apex_item.date_popup2(p_idx           => 2
                            , p_value        => e.hiredate
                            , p_date_format  => :APP_DATE_TIME_FORMAT
                            , p_size         => 20) hiredate
     , apex_item.select_list_from_lov(p_idx        => 3
                                    , p_value      => e.deptno
                                    , p_lov        => 'DEPARTAMENTOS'
                                    , p_attributes => 'style="width: 200px;"'
                                    , p_show_null  => 'NO') deptno
     , apex_item.text(p_idx   => 4
                    , p_value => e.sal
                    , p_size  => 5) sal
  from emp e

Luego crearemos una accion dinamica para capturar el cambio de algun apex item en la region del reporte.





#empleados_ir tr:gt(1)

actualizarEmpleado(this.triggeringElement);


Creamos la funcion en la definicion de la pagina y hacemos el llamado al proceso ajax.


var empno, hiredate, deptno, sal;


function actualizarEmpleado(elem){

  empno    = $(elem).find("input[name='f01']").val();
  hiredate = $(elem).find("input[name='f02']").val();
  deptno   =  $(elem).find("select[name='f03']").val();
  sal      = $(elem).find("input[name='f04']").val(); 
 console.log(empno + ' / ' +  hiredate + ' / ' +  deptno + ' / ' + sal);
 ajax_process_actualizar(empno,hiredate,deptno,sal);

}


function ajax_process_actualizar(empno,hiredate,deptno,sal){

  apex.server.process("ActualizarEmpleado",
       {  x01: empno
        , x02: hiredate
        , x03: deptno
        , x04: sal 
       }
     , {success: function(pData){ 
       
           if (pData.ind_error == 1){

             alertify.error(pData.mensaje);
             apex.event.trigger( "#empleados_ir", "apexrefresh" );
           } else {
             alertify.success(pData.mensaje);
           }

          }
       }
     //, {dataType: "text"}
   ); 
}



Creamos el proceso ajax callback, que retorna el mensaje de actualizacion correcta o de error.




begin

  update emp
     set hiredate = to_date(apex_application.g_x02,:APP_DATE_TIME_FORMAT)
       , deptno   = apex_application.g_x03
       , sal      = apex_application.g_x04
  where empno = apex_application.g_x01;

  apex_json.open_object;
  apex_json.write(p_name => 'mensaje', p_value=> 'Actualizado correctamente');
  apex_json.write(p_name => 'ind_error', p_value=> 0);
  apex_json.close_object;
exception
  when others then
  apex_json.open_object;
  apex_json.write(p_name => 'mensaje', p_value=> 'Error al actualizar');
  apex_json.write(p_name => 'ind_error', p_value=> 1);
  apex_json.close_object;

end;















Share:

Monday, July 2, 2018

Como integrar y usar plug-in en Apex / Alertify + Oracle Apex + JavaScript (notificaciones/alertas)

En esta oportunidad veremos como integrar el plugin alertify en Apex. y veremos dos formas de poderlo usar. Con una accion dinamica custom o con javaScript.



Este plugin da al usuario una mejor experiencia de uso al tener notificaciones con un buen diseño.
Cabe mencionar que este plug-in fue construido en base a esta libreria de JS

Link de descarga Alertify como plugin
Link demo propia del autor.

Link mi aplicacion demo 

Video demo




Lo primero que use es crear una accion dinamica CUSTOM


y seleccionamos una accion de tipo alertify



En mi boton de comprobar, llamare un javascript que compruebe si mi item tiene o no valor.


if ($("#P26_TIENE_VALOR").val())
{
  $.event.trigger("mostrar_mensaje_correcto");
}
else{
   $.event.trigger("mostrar_mensaje_error"); 
}



Resultado:




Y la otra forma de usar este plug in es llamarlo, directamente en un javaScript:
* nota podemos usar la documentacion oficial para su uso. aqui


// alert dialog
alertify.alert("Message");

// success notification
// shorthand for alertify.log("Notification", "success");
alertify.success("Success notification");







Share:

Saturday, June 30, 2018

APEX_ITEM Parte 2 Guardando Check Boxes con Ajax y manteniendo el valor en paginación + Oracle Apex + Jquery

Buen dia , continuando con el manejo de apex_items, hoy veremos como guardar el valor de un checkbox sin necesidad de hacer submit a la pagina y manteniendo el valor si  usamos la paginacion en un reporte.



En mi anterior tutorial veiamos  el manejo simple de un checkbox

Para este fin vamos a usar:

  • Colecciones / Collections
  • Ajax / apex.server.process
  • Interactive report
  • PlSql
Video demo:



Link demo apex, user: demo / pass: demo

Primero crearemos una coleccion, nombre: 'EMPLEADOS_COL' , y se creara a partir de un query de los empleados, notemos que tengo una columna donde me indica si el empleado pertenece al departamento seleccionado.

Documentacion  de colecciones


declare
  l_sql varchar2(4000);
  l_nombre_coleccion  varchar2(4000) := 'EMPLEADOS_COL';
begin

  if apex_collection.collection_exists (p_collection_name => l_nombre_coleccion)
  then
    apex_collection.delete_collection(p_collection_name => l_nombre_coleccion);
  end if;

  l_sql :='select empno
         , ename
         , deptno
         , sal
         , case when deptno = :P23_DEPARTAMENTO then 1 else 0 end pertenece
         , 0 ind_cambio
      from emp';

  apex_collection.create_collection_from_query_b
  (
      p_collection_name => l_nombre_coleccion
    , p_query           => l_sql
    , p_names           => apex_util.string_to_table('P23_DEPARTAMENTO')
    , p_values          => apex_util.string_to_table(:P23_DEPARTAMENTO)
  );

end;


Luego usaremos crearemos un reporte con la coleccion, aqui agregaremos el apex_item.checkbox2.


select seq_id
     , c001  empno
     , c002  ename
     , c003  deptno
     , c004  sal
     , apex_item.hidden(p_idx   => 1
                      , p_value => seq_id) ||
       apex_item.checkbox2(p_idx   => 2
                         , p_value => c005
                         , p_checked_values => 1)  pertenece
     , c006  ind_cambio
  from apex_collections
  where collection_name = 'EMPLEADOS_COL'

Luego crearemos una accion dinamica para capturar el click en el checkbox.

Dentro crearemos una accion de JavaScript, aqui llamaremos un proceso AJAX (apex.server.process), para actualizar la coleccion.

console.log(this.triggeringElement);

var elem = this.triggeringElement;
var estaMarcado = $(elem).is(':checked');
var seqId = $(elem).parent().find("input[name='f01']").val();

//console.log(estaMarcado);
//console.log(seqId);

apex.server.process("Actualizar_Coleccion",
        {  x01: seqId
         , x02: estaMarcado
        } 
      , {success: function(pdata){
          console.log(pdata.mensaje);  
                  }
        }
      // , {dataType: "text"}
    );
    






En el proceso AJAX .



* Actualizamos el atributo 6 del coleccion que es nuestro indicador que hubo un cambio en ese registro.
* Actualizamos el atributo 5 con 1 si esta el valor CHECKED y 0 si no lo es.
* Escribimos un objeto JSON para luego si deseamos personalizar el mensaje de nuestro cambio.


begin
  apex_collection.update_member_attribute (
      p_collection_name =>  'EMPLEADOS_COL',
      p_seq => apex_application.g_x01,
      p_attr_number => 5,
      p_attr_value => case when apex_application.g_x02 = 'true' then '1' else '0' end
      );
      
  apex_collection.update_member_attribute (
      p_collection_name =>  'EMPLEADOS_COL',
      p_seq => apex_application.g_x01,
      p_attr_number => 6,
      p_attr_value => 1
      );      
      
  apex_json.open_object;  
  apex_json.write(p_name => 'mensaje', p_value=> 'Actualizado correctamente');  
  apex_json.close_object;
exception
  when others then
  apex_json.open_object;  
  apex_json.write(p_name => 'mensaje', p_value=> 'Error al actualizar');
  apex_json.close_object;

end;

Finalmente creamos un proceso Pl/Sql para actualizar los valores en tabla.




* Notemos que en el proceso de ajax podemos hacer esta actualizacion.


for c_emp in (select c001 empno
                   , c005 pertenece  -- c005 es de pertenencia 
                from apex_collections
               where collection_name = 'EMPLEADOS_COL'
                 and c006 != 0 -- todos los que han cambiado de valor              
)
loop

  if c_emp.pertenece = 1 then 
    update emp
       set deptno = :P22_DEPARTAMENTO
     where empno = c_emp.empno; 
     
  else 
    update emp
       set deptno = null
     where empno = c_emp.empno; 
  end if;
 
end loop;










Share:

Monday, June 25, 2018

APEX_ITEM Parte 1 Guardando Check Boxes con APEX_APPLICATION.G_F01 en reportes + Oracle Apex

En este tutorial vamos a trabajar con los apex_item, en el caso particular de los checkbox dentro de reportes.



Lo primero a tener en cuenta es que usaremos APEX_ITEM ,aqui les lejo el link de la documentacion oficial, con apex_item podemos crear diferentes controles, como texto, listas de seleccion, etc.

El metodo nativo para guardar la informacion de esto es usar APEX_APPLICATION.G_F01 donde el 01, nos referenciara al identificador del apex_item.

Quiero aclarar que APEX_APPLICATION.G_F01 solo tendra valores cuando hagamos submit a la pagina, es decir que si los queremos usar con acciones dinamicas no podras obtener el valor. Para esto voy a crear otros post adicionales, para mostrarles como podriamos guardar esta informacion sin hacer submit.

proximamente mantener el valor de check box en paginacion
proximamente guardado automatico de apex_items

Link demo
user: demo  /pass:  demo

Link video tutorial



Entonces, primero definimos una estructura basica del query agregando el apex_item.checkbox2


select empno
     , apex_item.hidden(p_idx   => 1 
                      , p_value => empno) ||
       apex_item.checkbox2(p_idx   => 2
                         , p_value => empno) CheckBox
     , ename
     , deptno
     , sal
     , comm
     , job
  from emp
where deptno <> :P18_DEPARTAMENTOS

*Notamos que usamos un apex_item.hidden que se usara como indice principal.
* La clausula where es para no mostrar los registros que ya se hayan seleccionado para ese departamento.

Creamos un proceso que hara lo siguiente:


for i in 1..apex_application.g_f01.count loop
  for j in 1..apex_application.g_f02.count loop
    if apex_application.g_f01(i) = apex_application.g_f02(j) then
      -- esta seleccionado
      update emp 
         set deptno = :P18_DEPARTAMENTO
       where empno = apex_application.g_f02(i);
    end if;
  end loop; 
end loop;

*Dos loops, uno para tomar todos los indices, y el otro para tomar solo los seleccionados, luego se hace el update.














Share:

Monday, June 11, 2018

Snippets Apex Oracle , JavaScript , Css, / Codigo de uso diario

Quería escribir este post como una manera sencilla de organizar todas aquellas partes de código que a menudo uso para desarrollar, iré creando otro post con otros tips y código que uso, así como algunas herramientas que uso para desarrollar.



Botones:

icono : fa-save
  
<button type="button" class="t-Button t-Button--icon t-Button--success t-Button--simple t-Button--iconLeft">
<span aria-hidden="true" class="t-Icon t-Icon--left fa fa-save">
</span>Guardar
</button>


<button type="button" class="t-Button t-Button--icon t-Button--success t-Button--iconLeft">
<span aria-hidden="true" class="t-Icon t-Icon--left fa fa-save">
</span>Guardar</button>


icono: fa-ban
<button type="button" class="t-Button t-Button--icon t-Button--warning t-Button--iconLeft">
<span aria-hidden="true" class="t-Icon t-Icon--left fa fa-ban"></span>
Anular
</button>


<button type="button" class="t-Button t-Button--icon t-Button--warning t-Button--simple t-Button--iconLeft">
<span aria-hidden="true" class="t-Icon t-Icon--left fa fa-ban">
</span>Anular</button>


icono fa-trash :
<button type="button" class="t-Button t-Button--icon t-Button--danger t-Button--iconLeft">
<span aria-hidden="true" class="t-Icon t-Icon--left fa fa-trash">
</span>Eliminar</button>

<button type="button" class="t-Button t-Button--icon t-Button--danger t-Button--simple t-Button--iconLeft">
<span aria-hidden="true" class="t-Icon t-Icon--left fa fa-trash">
</span>Eliminar</button>


icono fa-check

icono fa-times-circle:

icono fa-chevron-left
icono fa-chevron-right


Todas estas conbinaciones se pueden realizar desde el button builder de universal theme de apex.

JavaScript:


  • Obteniendo valores:
$v("P2_ITEM");

  • Asignando valores :
$s("P2_ITEM","Hello World!");

  • Detener una secuencia de acciones dinamicas
apex.da.cancelEvent.call(this)


APEX - JS 


  •  Mostrar errores en APEX usando javascript

// First clear the errors
apex.message.clearErrors();
 
// Now show new errors
apex.message.showErrors([
    {
        type:       "error",
        location:   [ "page", "inline" ],
        pageItem:   "P1_ENAME",
        message:    "Name is required!",
        unsafe:     false
    },
    {
        type:       "error",
        location:   "page",
        message:    "Page error has occurred!",
        unsafe:     false
    }
]);



  • Pequeño cambio para mostrar el error en un ITEM especifico

var id_item = $v('P700_ERROR_ITEM'); 
 
apex.message.clearErrors(); 

apex.message.showErrors([
  {
   type:       "error",
   location:   [ "page", "inline" ],
   pageItem:   id_abs,
   message:    "Comment for disapprove is required!",
   unsafe:     false
  }
]);    


  • Capturando el cambio de valor de un ITEM
$('#item').change(funtion() {
 console.log(this);
});


  • Saber si un checkbox esta marcado, (checked)
$(document).ready(function(){  
  
    $("#checkbox_comprobar").click(function() {  
        if($("#checkbox").is(':checked')) {  
            alert("Está activado");  
        } else {  
            alert("No está activado");  
        }  
    });  
  
});

APEX

  • Usando las mascaras de fecha , definidas en la configuracion global de apex
APP_NLS_DATE_FORMAT

APP_DATE_TIME_FORMAT
-- Puedes reemplazar cualquier variable como una mascara ejem: &APP_DATE_TIME_FORMAT. o :APP_DATE_TIME_FORMAT


  • Habilitando el debug y mostrando mensaje , cuando se llama un proceso.

apex_debug.enable (p_level => 1);
 
apex_debug.message('Mensaje prueba mes inicio ' || :P120_MES_INICIO ,p_level =>1);

- luego puedes ver tu mensaje , abriendo la pestaba de verDebug en apex

  • Mostrando el icono de espera.
widget = apex.widget.waitPopup();
 
widget.remove();



Continuara ....

Referencias:

Checkbox

Obteniendo asignando valor items

Detener una accion dinamica




Share:

Subscribe to my Newsletter

Acerca de mi:

img

Ing. Angel O. Flores Torres, soy Ingeniero de Sistemas e Ingeniero de Aplicaciones Oracle Apex, he trabajado con Oracle Apex 5 y 5.1 desde el 2017, En los ultimos años he desarrollado habilidades en CSS, JavaScript, Jquery y PlSql , I specialize in Oracle APEX (Oracle Application Express )

Followers

Popular Posts