Show/Hide/Close on a web form works very different from regular VCL forms. You will find long discussions about that in the forum. For me, the best way to come as close to Delphi VCL forms as possible is the following approach.
If MainForm.html ist the html file of your main form, then for each additional form you use in your app, create an individual <div> in your MainForm.html, like so:
<div id="ContentForm1"></div>
<div id="ContentForm2"></div>
<div id="ContentForm3"></div>
...
Then, during initialisation, create all your forms and put them in individual <div> containers. Take care though as form creation is an async process. Before creating the next form, the previous form has to be finished its creation or else you will receive mixed HTML-salad! So, DO NOT JUST DO THIS:
Form1 := TForm1.CreateNew('ContentForm1', nil);
Form2 := TForm2.CreateNew('ContentForm2', nil);
Form3 := TForm3.CreateNew('ContentForm3', nil);
Instead, sync it using this aproach:
Type TThenProc = Reference to Procedure (JV : JSValue = Nil);
Procedure TMainForm.CreateSubform(FormNo : Integer; AfterAllFormsCreated : TThenProc);
Procedure OnFormCreated(AForm: TObject);
Begin
TWebForm(NewForm).Visible := False;
CreateSubform(FormNo+1,AfterAllFormsCreated);
End;
Begin
// Caution: Recursive
Case FormNo of
1 : Form1 := TForm1.CreateNew('ContentForm'+IntToStr(FormNo),@OnFormCreated);
2 : Form2 := TForm2.CreateNew('ContentForm'+IntToStr(FormNo),@OnFormCreated);
3 : Form3 := TForm3.CreateNew('ContentForm'+IntToStr(FormNo),@OnFormCreated);
4 : AfterAllFormsCreated;
End;
End;
Somewhere during application initialization:
Await(Integer,TJSPromise.new(
Procedure(ASuccess, AFailed: TJSPromiseResolver)
Begin
CreateSubform(1,Procedure (JV : JSValue)
Begin
ASuccess(0);
End);
End
));
Now, use FormXYZ.Visible to show or hide individual forms, like you would do in VCL. In fact, setting Form.Visible changes the "display" style attribute of the <div> that hosts the form!
At least, this works well for me after days of fiddling with this problem...