En esta entrega vamos a ver cómo podemos manejar distintos mensajes disparados por medio de botones.
Vamos a crear estos cuatro botones en una página en APEX:
BTN_ALERT
CSS Classes: u-warning
Icon: fa-warning
Creamos una acción dinámica de tipo JavaScript:
// Se muestra el cuadro de diálogo ‘alerta sin bloqueo’,
// entonces después que se da clic en OK se ejecuta el próximo cuadro de alerta
// y si tuviéramos cualquier otro código se ejecutaría al cerrar el cuadro de diálogo.
apex.message.alert('alerta sin bloqueo', function() {
apex.message.alert('cerrar la alerta');
--mifuncion();
});
Usamos la función alert(pMessage, pCallback)
Parámetros:
Nombre Tipo Descripción
pMessage String El mensaje que se mostrará en el cuadro de diálogo de alerta.
pCallback Función Llamada a la Función Callback cuando el diálogo está cerrado.
Esta función muestra un cuadro de diálogo de alerta con el mensaje dado y el botón Ok. La función de devolución de llamada es pasada cuando se llama al parámetro pCallback cuando se cierra el cuadro de diálogo.
El cuadro de diálogo se muestra con el widget jQuery UI “Diálogo”. Existen algunas diferencias entre esta función y la función de alerta incorporada de un navegador: – El estilo de diálogo será coherente con el resto de la aplicación. – El cuadro de diálogo se puede mover. – La llamada a apex.message.alert no se bloquea. Cualquier código definido después de la llamada a apex.message.alert se ejecutará antes de que el usuario presione OK. Por lo tanto, el código que se ejecutará después de que el usuario cierre el cuadro de diálogo debe realizarse desde la devolución de llamada, como lo vemos en el ejemplo.
Nota: Si alguno de los siguientes dos requisitos previos no se cumple, la función recurre al uso de la confirmación integrada del navegador: – el código del widget del cuadro de diálogo de la interfaz de usuario jQuery debe cargarse en la página. – El navegador debe estar ejecutándose en modo “Standards”. Esto se debe a que si se está ejecutando en modo ‘Quirks’ (como es el caso con algunos temas más antiguos), esto puede causar problemas con la posición de visualización, donde el cuadro de diálogo se posiciona en el centro vertical de la página, en lugar del centro de la página visible.
BTN_SUCCESS
CSS Classes: u-success
Icon: fa-check-circle-o
Creamos una acción dinámica de tipo JavaScript:
apex.message.showPageSuccess('¡Exitoso!');
Usamos la función showPageSuccess(pMessage)
Parámetro:
Nombre Tipo Descripción
pMessage String El mensaje de éxito para mostrar.
Esta función muestra un mensaje de éxito a nivel de página. Esto borrará cualquier mensaje de éxito anterior que se muestre, y también supone que no hay errores, por lo que borrará cualquier error que se haya mostrado anteriormente.
Los mensajes de éxito se mostrarán utilizando la plantilla del tema de la aplicación actual. Específicamente para los mensajes de éxito de la página, se utilizará el marcado del atributo “Subtemplate > Success Message” de la plantilla de página.
Consejo: como desarrollador de temas, podemos influir o anular lo que sucede cuando se muestra un mensaje de éxito a nivel de página.
Para obtener más información, podemos consultar la función apex.message.setThemeHooks (específicamente la función de devolución de llamada beforeShow, donde necesitaremos verificar ‘pMsgType === apex.message.TYPE.SUCCESS’ para aislar cuando se muestra un mensaje de éxito a nivel de página).
BTN_ERROR
CSS Classes: u-danger
Icon: fa-exclamation-diamond-o
Creamos una acción dinámica de tipo JavaScript:
apex.message.showErrors([
{
type: 'error',
location: 'page',
message: '¡Hubo un problema!',
unsafe: false
}
]);
Usamos la función showErrors(pErrors)
Parámetro
Nombre: pErrors
Tipo: Object | Array <Object>
Descripción: Un objeto o conjunto de objetos con las siguientes propiedades:
| Name | Type | Attributes | Default | Description |
| type | string | Debe pasar “error”, aunque puede admitir diferentes tipos de notificación en el futuro. | ||
| location | string | Array.<string> | Los valores posibles son: “inline”, “page” o [ “inline”, “page” ]. | ||
| pageItem | string | Referencia del elemento donde debe aparecer un error ‘inline’ . Necesario cuando location = “inline”. | ||
| message | string | El mensaje de error. | ||
| unsafe | boolean | <optional> | true | Pasar verdadero (true) para que el mensaje sea escapado por showErrors. Pasar falso (false) si el mensaje ya se escapó y no necesita ser escapado por showErrors. |
Esta función muestra todos los errores en la pila de errores apex.message. Los errores se mostrarán usando las plantillas del tema de la aplicación actual. Para los mensajes de nivel de página (donde ubicación = “page”), los mensajes de error usan marcado del atributo “Subtemplate > Notification” de la plantilla de página. Para los mensajes a nivel de elemento (donde ubicación = “inline”), los mensajes de error utilizan el marcado del atributo “Error Display > Error Template” de la plantilla de etiqueta del elemento.
Nota: los desarrolladores de temas deben tener en cuenta lo siguiente: Para mostrar los errores de un tema correctamente, deben definir los dos atributos de plantilla descritos anteriormente. Además, para los errores en línea, la plantilla de etiqueta debe hacer referencia a la cadena de sustitución #ERROR_TEMPLATE# en los atributos “Before Item” o “After Item” de sus plantillas de etiquetas.
Como desarrolladores de temas, también pueden influir o anular lo que sucede al mostrar errores a nivel de página de igual forma descripta anteriormente.
BTN_ERROR_CLEAR
CSS Classes: u-danger
Icon: fa-exclamation-circle-o
Creamos una acción dinámica de tipo JavaScript:
apex.message.clearErrors();
apex.message.showErrors([
{
type: 'error',
location: 'page',
message: '¡Eliminado todos esos errores!',
unsafe: false
}
]);
Si no deseamos agregar a la pila los errores, primero debemos llamar a la función clearErrors(), como vemos en el ejemplo.
// Primero se limpian los errores apex.message.clearErrors(); // Ahora se muestran nuevos errores apex.message.showErrors([ { type: "error", location: [ "page", "inline" ], pageItem: "P1_ENAME", message: "¡El nombre es requerido!", unsafe: false },{ type: "error", location: "page", message: "¡Se ha producido un error de página!", unsafe: false } ]);
Para más información sobre estas funciones puedes ir a la documentación de Oracle APEX 19.2 AQUI