Insert TMS Web Core TWebDBGrid in a HTML file from another developer

WEB TMS WEB Core
1

Hello,

I have the following scenario: I have an HTML template (from another developer—not TMS Web Core) that contains various content, and I would now like to insert a TMS Web Core TWebDBGrid into an existing div tag with a unique ID. The other developer can make adjustments if necessary (e.g., loading my TMS Web Core JS app, starting it with rtl.run(), etc.). I’ve included an example where demo.html represents the developer's template, and I’d like to insert the grid into the "appcontent" div tag. I created a simple TMS Web Core application for this, I set the FormContainer on the form to "appcontent," and added the following body in demo.html:

<body>
    <div>
        <div class="row g-0 py-2">
            <div class="col-8">
                <span class="text-mode">Subtotal demo.html</span>
            </div>
            <div class="col-4 text-end">
                <span class="ml-auto">$89.00</span>
            </div>
        </div>
    </div>

    <!-- I want to insert the form with the grid here -->
    <div id="appcontent" class="appcontent">
    </div>

    <div>
        <a class="btn" href="#">Continue to Checkout in demo.html</a>
    </div>
    <script src="WebshopSales.js"></script>

    <script type="text/javascript">
        var CONTAINERID = "appcontent";
        rtl.run();
    </script>
</body>

The HTML file of the form looks like this:

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>TMS Web Project</title>
    <style>
    </style>
  </head>
  <body>
    <div>
        <div class="row g-0 py-2">
            <div class="col-8">
                <span class="text-mode">Subtotal uWebShopSales.html</span>
            </div>
            <div class="col-4 text-end">
                <span class="ml-auto">$89.00</span>
            </div>
        </div>
    </div>

    <!-- If the id of this div is "appcontent", then the Form with the Grid is always inserted here and not in the demo.html! -->
    <!-- If I remove this div, then the Form with the grid is inserted directly before the </body> end tag -->
    <div id="appcontent" class="appcontent">
    </div>

    <div>
        <a class="btn" href="#">Continue to Checkout in uWebshopSales.html</a>
    </div>
  </body>
</html>

When I run everything, the form with the grid is generated, but it is never inserted into the appcontent div of demo.html. Instead, the body of demo.html is always replaced with the body of the HTML from the TMS Web Core form (uWebshopSales.html) and rendered within the appcontent div of uWebshopSales.html. However, that’s not what I want to achieve. The content of demo.html must not be overwritten in any way; I am only allowed to insert content into the one div tag with the ID appcontent. You can see when you refresh the page, that first the demo.html can be seen, but is directly replaced by the html of the form.

What can I do to get this to work?

Here are my files (my tms webserver is running on port 8005, you have to change this if needed).

demo.html (928 Bytes)
shop_websales.html (760 Bytes)
uWebshopSales.dfm (2.6 KB)
uWebshopSales.html (922 Bytes)
uWebshopSales.pas (925 Bytes)
WebshopSales.dpr (290 Bytes)
WebshopSales.dproj (62.5 KB)

2

The TWebStringGrid (or TWebDBGrid) is expected to be linked to a HTML TABLE element with the ElementID.
If you do not have a TABLE element, you could drop a TWebHTMLDiv on the form and connect this via its ElementID to a DIV in the template and then insert a TWebStringGrid into that WebHTMLDiv and it will be rendered inside this linked DIV in your HTML template.

3

No matter what I'm doing, the body of the demo.html is always completely replaced by the html of the TMS Web Core form with the grid. Can you give me a working example? For clarification I need to insert my TMS Web Core form, respectively the TWebDBGrid into an existing web page and I'm only allowed to insert the grid into a part of this web page (div-tag or anything other - main thing it works).

4

The form is rendered in the HTML that is associated with the form, i.e. uWebshopSales.html
It is by design that when you open a form, it replaces by default the existing HTML.
An alternative to this approach is "form hosting" where you designate where a form will be rendered in the scope of another form. This is demonstrated in the demo Demo\Basics\FormHosting

5

I guess I can't use "form hosting", because the page where my TMS Web Core App (resp. my grid) should be insertedis a page from another developer.

So the other developer can't create the form like in the form hosting demo:

procedure TFrmMain.btCreateSubF1Click(Sender: TObject);

  procedure AfterCreate(AForm: TObject);
  begin
    if Assigned(frm) and (frm is TSubForm1) then
      ( frm as TSubForm1 ).lbTexts.Items.Assign(lbTextsMain.Items);
  end;

begin
  // destroy possible old form
  if Assigned(frm) then
    frm.Close;

  frm :=  TSubForm1.CreateNew(HostPanel.ElementID, @AfterCreate);
  btTransferGet.Enabled := true;
  btTransferSet.Enabled := true;
end;

He do not have TMS Web Core!? What can I do?

6

Use a TWebBrowserControl to embed it this way if it is not a TMS WEB Core form?