How to create control at runtime if using template?

[RenSword]

Code:

procedure TIWForm1.btnTestAsyncClick(Sender: TObject; EventParams: TStringList);
begin
  var B := TIWButton.Create(Self);
  B.Parent := Self;
end;

this can be used to create control at runtime, however, when refresh page, the html element of button is lost and not redrawn.
This issue only occur when using template processor. if possible I did like to create the control at runtime, and not add extra thing to the template.html.

[MJS@mjs.us]

I do something similar and found that the template must still contain a tag for the control and the control also be properly named:


Template snippet:

Code:

<div class="row"><div class="col-sm-12 text-center p-1">{%btnAdmin%}</div></div>

Creation:

Code:

TIWButton *b = new TIWButton(this);
b->Parent = this;
b->Name = "btnAdmin";
b->Caption = "Admin";
b->Css = "btn btn-secondary form-control";
b->HotKey = 'A';
b->StyleRenderOptions->RenderFlags = TRenderFlags() << rfRenderVisibility;

[RenSword]

I do something similar and found that the template must still contain a tag for the control and the control also be properly named:


Template snippet:

Code:

<div class="row"><div class="col-sm-12 text-center p-1">{%btnAdmin%}</div></div>

Creation:

Code:

TIWButton *b = new TIWButton(this);
b->Parent = this;
b->Name = "btnAdmin";
b->Caption = "Admin";
b->Css = "btn btn-secondary form-control";
b->HotKey = 'A';
b->StyleRenderOptions->RenderFlags = TRenderFlags() << rfRenderVisibility;

I see, thanks, I was hoping if its possible to not include in the template, but it seems that its impossible.

[Alexandre Machado]

Hi Ren,

when using a template you can still create controls at runtime but you need to specify the parent Id of the HTML element that will be the parent of the control. In this case you must use the event OnFindParentId of the TIWTemplateProcessorHTML component.


Have a look at this simple code that reflects your example above:

Code:

procedure TIWForm1.IWTemplateProcessorHTML1FindParentId(Sender: TIWTemplateProcessorHTML; AContainerContext: TIWContainerContext;
  const AComponent: TComponent; out AParentId: string);
begin
  if (AComponent is TIWButton) and SameText(AComponent.Name, 'IWButton1') then
  begin
    AParentId := 'SOME_DIV_ID';
  end;
end;

Here I'm telling IW to put the newly created TIWButton parented to a DIV (an HTML element) named 'SOME_DIV_ID'

Let's say you want to the button parented to an IWRegion, named IWRegion1, then you will have:

Code:

procedure TIWForm1.IWTemplateProcessorHTML1FindParentId(Sender: TIWTemplateProcessorHTML; AContainerContext: TIWContainerContext;
  const AComponent: TComponent; out AParentId: string);
begin
  if (AComponent is TIWButton) and SameText(AComponent.Name, 'IWButton1') then
  begin
    AParentId := 'IWREGION1';
  end;
end;

Can you please give it a try and let me know if it worked?

[RenSword]

Hi Ren,

when using a template you can still create controls at runtime but you need to specify the parent Id of the HTML element that will be the parent of the control. In this case you must use the event OnFindParentId of the TIWTemplateProcessorHTML component.


Have a look at this simple code that reflects your example above:

Code:

procedure TIWForm1.IWTemplateProcessorHTML1FindParentId(Sender: TIWTemplateProcessorHTML; AContainerContext: TIWContainerContext;
  const AComponent: TComponent; out AParentId: string);
begin
  if (AComponent is TIWButton) and SameText(AComponent.Name, 'IWButton1') then
  begin
    AParentId := 'SOME_DIV_ID';
  end;
end;

Here I'm telling IW to put the newly created TIWButton parented to a DIV (an HTML element) named 'SOME_DIV_ID'

Let's say you want to the button parented to an IWRegion, named IWRegion1, then you will have:

Code:

procedure TIWForm1.IWTemplateProcessorHTML1FindParentId(Sender: TIWTemplateProcessorHTML; AContainerContext: TIWContainerContext;
  const AComponent: TComponent; out AParentId: string);
begin
  if (AComponent is TIWButton) and SameText(AComponent.Name, 'IWButton1') then
  begin
    AParentId := 'IWREGION1';
  end;
end;

Can you please give it a try and let me know if it worked?

I tried it can add to even a <div> that only exist on html templates,
but my main concern is, on page refresh its gone, although the component still exist.

  TestFindParentId.zip (Size: 1.6 KB / Downloads: 5)

[Alexandre Machado]

I'll have a look and let you know

[DanBarclay]

You can also specify a container in the template, then fill the container with what you want with runtime code (change the container contents).

Dan

[Alexandre Machado]

The thing is that whenever you refresh the form, it will be rendered considering whatever you have in your template. If the control is not in the template, it won't be rendered.

So, if you expect a control to be created art runtime, parented to that region, declare the control in the template. When the control doesn't exist, IntraWeb template engine will just ignore it. However, after being created it renders correctly until you free it again.

Please check the modified project


  Project1.zip (Size: 52.82 KB / Downloads: 5)

PS: There are othe ways to deal with this, including modifiying the template at runtime on the fly. However this is the simplest and most effective way.

[RenSword]

The thing is that whenever you refresh the form, it will be rendered considering whatever you have in your template. If the control is not in the template, it won't be rendered.

So, if you expect a control to be created in runtime, parented to that region, declare the control in the template. When the control doesn't exist, IntraWeb template engine will just ignore it. However, after being created it renders correctly until you free it again.

Please check the modified project



PS: There are othe ways to deal with this, including modifiying the template at runtime on the fly. However this is the simplest and most effective way.

Alright, thanks for your reply~