Component with custom html render

WEB TMS WEB Core
1

Im try to create sidebar navigation, and i need to create next dom html




    <!-- Sidebar navigation -->
    <div id="slide-out" class="side-nav sn-bg-4 fixed">
      <ul class="custom-scrollbar">
        <!-- Side navigation links -->
        <li>
          <ul class="collapsible collapsible-accordion">
            <li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-tachometer-alt"></i>
                Dashboards<i class="fas fa-angle-down rotate-icon"></i></a>
              <div class="collapsible-body">
                <ul>
                  <li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
                  </li>
                  <li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
                  </li>
                  <li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
                  </li>
                  <li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
                  </li>
                  <li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
                  </li>
                  <li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
                  </li>
                </ul>
              </div>
            </li>
        <!-- Side navigation links -->
      </ul>
      <div class="sidenav-bg mask-strong"></div>
    </div>
    <!-- Sidebar navigation -->

I need to create custom component or i can use something like accordition or treeview?
2

If this is fixed HTML you want to add to your page, have you considered putting this HTML into a TWebHTMLContainer?

3

no, i want dynamic generated content

something like tstringlist, rendered into html code in web as in first message

suppose I have the following tsinglist
[fas fa-tachometer-alt] Dashboards
+Version 1
+Version 2
+Version 3
...

and want to convert it into html code in first message


4

Not sure I fully understand your need, but isn't programmatically setting the content of a TWebHTMLCointainer not a possible way?

5

i can generate html text and insert in TWebHTMLCointainer, you right :)

I'm trying to learn how to create my own components, with properties that are used to generate html and then insert this html into the template.
if I understand correctly then in this case the easiest way to do this is using the inheritance from TWebHTMLCointainer?
6
The easiest way is to do this using a TWebHTMLContainer but the logic to create the "component / HTML" will be in application.
If you want to create a ("real") custom control using HTML elements, this is explained in the article
https://www.tmssoftware.com/site/blog.asp?post=449
7

Hi Bruno, is the article you reference here still valid? I am using Delphi 11.1 with TMS Web core 1.9.8.0 but none of these methods...

function GetOuterWidth: integer; override;
function GetOuterHeight: integer; override;
function CreateElement: TJSElement; override;
procedure UpdateElementVisual; override;
procedure UpdateElementData; override;
procedure CreateInitialize; override;

...provided in the linked zip file and referenced in the article appear to be available on TCustomControl.
Is there some new method for creating custom controls with HTML elements?

8

These are still all there.
You can see this in Core Source\WEBLib.Controls.pas

9

Thankyou I see it now. My installation must be corrupt though as it is using the unit in "\Component Library Source" instead of "\Core Source". I'll try cleaning up my installation and reinstalling if necessary.