Introducción

Sobre la base de esos blogs, en esta entrada de blog documentaré mis conocimientos sobre la exploración de acciones en el Informe de lista y la Página de objetos utilizando únicamente anotaciones.

Esta publicación de blog tiene como seguimiento la siguiente publicación posterior:

CAP con Fiori Elements: Acciones en el informe de lista/página de objetos usando anotaciones – Parte 2

Explicación del escenario POC y sus recursos.

Usaremos el proyecto de muestra. “acciones-op-cap-fe-lr” que he compartido en GitHub aquí para explicar los conceptos. Examinemos brevemente el proyecto y algunos de sus archivos esenciales.

Estructura del proyecto	Carpeta o archivo	Objetivo
	base de datos/	El modelo de datos se define en esquema.cds
	srv/	Los servicios se definen en servicio.cds Las capacidades de los servicios se definen en anotaciones.cds
	aplicación/	Contiene la aplicación UI.
	aplicación/anotaciones	contiene todos los archivos de anotaciones.
	anotaciones.cds	anotaciones para enumerar vistas de informes
	acciones-genéricas.cds	anotaciones para acciones genéricas (explicadas en la sección 1 de Explicación Detallada)
	acciones-determinantes-globales.cds	anotaciones para acciones globales y determinantes
	acciones-de-grupo-de-campo.cds	anotaciones para acciones en el grupo de campos
	tabla-acciones.cds	anotaciones para acciones en la tabla
	chart-actions.cds	anotaciones para acciones en el gráfico
	variedades-de-accion.cds	anotaciones para tipos de acciones

Servicio “cap_fe_lr_op_actions_service» proporciona el siguiente conjunto de datos: raíces, elementos, Categorías, CriticidadesMuestras.

Tenga en cuenta que en esta publicación de blog, mi énfasis está en ilustrar la funcionalidad de presentar tablas en varias configuraciones. Vale la pena señalar que el servicio utilizado con fines de demostración puede no ser perfecto y se utiliza únicamente para explicar las funcionalidades.

Explicación detallada

Nota: Esta publicación de blog no profundiza en acciones personalizadas ni en la navegación a otras aplicaciones.

En SAP Fiori Elements, las acciones se refieren a operaciones o funcionalidades específicas que los usuarios pueden realizar dentro de una aplicación. Estas acciones suelen estar asociadas con botones que permiten a los usuarios activar comportamientos específicos, ejecutar tareas predefinidas o navegar a otras aplicaciones.

Hay dos formas de agregar acciones a las aplicaciones basadas en Fiori Elements.

1. Basado en anotaciones: agregue, habilite o deshabilite botones usando anotaciones
2. Acciones personalizadas: agregue, habilite o deshabilite botones usando la extensión (manifest.json)

Las acciones se pueden dividir en 2 categorías según cómo se agregan:

1. Acciones genéricas
2. Acciones específicas de la aplicación

1. Acciones genéricas

Tanto en el informe de lista como en la página de objetos, SAP Fiori Elements ofrece acciones estándar como Crear (+), Eliminar, Editar, Exportar, Personalización, etc. Estas acciones se pueden personalizar habilitándolas o deshabilitándolas según los requisitos de su aplicación.

• Para habilitar las funciones de creación, actualización y eliminación en Fiori Elements, es esencial incluir @odata.draft.enabled cuando se utiliza CAP con el servicio basado en OData V4.
• La desactivación de las funciones de creación, actualización y eliminación se puede lograr tanto en el nivel de servicio como en el de la aplicación de interfaz de usuario.
• Las acciones de creación se pueden habilitar o deshabilitar usando las siguientes anotaciones:

  //======>>Service Annotaions<<======
  annotate service.Roots with @(
      Capabilities.Insertable: false
  );​
  
  //========>>UI Annotaions<<========
  annotate service.Roots with @(
      UI.CreateHidden: true
  );​​

• De manera similar a crear acción, la acción de actualización/edición también se puede habilitar o deshabilitar.

  //======>>Service Annotaions<<======
  annotate service.Roots with @(
      Capabilities.Updatable: false
  );​
  
  //========>>UI Annotaions<<========
  annotate service.Roots with @(
      UI.UpdateHidden: true
  );​​​

  Deshabilitar la acción de edición en el nivel de servicio no ocultará el botón de edición en la interfaz de usuario; en cambio, resulta en un error.

  Además, es factible controlar dinámicamente la acción de edición en función de un elemento específico de la entidad o mediante el uso de expresiones dinámicas.

  /* disableUpdation,enableUpdation 
     are elements of Roots entity.  */
  
  //======>>By Property<<======
  annotate service.Roots with @(
    UI.UpdateHidden: disableUpdation
  );​​​
  
  //======>>By Dynamic Expression<<======
  annotate service.Roots with @(
    UI.UpdateHidden : {$edmJson: {$Ne: [
          {$Path: 'enableUpdation'},
          true
    ]}}
  );​​​

  Esto ocultará dinámicamente el botón siempre que se cumpla la condición según el valor de la entidad.

• Al igual que las acciones de creación o edición, la acción de eliminación se puede habilitar o deshabilitar.

  //======>>Service Annotaions<<======
  annotate service.Roots with @(
      Capabilities.Deletable: false
  );​
  
  //========>>UI Annotaions<<========
  annotate service.Roots with @(
      UI.DeleteHidden: true
  );​​​

  La desactivación de la acción de eliminación basada en propiedad o expresión dinámica se aplica exclusivamente en la página del objeto.

  /* disableDeletion,enableDeletion
     are elements of Roots entity.  */
  
  //======>>By Property<<======
  annotate service.Roots with @(
    UI.DeleteHidden: disableDeletion
  );​​​
  
  //======>>By Dynamic Expression<<======
  annotate service.Roots with @(
    UI.DeleteHidden : {$edmJson: {$Ne: [
          {$Path: 'enableDeletion'},
          true
    ]}}
  );​​​

• Otros botones genéricos en la barra de herramientas de la tabla incluyen copiar, personalizar y exportar. Los botones de personalización y exportación se pueden ocultar usando la siguiente configuración en el archivo manifest.json.

  "controlConfiguration": {
      "@com.sap.vocabularies.UI.v1.LineItem": {
          "tableSettings": {
              "enableExport": false,
              "personalization": {
                  "sort"  : false,
                  "filter": false,
                  "column": false
              }
          }
      }
  }​

2. Acciones específicas de la aplicación

Según la posición o ubicación, se pueden agregar los siguientes diferentes tipos de acciones en el informe de lista o en las páginas de objetos mediante anotaciones:

• Acciones Globales:
  • Estas acciones se colocan/presentan en la parte superior de la página (al lado del botón compartir). En el informe de lista, esto sólo es posible con extensiones. Sin embargo, en la página del objeto, se pueden agregar acciones globales mediante anotaciones.
  • La acción global se puede definir usando la anotación UI.Identification como se muestra a continuación:

    annotate service.Roots with @(UI.Identification: [
      {
        $Type      : 'UI.DataFieldForAction',
        Action     : 'cap_fe_lr_op_actions_service.ga_op_calculate',
        Label      : 'Trigger Calculation',
        Criticality: #Negative
      },
      {
        $Type      : 'UI.DataFieldForAction',
        Action     : 'cap_fe_lr_op_actions_service.EntityContainer/ga_op_ub_replication',
        Label      : '(Unbound) Trigger Replication',
        Criticality: #Positive
      }
    ]);​

    

  • Nota: Tanto las acciones vinculadas como las no vinculadas se pueden agregar como acciones globales.
• Acciones en la mesa:
  • Se pueden incorporar acciones específicas adaptadas a la aplicación en una tabla, ya sea en la barra de herramientas o como una columna distinta.
  • Esto es posible tanto en el informe de lista como en las tablas de la página de objeto.
  • Las siguientes anotaciones demuestran cómo agregar dichos botones:

    /*==========>> Button on ToolBar <<==========*/
    annotate service.Roots with @(UI.LineItem: [
      {
        $Type : 'UI.DataFieldForAction',
        Action: 'cap_fe_lr_op_actions_service.ta_lr_toolbarAction',
        Label : 'Toolbar Action',
      }
    ]);​

    /*==========>> Button as Column <<==========*/
    annotate service.Roots with @(UI.LineItem: [
      {
        $Type      : 'UI.DataFieldForAction',
        Action     : 'cap_fe_lr_op_actions_service.ta_lr_inlineAction',
        Label      : 'Inline Action',
        Inline     : true,
        Criticality: #Positive
      }
    ]);

  • Nota 1: Para mostrar el botón como una columna, establezca la propiedad Inline en verdadero en la anotación UI.DataFieldForAction.
  • Nota 2: La propiedad Acción se refiere a la acción vinculada de su servicio en el formato ‘{ServiceName}. {Nombre de acción}’.
  • Nota 3: Estas acciones se habilitan cuando se seleccionan una o más filas y se denominan acciones dependientes del contexto. El contexto se pasa en los parámetros req.params.
  • Nota 4: También es posible mostrar acciones independientes en la barra de herramientas usando la siguiente anotación:

    annotate service.Roots with @(UI.LineItem: [
      {
        $Type : 'UI.DataFieldForAction',
        Action: 'cap_fe_lr_op_actions_service.EntityContainer/ta_lr_ub_toolbarAction',
        Label : '(Unbound) Toolbar Action'
      }
    ]);​

    En este caso, la selección de la fila no tiene ningún impacto y no se pasa el contexto, por lo que se denominan acciones independientes del contexto. Además, la propiedad Acción se refiere a la acción independiente de su servicio en el formato ‘{ServiceName}.EntityContainer/{ActionName}’.

  • Nota 4: El texto de los botones en línea se puede sustituir por un icono utilizando la propiedad de anotación «IconUrl». En este caso, la etiqueta del botón sirve como información sobre herramientas para el botón.

    annotate service.Roots with @(UI.LineItem: [  
      {
        $Type      : 'UI.DataFieldForAction',
        Action     : 'cap_fe_lr_op_actions_service.ta_lr_inlineIconAction',
        Label      : 'Inline Icon Action',
        Inline     : true,
        IconUrl    : 'sap-icon://da',
        Criticality: #Negative
      }​
    ]);

  • Resultado:
    
• Acciones en Formularios y Secciones:
  • Al igual que en otros casos, las acciones también se pueden incorporar a formularios y grupos utilizando las mismas anotaciones:

    annotate service.Roots with @(UI.FieldGroup #Details: {
    $Type: 'UI.FieldGroupType',
    Data: [
      {
        $Type : 'UI.DataFieldForAction',
        Action: 'cap_fe_lr_op_actions_service.EntityContainer/fg_op_ub_triggerRefresh',
        Label : '(Unbound) Section Trigger'
      },
      {
        $Type : 'UI.DataFieldForAction',
        Action: 'cap_fe_lr_op_actions_service.fg_op_triggerInlineAction01',
        Label : 'Inline Trigger 01',
        Inline: true
      }
    ]});
    
    annotate service.Roots with @(UI.FieldGroup #MoreDetails: {
    $Type: 'UI.FieldGroupType',
      Data : [
        {
          $Type : 'UI.DataFieldForAction',
          Action: 'cap_fe_lr_op_actions_service.fg_op_triggerAction',
          Label : 'Section Trigger'
        },
        {
          $Type : 'UI.DataFieldForAction',
          Action : 'cap_fe_lr_op_actions_service.fg_op_triggerInlineAction02',
          Label : 'Inline Trigger 02',
          Inline: true
        }
    ]});

  • Cuando la propiedad en línea se establece en verdadero, la acción se mostrará dentro de la sección del grupo de campos como se ilustra a continuación.
  • Además, también es factible incluir acciones no consolidadas en este contexto.
  • Resultado:
    
• Acciones en el gráfico:

  • Los botones de acción también se pueden agregar a la barra de herramientas del gráfico definiendo la propiedad Acciones en el término de anotación UI.Chart.

  • Aquí hay un ejemplo:

    UI.Chart #ROChart: {
      $Type              : 'UI.ChartDefinitionType',
      Title              : 'Amount By Item',
      ChartType          : #Bar,
      Dimensions         : [iname],
      DimensionAttributes: [{
        $Type    : 'UI.ChartDimensionAttributeType',
        Dimension: iname,
        Role     : #Category
      }],
      DynamicMeasures: ['@Analytics.AggregatedProperty#itemamount_sum'],
      Actions : [
        {
          $Type      : 'UI.DataFieldForAction',
          Action     : 'ca_op_ub_chartAction',
          Label      : '(Unbound) Chart Action',
          Criticality: #Positive
        }
      ]
    }

  • Resultado:
    
  • Nota: Las acciones se agregan en la propiedad Acciones del término de anotación @UI.Chart.

  • Nota: Solo se pueden agregar acciones independientes a la barra de herramientas del gráfico.

• Determinar acciones

  • Estas acciones, también conocidas como acciones de finalización, se ubican en el pie de página de la página del objeto y están diseñadas para operaciones que tienen un impacto integral en toda la página.
  • Es esencial evitar definir acciones de finalización para acciones que sean específicas de controles o partes individuales de la página.
  • Para determinar acciones, la propiedad Determinar se establece en verdadero en el término de anotación UI.DataFieldForAction como se muestra:

    annotate service.Roots with @(UI.Identification: [
      {
        $Type      : 'UI.DataFieldForAction',
        Action     : 'cap_fe_lr_op_actions_service.da_op_clearParymentAction',
        Label      : 'Clear Payment Action',
        Determining: true,
        Criticality: #Negative
      },
      {
        $Type      : 'UI.DataFieldForAction',
        Action     : 'cap_fe_lr_op_actions_service.EntityContainer/da_op_ub_clearOutstanding',
        Label      : '(Unbound) Clear Outstanding',
        Determining: true,
        Criticality: #Positive
      }
    ]);​

  • Resultado:
    

Funciones varias

• Deshabilitar acciones (no se puede hacer clic)
  • En ocasiones, puede ser necesario desactivar acciones basadas en una lógica empresarial específica, como habilitar la acción de activación de entrega solo cuando se envía el estado del pedido. Este nivel de control se puede implementar utilizando el término de anotación @Core.OperationAvailable.
  • Veamos algunos ejemplos de anotaciones:

    annotate service.Roots with actions{
      ta_lr_inlineAction @Core.OperationAvailable: disableUpdation;
      ta_lr_inlineIconAction  @Core.OperationAvailable: {
        $edmJson: {$Gt: [{$Path: 'totalAmount'}, 1000]}
      };
      ta_lr_toolbarAction @Core.OperationAvailable: disableUpdation;
    };​

    En el ejemplo anterior, ta_lr_inlineAcción se deshabilitará o habilitará (se podrá hacer clic en él) según el valor en el elemento ‘disableUpdation’ de la entidad Roots. similar ta_lr_inlineIconAcción se deshabilitará o habilitará si ‘totalAmount’ es mayor que 100 de la entidad Roots.

  • Nota: Es posible hacer referencia a elementos de una entidad o proporcionar una expresión dinámica para evaluar la disponibilidad de la operación.
• Ocultar acciones
  • Es posible ocultar acciones basadas en elementos de entidad o utilizando expresiones dinámicas.
  • Anotación de muestra sobre la entidad Artículo:

    annotate service.Items with @(UI.LineItem #Items: [
    {
      $Type      : 'UI.DataFieldForAction',
      Action     : 'cap_fe_lr_op_actions_service.ta_op_item_inline',
      Label      : 'Item Inline Action',
      Inline     : true,
      Criticality: #Positive,
      ![@UI.Hidden]: {$edmJson: {$Ne: [{$Path: 'enableItem'}, true]}}
    }
    ]);

    resultado:
    

  • Otra capacidad fantástica es la posibilidad de activar un botón cuando la entidad está en modo de edición:

    annotate service.Items with @(UI.LineItem #Items: [
    {
      $Type      : 'UI.DataFieldForAction',
      Action     : 'cap_fe_lr_op_actions_service.ta_op_item_inline2',
      Label      : 'Action on Edit',
      Inline     : true,
      Criticality: #Negative,
      ![@UI.Hidden]: IsActiveEntity
    }
    ]);​

    Tenga en cuenta que EsEntidadActiva es una propiedad dentro de Fiori Elements y se establece en falso cuando la entidad está en modo de edición.
    

Conclusión

En esta publicación de blog, hemos profundizado en la utilización de diferentes anotaciones para incorporar acciones en diferentes posiciones en el Informe de lista y las Páginas de objetos junto con algunas características diversas.

Juntos, el modelo de programación de aplicaciones en la nube y Fiori Elements mejoran la experiencia de los desarrolladores al mismo tiempo que aumentan la productividad y aceleran el desarrollo de aplicaciones listas para la empresa.

Puede encontrar más información sobre Fiori Elements con el modelo de programación de aplicaciones en la nube aquí. Puede seguir mi perfil para recibir notificaciones de la próxima publicación del blog sobre CAP o Fiori Elements. No dude en proporcionar cualquier comentario que tenga en la sección de comentarios a continuación y hacer sus preguntas sobre el tema en la comunidad SAP usando este enlace.