Controlling the Load Order of JavaScript and CSS

It is possible to insert your own JavaScript and CSS into the HTML that Uniface generates for dynamic server pages.

At runtime, Uniface generates the HTML for the DSP web page based definitions in the DSP. The first time the complete page is generated, this includes references to the JavaScript files required for the Uniface runtime engine, and CSS files required for formatting the page. By default, these references are inserted just before the closing tag of the header (</head>).

However, you may require external JavaScript and styles that need to be loaded in a specific order and location, and which may have dependencies on the Uniface files.

To control the order in which all JavaScript and CSS is loaded:

Edit the DSP layout and insert your CSS and JavaScript, or references to files containing this code, at the desired locations in the layout.
Use <script> tags to insert the desired JavaScript or a reference to the JavaScript file. For example:
```
<script src="myscripts.js"></script>
```
Use <style> tags or links to CSS files to insert the desired styles in the header. For example:
```
<link rel="stylesheet" type="text/css" href="../css/mycss.css" />
```
For more information, see Implementing External Client-Side Triggers and Operations.
To control where the Uniface JS and CSS file references are inserted, enter placeholders for the Uniface JavaScript and CSS locations:
-  for JavaScript
-  for CSS
Note: The placeholders are not case sensitive, but they must not contain spaces.

Example: DSP Layout with JavaScript Insertions

Link to default Uniface style sheet.
Placeholder for stylesheets required by widgets.
Custom script insertion that references myscripts.js.
Note: The location of these files can be configured using the $UNIFACE_RUNTIME_BASE_URL assignment setting. Files are assumed to be relative to this location.
Placeholder for Uniface JavaScript files, including the Uniface runtime engine and widgets.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta name="Default" content="Uniface 10" />
  <link rel="stylesheet" type="text/css" href="../css/uniface.css" /> 
  <!--$UNIFACECSS-->
   <title>title</title>
 </head>
 <body>
  <table id="uent:NM.NME" border="1">
    ...
  </table>
   <script src="myscripts.js"></script> 
  <!--$UNIFACEJS--> 
 </body>
</html>