Thingworx Keyboard Shortcut to invoke services/functions

[AdamK_93]

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!

[VladimirRosu · Accepted solution]

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).

[AdamK_93]

Hi @VladimirRosu ,

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

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:

Thank you for guiding in finding the solution .