Cómo aplicar un formato de moneda en un campo numérico en Oracle APEX

Cuando trabajamos con aplicaciones que necesiten manejar montos, necesitaremos aplicar un formato de moneda en los campos numéricos para que, únicamente acepten números y adicionalmente, tengan un formato de dinero para mejorar la lectura de la cifra.

Para realizar esta solución vamos a necesitar la librería de Jquery por lo que debemos importarla en la pantalla de Oracle APEX, en mi caso utilicé el siguiente url:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js

En el campo que queremos formatear, debemos colocar el siguiente custom attributes:

data-type="currency"

De manera que quede así:

Ahora, debemos crear un evento de tipo keypress igual en el campo que queremos formatear:

Luego en el true action, debemos crear una acción de tipo execute javascript, y debemos elegir en affected elements el item que vamos a aplicarle la acción:

Por último el código que utilizaremos para formatear el campo será el siguiente:

// Jquery Dependency

$("input[data-type='currency']").on({
    keyup: function() {
      formatCurrency($(this));
    },
    blur: function() { 
      formatCurrency($(this), "blur");
    }
});


function formatNumber(n) {
  // formato del número de 1000000 a 1,234,567
  return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}


function formatCurrency(input, blur) {
  var input_val = input.val();

  if (input_val === "") { return; }

  var original_len = input_val.length;

  var caret_pos = input.prop("selectionStart");
 
  if (input_val.indexOf(".") >= 0) {

    var decimal_pos = input_val.indexOf(".");

    var left_side = input_val.substring(0, decimal_pos);
    var right_side = input_val.substring(decimal_pos);

    // Añade comas a la derecha de los números
    left_side = formatNumber(left_side);

    // Valida el valor del lado derecho
    right_side = formatNumber(right_side);
    
    // Indicamos que los decimales sean 2 números siempre
    if (blur === "blur") {
      right_side += "00";
    }
    
    // Indicamos el límite de decimales
    right_side = right_side.substring(0, 2);
    input_val = left_side + "." + right_side;

  } else {
    // removemos todos los valores que no son números
    input_val = formatNumber(input_val);
    input_val = input_val;
    
    // indicamos la cantidad de decimales
    if (blur === "blur") {
      input_val += ".00";
    }
  }
  
  // envíamos la actualización al campo
  input.val(input_val);

  // Lo colocamos en la posición izquierda del campo
  var updated_len = input_val.length;
  caret_pos = updated_len - original_len + caret_pos;
  input[0].setSelectionRange(caret_pos, caret_pos);
}

Guardamos el archivo y realizamos la prueba, al digitar el monto se nos formateará el campo, para colocar decimales ponemos un punto seguido de los decimales, mientras que sino colocamos decimales, cuando salgamos del campo, automáticamente se nos añadirán 2 decimales en 00:

Debemos tener en cuenta que Oracle APEX no acepta por default las comas en los campos numéricos, únicamente acepta el punto o coma de los decimales, esto dependerá del lenguaje establecido en su base de datos, español utiliza coma, inglés utiliza punto, por lo que recomiendo que, antes de guardar el valor en la base de datos, le aplique una función replace:

SELECT REPLACE( '1,254,256.00', ',', '' ) FROM dual;

De esta manera obtendremos el valor formateado para realizar el insert en la base de datos.

Post Views: 2.767

Una respuesta a «Cómo aplicar un formato de moneda en un campo numérico en Oracle APEX»

Deja una respuesta Cancelar la respuesta