Skip to main content
A
AdamK_9313-Aquamarine
13-Aquamarine
January 8, 2025
Solved

Thingworx Keyboard Shortcut to invoke services/functions

  • January 8, 2025
  • 1 reply
  • 923 views

Dear Community,

 

I'd like to ask your help on one of our requirements. At the compony we are working at there are many user requirements that is related to Keyboard Shortcuts usage.

 

Users would  like to use Keyboard Combination to perform some tasks or interact with mashup services/functions.

 

For example, pressing F1 or CTRL+H on a specific mashup would open a 'Help' document for the user if mashup is active/loaded (considering master mashups also). (see  attached img)

 

We are thinking about creating a custom extension widget, that would register an eventlistener for keyboard pressing, however it seems very complex not only to capture the keypressing, but also to fire a service/event binded to this widget.

 

e.g.: Widget would have property

  • that holds the "Key" value that the listener should watch,
  • also that holds the "Modifier" (Ctrl) key that the listener should watch,
  • A bindable Event Trigger to fire the  mashup services/events

if there user pressing the desired combination, the service / function is getting invoked.

 

I'm wondering whether there is any working solution to achive similar functionality on the Mashups.

 

Any help, suggestion how to achive the above is greatly appreciated!

(Current Thingworx version is 9.3.2)

Thank you!

Best answer by VladimirRosu_116627

Hi @AdamK_93 ,

First, I believe that triggering a service on a certain situation, is relatively easy within a widget JavaScript.

//we trigger the widget ThingWorx event "SelectionChanged";this event is specified in the ide.js
widgetElement.jqElement.triggerHandler('SelectionChanged');

 The event will be bound by the user in Composer at design time to the Service that the user needs to trigger. When the event will be triggered via the code above, that will automatically trigger the service as well, so it's not complex at all.

The fact that the trigger is a keyboard combination is not that important (of course, I'm assuming you can set or override the keyboard bind in JS - google will definitely give you options on how to do that).

1 reply

V
VladimirRosu_11662719-TanzaniteAnswer
19-Tanzanite
January 9, 2025

Hi @AdamK_93 ,

First, I believe that triggering a service on a certain situation, is relatively easy within a widget JavaScript.

//we trigger the widget ThingWorx event "SelectionChanged";this event is specified in the ide.js
widgetElement.jqElement.triggerHandler('SelectionChanged');

 The event will be bound by the user in Composer at design time to the Service that the user needs to trigger. When the event will be triggered via the code above, that will automatically trigger the service as well, so it's not complex at all.

The fact that the trigger is a keyboard combination is not that important (of course, I'm assuming you can set or override the keyboard bind in JS - google will definitely give you options on how to do that).

    A
    AdamK_9313-AquamarineAuthor
    13-Aquamarine
    January 9, 2025

    Hi @VladimirRosu_116627 ,

    We have defined the below event and with the above code we should be able to trigger it.

    //ide.js
this.widgetEvents = function () {
 return { 
 'KeyDownEvent': { 'description': 'Triggered whenever the user pressing a keyboard button.' }
}};

    the below was not working , the event was not fired when the mashup was opened (so afterRender is not trigggering the event in our case)

    //runtime.js
this.afterRender = function () {
 var widgetElement = this;
 widgetElement.jqElement.triggerHandler('KeyDownEvent'); //triggering event defined in the ide.js
 TW.log.warn('After Render func finished'); //logging whether function is finished
};

     

    In the runtime.js we specified:

    -renderHtml (we are hiding the widget)

    -afterRender (we placed here the code first, but was not working.)

    -updateProperty (we are not updating any property as it will be just a static widget)

     

    Testing afterwards by adding a listener to the widget runtime.js and adding the suggested triggerHandler is working as expected

    AdamK_93_0-1736416431578.png

     

    The code in the runtime.js for the widget to the event.

    document.addEventListener('keydown', function (event) {
 if ((event.ctrlKey) && event.key === 'h') {
 event.preventDefault(); // Prevent default browser behavior
 thisWidget.jqElement.triggerHandler('KeyDownEvent'); // Fire the ThingWorx event
 }
});

     

    result:

    AdamK_93_1-1736419388306.png

    Thank you for guiding in finding the solution 🙂.

     

      Terms & ConditionsCookie settingsAccessibility statement