Problems using bootstrap templates


 I 'm Strugling with some problems using a bootstrap template.

My project have 2 forms, a simple login screen using bootstrap and an admin dashboard.

In the login form I call a new form that have only html  admin dashboad bootstrap template on it.
But somehow the  admin dashboard have some issues like some graphs missing and sidebar menu not working correctly. In the browser developer tools I can see some issues regarding  javascript libs.

the source code of the project is this one

  Application.MainFormOnTaskbar := True;
  Application.CreateForm(Tdashboardf, dashboardf);  // dashboard Form
  Application.CreateForm(Tmainf, mainf);  //Login form

At first I thought that I was missing some javascripts libs,
But,  if I start the aplication using the admin dashboard as the inicial form instead of the login one then everything is displayed and runs fine and without errors.
the source code of the project is

  Application.MainFormOnTaskbar := True;
  Application.CreateForm(Tmainf, mainf);  //Login form 
  Application.CreateForm(Tdashboardf, dashboardf);  // dashboard Form  

I send a link with the project and the template is on the debug folder inside a folder called "files"
the template is free so there is no problem sending it.

My goal is to develop with WebCore only using templates, so far I really like the framework, but I really need that templates works fine, I maybe missing something, but cannot figure out where.
I've also tried with other payed templates that I have and the result is the same.

Any help is apreciated , Thanks 

I cannot open this file. When trying to open with 7-zip, it says invalid archive.

Hi Bruno,

Sorry for this but I use winrar, it's in rar format,

but here is the link with a zip files.

I changed your application main HTML to:

<META content="text/html; charset=utf-8" http-equiv=Content-type><LINK rel=icon

  <script src="files/vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="files/vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="files/vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Morris Charts JavaScript -->
    <script src="files/vendor/raphael/raphael.min.js"></script>
    <script src="files/vendor/morrisjs/morris.min.js"></script>
    <script src="files/data/morris-data.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="files/dist/js/sb-admin-2.js"></script>

<SCRIPT type=text/javascript src="$(ProjectName).js"></SCRIPT>

 <link href="files/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="files/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="files/dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="files/vendor/morrisjs/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="files/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<SCRIPT type=text/javascript>;


to make sure the bootstrap scripts are loaded before the application script.
Then it works:

Hi Bruno, 

Thanks for you anwser,

The problem still there.

If you start the aplication using the main.pas ( page with a login page, just click login to enter)
then the second form (dashboard.pas) doesn't work correcty,  the charts doesn't show, the sidebar doesn't york corretly, the accordion behaviour dissapear.

It you look at the picture you have attached you will see that the charts areas are empties ( no chart). this occurs only if I define the  main.pas as startup form.
If  I define that my startup form is the dashboad.pas then all the Js scripts works flawless.



I did test it, I showed you a screenshot, it does work.

The project can be downloaded here:

When you see an issue, please see in your console for errors, that will give you a hint about what could be wrong. When the bootstrap .js & .css get properly loaded, it should work.

Ok Bruno, 

I'm sorry to insist but I'm evaluating tms webcore, I want to buy it for my next projects, but templating must work 100%.

So... Please, look at your printscreen, do you see any chart in the chart Area Example? NO you don't, so there is an error on the console. about the morris.js chart lib, I know how to work with developer tools on the browser.

The problem is that I can't find any reason why the template works 100% free of errors using this code

  Application.MainFormOnTaskbar := True;
  Application.CreateForm(Tmainf, mainf);
  Application.CreateForm(Tdashboardf, dashboardf);

and why it doesn't work correctly if I start the app with the screen login first.

  Application.MainFormOnTaskbar := True;
  Application.CreateForm(Tdashboardf, dashboardf);
  Application.CreateForm(Tmainf, mainf);

So this it not a problem about missing javascript libs, but a problem regarding the use of  different forms using templates in the tms webcore.

Once more I'm sorry for my persistence, I know you have a lot of work to do and support to give to a lot of other people, but... I really need this to work flawless before invest my money on this tool. 

The issue here is the script:files/data/morris-data.js

This script expects HTML elements where to insert the chart data and when you load this at application level (in app main HTML file) , the form (and thus the HTML elements of the form) are not yet loaded. 
So, you can only load files/data/morris-data.js from or after the  form HTML was loaded.

The simple solution was to call this script from the daskboard form OnCreate event:

  script: TJSHTMLScriptElement;
  script := TJSHTMLScriptElement(document.createElement('script'));
  script.src := 'files/data/morris-data.js';
  script.type_ := 'text/javascript';

The updated source is here:

Bruno Fierens2018-09-13 15:31:45

Hi Bruno,

Fantastic  :) I really apreciate your explanation and your solution,
This now explain a lot of problems I've been faced :)

I already  tested and it work flawless.

Thank you

Best Regards 


Using bootstrap templates is indeed an extremely productive way to create fantastic looking web applications in no time.