Cómo crear una interfaz de usuario de SAP Fiori Elements
By s4pcademy
En esta publicación de blog, aprenderá cómo ampliar un modelo de datos CDS con anotaciones de UI y generar una aplicación de elementos SAP Fiori basada en él.
El propósito de las anotaciones de la interfaz de usuario es definir patrones de uso de los datos en la interfaz de usuario independientemente de la tecnología de la interfaz de usuario. Elementos de SAP Fiori interpreta las anotaciones de la interfaz de usuario y las implementa en la interfaz de usuario. Algunas anotaciones de la interfaz de usuario son utilizadas por diferentes SAP Fiori planos de elementos en el proceso.
Primero, necesitas crear una nueva extensión de metadatos para las anotaciones de la interfaz de usuario:
- Abra el menú contextual de la vista de proyección CDS ZC_CERTIFICATE de la gestión de certificados y seleccione Nueva extensión de metadatos.
- Nombra la extensión de metadatos «ZC_CERTIFICATE» y asígnale una descripción significativa. Puede utilizar la siguiente figura como guía.9
- Utilizar el Anotar vista plantilla (ver más abajo) y confirme la creación haciendo clic en el Finalizar botón.
Debes usar el valor #CORE para la anotación @Metadata.layer porque es tu propia aplicación.
@Metadata.layer: #CORE
Capas de metadatos: Los metadatos están estructurados jerárquicamente en varias capas, y algunas capas eclipsan a otras menos relevantes. Existen las siguientes capas (con prioridad ascendente):
- #CORE: Uso en plataforma ABAP o aplicación personalizada. Se puede anular específicamente para el cliente, si es necesario.
- #LOCALIZACIÓN: Uso de un componente de aplicación SAP
- #INDUSTRIA: Solución industrial SAP
- #SOCIO: Solicitud de socio de SAP
- #CLIENTE: Aplicación de cliente SAP
Usando la anotación @UI.facet puedes estructurar los campos mostrados en la página del objeto y agruparlos en áreas (facetas). Primero, debe definir una faceta para el encabezado de la página del objeto usando la anotación @UI.facet.Purpose: #HEADER. Utilice la anotación @UI.facet.type: #FIELDGROUP_REFERENCE para establecer el tipo como grupo de campos. Luego asigne la posición de faceta 1. Agregue una descripción significativa y el calificador de datos del encabezado como ID.
@UI.faceta: [
/* Header Data */
{
purpose: #HEADER,
type: #FIELDGROUP_REFERENCE,
importance: #HIGH,
position: 1,
label: 'Technical data',
targetQualifier: 'Header data'
} ]
Luego debe definir áreas de UI adicionales para mostrar datos de certificado, detalles y cambios de estado (consulte la siguiente lista). Para los cambios de estado, defina una tabla que se generará en la página del objeto. Puede hacerlo a través del valor de anotación #LINEITEM_REFERENCE.
{ id: 'Certificate',
purpose: #STANDARD,
type: #IDENTIFICATION_REFERENCE,
label: 'Certificate management',
position: 10 },
{
purpose: #STANDARD,
type: #FIELDGROUP_REFERENCE,
importance: #HIGH,
position: 20,
targetQualifier: 'Detail',
label: 'Detail info'
},
{ id: 'CertificateState',
purpose: #STANDARD,
type: #LINEITEM_REFERENCE,
label: 'Status changes',
position: 30,
targetElement: '_CertificateState'
Oculte el campo clave CertUUID y la variable auxiliar técnica LocalLast-ChangedAt en la interfaz de usuario mediante la anotación @UI.hidden: true. Estos campos tienen un significado puramente técnico, por lo que no es necesario mostrarlos en la interfaz de usuario.
Utilice las anotaciones de la interfaz de usuario UI.lineItem, UI.identification, UI.fieldGroup y UI.selectionField de una manera que tenga sentido para mostrar cada campo tal como lo necesita en la aplicación.
Ahora puedes activar tu extensión de metadatos. Podría parecerse al que se muestra a continuación.
@Metadata.layer: #CORE
@UI: {
headerInfo: { typeName: 'Certificate management',
typeNamePlural: 'Zertifikate',
title: { type: #STANDARD, label:
'Certificates', value: 'Material' } },
presentaciónVariante: [{ sortOrder: [{ by: 'Material',
direction: #DESC }] }]}
annotate view ZC_Certificate with
{
@UI.faceta: [
/* Header Data */
{
purpose: #HEADER,
type: #FIELDGROUP_REFERENCE,
importance: #HIGH,
position: 1,
label: 'Technical data',
targetQualifier: 'Header data'
},
{ id: 'Certificate',
purpose: #STANDARD,
type: #IDENTIFICATION_REFERENCE,
label: 'Certificate management',
position: 10 },
{
purpose: #STANDARD,
type: #FIELDGROUP_REFERENCE,
importance: #HIGH,
position: 20,
targetQualifier: 'Detail',
label: 'Detail info'
},
{ id: 'CertificateState',
purpose: #STANDARD,
type: #LINEITEM_REFERENCE,
label: 'Status changes',
position: 30,
targetElement: '_CertificateState'
} ]
@UI.hidden: true
CertUUID;
@UI: { lineItem: [ { position: 10 } ],
identification: [ { position: 10 } ],
selectionField: [ { position: 10 } ] }
Material;
@UI: { elemento de línea: [ {
position: 20, label : 'material name' } ],
identification: [ { position: 20 } ]
}
MaterialName;
@UI: { lineItem: [ { position: 30 } ],
grupo de campos: [ {
qualifier: 'header data',position: 30 ],
selectionField: [ { position: 30 } ]}
Version;
@UI: { elemento de línea: [ {
position: 40,
criticality: 'Criticality',
label: 'Status' } ],
grupo de campos: [ {
qualifier: 'Header data',
position: 40,
label: 'Status',
criticality: 'Criticality' } ],
selectionField: [ { position: 40 } ] }
StatusText;
@UI: { lineItem: [ { position: 50 } ],
identification: [ { position: 50 } ] }
CertificateCe;
@UI: { lineItem: [ { position: 60 } ],
identification: [ { position: 60 } ] }
CertificateGs;
@UI: { lineItem: [ { position: 70 } ],
identification: [ { position: 70 } ] }
CertificateFcc;
@UI: { lineItem: [ { position: 80 } ],
identification: [ { position: 80 } ] }
CertificateIso;
@UI: { lineItem: [ { position: 90 } ],
identification: [ { position: 90 } ] }
CertificateTuev;
@UI.fieldGroup: [ { qualifier: 'Detail',position: 10 } ]
MaterialText;
@UI.hidden: true
LocalLastChangedAt;
}
Ahora debe definir una extensión de metadatos con anotaciones de UI significativas para la vista de proyección CDS ZI_CertificateState del estado del certificado de la misma manera. En uno de los listados anteriores, se creó un área de interfaz de usuario para el estado del certificado de tipo #LINEITEM_REFERENCE (es decir, una tabla). Ahora use la anotación UI.lineItem para completar esta área con datos. Puede ver cómo se vería la extensión de metadatos del estado del certificado. Habilite también esta extensión de metadatos.
@Metadata.layer: #CORE
@UI: {
headerInfo: { typeName: 'Status',
typeNamePlural: 'Status',
title: { type: #STANDARD, label: 'Status',
value: 'Status' } } }
annotate view ZC_CertificateState with
{
@UI.faceta: [ { id: 'Status',
purpose: #STANDARD,
type: #IDENTIFICATION_REFERENCE
} ]
@UI.hidden: true
StateUUID;
@UI.hidden: true
CertUUID;
@UI.hidden: true
Material;
@UI: { lineItem: [ { position: 10 } ],
identification: [ { position: 10 } ] }
Version;
@UI: { lineItem: [ { position: 20 } ],
identification: [ { position: 20 } ] }
Status;
@UI: { elemento de línea: [ { position: 30,
label: 'previous status' } ],
identificación: [ { position: 30,
label: 'previous status' } ] }
StatusOld;
@UI: { elemento de línea: [ { position: 40,
label: 'last changed by' } ],
identificación: [ { position: 40,
label: 'last changed by' } ] }
LastChangedBy;
@UI: { elemento de línea: [ { position: } /* 50 */
label: 'last changed' } ],
identification: [ { position: } /* 50 */
label: 'last changed' } ] }
LastChangedAt;
@UI.hidden: true
LocalLastChangedAt;
}
Ahora puede utilizar la vista previa de la aplicación de elementos SAP Fiori para probar las interfaces generadas en base a las extensiones de metadatos. Dependiendo de las anotaciones de la interfaz de usuario que utilice, la vista previa debería verse como la que se muestra en las figuras siguientes.
Nota del editor: esta publicación ha sido adaptada de una sección del libro. Modelo de programación de aplicaciones ABAP RESTful: la guía completa por Lutz Baumbusch, Matthias Jäger y Michael Lensch.
