Añadir una acción a la tabla de resultados de búsqueda del inventario

Aprenda a añadir una acción a una tabla utilizando el enfoque de personalización mediante configuración. En esta lección, modificará un buc-table-config.json archivo que define las características de la tabla.

Procedimiento

  1. Cree un archivo buc-table-config.json en el packages/inventory-search-results/src-custom/assets/custom/ directorio.
  2. Debe buscar el esquema en el archivo buc-table-config.json predeterminado que corresponde a la tabla que necesita modificar.
    1. Inicie sesión en el Centro de pedidos.
    2. Abre la pestaña Consola del navegador.
    3. Haga clic en Inventario en el menú.
    4. Realice una búsqueda para encontrar el inventario.
    5. Cuando llegue a la página de resultados de búsqueda del inventario, compruebe en la consola el último mensaje que incluya « BaseTableComponent.initializeTable ».
      Puede encontrar el nombre del esquema inv-search-result-table.
      Captura de pantalla de la consola con el nombre del esquema inv-search-result-table resaltado con un recuadro rojo
  3. Abre el archivo buc-app-inventory/packages/inventory-search-results/src-custom/assets/buc-app-inventory/buc-table-config.json.
  4. Copie el esquema inv-search-result-table, incluyendo overflowMenuActions, en el packages/inventory-search-results/src-custom/assets/custom/buc-table-config.json archivo.
    Solo tienes que incluir overflowMenuActions porque el menú desplegable es la única parte de la tabla que necesitas personalizar. Asegúrate de que el código se parezca al siguiente fragmento.
    {
    "inv-search-result-table": {
        "name": "inv-search-result-table",
        "overflowMenuActions": [
        ]
    }
}
  5. Añade el siguiente código en la overflowMenuActions matriz. Aquí estás añadiendo una nueva acción al menú desplegable de la tabla de resultados de búsqueda del inventario.
    {
  "id": "createReservation",
  "label": "custom.LABEL_CREATE_RESERVATION",
  "resourceId": "CUSINV0001AT0001",
  "metadata": {
    "custom": "true",
    "actionTargetType": "internal",
    "actionTarget": "/buc-app-inventory/inventory-search-results/inventory/create-reservation",
    "contextColumnIds": "name"
  }
}
    Captura de pantalla del archivo buc-table-config.json
    Nota:
    • Asegúrese de que los valores incluidos en el contextColumnIds correspondan a los que se utilizan en su organización. Además, comprueba si estas columnas de la tabla son visibles en Order Hub.
    • El resourceId es un identificador de recurso personalizado que puede utilizar para definir qué grupos de usuarios tienen permiso para utilizar esta acción.
  6. En la consola de aplicaciones, cree el recurso personalizado que definió en el paso anterior ("resourceId": "CUSINV0001AT0001",).
    Para obtener más información sobre cómo crear un recurso personalizado, consulta el «Paso 1» en Creación de permisos de recursos para páginas y acciones personalizadas. Asegúrese de establecer el ID de recurso en CUSINV0001AT0001.
    Captura de pantalla del Administrador de aplicaciones del canal con una nueva entidad para la acción Crear reserva
  7. Actualiza tus grupos de usuarios personalizados para conceder permiso para utilizar la acción Crear reserva. Para obtener más información, consulte Definición de permisos de recursos para Order Hub.
    Captura de pantalla del módulo de permisos del Centro de pedidos con una nueva entidad para la acción Crear reserva
  8. Añadir cadenas de traducción para la acción Crear reserva.
    1. Cree una carpeta « i18n » en «buc-app-inventory/packages/inventory-search-results/src-custom/assets/custom».
    2. Cree un archivo en.json en 'buc-app-order/packages/create-order/src-custom/assets/custom/i18n'.
      El en.json archivo incluye las cadenas literales en inglés que se mostrarán en la interfaz de usuario. Puedes añadir cadenas traducidas creando otros archivos JSON. Nombra los archivos según los códigos de idioma ISO-639. Por ejemplo, fr.json para cadenas en francés.
    3. Pega el siguiente contenido JSON en el en.json archivo. Esta etiqueta se utiliza para la nueva acción Crear reserva que añadirás a la tabla de resultados de búsqueda del inventario.
      {
  "custom": {
  "LABEL_CREATE_RESERVATION":"Create reservation"
  }
}
  9. Configure Order Hub para renderizar el módulo buc-app-inventory desde su kit de herramientas para desarrolladores.
    Para obtener más información, consulte Prueba de personalizaciones de módulos existentes en el Order Hub de próxima generación.
  10. Verifique que la nueva acción de tabla se muestre en Order Hub.
    1. Inicie sesión en el Centro de pedidos. Si has iniciado sesión, vuelve a cargar el marco.
    2. Haga clic en Inventario (modo DEV) y realice una búsqueda para acceder a la página de resultados de búsqueda del inventario.
    3. Haga clic en los tres puntos al final de la fila para abrir el menú desplegable.
      Ahora puede ver la acción Crear reserva en el menú.
      Captura de pantalla del menú desplegable abierto en la página de resultados de búsqueda del inventario. El menú muestra la acción personalizada Crear reserva.

Qué hacer a continuación

Implemente su personalización. Para obtener más información, consulte Preparación para implementar personalizaciones en aplicaciones existentes.