Adição de teclas de atalho personalizadas

A adição de teclas de atalho personalizadas, ou atalhos de teclado, aumenta a produtividade, ajudando os usuários a realizar tarefas comuns com rapidez e eficiência. Também é possível criar teclas de atalho personalizadas para focar em campos ou seleções importantes e reduzir o número de cliques que o usuário precisa fazer para executar ações.

1. Para a página à qual você deseja adicionar as teclas de atalho personalizadas, crie ou localize o buc-page-definitions.json arquivo.

   Atualize ou crie o JSON arquivo dentro da pasta src-custom/assets/custom do módulo. Por exemplo, packages/<route>/src-custom/assets/custom/buc-page-definitions.json.

   Se não forem necessárias personalizações adicionais além das alterações no JSON arquivo, o JSON arquivo não precisa ser associado a nenhuma rota. Em vez disso, crie o JSON arquivo em packages/<app>-root-config/src/assets/custom/buc-page-definitions.json. Isso garante que as futuras versões do Order Hub sejam aplicadas automaticamente, sem a necessidade de sincronizar manualmente seu código de personalização.

   Para encontrar as páginas que suportam a adição de teclas de atalho, consulte as páginas listadas no seguinte arquivo.

   • buc-app-<module>/packages/<module>-shared/assets/buc-app-<module>/buc-page-definitions.json
2. Defina as teclas de atalho dentro do hotkeys objeto da sua página no buc-page-definitions.json arquivo. Inclua as seguintes propriedades.

   ID da chave

   Um ID exclusivo para a tecla de atalho. Por exemplo, “avançar” ou “iniciar salvamento”

   Valores(Object) id

   Uma ID exclusiva. Você pode reutilizar a ID do objeto.

   descrição

   Uma referência a uma cadeia de tradução que descreve a ação da tecla de atalho. Por exemplo, “ CREATE_ORDER.KEY_BINDINGS.GO_NEXT ”

   tipo

   Uma string que faz referência ao tipo de ação a ser executada. Por exemplo, “clique” ou “foco” Clique simula clicar no elemento alvo e é usado para botões e links. O foco move o foco do teclado para o elemento de destino e é usado para campos de entrada.

   elementIdentifier

   Uma string que representa um seletor de consulta CSS para direcionar o elemento. Por exemplo, "[tid='button-id'] botão", "input#campo\ Nome" ou "buc-label#campo-contrato input" Use IDs de teste ou atributos tid, quando disponíveis, para garantir a estabilidade. Seja específico para evitar selecionar vários elementos. Teste os seletores CSS para garantir que eles apontem para o elemento correto, leve em consideração o conteúdo dinâmico e certifique-se de que os seletores funcionem em diferentes estados.

   vinculação de teclas

   Uma sequência de teclas ou combinação de teclas para iniciar a ação delimitada por +. Por exemplo, “shift+n”, “ctrl+s” ou “ shift+1 ” Os modificadores suportados são shift, ctr, alt e meta. Você pode usar uma única tecla ou incluir um ou mais modificadores. Use combinações de teclas para ações comuns. Ao determinar as cadeias de caracteres, certifique-se de evitar conflitos com atalhos do navegador e seja consistente em recursos semelhantes.

   keybinding_$(locale)

   Uma cadeia opcional de chaves a ser usada quando um usuário estiver usando uma localidade específica. Se essa propriedade não for definida, a propriedade padrão será keybinding.

   Veja o exemplo a seguir.

   {
     "create-contract-order": {
       "name": "create-contract-order",
       "actions": [],
       "tabs": [],
       "hotkeys": {
         "go-next": {
           "id": "go-next",
           "description": "KEY_BINDINGS.GO_NEXT",
           "keybinding": "shift+n",
           "type": "click",
           "elementIdentifier": "[tid='contract-order-create-next'] button"
         },
         "go-previous": {
           "id": "go-previous",
           "description": "KEY_BINDINGS.GO_PREVIOUS",
           "keybinding": "shift+p",
           "type": "click",
           "elementIdentifier": "[tid='contract-order-create-previous'] button"
         },
         "initiate-save": {
           "id": "initiate-save",
           "description": "KEY_BINDINGS.INITIATE_SAVE",
           "keybinding": "shift+s",
           "type": "click",
           "elementIdentifier": "[tid='contract-order-create-save'] button"
         },
         "initiate-confirm": {
           "id": "confirm-contract-order",
           "description": "KEY_BINDINGS.INITIATE_CONFIRM",
           "keybinding": "shift+c",
           "type": "click",
           "elementIdentifier": "[tid='contract-order-create-confirm'] button"
         },
         "focus-first-element": {
           "id": "focus-first-element",
           "description": "KEY_BINDINGS.FOCUS_FIRST_ELEMENT",
           "keybinding": "shift+1",
           "type": "focus",
           "elementIdentifier": "buc-label#contractOrderName input"
         }
       }
     }
   }

3. Adicione chaves de tradução para a tecla de atalho personalizada dentro KEY_BINDINGS do arquivo en.json apropriado.
   Algumas orientações para a tradução.

   • Seja descritivo. Explique claramente o que o atalho de teclado faz.
   • Use verbos de ação. Comece com verbos como navegar, salvar, mover ou ativar.
   • Seja conciso. Mantenha as descrições curtas, mas informativas.
   • Termine com um ponto final.

   {
     "CREATE_CONTRACT_ORDER": {
       "COMMON": {
         "ROUTE_CREATE_CONTRACT_ORDER": "Create contract order",
         ...
       },
       "KEY_BINDINGS": {
         "GO_PREVIOUS": "Navigate to the previous page.",
         "GO_NEXT": "Navigate to the next page.",
         "INITIATE_SAVE": "Save changes.",
         "INITIATE_CONFIRM": "Activate/Confirm.",
         "FOCUS_FIRST_ELEMENT": "Move to the name field."
       }
     }
   }