Adición de campos de búsqueda a páginas de búsqueda existentes
Comprenda y aprenda la sintaxis de search_fields.json que define los campos de búsqueda que se van a visualizar en la interfaz de usuario. Puede añadir campos de búsqueda como botones de selección, entradas de texto, menús desplegables y selectores de fecha para incluir más parámetros en la consulta de búsqueda.
Como referencia, la siguiente guía de aprendizaje añade campos de búsqueda a las páginas de búsqueda existentes: Guía de aprendizaje: Personalización del flujo Crear pedido.
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/search_fields.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/search_fields.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
Cuando construya JSON para nuevos campos personalizados, no utilice la sintaxis del archivo search_fields.json predeterminado en el código fuente. En su lugar, utilice la sintaxis siguiente:
- El cuerpo JSON principal contiene atributos de objeto definidos de forma exclusiva que se correlacionan con distintos módulos.
- orders es el módulo para las páginas Búsqueda de pedidos .
- shipments es el módulo para las páginas Búsqueda de envío .
- nodes es el módulo de la página Búsqueda de nodos .
- alerts es el módulo de la página Búsqueda de alertas .
- Cada objeto contiene una matriz
fieldsque incluye atributos.
Atributos
- etiqueta
- Una etiqueta para el campo de búsqueda.
- Tipo
- El tipo de campo de búsqueda. Puede establecer el atributo en uno de los valores siguientes:
- addressPicker
- El usuario puede buscar y seleccionar una dirección.

- fecha
- El usuario puede especificar o elegir una fecha de un selector de fechas.

- desplegable
- El usuario puede elegir en un menú desplegable.

- dropdownQuery
- El usuario puede especificar texto en el campo de búsqueda y también especificar el operador a utilizar en la consulta. Por ejemplo, puede añadir una consulta desplegable para incluir opciones como Is, Containsy Starts with.

- nodePicker
- El usuario puede seleccionar en una lista de nodos.

- número
- El usuario puede especificar números en el campo de búsqueda.

- opción
- El usuario sólo puede elegir una de varias opciones. También puede utilizar el atributo orientation para determinar si desea visualizar los botones de selección horizontal o verticalmente.

- Texto
- El usuario puede especificar texto en el campo de búsqueda.

- conmutar
- El usuario puede conmutar entre dos modalidades.

- orientation
- Sólo se utiliza para la orientación de tipos
radio. Puede establecer el atributo en uno de los valores siguientes:- Horizontal
- Vertical
- valor
- El valor de visualización predeterminado.
- list de
- Una lista estática de valores a visualizar para menús desplegables y botones de selección.
- captar
- Similar a list, pero los valores de visualización se obtienen utilizando las API de IBM Sterling® Order Management System. Para obtener información sobre las API, consulte Generación y acceso a Javadoc.
- operador
- Se ha iniciado el operador a aplicar al valor especificado en la solicitud de API. Puede establecer el atributo en uno de los valores siguientes.
- EQ -Igual a
- LIKE -Contiene
- FLIKE -Empieza por
- destino
- Controla dónde se puede aplicar el valor resultante del campo.
- solicitud
- Cuando se satisface target , la propiedad (en notación por puntos) que se debe establecer en la solicitud de API se inicia con el valor del campo.
- showWhen
- Controla qué opción Mostrar por muestra el campo. Para visualizar el campo en la página de búsqueda sin controlar dónde se muestra, no incluya el atributo.
Ejemplo JSON
El ejemplo siguiente proporciona algunos casos de uso para personalizar las páginas Búsqueda de pedidos y Búsqueda de envíos.
Nota: El ejemplo siguiente incluye comentarios en línea como guía para explicar los atributos mientras analiza el código. Puesto que JSON no da soporte a comentarios, este ejemplo no es un ejemplo JSON válido tal como se muestra. Si tiene previsto copiar este ejemplo, asegúrese de eliminar los comentarios en línea.
{
"orders": {
"fields": [
{ // 1 Example for standard text input
"label": "Order name", //The label to display in the user interface
"type": "text", //The type of field set to text
"request": "OrderName", //Pass the user input to the specified property of the getOrderList API call
"target": "orders", //Value is used only on "Search for: orders"
},
{ // 2 Example for node picker
"label": "Shipping node",
"type": "nodePicker",
"target": "releases", //Value is used only on "Search for: Order release".
"request": "OrderLine.ShipNode", //Pass the user selection to the specified getOrderReleaseList property
"value": {
"selectedNode": [],
"enterprise": ""
}
},
{ // 3 Example for dropdown that fetches payment method options from api
"label": "Payment type",
"type": "dropdown",
"target": "orders",
"request": "PaymentMethod.PaymentType", //Pass the user selected value to the specified getOrderList property
"fetch": { //Identify that the dropdown options need to be fetched
"api": "getPaymentTypeList", //Fetch dropdown options from getPaymentTypeList api
"type": "oms", //Must be "oms" to fetch from Sterling Order Management API.
"parameters": { //Parameters to pass to getPaymentTypeList call
"CallingOrganizationCode": "{{enterprise}}"
},
"response": { //Get the response from getPaymentTypeList call
"listAttribute": "PaymentType", //Retrieve the 'PaymentType' from the response
"map": {
"id": "PaymentType", //Sets the id to the values of the PaymentType response
"label": "PaymentTypeDescription" //Sets the dropdown options to the values of the PaymentTypeDescription response
}
}
}
},
{ // 4 Example for dropdown with static, user defined options
"label": "Is Pre Order",
"type": "dropdown",
"target": "orders",
"list": [ { "id": "Y", "label": "Y" }, { "id": "N", "label": "N" } ], //List the options of the dropdown
"request": "OrderLine.CustomAttributes.BUC_IsPreOrder", //Pass the user selected value to the specified property
},
{ // 5 Another example for dropdown with static, user defined options
"label": "Is VIP Order",
"type": "dropdown",
"target": "orders",
"request": "OrderLine.CustomAttributes.BUC_IsVIPOrder",
"list": [ { "id": "Y", "label": "Y" }, { "id": "N", "label": "N" } ]
},
{ // 6 Example for dropdownQuery, which is text input along with operator choice of "Is", "Starts with", "Contains"
"label": "Serial No",
"type": "dropdownQuery",
"target": "orders",
"request": "OrderLine.SerialNo",
"operator": "LIKE", //Set the default to LIKE. LIKE == Contains, EQ == Is, FLIKE == Starts with
"fetch": {
"api": "getQueryTypeList", //Call getQueryTypeList to get the list of options
"type": "oms", //Must be "oms" to fetch from Sterling Order Management API.
"parameters": {},
"translation": {
"prefix": "ORDER_SEARCH.GENERAL.LABEL_QUERY_", //To support translation, specify the key that holds the translated string.
"key": "label" //The translations for "Is,Contains,Starts with" is provided by IBM.
}, //For custom strings, you can add translated strings into the /assets/i18n folder
"response": { //Retrieve response from the getQueryTypeList call
"listAttribute": "StringQueryTypes.QueryType",
"map": {
"id": "QueryType",
"label": "QueryTypeDesc"
}
}
}
},
{ // 7 Example for toggle
"label": "Draft order",
"type": "toggle",
"target": "orders",
"request": "DraftOrderFlag", //Pass the user selected value to the specified property
"list": [ //List options are based on the valid inputs for the property. In this case, DraftOrderFlag is a 1 character flag that requires the value Y or N
{ "id": "true", "label": "Y" }, { "id": "false", "label": "N", "selected": "true" }
]
},
{ // 8 Example for radio type
"label": "Kit code",
"type": "radio",
"list": [ //The list of radio options
{ "id": "LK", "label": "Logical kit" }, { "id": "BUNDLE", "label": "Bundle" }, { "id": "", "label": "None", "selected": "true" }
],
"target": "orders",
"orientation": "vertical", //Set orientation as vertical
"request": "OrderLine.KitCode" //Pass the user selected value to the specified property
},
{ // 9 Example for date
"label": "Import license expire date",
"type": "date",
"target": "orders",
"request": "OrderLine.ImportLicenseExpDate" //Pass the user selected value to the specified property
},
{ // 10 Another example for text
"label": "Customer zip code",
"type": "text",
"request": "CustomerZipCode",
"target": "orders",
},
{ // 11 Example for dropdown that fetches unit of measure options from api
"label": "Custom unit of measure",
"type": "dropdown",
"target": "orders",
"request": "MeasureOfUnit", //Pass the user selected value to the specified getOrderList property
"fetch": { //Identify that the dropdown options need to be fetched
"api": "getItemUOMMasterList", //Fetch dropdown options from getItemUOMMasterList api
"type": "oms", //Must be "oms" to fetch from Sterling Order Management API.
"parameters": { //Parameters to pass to getItemUOMMasterList
"CallingOrganizationCode": "{{enterprise}}",
"UOMType": "QUANTITY",
"IsInventoryUOM": "Y"
},
"response": { //Get the response from getItemUOMMasterList call.
"listAttribute": "ItemUOMMaster", //Retrieve the 'ItemUOMMaster' from the response
"map": {
"id": "UnitOfMeasure", //Sets the id to the values of the PaymentType response
"label": "Description" //Sets the dropdown options to the values of the ItemUOMMaster.Description response
}
}
}
},
{ // 12 Another example of node picker
"label": "Merge node",
"type": "nodePicker",
"target": "orders", //Applies only to "Search for: Order"
"request": "OrderLine.MergeNode",
"value": {
"selectedNode": [],
"enterprise": ""
}
},
{ //Example for addressPicker
"label": "Payment bill to",
"type": "addressPicker",
"target": "orders",
"request": "PaymentMethod.BillToKey", //Pass the user value to the specified getOrderLineList property
"value": {
"content": "",
"address": ""
}
},
{
"label": "Prime line number",
"type": "number",
"request": "PrimeLineNo", //Pass the user value to the specified getOrderLineList property
"target": "all",
},
{
"label": "Batch No",
"type": "dropdownQuery",
"target": "orders", //Apply to Search for: Orders
"request": "OrderLine.OrderLineInvAttRequest.BatchNo",
"operator": "LIKE",
"fetch": {
"api": "getQueryTypeList",
"type": "oms",
"parameters": {},
"translation": {
"prefix": "ORDER_SEARCH.GENERAL.LABEL_QUERY_",
"key": "label"
},
"response": {
"listAttribute": "StringQueryTypes.QueryType",
"map": {
"id": "QueryType",
"label": "QueryTypeDesc"
}
}
}
},
{
"label": "Is open receipt",
"type": "toggle",
"target": "all",
"request": "OpenReceiptFlag",
"list": [ { "id": "true", "label": "Y" }, { "id": "false", "label": "N", "selected": "true" } ]
},
{
"label": "Lot Attribute 1",
"type": "dropdownQuery",
"target": "orders",
"request": "OrderLine.OrderLineInvAttRequest.LotAttribute1",
"operator": "LIKE",
"fetch": {
"api": "getQueryTypeList",
"type": "oms",
"parameters": {},
"translation": {
"prefix": "ORDER_SEARCH.GENERAL.LABEL_QUERY_",
"key": "label"
},
"response": {
"listAttribute": "StringQueryTypes.QueryType",
"map": {
"id": "QueryType",
"label": "QueryTypeDesc"
}
}
}
}
]
},
"shipments": { //object for shipment search page
"fields": [
{
"label": "Freight terms",
"type": "dropdown",
"target": "shipments", //Applies only to "Search for: Shipment"
"request": "FreightTerms", //Pass the user selected value to the specified getShipmentList property
"fetch": { //Fetch dropdown options from getFreightTermsList API
"api": "getFreightTermsList",
"type": "oms", //Must be "oms" to fetch from Sterling Order Management API.
"parameters": {
"CallingOrganizationCode": "{{enterprise}}"
},
"response": {
"listAttribute": "FreightTerms", //Retrieve the FreightTerms property from the response
"map": {
"id": "FreightTerms", //Assign IDs to the options
"label": "Description" //Sets the dropdown options to the values of the Description response
}
}
}
},
{
"label": "Ship via",
"type": "dropdown",
"list": [ { "id": "ROAD", "label": "Road" }, { "id": "AIR", "label": "Air" }, { "id": "SEA", "label": "Sea" } ],
"target": "shipments",
"request": "ShipVia"
},
{
"label": "Quantity",
"type": "number",
"target": "shipments",
"request": "ShipmentLines.ShipmentLine.Quantity"
},
{
"label": "Backroom pick complete",
"type": "dropdown",
"list": [ { "id": "Y", "label": "Y" }, { "id": "N", "label": "N" } ],
"target": "shipments",
"request": "ShipmentLines.ShipmentLine.BackroomPickComplete"
}
]
}
}Ejemplo de interfaz de usuario
La imagen siguiente ilustra la página Búsqueda de salida de pedido después de cargar el ejemplo JSON en IBM.