9 Replies Latest reply on Feb 12, 2016 9:07 AM by sabarish RSS
    sabarish Apprentice

    Opening a web page by double clicking on a row in the Grid

    Hi
    We have a requirement where the Users want to open a link (web page) by double clicking on a row in Gird.
    They are passing a parameter(one column) from the row in the Grid.
    Currently, I have a service to form the Source URL text on double click and I pass it to the Link widget to open it.
    The Users still have to Click on the Link to view the new page.

    Is there a way we can trigger the Link widget as soon as the Source URL text is formed?
    Appreciate your help!

      • Opening a web page by double clicking on a row in the Grid
        mateuszboc Explorer

        You can try using WebFrame instead of Link, but it will not open in new window. You will have to prepare space for it on your Mashup. 

         


        Another idea that come to my mind is to change slightly 'Link' widget. You can copy this widget, and add your service ex. 'click', which you can than trigger with 'ServiceInvokeComplete' Event. 



        • Opening a web page by double clicking on a row in the Grid
          sabarish Apprentice

          Hi Mateusz
          I want it open as a separate tab or Window.
          Can you explain the second option?

          Thanks
          Sabarish

           



          • Opening a web page by double clicking on a row in the Grid
            mateuszboc Explorer

            Go to Wiki and download "Creating UI Widgets for ThingWorx" document from section "09. ThingWorx Extensibility". 


            There you can find details how widgets are built. 


            To make your own AutoClickableLink widget you should copy link widget from __pathToTomcat__/webapp/Thingworx/Common/thingworx/widgets directory. Make structure of this files as described in 'Creating UI...' document and then edit sources. 


            For example if you want to open/click link every time SourceURL changed it is as simple as change updateProperty function in ...link.runtime.js from: 


                  this.updateProperty = function (updatePropertyInfo) {

                      var domElementId = this.jqElementId;

                      var widgetElement = this.jqElement;

                      var widgetProperties = this.properties;

                      var widgetReference = this;

              

                      if (updatePropertyInfo.TargetProperty === 'SourceURL') {

                          widgetReference.setProperty(updatePropertyInfo.TargetProperty, updatePropertyInfo.RawSinglePropertyValue);

                          widgetElement.find('.widget-link').attr('href',updatePropertyInfo.RawSinglePropertyValue);

                          return;

                      } else if( updatePropertyInfo.TargetProperty === 'Text') {

                          widgetReference.setProperty(updatePropertyInfo.TargetProperty, updatePropertyInfo.RawSinglePropertyValue);

                        widgetElement.find('.widget-link').text(widgetReference.getProperty('Text'));

                      }

                  };

             

            to


                  this.updateProperty = function (updatePropertyInfo) {

                      var domElementId = this.jqElementId;

                      var widgetElement = this.jqElement;

                      var widgetProperties = this.properties;

                      var widgetReference = this;

              

                      if (updatePropertyInfo.TargetProperty === 'SourceURL') {

                          widgetReference.setProperty(updatePropertyInfo.TargetProperty, updatePropertyInfo.RawSinglePropertyValue);

                          widgetElement.find('.widget-link').attr('href',updatePropertyInfo.RawSinglePropertyValue);

                          widgetElement.find('.widget-link')[0].click();

                          return;

                      } else if( updatePropertyInfo.TargetProperty === 'Text') {

                          widgetReference.setProperty(updatePropertyInfo.TargetProperty, updatePropertyInfo.RawSinglePropertyValue);

                        widgetElement.find('.widget-link').text(widgetReference.getProperty('Text'));

                      }

                  };



            As you can see, only part of the code I've changed is adding one line of code:

                          widgetElement.find('.widget-link')[0].click();





            • Opening a web page by double clicking on a row in the Grid
              paic Collaborator

              Just as another option, you can use an expression widget, so you can have your information go into an expression widget and trigger the evaluate from the double click on the Grid.

               

              In the expression you would have: location.assign("Your URL Here") 
              You will have to build that URL using some parameters.

              • Re: Opening a web page by double clicking on a row in the Grid
                sabarish Apprentice

                Hi Miikka,

                How did you form your URL? Did you pass any value from the Grid to form the URL?

                Appreciate if you send me the expression that you used.

                • Re: Opening a web page by double clicking on a row in the Grid
                  sabarish Apprentice

                  I am passing a value from the Grid column to another service which is used to form the URL. First, I need to trigger the service that forms the URL. Then I have to trigger the Link.