Keyboard Events and User Interactions

Keyboard Events to create a seamless user experience

The Angular layer allows the developer to manage keyboard events very precisely. The ScheduleJS events API provides various event methods like setOnActivityDragOngoing to register callbacks fired during specific, like for example a drag and drop. During these operations, you can easily access the underlying events and react to keyboard inputs such as modifiers (like Ctrl, Shift) or direct keypresses.

In the following example, the user makes use of his Shift key to perform a multidirectional drag and drop action, and then uses the Ctrl key to perform a horizontal drag and drop:

Compatibility with Event managing tools

You can connect either modern Angular state management tools like RxJS and such and/or native JS event listeners to trigger the internal ScheduleJS API and act on the graphics in many ways. If you want to design advanced scenarios for your Keyboard events, just couple your usual event handlers with methods from the GanttGraphics API :

• graphics.redraw() to trigger programatic graphics re-rendering
• graphics.setEditModeCallback(Activity, LayoutType, () => ...)
• or any elements of your graphics that you would like to impact with Keyboard events

Accessibility within internal elements

When using ScheduleJS listeners, the related TypeScript event is stored in the ActivityEvent. TypeScript stores properties like ctrlKey, altKey, shiftKey, and metaKey in the MouseEvent to indicate if keyboard keys are pressed during the event.

Combining multiple input methods

Modern web apps are accessible from many different devices, having their specificities and dedicated input methods. It is a challenge to design the perfect UX for every device. The richness of the ScheduleJS API is able to react to all kind of input methods to further increase flexibility and adoption. When designing your interactions, you can create a dedicated experience for all TypeScript events that might happen in the browser :

• PointerEvents
• TouchEvents
• MouseEvents
• KeyboardEvents
• WheelEvents
• And your custom events

Key Combinations for Actions

All row interactions can be managed using dedicated ScheduleJS event handlers. Our TypeScript layers holds the native event.

Here is some examples of actions that can be created with these :

• Create a new activity ALT+LMB
• Add a business specific interaction with ALT+RMB
• Modify the drag and drop mode
• Shortcuts for graphic management
• Data modification
• And many more…

ScheduleJS