Adición de columnas y acciones a tablas existentes

Si no se necesitan personalizaciones adicionales que no sean los cambios en el archivo JSON, no es necesario que el archivo JSON esté asociado a ninguna ruta. En su lugar, cree el archivo JSON bajo packages/<app>-root-config/src/assets/custom/buc-table-config.json. Esto ayuda a garantizar que los futuros releases de Order Hub se apliquen automáticamente sin sincronizar manualmente el código de personalización.

1. Nombre de objeto JSON: el cuerpo JSON principal contiene objetos definidos de forma exclusiva que se correlacionan con tablas diferentes. Para buscar los nombres de objeto a utilizar en el archivo JSON, puede comprobar los mensajes de registro en la consola del navegador mientras navega por la interfaz de usuario. Busque el mensaje initializeTable y podrá ver el nombre del objeto. Por ejemplo, el siguiente fragmento de código muestra el nombre de objeto order-table cuando se encuentra en la página de resultados de búsqueda de orden de salida.

   Time since init (ms): 9334.
   Log type: LOG.
   Log generator: common-components.
   Message: BaseTableComponent.initializeTable():  Initializing configuration for order-table

2. Atributos de objeto: cada objeto necesita un conjunto de atributos definidos.

   nombre

   (Necesario) Identificador exclusivo obligatorio de la tabla.

   alias

   (Opcional) Si desea aplicar la misma configuración de tabla personalizada a varias tablas, especifique los otros nombres de objeto de tabla.

   tokenId

   (Opcional) Un identificador de señal para un servicio personalizado que es necesario cuando se añaden columnas editables personalizadas a la tabla.

   cabeceras

   La lista de cabeceras de la tabla. Cada cabecera puede incluir los atributos siguientes.

   Descripción de cabeceras

   Atributo	Descripción
   ID	El ID exclusivo de la columna.
   nombre	El texto a visualizar en la cabecera de columna. 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": "CUSTOM_ORDER.SEARCH.CUSTOMER_ZIP_CODE", El ejemplo recupera el texto que se va a visualizar de la carpeta i18n y busca el atributo que coincide con CUSTOM_ORDER.SEARCH.CUSTOMER_ZIP_CODE.
   dataBinding	El atributo que se debe recuperar de la respuesta de la API y visualizar en la columna. 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. Nota: Si utiliza el atributo formatter , omita este atributo dataBinding .
   fijo	Booleano. true La columna no se puede reordenar ni eliminar en los valores de nivel de usuario mediante las opciones de configuración de tabla estándar. Una columna fija también se marca como default falso La columna puede ser reordenada o eliminada por cualquier usuario en los valores de nivel de usuario a través de las opciones de configuración de tabla estándar. El valor predeterminado es false.
   predeterminado	Booleano para indicar si esta columna se visualiza como parte de la configuración predeterminada (visible de forma predeterminada). El valor predeterminado es verdadero.
   sortable	Booleano para indicar si esta columna es ordenable. El valor predeterminado es verdadero.
   sortKey	La clave para ordenar cuando la columna es ordenable.
   SORTED	Booleano para indicar si esta columna se ordena de forma predeterminada. Si es true, se utiliza sortKey para ordenar los datos. El valor predeterminado es false.
   estilo	(Opcional) El CSS que se aplicará a la columna de tabla. Por ejemplo: { "min-width": "100px" }
   secuencia	(Opcional) Posición absoluta de la columna personalizada en la tabla; empezando por 1. Si la posición especificada contiene una columna fija, esta columna se mueve a la siguiente posición no fija de la tabla. Si no se ha definido, la columna personalizada se añade al final de la tabla
   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" }
   isEditable	Booleano para indicar si esta columna es editable. El valor predeterminado es verdadero. Nota: Asegúrese de que la columna sea editable: Adición de columnas editables a tablas existentes.
   fieldConfig	Configuraciones de campo para columnas editables. Sólo es aplicable cuando isEditable es true. Ejemplo: "fieldConfig": { "type": "dropdown", "invalidText": " invalidText ", "helperText": " helperText " } Nota: Asegúrese de que la columna sea editable: Adición de columnas editables a tablas existentes.
   opciones	Opciones para columnas editables. Sólo es aplicable cuando isEditable es true. Ejemplo: "options": { "fetch": { "api": "getPaymentStatusList", "type": "oms", "parameters": {}, "response": { "listAttribute": "PaymentStatus", "map": { "id": "CodeType", "label": "Description" } } } } Nota: Asegúrese de que la columna sea editable: Adición de columnas editables a tablas existentes.

   toolbarActions

   Añada acciones a la barra de herramientas cuando un usuario seleccione un recuadro de selección de la tabla. Cada toolbarAction puede incluir los atributos siguientes.

   Atributo	Descripción
   ID	El ID exclusivo de la acción personalizada.
   Elem	El tipo de elemento. Establézcalo siempre en "button".
   tipo	El estilo de variante de botón tal como se describe en el sistema de diseño Carbon. IBM utiliza "primary" para las acciones de la barra de herramientas.
   valor	El texto a visualizar en la etiqueta de acción. 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: "value": "CUSTOM_ORDER.TABLE.TOOLBARACTION.VALUE",
   resourceId	(Opcional) ID de permiso de recurso que se debe evaluar al determinar si un usuario tiene acceso a esta acción. Un administrador puede utilizar el Gestor de aplicaciones para definir el ID de permiso de recurso y permitir o denegar el acceso a los grupos de usuarios. Para obtener más información, consulte Creación de permisos de recursos para páginas y acciones personalizadas.
   metadatos	Añada metadatos para la acción. personalizado Establezca siempre en "true" para indicar que está añadiendo una acción personalizada. actionTargetType Los valores válidos son "internal" o "external". Controla si la ruta se define en el mismo paquete/repositorio (interno) o en un paquete/repositorio (externo) independiente. actionTarget La ruta personalizada que determina lo que sucede cuando el usuario pulsa esta acción. contextColumnIds Una lista separada por comas de los ID de columna que deben pasarse como parámetros a la ruta. Los ID de columna y sus valores de columna se pasan a la ruta.
   iconTemplate	(Opcional) Añada un icono al texto. IBM proporciona un conjunto de iconos en buc-common-components.jar. Cada icono tiene una serie bucTemplate definida que puede encontrar en el archivo icon-templates.component.html . Especifique la serie bucTemplate que corresponde al icono que desea utilizar.

   overflowMenuActions

   Añada acciones cuando un usuario seleccione el menú de desbordamiento para una fila. Cada acción de menú de desbordamiento puede incluir los atributos siguientes.

   Atributo	Descripción
   ID	El ID exclusivo de la acción personalizada.
   etiqueta	El texto a visualizar en la etiqueta de acción. 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: "value": "CUSTOM_ORDER.TABLE.TOOLBARACTION.VALUE",
   resourceId	(Opcional) ID de permiso de recurso que se debe evaluar al determinar si un usuario tiene acceso a esta acción. Un administrador puede utilizar el Gestor de aplicaciones para definir el ID de permiso de recurso y permitir o denegar el acceso a los grupos de usuarios. Para obtener más información, consulte Creación de permisos de recursos para páginas y acciones personalizadas.
   metadatos	Añada metadatos para la acción. personalizado Establezca siempre en "true" para indicar que está añadiendo una acción personalizada. actionTargetType Los valores válidos son "internal" o "external". Controla si la ruta se define en el mismo paquete/repositorio (interno) o en un paquete/repositorio (externo) independiente. actionTarget La ruta personalizada que determina lo que sucede cuando el usuario pulsa esta acción. contextColumnIds Una lista separada por comas de los ID de columna que deben pasarse como parámetros a la ruta. Los ID de columna y sus valores de columna se pasan a la ruta.

El ejemplo siguiente proporciona algunos casos de uso.

{
    "order-table": { //Add new columns to the outbound order search results table
        "name": "order-table",
        "aliases": [
            "inbound-order-table" //Add the same columns to the inbound order search results table
        ],
        "headers": [
            {    // 1  Add Customer zip code column
                "id": "customerZipCode",  //A unique ID for the column
                "name": "CUSTOM_ORDER.SEARCH.CUSTOMER_ZIP_CODE", //Retrieves the display name from the language files in the /i18n/ folder
                "sortKey": "CustomerZipCode",  //When sorting, sort by this key
                "dataBinding": "CustomerZipCode",  //Get the CustomerZipCode from the API response. CustomerZipCode must be defined in the getPage-templates.json
                "sequence": 1, //Put at column 1. In this case, Order number is fixed by IBM at column 1, so this moves to column 2.
                "default": true,  //Visible by default. Also, since "fixed" is not defined, users can remove this column in the UI 
                "sorted": true, //Sort by zip code first
                "style": {      //Set minimum column width to 100px
                    "min-width": "100px"
                }
            },
            {   // 2  Add Customer phone no column
                "id": "customerPhoneNo",
                "name": "Customer phone no",
                "sortKey": "CustomerPhoneNo",
                "dataBinding": "CustomerPhoneNo",
                "sequence": 2,
                "sorted": true  //This column is sequence is 2 so the data is sorted by customerZipCode first (sequence 1) and then customerPhoneNo
            }
            {   // 3  Add Draft order column
                "id": "draftOrder",
                "name": "CUSTOM_ORDER.SEARCH.DRAFT_ORDER",
                "sortKey": "DraftOrderFlag",
                "dataBinding": "DraftOrderFlag",
                "sequence": 3,
                "sortable": false,  //Draft column cannot be sorted
                "fixed": true // 5  Column cannot be removed or reordered by user
            },
            {   // 4  Format currency to display the code instead of symbol
                "id": "total",
                "name": "Amount",
                "sortKey": "PriceInfo.TotalAmount",
                "sorted": true,
		   "formatter": {
			"type": "currency",
			"value": "PriceInfo.TotalAmount",
			"currencyCode": "PriceInfo.Currency",
			"display": "code"     
		},
              {   // Sample custom header with "isEditable" as true and values provided for "fieldConfig" and "options":
                "id": "lineType",
                "name": "Line type",
                "sortable": false,
                "isCustom": "true",
                "isEditable": "true",
                "style": {
                    "min-width": "8rem"
                },
                "fieldConfig": {
                  "type": "dropdown",
                  "invalidText": " invalidText ",
                  "helperText": " helperText "
                },
                "options": {
                  "fetch": {
                    "api": "getPaymentStatusList",
                    "type": "oms",
                    "parameters": {},
                    "response": {
                    "listAttribute": "PaymentStatus",
                    "map": {
                    "id": "CodeType",
                    "label": "Description"
                }
            }
          }
        }
      }
        ],
        "toolbarActions": [
            {   // 6  Custom toolbar action
                "id": "myCustomToolbarAction1", //Custom ID 
                "elem": "button",  //Always use "button"
                "type": "primary", //The button variant as defined in the Carbon design system
                "value": "CustomAction1",
                "resourceId": "",
                "iconTemplate": "editIconTemplate", //Include an Edit icon (pencil) next to the text value.
                "metadata": {
                    "custom": "true",
                    "actionTargetType": "external",
                    "actionTarget": "/customRoute",
                    "contextColumnIds": "customerZipCode,customerPhoneNo,total" //pass these values as parameters to the route
                }
            }
        ],
        "overflowMenuActions": [
           {    // 7  Custom overflow action
                "id": "myCustomOverflowAction1",
                "label": "CustomAction1",
                "resourceId": "",
                "metadata": {
                    "custom": "true",
                    "actionTargetType": "external",
                    "actionTarget": "/customRoute",
                    "contextColumnIds": "customerZipCode,customerPhoneNo,total"
                }
            }
        ]
    }
}

La imagen siguiente ilustra la tabla de resultados de búsqueda de salida Order con los elementos definidos en el ejemplo JSON.