Skip to content


The TTMSFNCWXContainer is a component to create your own HTML elements and integrate JavaScript libraries into your applications.


To integrate external libraries, you'll need to add a link to the required JavaScript, Stylesheet or other data. To do that you'll need to add Link to the Links collection. It's Important to now that when you want to call or initialize a JS Library that you wait until the control is initialized. To do this you can call the JS code with an ExecuteJavaScript within the OnControlInitialized Event. This event triggers when the control is fully initialized.


Property name Description
Async When set to true the script will be fetched in parallel to parsing and will be evaluated as soon as it is available.
Charset Sets the required charset (e.g. UTF-8).
Content Set the inline content when the kind is mlkStyle.
Defer When set to true the Script will be executed after the document has been parsed.
Enabled If Set to true, the link will be added to the document.
Kind Set what kind of link you want to add: mlkLink, mlkScript, mlkStyle.
Rel Set the relationship between the current document and the linked document/resource. (e.g. 'stylesheet' for CSS)
Type Specifies the media type of the linked document/resource/script.
URL Set the link to the required document/resource/script.

Adding Containers

To create HTML objects, all you need to do is add a container to the ElementContainers collection. Here you add the HTML, CSS, JavaScript and Actions. With these actions you can use HTML events to trigger Pascal code.


Property name Description
Actions Collection of Action items which lets you asign Pascal events to HTML elements.
HTML Set the HTML of this container
HTMLElementClassName Set the name of the class for the outer HTML Element.
HTMLElementID Set the ID of the outer HTML Element.
Margins Set the margins for this container.
Position Set the position of the container within the component.
Script Set the script for this HTML Element.
Style Set the style for this HTML Element.
UseDefaultStyle toggling this enables the default style of the container.
Visible Toggling this hides or shows the container.

Adding Actions

To allow the HTML Elements to interact with Delphi you can use Actions. With these actions you can listen to various events from HTMLElements and assign delphi procedures that have to be executed when these events trigger.


Property name Description
CustomEvent Set the eventname when using a Custom Event
Enabled Toggle this to disable/enable the Action
Event Set the HTML Event to listen to
EventReturnValue Set the value that has to be returned to Delphi code
HTMLElementID Set the id of the HTML Element to which the action has to listen.
Name Set the name of the action
Tag Set the tag of this action


You have the OnExecute event. This event triggers when the HTML Event to which the action is listening has been triggered. This event returns a TTMSFNCCustomWebControlEventData Object. This object contains the Event, EventName, ID, and the customData (most of the time the EventReturnData). This CustomData is a JSON string.


The TTMSFNCWXContainer component has a ExecuteJavaScript procedure. You can use this procedure to call JavaScript functions and pass parameters to them. The JavaScript string can only be 1 line. This example will show a alert.


JavaScript Bridge

This bridge is used to trigger the actions in the ElementContainers. But you can access this bridge through JavaScript as well. You can call the JS function callback(). This function requires an EventName and the data you want to send.

This code adds an eventlistener and sends back the data from this event to the Pascal side.

function InitCarousel() {
  $('#carouselExampleCaptions').on('', function (data) {
    CallBack('CarouselSlide', data);
In Delphi you can use the OnCustomEvent from the TTMSFNCWXContainer to listen to these events. This OnCustomEvent is the same as the OnExecute from the Actions collection.