Personalización por configuración

Editar en línea

Puede añadir nuevos campos en cualquier lista o página de resumen añadiendo un archivo de configuración JSON. No es necesario que tome la propiedad del código fuente de la ruta completa.

La aplicación sigue el paradigma de búsqueda, lista y página de detalles en la mayoría de los flujos de negocio como, por ejemplo, recoger, empaquetar y otros flujos de cumplimentación de pedidos. Las páginas de lista y detalles también tienen un diseño de interfaz de usuario similar en los flujos de negocio. Puede personalizar la lista y la página de detalles para mostrar u ocultar datos.

Por ejemplo, la información de la página Lista de orden de embalaje se muestra en cuatro columnas. Los botones de acción se muestran en la quinta columna. Puede personalizar la página de lista y detalles por el enfoque de configuración, si desea visualizar datos adicionales u ocultar datos en cualquiera de estas columnas.

La infraestructura de personalización lee la configuración de la carpeta <store-temp>/extensions/override-static-assets/differential/config que contiene los siguientes archivos de configuración:

show-widgets-config.json -utilice este archivo de configuración para visualizar datos personalizados tal como se ilustra en el siguiente JSON de ejemplo:

[
    {
      "componentID": "PickUpOrder",
      "attributes": [
          {
            "type": "list-label-data",
            "columnId": "1",
            "label": {
                "bundleKey": "pickOrderList.LABEL_IsOverdue"
            },
            "data": {
                "dataBindingPath": "IsOverdue",
                "databundleFormatter": {
                    "bundleKey": "pickOrderList.LABEL_Overdue",
                    "bundleValues": [
                        {
                            "param": "isOverdue",
                            "value": "IsOverdue"
                        }
                    ]
                }
            } 
           },
          {
            "type": "list-label-data",
            "columnId" :"2",
            "label": {
                "bundleKey": "pickOrderList.LABEL_IncludedInBatch"
            },
            "data": {
                "dataBindingPath": "IncludedInBatch",
                "databundleFormatter": {
                    "bundleKey": "pickOrderList.LABEL_IsIncludedInBatch",
                    "bundleValues": [
                        {
                            "param": "includedInBatch",
                            "value": "IncludedInBatch"
                        }
                    ]
                }
            } 
          },
          {
            "type": "list-data",
            "columnId" :"3",
            "data": {
                "dataBindingPath":"ScacAndService"
            },
            "style": "h6-text color-gray-60"
          }
      ]
    },
    {
        "componentID" : "shipmentSummaryDetails",
        "attributes" : [
          {
            "type": "summary-label-data",
            "columnId" :"1",
            "label": {
                "bundleKey": "shipmentSummary.LABEL_OrderPurpose"
            },
            "data": {
                "dataBindingPath": "DocumentType",
                "databundleFormatter": {
                    "bundleKey": "shipmentSummary.LABEL_OrdPurpose",
                    "bundleValues": [
                        {
                            "param": "documentType",
                            "value": "DocumentType"
                        }
                    ]
                }
            }
          },
          {
            "type": "summary-label-data",
            "columnId" :"2",
            "data": {
                "dataBindingPath":"SellerOrganizationName"
            },
            "label": {
                "bundleKey": "shipmentSummary.LABEL_Brand"
            }
          }
        ]
    }
]

hide-widgets-config.json -utilice este archivo de configuración para ocultar datos tal como se ilustra en el siguiente JSON de ejemplo:

[
    {
        "componentID" : "ShipmentDetailsComponent",
        "tids" :[ "ShipmentNoTag", "ShipmentTypeIcon", "ShipmentNo"]
    },
    {
        "componentID":"shipmentSummaryDetails",
        "tids" :["customerInfoPanel"]
    }
]

La tabla siguiente describe los atributos soportados de la especificación JSON:

Tabla 1. Atributos compatibles con la especificación JSON
Atributo	Descripción
`componentID`	El ID del componente donde se deben mostrar u ocultar los datos.
`attributes`	Una matriz de atributos donde cada atributo se corresponde con los datos que se deben visualizar.
`type`	El tipo de datos que se deben visualizar. Los valores válidos son `list-label-data`, `list-data`y `summary-label-data`. `list-label-data` -muestra el par de clave-valor en una página de lista. `list-data` -muestra el valor de datos en una página de lista. `summary-label-data` -muestra el par clave-valor en una página de resumen. El estilo será coherente con otro par de clave-valor en la página de resumen.
`columnId`	El número de columna en el que deben visualizarse los datos. La información de una lista o página de resumen se muestra en columnas. Por ejemplo, el estado del envío se muestra en la primera columna. Mientras que la fecha de envío prevista se muestra en la tercera columna.
`data.dataBindingPath`	El `xpath` del enlace que está dentro del objeto de entidad. Por ejemplo, si el objeto `Shipment` que se muestra en el siguiente código de ejemplo necesita visualizar la descripción del producto en la aplicación, `xpath` es ItemDetails.PrimaryInformation.Description. `{ "Shipment": { "ItemDetails": { "PrimaryInformation": { "Description": "test description" } } } }`
`label.bundleKey`	La clave de paquete de la etiqueta definida en el archivo en.json .
`data.databundleFormatter.bundlekey`	La clave de paquete de los datos que se deben formatear utilizando el archivo en.json . Utilícelo sólo cuando los datos se deban formatear dinámicamente para una entrada de paquete.
`data.databundleFormatter.bundleValues`	La matriz del par pará-valor que se utiliza para el formateo de datos.
`data.databundleFormatter.bundleValues.param`	El nombre de variable dentro del valor de paquete que se debe sustituir por los datos reales.
`data.databundleFormatter.bundleValues.value`	El `xpath` del enlace dentro del modelo de entidad que se debe utilizar para sustituir la clave en el valor de paquete.
`style`	Las clases CSS que se deben aplicar.