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. Puedes añadir campos de búsqueda, como botones de opción, campos 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 fields que 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
Puedes buscar y seleccionar una dirección.
Imagen del selector de direcciones
fecha
Puedes introducir una fecha o seleccionarla en el selector de fechas.
Imagen del campo de fecha
desplegable
Puedes elegir en el menú desplegable.
Imagen de un campo desplegable
dropdownQuery
Puedes introducir texto en el campo de búsqueda y también especificar el operador que se utilizará en la consulta. Por ejemplo, puedes añadir una consulta en el menú desplegable para incluir opciones como «Es », «Contiene » y «Empieza por ».
Imagen del campo de consulta desplegable
nodePicker
Puedes seleccionar uno de la lista de nodos.
Imagen del campo de selector de nodo
número
Puedes introducir números en el campo de búsqueda.
Imagen del campo de entrada de número
opción
Solo puedes elegir una de las varias opciones disponibles. También puede utilizar el atributo orientation para determinar si desea visualizar los botones de selección horizontal o verticalmente.
Imagen del campo de entrada de radio
Texto
Puedes escribir texto en el campo de búsqueda.
Imagen del campo de entrada de texto
conmutar
Puedes alternar entre dos modos.
Imagen del campo de entrada de conmutación
orientation
Sólo se utiliza para la orientación de tipos radio . Puede establecer el atributo en uno de los valores siguientes:
  • Horizontal
  • Vertical
El valor predeterminado es horizontal.
valor
Especifica el valor que el sistema envía en la solicitud de búsqueda, en función de lo que hayas introducido o seleccionado.
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 más información sobre las API, consulta «Generación y acceso a Javadoc ».
La captación sólo está disponible para los tipos dropdown, dropdownQueryy radio .
Dentro de la etiqueta `fetch`, un atributo opcional translation especifica cualquier traducción que se deba aplicar a los elementos y atributos de la lista generada.
  • key especifica qué atributo de cada elemento de la lista se debe traducir.
  • prefix especifica un posible prefijo que se aplicará al valor del atributo para determinar la clave de traducción.
Por ejemplo, el siguiente código recupera las cadenas traducidas consultando la clave my.prefix_<value-of-label-attribute>
"translation": { "prefix": "my.prefix_", "key": "label" }
operador
El atributo «operator» se aplica al valor especificado en la solicitud de la API que se inicia. 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.
Para aplicar a todas las consultas de búsqueda, especifique all.
De lo contrario, puedes establecer explícitamente el atributo en uno de los siguientes valores.
Para páginas de búsqueda de pedidos:
pedidos
El valor se aplica a las búsquedas en las que la opción Buscar de la interfaz de usuario está establecida en Orden. En este caso, asegúrese de que el atributo request define una propiedad de entrada de la API de getOrderList .
alertas
El valor se aplica a la búsqueda de alertas en la pestaña de resultados de búsqueda. En este caso, asegúrese de que el atributo request define una propiedad de entrada de la API de orders .
liberaciones
El valor se aplica a las búsquedas en las que la opción Buscar de la interfaz de usuario está establecida en Releases de orden. En este caso, asegúrese de que el atributo request define una propiedad de entrada de la API de getOrderReleaseList .
líneas
El valor se aplica a las búsquedas en las que la opción Buscar de la interfaz de usuario está establecida en Líneas de pedido. En este caso, asegúrese de que el atributo request define una propiedad de entrada de la API de getOrderLineList .
recepciones
El valor se aplica a las búsquedas en las que la opción Buscar de la interfaz de usuario está establecida en recepciones. En este caso, asegúrese de que el atributo request define una propiedad de entrada de la API de getOrderReceiptList .
Para las páginas de búsqueda de envíos:
envíos
El valor se aplica a las búsquedas en las que la opción Buscar en la interfaz de usuario está establecida en Envío. En este caso, asegúrese de que el atributo request define una propiedad de entrada de la API de getShipmentList .
contenedores de envío
El valor se aplica a las búsquedas en las que la opción Buscar de la interfaz de usuario está establecida en Contenedor de envío. En este caso, asegúrese de que el atributo request define una propiedad de entrada de la API de getShipmentContainerList .
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.
Para obtener más información sobre las API, consulta «Generación y acceso a Javadoc ».
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.
Captura de pantalla que muestra la interfaz de usuario de salida de orden con la búsqueda de liberación de orden y la búsqueda por filtros de artículo seleccionados. 123 345 567 789 278 756 398 455 111 666 743 999