Skip to Content
author's profile photo Former Member
Former Member

Setting src of iframe in xmlview from controller

I have an xmlview with an iframe that looks like this:

<html:iframe id="iframe" src="{url}" target="_top" height="100%" width="100%"></html:iframe>

I would like to bind data from a callback like this:

var url = that.buildUrl();

var model = that.getView().getModel();

model.setProperty("url",url)

console.log(model)

When I do getProperty on the model for the url, it is null.

How should I proceed with updating the html attribute using two way data binding.

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

5 Answers

  • Best Answer
    author's profile photo Former Member
    Former Member
    Posted on Jul 18, 2016 at 09:50 AM

    I found that the binding working correctly when I use it instead of the `text` property on the IconTabFilter but it does not work with the `html:iframe`.

    <IconTabFilter class="mySuperRedButton" id="map" icon="sap-icon://map" iconColor="Neutral" text="{iframe_model>/mapUrl}" key="View Map">

    <html:iframe id="map_iframe" src="{iframe_model>/mapUrl}" target="_top" height="100%" width="100%"></html:iframe>

    </IconTabFilter>

    That is rather strange, is there any strategy that allows us to bind to the iframe or set the attribute directly on the HTML element.

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Jul 18, 2016 at 06:45 AM

    Hi Vamsi,

    If you are getting the URL from the model then you need to fetch according to the path.

    You cannot define simple URL.

    Like src:"{/url}".

    Hope this will helps you.

    Thanks,

    Deepak.

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Jul 18, 2016 at 07:00 AM

    Hi Vamsi,

    Share your full XML view and JSON model definition code.

    Regards,

    Sai.

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Jul 18, 2016 at 07:54 AM

    I have an ODATA model which interacts with the backend, so I am considering the use of a seperate JSONModel to do the binding:

    This is as much of the view as I think I can share:

    <IconTabFilter class="mySuperRedButton" id="map" icon="sap-icon://map" iconColor="Neutral" text="View Map" key="View Map">

    <html:iframe id="map_iframe" src="{/iframe_model/mapUrl}" target="_top" height="100%" width="100%"></html:iframe>

    </IconTabFilter>

    I retrieve the JSONModel using sap.ui.rdefine like this:

    sap.ui.define([

    "sap/ui/core/mvc/Controller",

    "sap/ui/core/routing/History",

    'sap/ui/model/Filter',

    'sap/ui/model/json/JSONModel'

    ], function(Controller, History, Filter,JSONModel) {

    return Controller.extend(namespace,{

    //lots of code not specific to this part

    //inside a callback of an AJAX request within a method

    //which is why we do var that = this (???)

    var url = that.buildUrl();

    var map_filter = that.getView().byId("map");

    var model = new JSONModel()

    model.setData({mapUrl:url});

    map_filter.setModel(model,'iframe_model')

    })

    })

    With this approach I am still not able to set the `src`, I am using the `/` before the binding, but is this considered an absolute binding path?

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Jul 18, 2016 at 07:59 AM

    I have an ODATA model which interacts with the backend, so I am considering the use of a seperate JSONModel to do the binding:

    This is as much of the view as I think I can share:

    <IconTabFilter class="mySuperRedButton" id="map" icon="sap-icon://map" iconColor="Neutral" text="View Map" key="View Map">

    <html:iframe id="map_iframe" src="{/iframe_model/mapUrl}" target="_top" height="100%" width="100%"></html:iframe>

    </IconTabFilter>

    I retrieve the JSONModel using sap.ui.rdefine like this:

    sap.ui.define([

    "sap/ui/core/mvc/Controller",

    "sap/ui/core/routing/History",

    'sap/ui/model/Filter',

    'sap/ui/model/json/JSONModel'

    ], function(Controller, History, Filter,JSONModel) {

    return Controller.extend(namespace,{

    //lots of code not specific to this part

    //inside a callback of an AJAX request within a method

    //which is why we do var that = this (???)

    var url = that.buildUrl();

    var map_filter = that.getView().byId("map");

    var model = new JSONModel()

    model.setData({mapUrl:url});

    map_filter.setModel(model,'iframe_model')

    })

    })

    With this approach I am still not able to set the `src`, I am using the `/` before the binding, but is this considered an absolute binding path?

    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member Sai Vellanki

      Hi Sai,

      I've got the binding down correctly, I am setting it on the correct id in the view, I tested the length of the view using $(map_filter.sId).length to check that the element exists, model.getData() and view.getModel().getData() respectively and I can see thecorrect data there.

      but it seems to treat it differently, when I click the icon:

      trial.dispatcher.hanatrial.ondemand.com/webapp/%7Biframe_model%3E/mapUrl%7D

      gets called, this probably means that there is something else going on here. Is it looking on the odata model on `sap.ui.getCore()` ?

      This is my updated code for the view, nothing changed on the controller:

      <IconTabFilter class="mySuperRedButton" id="map" icon="sap-icon://map" iconColor="Neutral" text="View Map" key="View Map">

      <html:iframe id="map_iframe" src="{iframe_model>/mapUrl}" target="_top" height="100%" width="100%"></html:iframe>

      </IconTabFilter>

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.