✒️La guía y las herramientas de diseño de SAP Fiori

Tipos de aplicaciones disponibles y guia de diseño SAP Fiori

Guía de diseño SAP Fiori – Actúa como el lenguaje de diseño de SAP Fiori y guían al desarrollador sobre cómo crear una aplicación respetando los principios de diseño.

Pagina de la guía de diseño SAP FIori

https://experience.sap.com/fiori-design-web/

Manejo de mensajes

Los mensajes se dividen en:

Error

Advertencia

Información

Éxito

Confirmación

Los mensajes se pueden mostrar de diferentes formas utilizando los controles de la librería sap.m.

Algunas de las formas UI5 son

Mensaje de ventana emergente – utiliza el control sam.m.messagepopover, es la forma preferida de mostrar mensajes al validar un formulario.

Mensaje Box – Utiliza el control sap-m-messagebox, se utiliza cuando hay errores que no son directamente relacionados con un campo de formulario, como un error genérico o técnico, el usuario debe aceptar explícitamente el mensaje de error, advertencia o información para poder continuar. También puede ser utilizado como mensaje de confirmación, cuando un usuario realizase una acción importante que deba ser confirmada por el antes de realizar la acción real.

Mensaje Toas – Utiliza el control sap.m.messagetoast. Se utiliza para mostrar un mensaje breve de éxito, desaparece automáticamente después de un tiempo especificado, no es disruptivo y no requiere una acción explicita por parte del usuario.

Mensaje Page - Utiliza el control sap.m.messagepage. Brinda comentarios de cuando una aplicación o lista esta vacía o se ha producido un error.

Elementos de SAP Fiori

Proporcionan un framework para crear un interfaz sin escribir el código, son un conjunto de plantillas creadas con el fin de reducir al máximo el coste de desarrollo de las aplicaciones Fiori en el front-end. Se basan en un servicio oDATA* y en una serie de metadatos al crear interfaz de usuario y representar la información que procede desde nuestro sistema SAP de forma automática.

oDATA - Open Data Protocol es un protocolo que permite a cualquier cliente obtener información de cualquier fuente mediante servicios REST, permitiendo pasar por parámetros los filtros a aplicar en los resultados.

Las anotaciones oDATA son información de metadatos sobre artefactos del servicio oData, es decir son líneas de código en el backend que definen que funcionalidad y que diseño tendrá nuestra aplicación.

Lista analítica - El propósito de la página de lista analítica es identificar áreas interesantes dentro de conjuntos de datos o instancias únicas significativas mediante la visualización de datos y la inteligencia empresarial.

Página de objeto - se utiliza para mostrar y categorizar toda la información relevante sobre un objeto. Se puede acceder rápidamente al contenido categorizado utilizando la navegación o pestaña y los usuarios pueden cambiar del modo de visualización al modo de edición para cambiar el contenido.

Página de lista de trabajo Worklist - Es un plano en el que el usuario visualiza una lista de elementos en espera de acción. El Enfoque está en el procesamiento de los elementos de la lista. En un plano de planta de informe de lista, la atención se centra en filtrar y enumerar artículos, suele utilizar el diseño de pantalla completa, si la lista es muy simple, también puede utilizar un diseño de pantalla dividida. También podemos utilizar el diseño de página dinámico si necesitamos configuraciones variantes, que se pueden acomodar en la sección del encabezado.

--------------------------------------------------------------------------------------------------------------------------

Los Layouts Utilizados

Las aplicaciones SAP Fiori se componen de páginas y cada página utiliza un control de diseño SAPUI5 para organizar los datos dentro de sí mismo.

Página dinámica - (sap.f.DynamicPage) se puede utilizar con varias plantillas y el contenido del encabezado y el área de contenido del diseño dependen de la plantilla elegida.

No debemos utilizar un diseño de página dinámico si estamos utilizando elementos de SAP Fiori porque los elementos de SAP Fiori ya incorporan un diseño de página dinámico.

Pantalla completa - Está diseñado para aprovechar al máximo el ancho de la pantalla. Se utiliza para mostrar una amplia variedad de contenido, especialmente tablas con una gran cantidad de columnas, cuadros y gráficos. El diseño contiene un encabezado de aplicación que puede contener navegación hacia atrás, un título y una acción. La parte del contenido del diseño es una larga sección desplazable que está abierto al diseño de estilo libre. También se puede agregar un pie de página según el requerimiento.

El diseño de pantalla completa está obsoleto según SAPUI5 1.44, y el diseño de página dinámico es su sucesor.

Columnas Flexibles - Es la evolución del diseño de pantalla dividida. Se comporta de manera responsiva, lo que lo hace adecuado tanto para dispositivos de escritorio como para dispositivos móviles. Es un control genérico. Como contenedor de diseño, no proporciona ningún contenido en sí. Muestra varios tipos de plantillas en una sola página. Esto permite una navegación más rápida y fluida entre múltiples planos de planta, que la navegación habitual página por página. Además, ofrece diferentes diseños con hasta tres columnas. Los usuarios pueden expandir la columna en la que desean concentrarse, cambiar entre diferentes diseños y ver la columna de la derecha en el modo de pantalla completa.

Pantalla dividida - Diseñado para mostrar un escenario maestro-detalle,proporciona un diseño de dos columnas. A la izquierda, hay una lista maestra de elementos que el usuario quiere procesar. Al seleccionar un artículo de la lista maestra, más información acerca de este elemento se muestra en la segunda columna, denominada área de detalles.

El diseño de pantalla completa y el diseño de pantalla dividida quedaron obsoletos con la versión 1.48