Link Html/Css with parameters

WEB TMS WEB Core
1

I have a list/table in my html template. This is filled by a dataset. I do everything manually.

Until now:
I have a button in the list for each record. This button automatically gets a unique ID when it is generated. At the same time, I create a TWebButton that is linked to it.
It all works very well.

But in the future I would like to have a menu on the button. This menu gets about 6-9 menu items.
I was already uncomfortable with having to generate a button for each line. But now there will be almost 10 times as many.

Can I resolve the link using parameters? So that I only need one event and get the record ID and the menu item passed as parameters?

This is the code for html:

      LRecId := String( RecordId);
      DataColumn := '<td>' +
                      '<div class="dropdown">' +
                        '<button class="btn btn-outline-info btn-circle dropdown-toggle" type="button" id="btnListEntryMenu'+LRecId+'" ' +
                          'data-bs-toggle="dropdown" aria-expanded="false"> <i class="fa fa-bars"></i> </button>' +
                        '<ul class="dropdown-menu" aria-labelledby="btnListEntryMenu'+LRecId+'">' +
                          '<li><a class="dropdown-item" href="#">Install</a></li>' +
                          '<li><a class="dropdown-item" href="#">Register</a></li>' +
                          '<li><a class="dropdown-item" href="#">Item 3</a></li>' +
                          '<li><a class="dropdown-item" href="#">Item 4</a></li>' +
                          '<li><a class="dropdown-item" href="#">Something else here</a></li>' +
                        '</ul>' +
                      '</div>' +
                    '</td>' ;

And this is my binding currently:

procedure TframeServices.grOnBindControls(Sender: TObject; Element: TJSElement);

  procedure AddButton( CurrentData: JSValue);
  var
    Button : TWebButton;
    LRecId : String;
  begin
    LRecId := String( RecordId);
    Button := TWebButton.Create( 'btnListEntryMenu'+LRecId);
    Button.Parent := Self;
    Button.Hint := LRecId;
    Button.OnClick := MenuButtonClick;
  end;

begin
  MyDataset.First;
  while not MyDataset.Eof do begin
    AddButton( MyDataset.CurrentData);
    MyDataset.Next;
  end;
end;

Best regards
Thomas

2

An association of a Delphi function with many element id's. And the id is passed.
That would be a solution.

3

I do not see how you handle the link click. But if this is a JavaScript event handler, it will return the link element via event.targetElement. From there , you can get the parentElement (LI) and then its further parentElement (UL). From there, you can pick-up the aria-labelledby and with this, you have the identifier of the record LRecID

4

I haven't used the Javascript event handler yet.
I just create a TWebButton and set the "ElementId" property. I don't do more.

Button := TWebButton.Create( 'btnListEntryMenu'+LRecId);  // <-- ElementId
Button.OnClick := MenuButtonClick;

But that with the Javascript event handler sounds good. But I still don't know what and how to deal with it.
Is there an example of this?

Currently I have created about 300-400 buttons (dynamic) to manage the calls.

That sounds like a lot.

To understand how my site works:
The page is created
In the "Create" the data is retrieved and stored in a dataset.
Html code is added at runtime.
After the page is finished (I have to wait for that so that the link with the ElementId works) I run through the dataset again to create the buttons.
Sort of like Jose Leon in his video series
TMS Web Core for Visual Studio Code - Creating a website - Part 4 - Integrating dynamic components - YouTube

5

If you really need to have buttons visible for all records visible and there can be so many records simultaneously visible, I see no alternative but to create so many buttons dynamically.
To identify the record the button applies to, an alternative could be to set the button.Tag property and check this value from the button-click handler.

6

Identification is not a problem.
If Javascript events don't work, then I leave it as it is.

That sounds like a lot, but visually it's not that much.
Here's a picture. A list with 23 entries. Each entry has a menu button. This results in 184 dynamic invisible buttons.

Dashboard list

Screenshot 2023-03-27 121259
Screenshot 2023-03-27 1212592433×1824 301 KB

7

Do you see a delay due to its creation or any other concern?

8

No, not at this time.

I'll see how that works in practice. I have a new i9-13900k 64GB. My customers will not be so well equipped ;-)