SAP UI5 How to append HTML in xml View

Question

I want to use vis.js library at xml view.

This is XML View :

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:m="sap.m" controllerName="com.asas.mes.controller.timeline" xmlns="http://www.w3.org/1999/xhtml">
<m:Page>
    <div id="visualization"></div>
</m:Page>

And this is controller:

    sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
    "use strict";

    return Controller.extend("com.asas.mes.controller.timeline", {

        onInit: function() {

            jQuery.sap.registerModulePath("modulePath", "/XMII/CM/mes/vis-4.21.0");
            jQuery.sap.require("modulePath.vismin");
            var test = this.getView().byId("visualization");

             var items = new vis.DataSet([
             {id: 1, content: 'item 1', start: '2014-04-20'},
             {id: 2, content: 'item 2', start: '2014-04-14'},
             {id: 3, content: 'item 3', start: '2014-04-18'},
             {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
             {id: 5, content: 'item 5', start: '2014-04-25'},
             {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
  ]);

  // Configuration for the Timeline
  var options = {};

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);

        }

    });
});

But I get this error:

error ss:

error code: Uncaught TypeError: t.appendChild is not a function

Answer 1

Try this.

Remember to include namespace core

<mvc:View
...
xmlns:core="sap.ui.core"
...>

Hope it helps.

View

    <Page title="{i18n>title}">
        <content>
            <core:HTML id="idHTMLContent"/>
        </content>
    </Page>

Controller

    onInit: function(){
        this.byId("idHTMLContent").setContent("<div id='visualization'></div>");
    }

Style.css

#visualization {
    background:green;
    width: 100%;
    height:200px;
}