✒️SAP BTPFIORI / La guía y las herramientas de diseño de SAP Fiori Por Miguel Ibarra Urra

Selector Alummnos / Empresas

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

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/

SAPUI5 proporciona más de 100 controles y diseños de UI para construir aplicaciones siguiendo las directrices de diseño

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.

*uno de los beneficios de SAP Fiori es que cerca del 80% de todas las aplicaciones SAP Fiori que SAP crea para SAP S/4Hana son aplicaciones de tipo de elementos de SAP Fiori.

Los elementos de SAP Fiori existen desde el 2015, originalmente lanzados con el nombre de plantillas inteligentes.

Las 3 razones del porque los elementos de SAP Fiori son una opción inteligente al momento de desarrollar aplicaciones de SAP Fiori son:

· Elementos de SAP Fiori aceleran el desarrollo

· Elementos de SAP Fiori proporcionan un mantenimiento de aplicaciones escalables y administradas de forma centralizada

· Garantizan la UX y la coherencia del diseño

Requisitos para utilizar elementos de SAP Fiori

Datos del Backend proporcionados por un servicio de oDATA

Aplicaciones basadas en navegador

Utilizar las plantillas compatibles

Comportamiento y lógica de la interfaz de usuario compatible con anotaciones y extensiones

Aplicaciones online

Las plantillas más utilizadas

Los elementos de SAP Fiori extraen el patrón de las aplicaciones más utilizadas y forman una plantilla llamada plano de planta en el elemento Fiori.

Los siguiente tipos de plantillas cubren el 80% de los escenarios que se encuentran normalmente en las aplicaciones SAP:

Informe de lista - Se usa cuando queremos desarrollar una aplicación donde los usuarios necesitan encontrar elementos relevantes dentro de un gran conjunto de elementos

Descripción general - Es un tipo de aplicación SAP Fiori que proporciona toda la información que un usuario necesita en una sola página, según el dominio o rol específico del usuario.

Lista de trabajo - Muestra una colección de elementos que un usuario necesita procesar. Trabajar en la lista generalmente implica revisar los detalles de los elementos y tomar decisiones

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 asistente (Wizard) - se puede utilizar un asistente para crear y editar objetos comerciales. Los asistentes guían a los usuarios a través de un complejo proceso de entrada de datos, centrándose en un paso a la vez. Los asistentes pasan al siguiente paso solo después de completar el paso. Un asistente puede tener un mínimo de tres pasos y un máximo de ocho.

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.

Cuadro de texto: FT


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


 

Escanear / Compartir

 

 


Sobre el autor

Publicación académica de Miguel Ibarra Urra, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.

SAP Junior

Miguel Ibarra Urra

Profesión: Consultor de Seguridad de Sap - Chile - Legajo: OR20J

✒️Autor de: 8 Publicaciones Académicas

🎓Egresado del módulo:

Presentación:

Consultor de seguridad de sap

Certificación Académica de Miguel Ibarra

✒️+Comunidad Académica CVOSOFT

Continúe aprendiendo sobre el tema "La guía y las herramientas de diseño de SAP Fiori" de la mano de nuestros alumnos.

SAP Junior

La guía y las herramientas de diseño Proporcionan un framework que permite crear interfaces de usuario sin escribir código de interfaz desde cero. Se basa en un servicio OData, en metadatos y anotaciones, que definen automáticamente cómo se muestra la información proveniente del sistema SAP. Estos servicios OData permiten que SAPUI5 lea los datos del backend y los represente directamente en la interfaz. Esto acelera el desarrollo, facilita el mantenimiento de aplicaciones escalables y permite una administración centralizada, asegurando además una experiencia de usuario consistente y alineada con SAP Fiori. Las anotaciones de la interfaz de usuario son clave, ya que determinan...

Acceder a esta publicación

Creado y Compartido por: Candela Analia Nuñez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

Guía de diseño lenguaje de diseño de SAP Fiori para crear un aplicación Manejo de los mensajes Error Advertencia Información Éxito Confirmación Formas de mensajes Mensajes de ventana emergentes Message box Message Toast Message Page Elementos SAP Fiori Anotaciones Odata definen la funcionalidad y el diseño que tendrá la aplicación Requisitos para usar elementos de SAP Fiori Datos de backend proporcioandos para un servicio OData Aplicaciones basadas en navegador Usar plantillar compatibles Comportamiento y lógica de la interfaz compatibles con anotaciones y extensiones. Aplicaciones online Plantillas más...

Acceder a esta publicación

Creado y Compartido por: Roman Leandro Garrido Lagos / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP SemiSenior

La guía y las herramientas de diseño de SAP Fiori Guía de diseño de SAP Fiori SAP Fiori no es solo una tecnología, también es una metodología de diseño centrada en el usuario. La guía oficial de diseño está disponible en https://experience.sap.com/fiori-design-web/ Esta guía establece reglas sobre navegación, colores, botones, estilos, tipografía, etc. El objetivo es que todas las apps mantengan una experiencia uniforme y coherente. Las pautas son útiles tanto para desarrolladores como para diseñadores funcionales y de UX. Tipos de mensajes...

Acceder a esta publicación

Creado y Compartido por: Jose Rodrigo Baz Suarez / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Master

Las guias y las herramientas de diseño de SAP Fiori Guian al desarrollor de como crear una app respectando los principios de diseño Mensaje Error Advertencia Informacion Exito Confirmacion Servicio odata: OData es un protocolo basado en HTTP y REST, desarrollado por Microsoft y adoptado por SAP. Permite crear, leer, actualizar y eliminar (CRUD) datos de SAP a través de URLs accesibles desde el navegador o herramientas externas. Muy usado en SAP Fiori para conectar la interfaz de usuario con el backend SAP. Elementos de SAP Fiori Conjunto de plantillas que se basan en un servicio oData y metadatos para crear una interfaz de usuario. En SAP, un framework es un conjunto estructurado de herramientas, componentes,...

Acceder a esta publicación

Creado y Compartido por: Claudia Bibiana Monsalve Lopez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

La guia de diseno de SAP Fiori https://experience.sap.com/fiori-design-web/ SAPUI5 incluye controles/templates que podemos usar siguiendo las directrices de diseno SAP Fiori El manejo de mensajes: se dividen en las siguientes categorias: Error Advertencia Informacion Exito Confirmacion usarlos con los diferentes controles de la libreira sap.m. En una app SAPUI5, algunas formas son las siguientes: Mensaje en ventana emergente: usa control sap.m.MessagePopoverd. Ideal para validacion de campo de formularios. Message Box: usa el control sap.m.MessageBox. para error generico o error tecnico y el usuario debe aceptar para seguir. Tambien para mensaje de confirmacion. Message Toast: control sap.m.MessageToast....

Acceder a esta publicación

Creado y Compartido por: Roberto Hernan Santucho

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


Las pautas de diseño de FIORI actúan como lenguaje de diseño de SAP FIORI y guían al desarrollador de cómo crear una aplicación respetando los principios de diseño, SAP GUI 5 proporciona más de 100 controles y diseños de interfaz de usuario para construir aplicaciones, aunque el diseño de SAP FIORI está integrado en la biblioteca puede haber múltiples diseños para elaborar el mismo comportamiento funcional, siguiendo las directrices de la guía de diseño de SAP FIORI las aplicaciones creadas por varios equipos de desarrolladores de SAP logran ser coherentes y comportarse de manera similar siguiendo un patrón de diseño consistente...

Acceder a esta publicación

Creado y Compartido por: Jose Medina / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Junior

Apunte Creado OK - Iniciar Edición. ¿Qué Son los Breadcrumbs? Los breadcrumbs (o "migas de pan") son una ayuda de navegación utilizada en sitios web y aplicaciones para ayudar a los usuarios a entender su ubicación actual dentro de la jerarquía del sitio. Proporcionan una representación visual del camino del usuario y permiten una navegación más fácil de regreso a páginas anteriores. Tipos de Breadcrumbs Breadcrumbs Basados en la Ubicación: Muestran la ubicación actual del usuario dentro de la jerarquía del sitio, indicando la relación con las páginas principales. Breadcrumbs Basados en el Camino: Reflejan el recorrido...

Acceder a esta publicación

Creado y Compartido por: Jose Maria Crespo / Disponibilidad Laboral: FullTime

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


La guía y las herramientas de diseño de SAP Fiori 1 - La guía de diseño de SAP Fiori Actuan como un lenguaje de diseño y guian al programador como crear app sap fiori respetando los principios de diseño. link https://experience.sap.com/ benificios: - mas de 100 c0ntrols - librerias prediseñadas. 2 - el manejo de mensajes. categorias: - error - advertencia. - informacion - exito - confirmacion se pueden mostrar de multiples formas ( libreria sap.m) En sapui5 algunas de las fromas son las siguientes: - mensaje de ventana emergente: usa el control sap.m.MessagePopover. - Message box: sap.m.MessageBox. - Message toast: sap.m.MessageToast. - Message...

Acceder a esta publicación

Creado y Compartido por: Pablo Adrian Oggero

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Training

Guía de diseño de SAP FIORI: Lenguaje y parámetros que guían al desarrollador sobre como crear una nueva aplicación en SAP FIORI. Pautas de diseño, principios de diseño, patrones que deben seguirse al construir una nueva app.https://experience.sap.com/fiori-design-web/ Manejo de mensajes: Categorías Error Advertencia Información Exito Confirmación Formas de mostrar mensajes: Ventana emergente: Forma preferida de mostrar mensajes Message box: Para mostrar errores no relacionados con un campo de formulario sino que pueden ser técnicos o genéricos. Message toast: mensaje breve de exito que se borra en un tiempo determinado....

Acceder a esta publicación

Creado y Compartido por: Carlos David Parra García / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


SAP Fiori Design Guidelines and Tools SAP Fiori Design Guidelines SAP Fiori design guidelines serve as the design language for SAP Fiori, guiding developers on how to create SAP Fiori applications while adhering to design principles. The design guidelines for creating a web application in SAP Fiori can be accessed via this link: SAP Fiori Design Guidelines - https://experience.sap.com/fiori-design-web/ SAPUI5 and UI Controls SAPUI5 provides over 100 UI controls and layouts to build SAP Fiori applications that follow these design guidelines. Pre-designed libraries enable developers to create consistent applications that behave similarly, providing a good user experience. Types of Messages in SAP Fiori Messages in SAP Fiori applications can...

Acceder a esta publicación

Creado y Compartido por: Jaime Eduardo Gomez Arango / Disponibilidad Laboral: FullTime + Carta Presentación

 


 

👌Genial!, estos fueron los últimos artículos sobre más de 99.000 publicaciones académicas abiertas, libres y gratuitas compartidas con la comunidad, para acceder a ellas le dejamos el enlace a CVOPEN ACADEMY.

🔎Buscador de Publicaciones:

 


 

No sea Juan... Solo podrá llegar alto si realiza su formación con los mejores!