Incluindo colunas e ações em tabelas existentes

Se nenhuma customização adicional for necessária, além das mudanças no arquivo JSON, o arquivo JSON não precisará ser associado a nenhuma rota Em vez disso, crie o arquivo JSON em packages/<app>-root-config/src/assets/custom/buc-table-config.json.. Fazer isso ajuda a assegurar que futuras liberações do Order Hub sejam aplicadas automaticamente sem sincronizar manualmente seu código de customização.

1. Nome do objeto JSON: o corpo JSON principal contém objetos definidos exclusivamente que são mapeados para tabelas diferentes. Para localizar os nomes de objetos a serem usados no arquivo JSON, é possível verificar as mensagens de log no console do navegador enquanto você navega pela interface com o usuário. Procure a mensagem initializeTable e será possível ver o nome do objeto Por exemplo, o fragmento a seguir mostra o nome do objeto order-table quando você está na página de resultados da procura do pedido de saída

   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 precisa de um conjunto de atributos definidos.

   nome

   (Obrigatório) Identificador exclusivo obrigatório da tabela.

   aliases

   (Opcional) Se desejar aplicar a mesma configuração de tabela customizada a várias tabelas, especifique os outros nomes de objetos da tabela.

   tokenId

   (Opcional) Um identificador de token para um serviço customizado que é necessário ao incluir colunas editáveis customizadas na tabela.

   cabeçalhos

   A lista de cabeçalhos na tabela Cada cabeçalho pode incluir os atributos a seguir:

   Descrição de cabeçalhos

   Atributo	Descrição
   ID	O ID exclusivo da coluna.
   nome	O texto para exibir no cabeçalho da coluna. Se o texto for traduzido, será possível incluir os arquivos de conversão na pasta i18n e referenciar o rótulo Por exemplo, "name": "CUSTOM_ORDER.SEARCH.CUSTOMER_ZIP_CODE", A amostra recupera o texto a ser exibido da pasta i18n e localiza o atributo que corresponde a CUSTOM_ORDER.SEARCH.CUSTOMER_ZIP_CODE.
   dataBinding	O atributo para recuperar da resposta da API e exibir na coluna. O atributo deve existir no getPage-templates.json.. Atualizar o arquivo se o atributo não existir. Para obter mais informações, consulte “Configurando a API do getPage para recuperar dados adicionais ”. Nota: Se estiver usando o atributo formatter , omita esse atributo dataBinding .
   fixo	Booleano. verdadeiro A coluna não pode ser reordenada nem removida nas configurações de nível do usuário por meio das opções padrão de configuração da tabela. Uma coluna fixa também é marcada como default Não Qualquer usuário pode reordenar ou remover colunas nas configurações de nível de usuário, por meio das opções padrão de configuração da tabela. O valor padrão é false.
   padrão	Booleano para indicar se esta coluna é exibida como parte da configuração padrão (visível por padrão) O valor padrão é true.
   sortable	Booleano para indicar se esta coluna é classificável.. O valor padrão é true.
   sortKey	A chave para classificar quando a coluna é classificável.
   SORTED	Booleano para indicar se essa coluna é classificada por padrão Se true, sortKey será usado para classificar os dados. O valor padrão é false.
   estilo	(Opcional) O CSS a ser aplicado à coluna da tabela Por exemplo, { "min-width": "100px" }
   sequência	(Opcional) A posição absoluta da coluna customizada na tabela; iniciando em 1. Se a posição especificada contiver uma coluna fixa essa coluna será movida para a próxima posição não fixa na tabela. Se não definido, a coluna customizada será incluída no final da tabela
   formatador	Formate os dados na coluna Cada formatador é um objeto com propriedades diferentes A propriedade type identifica o tipo de formatador. Os valores de tipo suportados são currency, dateTimee quantity Para usar o atributo formatter , você deve omitir o atributo dataBinding e, em vez disso, especificar a ligação no atributo formatter.value . tipo: moeda value: o atributo a ser recuperado da resposta da API e exibido na coluna. currencyCode: (Opcional) O código de moeda a ser usado ao formatar o valor. O código de moeda também é buscado de uma propriedade na resposta da API. Exemplo: "formatter": { "type": "currency", "value": "PriceInfo.TotalAmount", "currencyCode": "PriceInfo.Currency" } tipo: dateTime value: o atributo a ser recuperado da resposta da API e exibido na coluna. dateFormat: (Opcional) O formato de dados a ser usado. Consulte a biblioteca JS Moment para obter opções de formatação. O padrão é L LT Exemplo: "formatter": { "type": "dateTime", "value": "PriceInfo.ReportingConversionDate", "dateFormat": "L" } tipo: quantidade value: o atributo a ser recuperado da resposta da API e exibido na coluna. Exemplo: "formatter": { "type": "quantity", "value": "OrderedQty" }
   isEditable	Booleano para indicar se esta coluna é editável O valor padrão é true. Observação: Certifique-se de que a coluna seja editável: Como adicionar colunas editáveis a tabelas existentes.
   fieldConfig	Configurações de campo para colunas editáveis.. Aplicável somente quando isEditable for true Exemplo: "fieldConfig": { "type": "dropdown", "invalidText": " invalidText ", "helperText": " helperText " } Observação: Certifique-se de que a coluna seja editável: Como adicionar colunas editáveis a tabelas existentes.
   opções	Opções para colunas editáveis.. Aplicável somente quando isEditable for true Exemplo: "options": { "fetch": { "api": "getPaymentStatusList", "type": "oms", "parameters": {}, "response": { "listAttribute": "PaymentStatus", "map": { "id": "CodeType", "label": "Description" } } } } Observação: Certifique-se de que a coluna seja editável: Como adicionar colunas editáveis a tabelas existentes.

   toolbarActions

   Incluir ações na barra de ferramentas quando um usuário seleciona uma caixa de seleção da tabela Cada toolbarAction pode incluir os seguintes atributos.

   Atributo	Descrição
   ID	O ID exclusivo da ação customizada..
   elem	O tipo de elemento. Sempre configure como "button".
   tipo	O estilo da variante do botão, conforme descrito no sistema de design Carbon. A IBM usa "primary" para ações da ferramenta.
   valor	O texto a ser exibido no rótulo de ação Se o texto for traduzido, será possível incluir os arquivos de conversão na pasta i18n e fazer referência ao rótulo. Por exemplo, "value": "CUSTOM_ORDER.TABLE.TOOLBARACTION.VALUE",
   resourceId	(Opcional) O ID de permissão de recurso a ser avaliado ao determinar se um usuário tem acesso a essa ação Um administrador pode usar o Applications Manager para definir o ID de permissão de recurso e permitir ou negar acesso aos grupos de usuários. Para obter mais informações, consulte “Criação de permissões de recursos para páginas e ações personalizadas ”.
   metadados	Inclua metadados da ação. customizar Sempre configure como "true" para indicar que você está incluindo uma ação customizada. actionTargetType Os valores válidos são "internal" ou "external". Controla se a rota é definida no mesmo pacote / repositório (interno) ou pacote / repositório separado (externo). actionTarget A rota customizada que determina o que acontece quando o usuário clica nessa ação.. contextColumnIds Uma lista separada por vírgula de IDs de colunas a serem transmitidos como parâmetros para a rota. Os IDs de coluna e seus valores de coluna são transmitidos para a rota
   iconTemplate	(Opcional) Anexar um ícone ao texto. IBM fornece um conjunto de ícones no buc-common-components.jar. Cada ícone possui uma sequência de bucTemplate definida que pode ser encontrada no arquivo icon-templates.component.html Especifique a sequência bucTemplate que corresponde ao ícone que deseja usar.

   overflowMenuActions

   Adicione ações quando um usuário selecionar o menu de expansão de uma linha. Cada ação do menu overflow pode incluir os seguintes atributos.

   Atributo	Descrição
   ID	O ID exclusivo da ação customizada..
   rótulo	O texto a ser exibido no rótulo de ação Se o texto for traduzido, será possível incluir os arquivos de conversão na pasta i18n e fazer referência ao rótulo. Por exemplo, "value": "CUSTOM_ORDER.TABLE.TOOLBARACTION.VALUE",
   resourceId	(Opcional) O ID de permissão de recurso a ser avaliado ao determinar se um usuário tem acesso a essa ação Um administrador pode usar o Applications Manager para definir o ID de permissão de recurso e permitir ou negar acesso aos grupos de usuários. Para obter mais informações, consulte “Criação de permissões de recursos para páginas e ações personalizadas ”.
   metadados	Inclua metadados da ação. customizar Sempre configure como "true" para indicar que você está incluindo uma ação customizada. actionTargetType Os valores válidos são "internal" ou "external". Controla se a rota é definida no mesmo pacote / repositório (interno) ou pacote / repositório separado (externo). actionTarget A rota customizada que determina o que acontece quando o usuário clica nessa ação.. contextColumnIds Uma lista separada por vírgula de IDs de colunas a serem transmitidos como parâmetros para a rota. Os IDs de coluna e seus valores de coluna são transmitidos para a rota

O exemplo a seguir fornece alguns 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"
                }
            }
        ]
    }
}

A imagem a seguir ilustra a tabela de resultados da procura de saída do Pedido com os elementos definidos no exemplo JSON.