Loader Styling

IntraWeb has a template layout control which allows mixing of HTML and IWML for a section or an entire page. However if you want to apply a global style to all pages you can turn the loader html into a template.

To keep things simple we are not going to use external files, images or CSS. But this is a normal HTML file, in the real world you can use all of those in your loader HTML. In this section will only introduce and show basic usage of the HTML loader. For the full documentation refer to HTML Loader.

Template Directory

In the project directory create a folder named Templates:


In the template (named Templates) directory we just created, create a file named _Loader.html with the following contents:

<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8" />
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="-1">
  <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
  <title>My Cool App</title>
  <script src="{%IW17.LibURL%}IntraWeb.js" data-target="MyApp" data-Source="{%IW17.DataSource%}"></script>
<body style="background-color:#E6E6FA">
<H1>My IntraWeb App</H1>
<div id="MyApp" style="position: absolute; left: 75px; top: 75px; border: 3px solid green;"></div> 

Now when we run our application, it has some styling applied:

Because _Loader.html is only used for the main page or when a full URL is used, the styles applied in _Loader.html will affect the entire application. This is because IntraWeb 17 creates Single Page Applications (SPA).


Next we will show how to do even more customization and deeper integration of HTML for layout using templates.