Skip to Content
0
Jul 30, 2014 at 06:20 AM

UI5 with data binding & iFrame question

507 Views

Hi all,

I have following scenario:

I've a split view with a master & detail page. In my master page, I have a list where each item contains a URL.

In my detail page (XML), I want to show the URL in an Iframe.

My questions:

- How can I link the URL from my list (via data binding) to my page? I tried this already, without any success (see below). When I enter {URL} for labels, this works, but for the iframe, the source is not populated, but as source, I get scr={URL} which doesn't exist. I tried this already to place the {URL} inside the XML view, or during the 'onAfterRendering' event.

- I works when I give the entire iFrame html source in my list (So, the entire content tag and than the html page appears), but when I choose another item, the iframe doesn't refresh. Do I need to do a kind of page refresh for this?

Thx for helping me!

Regards,

Hans

Master var oListTemplate = new sap.m.StandardListItem({ title: "{title}", type: sap.m.ListType.Navigation, tap: [oController.handleListItemPress, oController], customData: new sap.ui.core.CustomData({ key: "targetPage", value: "{targetPage}" }) });

var oList = new sap.m.List({ selectionChange: [oController.doNavOnSelect, oController], mode: sap.m.ListMode.SingleSelectMaster }); oList.bindAggregation("items", "/Items", oListTemplate);

Detail

<core:View

controllerName="view.Detail"

xmlns="sap.m"

xmlns:core="sap.ui.core"

xmlns:html="http://www.w3.org/1999/xhtml" >

<Page title="Team" showNavButton="{device>/isPhone}"

navButtonPress="doNavBack">

<ObjectHeader title="{title}">

<attributes>

<ObjectAttribute text="{description}" />

</attributes>

</ObjectHeader>

<core:html content="&lt;iframe id='myIframe' style='height:1000px;&gt;"></core:html>

</Page>

</core:View>

sap.ui.controller("view.Detail", {

onInit: function() {

this.bus = sap.ui.getCore().getEventBus();

},

doNavBack: function(event) {

this.bus.publish("nav", "back");

},

handleNavButtonPress : function (evt) {

this.nav.back("TeamList");

},

onAfterRendering: function(event) {

var url = "{URL}";

$("#myIframe").attr("src",url);

}

});