How to create a service inside a custom widget?

[arosse]

I am trying to develop a print widget extension, allowing to print an HTML including a QR code or an image. For that, I need a service called "Print" in my custom widget.

I tried to add the "widgetServices" function in the *.ide.js file:

    this.widgetServices = function () {
    return {
            'Print': { 'warnIfNotBound': false }
        };
    }

In the *.runtime.js file, I added the function "serviceInvoked":

this.serviceInvoked = function (serviceName) {
        if (serviceName === 'Print') {
        printJS('div-to-print', 'html');
        thisWidget.jqElement.triggerHandler('PrintFinished');
        } else {
            TW.log.error('Print widget, unexpected serviceName invoked "' + serviceName + '"');
        }
    };

I join the IDE and RUNTIME JavaScript files, so you can see my whole code.

When I import it in the composer, I can bind an event to the service "Print". However, when I view the mashup, the service is never called. Does someone know how to fix that issue?

Thanks,

Antoine

[CRArko]

Hello, Antoine.

Have you read through the ThingWorx Extension Development Guide on this? Get the one appropriate to the ThingWorx version you have. The section 'Adding Services, Properties, ConfigurationTables, Subscriptions and Events' should tell you how to add the Service to the Mashup so it gets called correctly.

Let us know if that help you get on with your project.

-- Craig A.

[arosse]

Hello Craig,

Thank you for your answer.

I read the document on the extensions development. The section you are pointing to is not exactly what I need: I need to create a service inside a custom widget, not inside a Thing. Although, there is some information about that in the Appendix B, especially on pages:

• 80: widgetServices() function
• 87: widgetServices() function explanation
• 90: serviceInvoked(serviceName) function explanation

I have already read it, and it seems to explain exactly what I have done, which is adding the function widgetServices() in the *.ide.js file and adding the function servicesInvoked(serviceName) in the *.runtime.js file.

I must miss something, but I do not see what, as I seem to be in accordance with the documentation. Do you have any other idea what could be wrong?

Thanks,
Antoine

[CarlesColl]

Did you enabled developer tools on Browser side, and see if you have any errors on your Javascript code, or also you can do console.log to see if it's executing or not.

[arosse]

Yes sorry I forgot to mention that I tested by trying to log a message inside the function serviceInvoked:

this.serviceInvoked = function (serviceName) {
    	TW.log.debug('In serviceInvoked: ' + serviceName);
    	console.log('In serviceInvoked' + serviceName);
}

I then added a button triggering the service of my widget when clicked. However, nothing happened, neither in the browser logs nor in the ThingWorx logs. And no error either.

[CarlesColl]

Add on top of your print.runtime.js

(function () {

and at the end:

}());

[arosse]

Thank you for your help. I reimported the extension and then closed and reopened the mashup. Before, only reloaded the mashup runtime page, which seemed not to be enough to apply the change.