Añadir teclas de acceso rápido personalizadas

Añadir teclas de acceso rápido personalizadas, o atajos de teclado, aumenta la productividad al ayudar a los usuarios a realizar tareas comunes con rapidez y eficacia. También puede crear teclas de acceso rápido personalizadas para centrarse en campos o selecciones importantes y reducir el número de clics que debe hacer un usuario para realizar acciones.

1. Para la página a la que desea añadir las teclas de acceso rápido personalizadas, cree o localice el buc-page-definitions.json archivo.

   Actualiza o crea el JSON archivo dentro de la carpeta src-custom/assets/custom del módulo. Por ejemplo, packages/<route>/src-custom/assets/custom/buc-page-definitions.json.

   Si no se requieren personalizaciones adicionales aparte de los cambios en el JSON archivo, no es necesario asociar el JSON archivo a ninguna ruta. En su lugar, cree el JSON archivo en packages/<app>-root-config/src/assets/custom/buc-page-definitions.json. De este modo, se garantiza que las futuras versiones de Order Hub se apliquen automáticamente sin necesidad de sincronizar manualmente el código de personalización.

   Para encontrar las páginas que admiten la adición de teclas de acceso rápido, consulte las páginas que se enumeran en el siguiente archivo.

   • buc-app-<module>/packages/<module>-shared/assets/buc-app-<module>/buc-page-definitions.json
2. Defina las teclas de acceso rápido dentro del hotkeys objeto de su página en el buc-page-definitions.json archivo. Incluya las siguientes propiedades.

   ID de clave

   Un identificador único para la tecla de acceso rápido. Por ejemplo, «go-next» o «initiate-save»

   Valores(Objeto) id

   Un identificador único. Puede reutilizar el ID del objeto.

   Descripción

   Una referencia a una cadena de traducción que describe la acción de la tecla de acceso rápido. Por ejemplo, « CREATE_ORDER.KEY_BINDINGS.GO_NEXT »

   tipo

   Una cadena que hace referencia al tipo de acción que se va a realizar. Por ejemplo, «clic» o «enfoque» Hacer clic simula pulsar el elemento de destino y se utiliza para botones y enlaces. Focus mueve el foco del teclado al elemento de destino y se utiliza para los campos de entrada.

   elementIdentifier

   Una cadena que representa un selector de consulta CSS para seleccionar el elemento. Por ejemplo, «[tid='button-id'] botón», «input#field\ Nombre» o «buc-label#contract-field input» Utilice identificadores de prueba o atributos tid cuando estén disponibles para garantizar la estabilidad. Sé específico para evitar seleccionar varios elementos. Prueba los selectores CSS para asegurarte de que apuntan al elemento correcto, ten en cuenta el contenido dinámico y comprueba que los selectores funcionan en diferentes estados.

   combinación de teclas

   Una secuencia de teclas o combinación de teclas para iniciar la acción delimitada por +. Por ejemplo, «shift+n», «ctrl+s» o « shift+1 » Los modificadores compatibles son shift, ctr, alt y meta. Puedes usar una sola tecla o incluir uno o más modificadores. Utiliza combinaciones de teclas para acciones comunes. Cuando determines las cadenas, asegúrate de evitar conflictos con los atajos del navegador y sé coherente en funciones similares.

   asignación_de_teclas_$(configuración_regional)

   Una cadena opcional de claves para utilizar cuando un usuario está utilizando una configuración regional específica. Si esta propiedad no está establecida, la propiedad por defecto es keybinding.

   Consulte el ejemplo siguiente.

   {
     "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. Añade claves de traducción para la tecla de acceso rápido personalizada dentro de KEY_BINDINGS en el archivo en.json correspondiente.
   Algunas pautas para la traducción.

   • Sé descriptivo. Explique claramente qué hace el atajo de teclado.
   • Utiliza verbos de acción. Comience con verbos como navegar, guardar, mover o activar.
   • Sea conciso. Las descripciones deben ser breves pero informativas.
   • Termina con un punto.

   {
     "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."
       }
     }
   }