Design Planning Question(s)

[JamesCrandall]

In the GIS group here we're somewhat committed to deploying mapping products standardized on WAB Developer apps using the Launchpad Theme and so we'd like to work within that framework if possible, keeping any custom coding limited to custom widgets.

For our next implementation, I believe the idea is to embed a WAB we build into another page with the main application as "the product" that is implemented and branded.  With that said, the request is for the controls on that page to interact with the map/WAB application, hence the reason for this post.

My constraint/requirement: The page our WAB is embedded into contains the user controls, NOT the widget.

So...Is it possible for a custom widget in that embedded WAB to receive communication from controls on the page the WAB is embedded and perform the desired processing?

Scenario: a text box control and a button are the page's main controls that the user would type in a name value.  Clicking the button would initiate a query/zoom to specific features of the map service(s) found in the WAB app using the methods/functions programmed in the widget.

[JamesCrandall]

Has anyone attempted cross-domain control through an iFrame with easyXDM? 

https://github.com/oyvindkinsey/easyXDM#readme

[RobertScheitlin__GISP]

James,

  I do not have any advice or experience with this workflow.

[JamesCrandall]

I believe we're going to just implement a simple map viewer JavaScript app to embed.  I had hoped to utilize the WAB framework so that we don't have to re-invent functionality, but will just have to try to keep things as simple as possible in order to reduce code that has to be managed.

[RichardAbram · Accepted solution]

If the WAB app is in an iframe then the host page should be able to communicate to the WAB app through javascript.  I have a widget I was working on to communicate between applications.  I modified it to work in an application in an iframe.  The main page can send information and the widget within the WAB application receives the data and performs what ever actions are needed.

In the parent html javascript I have a function

function clickedButton() {
     var WAB_HANDLE = window.frames[0];
     var msg = {source: 'ParentPage', action: 'Zoom', coords: { x: -70.184, y: 44.055 } };
     WAB_HANDLE.postMessage(msg, "*");
}

in the widget I wired up a message handler

this.own(on(window, 'message', lang.hitch(this, this.receiveMessage))); 

and the receiveMessage function has the code to parse the message and perform what ever action is required.

So what I have coded so far is passing an x,y to zoom or to pass a message where the user needs to click on the map to return an x,y.  

I can post the widget code if you think this would work for you.

[JamesCrandall]

Thank you for that input!  This is excellent info.

I had looked at window messaging too but was sort of knocked down by the dev team's concerns of security (I have no idea if this is an issue).  My biggest concern over taking this approach would be complexity of the messages in general, where if there's lots of user control functionality from the parent UI then it could get messy to implement all of the various functions in the child/WAB app.

Again, this is excellent, much appreciated!