› Application settings › Custom pages

Custom pages

The Custom pages section in the Property panel allows you to define custom error and logout pages for the Insight applications.

Custom pages must be HTML pages, the uploaded page is saved in Insight DataFoder/CustomPages and used when the page is opened. The page can contain custom data (images, scripts, styles), which can be copied to the Insight application folder (<InstallationDirectory>/HtmlInsight/CustomResources). The HTML page should contain a link to this folder.

You can use the following items as templates in the HTML page.

  • {{Locale}} - the template will replace the current user locale, such as en-US.

  • {{Model}} - a JavaScript object, which has the following properties.

    • ApplicationName - the name of the application (Studio, Admin Console and others).

    • Version - Insight version.

    • Error - error message (for the error page).

    The model can be assigned to a variable and used in a script on the HTML page as required.

A sample of an HTML error page 

<html lang="en">
<meta name="viewport"content="width=device-width">
<meta http-equiv="content-type"content="text/html; charset=utf-8">
<title>Custom Error</title>
<head>
<style>label {display: block;}body {display: flex;align-items: center;justify-content: center;}.error {color: red;}</style>
<script>var insightModel = {{Model}};var locale = '{{Locale}}';</script>
</head>
<body>
<script>if(insightModel.error) {const error = document.createElement('div');error.textContent = insightModel.error;error.classList.add('error');document.body.append(error);}</script>
</body>
</html>

You can also create a custom login page for Insight and login panel authentications. This page should contain a form with a submit action to CustomLogin. It is possible to add a model template to this page with an error script, such as the one shown in the error page sample.

A sample of an HTML login page 

<html lang="en">
<meta name="viewport" content="width=device-width">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Custom Login</title>
<head>
<style>label {display: block;}
body {display: flex; align-items: center; justify-content: center;}.error {color: red;}</style>
<script>var insightModel = {{Model}};var locale = '{{Locale}}';</script>
</head>              
<body>                
<form action="CustomLogin" method="post">
<label>client <input name="client"/></label>
<label id="user">user <input name="user"/></label>
<label>password <input name="password"/></label>
<input type="submit" value="Login"/>                               
</form>
<script>
if(insightModel.error) {
const error = document.createElement('div'); 
error.textContent = insightModel.error; 
error.classList.add('error');
document.getElementById('user').after(error);}
</script></body>
</html>