Adición de campos de resumen a páginas de detalles existentes

Comprenda y conozca la sintaxis de buc-field-details.json que define los campos que se muestran en el panel Resumen de las páginas de detalles. Por ejemplo, puede añadir campos como Código de grupo de artículos en un pedido o código SCAC para un envío.

Ubicaciones de archivo JSON

Actualice o cree el archivo JSON dentro de la carpeta src-custom/assets/custom del módulo. Por ejemplo, packages/<route>/src-custom/assets/custom/buc-field-details.json.

Si no se necesitan personalizaciones adicionales que no sean los cambios en el archivo JSON, no es necesario asociar el archivo JSON a ninguna ruta. En su lugar, cree el archivo JSON bajo packages/<app>-root-config/src/assets/custom/buc-field-details.json. Esto garantiza que los futuros releases de Order Hub se apliquen automáticamente sin sincronizar manualmente el código de personalización.
Nota: Este enfoque no requiere la actualización de rutas en el archivo package-customization.json durante el despliegue.

Sintaxis JSON

El cuerpo JSON principal contiene atributos de objeto definidos de forma exclusiva que se correlacionan con distintas páginas de detalles.
  • Para páginas relacionadas con Pedidos:
    • order-summary: El nombre de objeto de la sección Resumen de la página Detalles del pedido .
    • orderline-summary: El nombre de objeto para la sección Resumen en la página Detalles de línea de pedido .
    • order-audit-summary: El nombre de objeto para la sección Resumen en la página Detalles de auditoría de pedido .
    • order-receipt-summary: El nombre de objeto para la sección Resumen en la página Detalles de recepción de pedido .
    • orderrelease-summary: El nombre de objeto para la sección Resumen en la página Detalles de liberación de pedido .
  • Para páginas relacionadas con Envíos:
    • envío-resumen: El nombre de objeto para la sección Resumen en la página Detalles de envío .
    • shipmentline-summary: El nombre de objeto para la sección Resumen en la página Detalles de línea de envío .
    • shipment-container-summary: El nombre de objeto para la sección Resumen en la página Detalles de contenedor de envío .
  • Para páginas relacionadas con Excepción:
    • exception-summary: El nombre de objeto de la sección Resumen de la página Detalles de excepciones .
  • Para páginas relacionadas con Inventario:
    • inv-audit-summary: El nombre de objeto para la sección Resumen en la página Detalles de auditoría de inventario .
  • Para páginas relacionadas con Alertas:
    • alert-details-summary: El nombre de objeto para la sección Resumen en la página Detalles de alerta .
  • Cada objeto contiene atributos para definir los datos que se van a visualizar en la sección Resumen .
    nombre
    Un nombre exclusivo para identificar el conjunto de atributos.
    ID
    El ID exclusivo del campo. Los componentes pueden hacer referencia a un campo mediante esta propiedad.
    nombre
    El texto de etiqueta que se va a visualizar. Si el texto está traducido, puede añadir los archivos de traducción a la carpeta i18n y hacer referencia a la etiqueta. Por ejemplo:
    "name": "SHARED.GENERAL.LABEL_ORDER_#",

    El ejemplo recupera el texto a visualizar de la carpeta i18n y busca el atributo que coincide con SHARED.GENERAL.LABEL_ORDER_#.

    dataBinding
    El atributo que se va a recuperar de la respuesta de la API (en notación de puntos) y se visualiza como el valor. Por ejemplo:
    orderLineDetails.Item.ItemID
    El atributo debe existir en getPage-templates.json. Actualice el archivo si el atributo no existe. Para obtener más información, consulte Configuración de la API getPage para recuperar datos adicionales.
    valor
    (Opcional) El valor del campo. Utilice este atributo para codificar un valor. De lo contrario, utilice el atributo dataBinding para correlacionar el campo con la respuesta de la API.
    attrTID
    (Opcional) Un valor de etiqueta que puede utilizar para identificar fácilmente el elemento de interfaz de usuario para fines de prueba automatizada.
    tipo
    (Opcional) Tipo de elemento. Los valores posibles incluyen:
    • textbox
    • label
    • dropdown
    • combobox
    • datepicker
    Si el tipo de elemento que implementa es un campo editable, requiere el atributo options con los valores editPermission y editAttr .
    opciones
    (Opcional) Especifique las opciones si está utilizando alguno de los atributos "type".
    editPermission
    Un tipo de modificación permitido para el elemento/entidad que se está actualizando. Para obtener más información, consulte Tipos de modificación de orden.
    Nota: Si utiliza 10.0.2403.2 o posterior y tiene páginas que no tienen tipos de modificación permitidos, utilice ALWAYS_ALLOW como valor.
    editAttr
    El nombre del atributo a actualizar si el usuario selecciona un valor diferente en el menú desplegable. Este atributo se especificará en la solicitud Actualizar API cuando el usuario pulse Guardar en la interfaz de usuario.
    captar
    El objeto fetch define los valores a recuperar de las API de IBM Sterling® Order Management System y a mostrar en el desplegable. Para obtener información sobre las API, consulte Generación y acceso a Javadoc .
    • api: La API a llamar.
    • type: el tipo de API. Para fines de personalización, el valor debe ser oms.
    • parameters: los parámetros que se deben pasar en la solicitud de API.
    • listAttribute: el atributo a recuperar de la respuesta de la API.
    • id: establece el ID como los valores de la respuesta.
    • label: el campo que se debe utilizar para rellenar los valores en el menú desplegable.
    Formateador
    Formatee los datos en la columna. Cada formateador es un objeto con propiedades diferentes. La propiedad type identifica el tipo de formateador. Los valores de tipo soportados son currency, dateTimey quantity. Para utilizar el atributo formatter , debe omitir el atributo dataBinding y, en su lugar, especificar el enlace en el atributo formatter.value .
    tipo: moneda
    • value: el atributo para recuperar de la respuesta de la API y visualizarlo en la columna.
    • currencyCode: (Opcional) El código de moneda que se debe utilizar al formatear el valor. El código de moneda también se capta de una propiedad en la respuesta de la API.
    Ejemplo:
      "formatter": {
    "type": "currency",
    "value": "PriceInfo.TotalAmount",
    "currencyCode": "PriceInfo.Currency"
  }
    tipo: dateTime
    • value: el atributo para recuperar de la respuesta de la API y visualizarlo en la columna.
    • dateFormat: (Opcional) El formato de datos que se va a utilizar. Consulte la biblioteca Moment JS para ver las opciones de formato. El valor predeterminado es L LT.
    Ejemplo:
      "formatter": {
    "type": "dateTime",
    "value": "PriceInfo.ReportingConversionDate",
    "dateFormat": "L"
  }
    tipo: cantidad
    • value: el atributo para recuperar de la respuesta de la API y visualizarlo en la columna.
    Ejemplo:
      "formatter": {
    "type": "quantity",
    "value": "OrderedQty"
  }

Ejemplo JSON

El ejemplo siguiente proporciona algunos casos de uso con distintos tipos de campo.
{
    "orderline-summary": {
        "name": "orderline-summary",
        "attributes": [
            {
                "id": "orderLineKey",
                "name": "Order line key",
                "value": "",
                "attrTID": "ordLineDetails - orderLineKey",
                "type": "label",
                "dataBinding": "OrderLineKey"
            },
            {
                "id": "serialNo",
                "name": "Serial number",
                "value": "",
                "attrTID": "ordLineDetails - serialNo",
                "type": "textbox",
                "dataBinding": "SerialNo",
                "options": {
            	"editPermission": "OTHERS",
            	"editAttr": "SerialNo"
            		}
            },
            {
            	"id": "reqShipDate",
            	"name": "Requested ship date",
            	"attrTID": "ordLineDetails - reqShipDate",
            	"type": "datepicker",
            	"dataBinding": "ReqShipDate",
            	"options": {
            		"editPermission": "REQ_SHIP_DATE",
            		"editAttr": "ReqShipDate"
            		}
            },
            {
            	"id": "fulfillmentType",
            	"name": "Fulfillment type",
            	"value": "",
            	"attrTID": "ordLineDetails - fulfillmentType",
            	"type": "dropdown",
            	"dataBinding": "FulfillmentType",
            	"options": {
            		"editPermission": "OTHERS",
            		"editAttr": "FulfillmentType",
            		"fetch": {
            			"api": "getCommonCodeList",
            			"type": "oms",
            			"parameters": {
            				"CallingOrganizationCode": "Sales2",
            				"CodeType": "FULFILLMENT_TYPE"},
            			"response": {
            				"listAttribute": "CommonCode",
            				"map": {
            				"id": "CodeValue",
            				"label": "CodeShortDescription"
            				}
            			}
            		}
            	}
            },
            {            	"id": "deliveryMethod",
            	"name": "Delivery method",
            	"value": "",
            	"attrTID": "ordLineDetails - deliveryMethod",
            	"type": "combobox",
            	"dataBinding": "DeliveryMethod",
            	"options": {
            		"editPermission": "OTHERS",
            		"editAttr": "DeliveryMethod",
            		"fetch": {
            			"api": "getCommonCodeList",
            			"type": "oms",
            			"parameters": {
            				"CallingOrganizationCode": "Sales2",
            				"CodeType": "DELIVERY_METHOD"},
            			"response": {
            				"listAttribute": "CommonCode",
            				"map": {
            				"id": "CodeValue",
            				"label": "CodeShortDescription"
            				}
            			}
            		}
            	}
            }		
        ]
    }
}

Ejemplo de interfaz de usuario

La imagen siguiente ilustra la página de búsqueda de salida de línea de pedido después de cargar el ejemplo JSON en IBM.
Captura de pantalla que muestra la página de resumen de línea de pedido de salida. El panel de resumen está abierto y los nuevos campos con resumen se resaltan con un recuadro rojo. Los nuevos campos incluyen ID de artículo, ItemGroupCode,Order y Precio unitario.