Change map from div - google maps api - SAPUI5

Question

I'm developing a webapp with sapui5, that needs to use a map. This is my scenario:

I have a view, called view1, which is my main wiew. Inside that view I have an input field(input1), and an icontabbar, with 4 different tabs.

The default tab is the first one, I need it as a requirement. Now, the second tab of the incontabbar, corresponds to the map. Input1 field, is the field corresponding to the autocomplete field for the map.

And here it becomes interesting, inside the tabs from the icontabbar, I have subviews, with its own controllers and view files (xml views).

View1 code: (update with full view1)

<mvc:View controllerName="WDC.controller.View1" 
xmlns:html="http://www.w3.org/1999/xhtml" 
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc" 
xmlns:f="sap.ui.layout.form"
displayBlock="true" 
xmlns="sap.m">
<App>
    <pages>
        <Page title="{i18n>title}">
            <f:SimpleForm id="SimpleFormToolbar">
                <f:content >

                    <Label class="labels" width="50%" id="label" text="Address" labelFor="input1"/>
                    <Input class="myInput" id="input1" width="50%" fieldWidth="100%" showSuggestion="true"/>
                </f:content>

            </f:SimpleForm>
            <IconTabBar>
                <items>
                    <IconTabFilter icon="sap-icon://employee" text="Data" id="iconTabBarData">
                        <mvc:XMLView viewName="WDC.view.view3"/>
                    </IconTabFilter>
                    <IconTabFilter icon="sap-icon://map" text="Map" id="mapTab" visible="true">             
                            <mvc:XMLView viewName="WDC.view.View2"/> // THIS VIEW IS NOT CREATED UNTIL I CLICK ON ITS TABICON
                    </IconTabFilter>

                </items>
            </IconTabBar>
        </Page>
    </pages>
</App>
</mvc:View>

What I need to do is, when the user searches something on the input1 field from view1, automatically call the second tab with the map and displays the address the user searched in the subview (lets call it view2). The problem is, that i cant assign the input1 as autocomplete of the map in tab2, because that view is not created until i press into the tabfilter icon...

I think my only chance is creating a hidden div with a map in view1, assigning input1 to it, and when the user searches something, then "move" the map from view1 to a div on view2. But I don't know how to achieve this.

I've tried creating a hidden component in view1 with htmlcode for a div, but if I set visible="false" the html code doesn't show, so I can't create the map. If I let the component visible, the map appears on view1 and works good, but I don't know how to "move" it to another view that hasn't been created.

I could get the map from view1 in the onInit FUnction on view2 using a getter function from the view1 controller if needed, but i still need to know how to do this three things:

Have a "temp" div in view1, that is not visible, but I can use it to create a map to assing input1 as autocomplete
When something is searched in the autocomplete input box, enable second tab of icontabbar and leave it visible.
Move the map from view1 to a div on view2, and keep the connection with input1 from view1.

Hope I was clear enough, this is driving me crazy!

Andrii Naumovych Andrii Naumovych · Accepted Answer · 2017-06-23T20:17:10

If I understood you correctly, your question is: "how to establish connection between different isolated views?"

Well, as you include the view2 into view1 declaratively within XML, it means that inner views (and corresponding controllers) will be created in a scope of the same Component, meaning the owner component will be shared among them. This statement gives us the following opportunity:

as the controller of view1 and view2 shares the same component: "this.getOwnerComponent()", you can establish connection between 2 views (corresponding controllers) via the events, that will be fired on the shared component object:

View1.controller (JS):

onSuggestSelected: function () {
    ---------
    var oComponent = this.getOwnerComponent();
    oComponent.fireEvent("view1:suggestValue", {foo: "bar"});
}

View2.controller (JS):

onInit: function () {
    var oComponent = this.getOwnerComponent();
    oComponent.attachEvent("view1:suggestValue", function (oParams) {
        var sSuggestValueFromView1 = oParams.foo;
        // do some logic here
    });
}

By this way, you can transmit a message from view2 to view1 when the view2 is activated/rendered/whatever and view1 can tell the view2 to use a certain parameter for searching.

Change map from div - google maps api - SAPUI5

1 Answers