Hi Jan,
I know it has been a while, but maybe you can help me.
I am trying to include the JavaScript library print.js (downloaded from here) in a custom widget called printbutton. The library contains multiple javascript and CSS files. The src folder contains the following:
The goal is to be able to print a JSON object when clicking on this custom widget. I am trying to include it in the renderHtml runtime function, like this:
TW.Runtime.Widgets.printbutton = function () {
...
this.renderHtml = function () {
var formatResult = TW.getStyleFromStyleDefinition(thisWidget.getProperty('Style', 'DefaultButtonStyle'));
v ar formatResult2 = TW.getStyleFromStyleDefinition(thisWidget.getProperty('HoverStyle', 'DefaultButtonHoverStyle'));
var formatResult3 = TW.getStyleFromStyleDefinition(thisWidget.getProperty('ActiveStyle', 'DefaultButtonActiveStyle'));
var textSizeClass = 'textsize-normal';
if (this.getProperty('Style') !== undefined) {
textSizeClass = TW.getTextSizeClassName(formatResult.textSize);
}
// The Disabled property is used for programmatic control of the button state. There is
// also a class, widget-button-disabled, which is used internally to debounce button
// click events.
var buttonState = thisWidget.getProperty('Disabled', false) ? ' disabled' : '';
var html =
'<script src="../Common/extensions/ButtonPrint_ExtensionPackage/ui/printbutton/print/js/print.js"></script>'
+ '<div class="widget-content widget-button">'
+ '<button class="button-element ' + textSizeClass + '" tabindex="' + thisWidget.getProperty('TabSequence') + '"' + buttonState + '>'
+ '<span class="widget-button-icon">'
+ ((formatResult.image !== undefined && formatResult.image.length > 0) ? '<img class="default" src="' + formatResult.image + '"/>' : '')
+ ((formatResult2.image !== undefined && formatResult2.image.length > 0) ? '<img class="hover" src="' + formatResult2.image + '"/>' : '')
+ ((formatResult3.image !== undefined && formatResult3.image.length > 0) ? '<img class="active" src="' + formatResult3.image + '"/>' : '')
+ '</span>'
+ '<span class="widget-button-text">' + (thisWidget.getProperty('Label') === undefined ? 'Button' : Encoder.htmlEncode(thisWidget.getProperty('Label'))) + '</span>'
+ '</button>'
+ '</div>';
TW.log.info(html);
return html;
};
...
};
Without the <script> tag, the widget does not generate any error (though, of course, the print function does not work). However, when I open a mashup with my widget including print.js in it, I get the following error (from the log in the runtime mashup):
Did I make a mistake in the syntax? By the way, my project architecture is shown in the image attached. I don't really understand why I have to specify the Common/extensions folders, as I do not see them in the project architecture.
I also tried to reference the library in the metadata.xml (metadata.xml.png attached), but the widget does not appear in the widgets list. I assume there is an error in the building.
Does someboday know how I could include print.js in my extension project?
Thanks,
Antoine
Thank you for your answer, I am starting to understand.
I managed to include the libraries via metadata.xml. However, I do not think it is the best way, as it is not very safe. For example, I made the mistake of including jQuery in metadata.xml, which created a double reference to the library. After that, the Composer was not accessible anymore. Moreover, the monitoring interface was not accessible either. I was therefore not able to remove the extension. Finally, I had to restore a backup of the server in order to solve the issue.
I would like to avoid making the same mistake in the future, so is it possible that such an issue could occur when including "standard" libraries (not jQuery itself) in metadata.xml?
To avoid copying libraries in the Combined.js, which may be unsafe as I noticed, I would like to include them with an HTML script. I am though still struggling to manage it. In addition to the try made on my previous comment, I made a few others:
1. Appending a dynamically created script to the body:
2. Appending a string script to the HTML of the widget:
3. Appending a string script to the body:
I noticed that the libraries are not written on the server. I tested it by querying the file on the browser console:
> window.location = 'http://143.3.3.150:8080/Thingworx/Common/extensions/ButtonPrint_ExtensionPackage/ui/printbutton/printbutton.ide.js'
Do you know if there is anything to configure to write all the content of the extension on the server?
Thanks,
Antoine
I have identified my mistake: the "name" of the ExtensionPackage was "Print Button", so by changing it to "ButtonPrint_ExtensionPackage" it works and I can reference the JavaScript libraries from *.ide.js and *.runtime.js.
However, I could not manage to make the jQuery().mywidget (in my case, jQuery().printbutton) work, it returns undefined. Therefore each time I add a widget PrintButton, the libraries are loaded, which is not the behavior I would like to have. I had a look at your semaphore widget extension source code, and I tried to add this code in the afterRender function:
this.afterRender = function () {
this.printbutton=this.jqElement.printbutton();
// ...
}
This generated an error because this.jqElement.printbutton is not a function:
Any idea what I have to change to make it work?
Thanks,
Antoine
