Skip to Content
0

SAP UI5 XML View access html contrrol

Mar 12, 2017 at 08:16 AM

134

avatar image

I need to change an JS view to an XML View. Problem is in the JS was an Html Control with a canvas. I need to access the Canvas but i dont get it to work in the xmlView. Code is as follows:

http://www.w3.org/1999/xhtml">

<App>

<pages>

<Page id="CanvasPage" >

</Page>

</pages>

And in the controller i ad the control but cant access the Canvas.

onInit: function() {

var map = this.getView().byId("CanvasPage");

var canvas = new sap.ui.core.HTML({

content: "<canvas id='Map' width='860' height='624' "

+ "style='border:1px solid #000000;'>"

+ "</canvas>" });
map.addContent(canvas);
var hmap = document.getElementById('Map');
I need to access the canvas. I can see it on the page. but
document.getElementById('Map');
doesnt work. I get null as return. Anyone an Advice?
Regards.

Dirk

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Best Answer
Jun Wu Mar 12, 2017 at 06:41 PM
0

i think it is timing issue.

can u do it onafterrendering?

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Yes it seems to be a timing problem. The rendering isnt done on "onInit". After i changed some code to "onAfterRendering" it works.

0
Seungchul Yang Mar 13, 2017 at 02:14 AM
0

A code to render canvas should be at View.

Check below code

<App>
<pages>
<Page id="CanvasPage" >
 <core:HTML content='<canvas id="Map" width="860" height="624" style="border:1px solid #000000;">'>
 </core:HTML>
</Page>
</pages>
Show 4 Share
10 |10000 characters needed characters left characters exceeded

Hello Yang,

i tried this but i get an error on loading the xmlview

Uncaught (in promise) Error: resource And/view/Andromeda_Map.view.xml could not be loaded from ./view/Andromeda_Map.view.xml.
Check for 'file not found' or parse errors.
Reason: Error: Invalid XML: http://www.w3.org/1999/xhtml">

<Page id="CanvasPage" >

<core:HTML content='<canvas id="Map" width="860" height="624" style="border:1px solid #000000;">'> </core:HTML> </Page>

The answer of Jun Wu works. Its a timing problem. At "onInit" it seems that the rendering isn't done yet.
If i shift part of the logic to "onAfterRendering" it works. I was trying if your declaration could solve the problem too but there is something wrong here. Since i am not familiar with XML can you give me an advice whats wrong?

Regrads

Dirk

0
0

Hello Yang,
i looked at it but i dont know whats wrong with my code.
If i add the canvas in the XML then i get an error that the XML view cant be loaded.
So i assume its something wrong with

content='<canvas id="Map" width="860" height="624" style="border:1px solid #000000;">'

I can add the Canvas in onInit in the controller
map = this.getView().byId("MapPage");

var canvas = new sap.ui.core.HTML({ content: "<canvas id='HexMap' width='860' height='624' " + "style='border:1px solid #000000;'>" + "</canvas>" });
map.addContent(canvas);

That works. Any advice why i cant add it in the View?

Regards

Dirk

0

Check your code.

1. You should a namespace for core like this

<mvc:View	xmlns:l="sap.ui.layout"	xmlns:core="sap.ui.core"

2. And replace a special characters.

1) < to "& l t;"

2) > to "& g t;"

3) ' to "& q u o t;"

code.png (25.9 kB)
0
Dirk Wieczorek
Mar 15, 2017 at 08:46 AM
0

Thanks,

i still miss that i have to replace the special charachters.
Now it works and i can declare the canvas in the view.

regards

Dirk

Share
10 |10000 characters needed characters left characters exceeded