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

[MA8731174]

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

[Constantine]

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

[MA8731174]

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. 

[Constantine]

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

[MA8731174]

is it possible for you please to test it in your system because i have done this as you have mentioned but still i am unable to see these both services in the properties tab. Then i can be sure that there must be something wrong at my end.

[Constantine]

@nmutter is correct, I didn't notice you defined your services in the properties block, sorry.

[nmutter]

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)

[MA8731174]

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>

[Constantine]

Publish it on GitHub!

[MA8731174 · Accepted solution]

Github link to download this working extension:

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