ElementID and classname for FNC Components

Hi there, 

I am now trying to apply FNC components to web app. I found FNC components have not properties to set elementID and classname that would be used for CSS. Can anyone know how to set these properties to FNC components for the web application? Thanks!

FNC control types do not have a direct HTML element equivalent, hence, can't be easily mapped on it. If you want to put the controls on a specific position in a HTML template, put the FNC control in a TWebHTMLDiv and map the TWebHTMLDiv on a HTML DIV element in the template.

Since the FNC controls is using the HTML5 CANVAS, there is no direct CSS mapping.

Hi Bruno, 

Thanks very much for your kind reply. I am now looking at nice examples to use FNCchart. Do you have  reference lists that use FNCChart and could you give me a few references? Thanks in advance!

I'm not sure what you mean with "references"
TTMSFNCChart maps on a HTML5 CANVAS element in a TMS WEB Core web client application.

Thanks for your reply. I mean available examples that have used FNC charts, e.g. line, bar...

I are now investigating the features of FNCChart and considering the possibilities to use it on web app. So can FNCChart be easily exported as say PNG or JPEG? and are animations available for FNCChart series? in addition, can I display FNCChart series data when moving the mouse over data point? how about chart Zoom in and out? 

Thanks for your time in advance.

You can see a web demo here:


im going to hijack this thread to ask where you find the "TWebHtmlDiv"?

Me and my co-worker are both on the most recent 1.2.8 release of TMS WEB Core. Both cant find any trace of it. Documentation doesnt show anything, i was only able to find something about it in the version history. Could you please help us out here?

This is in WEBLib.WebCtrls.pas 

Do you see it?

Yes, its there. I'm not really sure how to "drop" it on a form now though?

It is strange you do  not see it in the tool palette.
Can you create this control at runtime?

I do not see it in the tool palette, neither by searching the name nor by manually looking so to say.

Same goes for my coworker. We are running the latest (i will double check that) IDE version 10.3.

As I am typing and double checking everything. It occured to me that WEBLib.WebCtrls was NOT in the uses clause of the main unit. I added it and now it shows up in the tool palette. Sorry for that, i would assume though, that it should show up there even without being in the uses clause? or am totally wrong about that?

It is very strange, the component should  be registered for the tool palette and that registration happens in a register unit. That you already add the unit in a project unit uses list shouldn't matter.

So far we have not experienced such problem before nor heard from other users experiencing this.
We'd propose to check with the soon to be released v1.3.0.0 (towards end of the month) to see if the situation changes with this new release.

Thats allright now, atleast it works for me now. Thanks a lot either way.

I've come across something else now though.
I'm trying to put the FNC component (kanbanboard) onto the newly discovered TWebHTMLDiv as other users have done before.

I am getting this:

I defined a grid in my .css and put the TWebHTMLDiv in the highlighted blue area.
On the top you see the html excerpt. the div is at the correct position, but the span inside of that div gets different top/left coordinates for the kanbanboard component. Any clues on that?

problem cause is that the span is getting the "position: absolute" attribute when it should in that case get the "position: relative", so basically inheriting from its parent.

Any way to work around this?

You can do this with:


not working for me.

It compiles, but the result doesnt change (IDE underlines "ElementHandle" and "setAttribute", so such elements found for the TTMNSFNCKanbanBoard)

Don't you see the position attribute of the outer SPAN element change?

no. the outer span still has position: absolute.

just to be clear on this, where would you add the line of code you posted? i tried the form.onShow and form.onCreate.

by the way, browser cache gets cleared on every reload because i had a problem with cached data before. so that should not be the problem.

Sorry, I confused, the code to use is: