16-Pearl

Solved

Allows use of the window object, enabling opening and closing browser windows directly from Mashup

Forum|Forum|8 months ago
August 11, 2025
2 replies
1497 views

IDE.JS

TW.IDE.Widgets.WindowObject = function() {

 this.widgetProperties = function() {
 return {
 'name': 'TW WindowObject',
 'description': 'Allows use of the window object, enabling opening and closing browser windows directly from Mashup',
 'defaultBindingTargetProperty': 'url',
 'properties': {
 'url': { 
 'baseType': 'STRING', 
 'description': 'URL to open in new window', 
 'isBindingTarget': true, 
 'warnIfNotBoundAsTarget': true
 },
 'opened': { 
 'baseType': 'BOOLEAN', 
 'description': 'Indicates whether the window is currently open', 
 'isBindingSource': true
 },

 },
 'services': {
 'OpenWindow': {
 'description': 'Opens a new window with the given URL'
 },
 'CloseWindow': {
 'description': 'Closes the previously opened window'
 }
 },
 };
 };

 this.renderHtml = function() {
 return '<div class="widget-content">🪟</div>';
 };

};

RUNTIME.JS

TW.Runtime.Widgets.WindowObject = function () {
 var thiz = this;
 var openedWindow = null;

 this.renderHtml = function () {
 return '<div class="widget-content"></div>';
 };

 // Optional: If we want to react when the URL property changes
 this.updateProperty = function (updatePropertyInfo) {
 if (updatePropertyInfo.TargetProperty === "url") {
 thiz.setProperty("url", updatePropertyInfo.SinglePropertyValue);
 }
 };


 this.serviceInvoked = function (serviceName) {
 if (serviceName === "OpenWindow") {
 var url = thiz.getProperty("url");
 if (url) {
 openedWindow = window.open(url, "_blank");
 thiz.setProperty("opened", true);
 }
 }

 if (serviceName === "CloseWindow") {
 if (openedWindow && !openedWindow.closed) {
 openedWindow.close();
 thiz.setProperty("opened", false);
 }
 }
 };
};

MetaData.xml

<?xml version="1.0" encoding="UTF-8"?>
<Entities>
	<ExtensionPackages>
		<ExtensionPackage name="WindowObject_ExtensionPackage" description="WindowObject Widget" vendor="Vilia" packageVersion="1.0.0" minimumThingWorxVersion="7.4.0" />
	</ExtensionPackages>
	<Widgets>
		<Widget name="WindowObject">
			<UIResources>
				<FileResource type="JS" file="WindowObject.ide.js" description="" isDevelopment="true" isRuntime="false" />
				<FileResource type="JS" file="WindowObject.runtime.js" description="" isDevelopment="false" isRuntime="true" />
			</UIResources>
		</Widget>
	</Widgets>
</Entities>

Thats how my extension looks. My goal is to that i need two events which can be bindable with my button from ui. so i would bind my button with openWiindow event it will open the window and if i bind a button with closeWindow the tab of browser needs to be closed.. I have no clue how i can create these two events in my extension. i am looking forward to hearing from anyone soon thanks

Best answer by MA8731174

Github link to download this working extension:

https://github.com/Jamal8548/twx-window-object-ext/tree/main

C

Constantine

18-Opal

Hello,

You should bind your buttons Clicked event to those OpenWindow / CloseWindow services.

The services are to receive events in an extension. You emit events FROM extension to control something in the mashup, but that's not what you need if I understand you correctly.

Still, if you need to emit Events from your extension, you need to use widgetEvents() function, here's an example.

/ Constantine

M

MA8731174

Author

16-Pearl

Thanks but how can i bind my button click to these open window/close window services? i cannot see any services in the mashup from my this widget? would you please tell me where are these services in mashup?

secondly, i was thinking to open the tab of excel with the button and can also close it with any other button from mashup. please let me know if i am going in a wrong path.

C

Constantine

18-Opal

You should be able to bind from your Button's Clicked event to one of those two services in Mashub Builder, as usual, via drag-and-drop. If you don't see those two services in the list of Properties in mashup builder -- make sure you refreshed the browser after importing the extension. Also, ensure the browser caching is disabled while doing this (keep the DevTools open while refreshing):

N

nmutter

16-Pearl

in ide.js you have the wrong structure. You return your services also in the

this.widgetProperties

function. But you need an own function for services

this.widgetServices

.

you could check e.g. https://github.com/doubleSlashde/HTMLHeaderWidgetTWX/blob/develop/ui/htmlheaderwidget_ds/htmlheaderwidget_ds.ide.js#L29 for correct syntax (I dont have the extension guide handy)

M

MA8731174

Author

16-Pearl

Thanks the issue is resolved! With this extension one can use window object in mashup by clicking button he can open the url and also by clicking the button one can also close the same tab...

RUNTIME.JS

TW.Runtime.Widgets.WindowObject = function () {
 var thiz = this;
 var openedWindow = null;

 this.renderHtml = function () {
 return '<div class="widget-content"></div>';
 };

 // Optional: react to URL changes
 this.updateProperty = function (u) {
 if (u.TargetProperty === 'url') {
 thiz.setProperty('url', u.SinglePropertyValue);
 }
 };

 // Explicit service implementations
 this.OpenWindow = function () {
 var url = thiz.getProperty('url');
 if (!url) { thiz.jqElement.triggerHandler && thiz.jqElement.triggerHandler('Failed'); return; }

 openedWindow = window.open(url, '_blank');
 if (openedWindow) {
 thiz.setProperty('opened', !openedWindow.closed);
 thiz.jqElement.triggerHandler && thiz.jqElement.triggerHandler('Opened');
 } else {
 thiz.jqElement.triggerHandler && thiz.jqElement.triggerHandler('Failed'); // popup blocker, etc.
 }
 };

 this.CloseWindow = function () {
 if (openedWindow && !openedWindow.closed) {
 openedWindow.close();
 thiz.setProperty('opened', false);
 thiz.jqElement.triggerHandler && thiz.jqElement.triggerHandler('Closed');
 }
 };

 // (Optional) also support the generic dispatcher
 this.serviceInvoked = function (name) {
 if (name === 'OpenWindow') { thiz.OpenWindow(); }
 if (name === 'CloseWindow') { thiz.CloseWindow(); }
 };
};

IDE.JS

TW.IDE.Widgets.WindowObject = function () {

 this.widgetProperties = function () {
 return {
 name: 'TW WindowObject',
 description: 'Open/close a browser window from a Mashup',
 category: ['Common'],
 defaultBindingTargetProperty: 'url',
 properties: {
 url: {
 baseType: 'STRING',
 description: 'URL to open in a new window',
 isBindingTarget: true,
 warnIfNotBoundAsTarget: true
 },
 opened: {
 baseType: 'BOOLEAN',
 description: 'Indicates whether the window is currently open',
 isBindingSource: true
 }
 }
 };
 };

 // Services must be returned from a separate function
 this.widgetServices = function () {
 return {
 OpenWindow: { description: 'Opens a new window with the current URL' },
 CloseWindow: { description: 'Closes the previously opened window' }
 };
 };

 // (Optional) Outbound events in their own function
 this.widgetEvents = function () {
 return {
 Opened: { description: 'Fired after window opened' },
 Closed: { description: 'Fired after window closed' },
 Failed: { description: 'Fired if opening the window failed' }
 };
 };

 this.renderHtml = function () {
 return '<div class="widget-content">🪟</div>';
 };
};

metadata.xml

<?xml version="1.0" encoding="UTF-8"?>
<Entities>
	<ExtensionPackages>
		<ExtensionPackage name="WindowObject_ExtensionPackage" description="WindowObject Widget" vendor="Vilia" packageVersion="1.0.0" minimumThingWorxVersion="7.4.0" />
	</ExtensionPackages>
	<Widgets>
		<Widget name="WindowObject">
			<UIResources>
				<FileResource type="JS" file="WindowObject.ide.js" description="" isDevelopment="true" isRuntime="false" />
				<FileResource type="JS" file="WindowObject.runtime.js" description="" isDevelopment="false" isRuntime="true" />
			</UIResources>
		</Widget>
	</Widgets>
</Entities>

C

Constantine

18-Opal

Publish it on GitHub!

Sign up

Please use your PTC eSupport account.

Welcome to the PTC Community

Please use your PTC eSupport account.

Scanning file for viruses.

This file cannot be downloaded