cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Problem with HTML fragment

Go to solution
ttrapp
Active Contributor

on ‎07-31-2014 10:06 PM

0 Kudos

Hi,

I'm looking for an example how to use HTML-fragments in views. I modified an example from http://jsbin.com/openui5-xml-view/7/edit and altered it so that an HTML fragment is returned, too:

return new sap.ui.commons.layout.VerticalLayout({

     content:

      [

        new sap.ui.commons.Button({text:'{/actionName}',press:oController.doSomething}),

         sap.ui.htmlfragment("html")

      ]  

    })

The file html.fragment.html contains just <p>Hello World!</p>.

Unfortunately I always get the following error message: Uncaught TypeError: Cannot read property 'render' of undefined

in Open UI5 1.22.4 but also previous versions. Can anyone provide a running example for an HTML fragment?

Here is the complete code.:

<!DOCTYPE html>

<html><head>

<meta name="description" content="UI5 MVC example with JS view" />

<meta http-equiv='X-UA-Compatible' content='IE=edge' />

<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

<title>MVC in 22 Seconds Example</title>

<!-- Load UI5, select gold reflection theme and the "commons" control library -->

<script id='sap-ui-bootstrap' type='text/javascript'

  src='resources/sap-ui-core.js'

  data-sap-ui-theme='sap_bluecrystal'

  data-sap-ui-libs='sap.ui.commons'></script>

<script>

 

  /*** DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES ***/

 

  // define a new (simple) Controller type

  sap.ui.controller("my.own.controller", {

  

   // implement an event handler in the Controller

   doSomething: function() {

    alert("Hello World!");

   }

  });

 

  // define a new (simple) View type

  // ...alternatively this can be done in an XML file without JavaScript!

  sap.ui.jsview("my.own.view", {

  

   // define the (default) controller type for this View

   getControllerName: function() {

    return "my.own.controller";

   },

  

   // defines the UI of this View

   createContent: function(oController) {

    return new sap.ui.commons.layout.VerticalLayout({

     content:

      [

        new sap.ui.commons.Button({text:'{/actionName}',press:oController.doSomething}),

         sap.ui.htmlfragment("html")

      ]  

    })

  }});

 

 

  /*** THIS IS THE "APPLICATION" CODE ***/

 

  // create some dummy JSON data

  var data = {

   actionName: "Say Hello"

  };

 

  // instantiate the View

  var myView = sap.ui.view({type:sap.ui.core.mvc.ViewType.JS, viewName:"my.own.view"});

 

  // create a Model and assign it to the View

  var oModel = new sap.ui.model.json.JSONModel();

  oModel.setData(data);

  myView.setModel(oModel);

 

  // put the View onto the screen

  myView.placeAt('content');

 

</script>

</head>

<body class='sapUiBody'>

  <div id='content'></div>

</body>

</html>


Thanks in advance,

Tobias

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
‎08-01-2014 11:13 AM
0 Kudos

You can create a fragment like this,







var myHtml = '<div data-sap-ui-type="sap.ui.core.HTML" data-content="<p>Plain Html in a Fragment!</p>"></div>';

& Instantiate by doing this,



sap.ui.htmlfragment({fragmentContent:myHtml})

Created a sample fragment in your snippet,

JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;icon&quot; href=&quot;h...

Regards

Sakthivel

Show replies
Show replies

Answers (2)

Answers (2)

Qualiture
Active Contributor
‎08-01-2014 9:12 AM
0 Kudos

Hi Tobias,

I'm almost sure the error Uncaught TypeError: Cannot read property 'render' of undefined is thrown because you have used 'plain HTML' in your HTML fragment:

  <p>Hello World</p>

the moment you put in something UI5-specific, for instance:

  <p>Hello World</p>

  <div data-sap-ui-type="sap.ui.commons.Button" id="Button2" data-text="Hello World Button"></div>

then it should execute properly (however, the 'plain HTML' content seems to be ignored, see this example using your code)

I have almost no experience with HTML views/fragments so I can't really comment on the reason why this happens...

Show replies
Show replies
francesco_alborghetti
Active Participant
‎07-31-2014 10:55 PM
0 Kudos

Hi Tobias,

please have a look at this link:

sap - Using html fragments with declarative html views - Stack Overflow

It seems to be a bug, they are suggesting to create a custom control.

Best regrads

Francesco

Show replies
Show replies
ttrapp
Active Contributor
‎08-01-2014 7:32 AM
0 Kudos

Hi Francesco,

I tried out different combinations but I can't get it running cause in every case I get now the error: Uncaught Error: "function (){b.apply(this,arguments)}" is not valid for aggregation "content" of Element sap.ui.core.mvc.JSView#__jsview0

My first question is about the name-property of the control (i.e. the file name). Is it according to the example above html or html.fragment.html?

     var wrapperControl = sap.ui.core.Control.extend("sap.mic.controls.Fragment", {

       metadata: {
          properties: {
             "name": "html.fragment.html"
          }
       },

       init: function () {
       },

       renderer: function (renderManager, control) {
          var fragmentName = control.getProperty("name"),
              fragment = sap.ui.htmlfragment(fragmentName);

          renderManager.renderControl(fragment);
       }
    });

The second question ist how to use this control in the example above. At first I thought I could return return it from the createContent function like a usual control but this leads to an error:

  return wrapperControl;

Then I introduced it to a layout but still with no success:

    return new sap.ui.commons.layout.VerticalLayout({

     content:

      [

        new sap.ui.commons.Button({text:'{/actionName}',press:oController.doSomething}),

         wrapperControl

         //sap.ui.htmlfragment("html")

      ]  

    });

In the example you showed you I don't see the Connection betwenn the control and the div-element:

<div data-sap-ui-type="sap.m.Page" data-enable-scrolling="false">

    <div data-sap-ui-type="sap.mic.controls.Fragment"

         data-name="view.configurator.Summary"></div>

</div>

So could you scetch what I should do?

Thanks in advance,

Tobias

Ask a Question