カスタムページ

[プロパティパネル] の [カスタムページ] セクションでは、Insight アプリケーションのカスタムエラーページとログアウトページを定義できます。

[カスタムページ] は HTML ページである必要があり、アップロードしたページは Insight DataFoder/CustomPages に保存され、ページを開いたときに使用されます。このページには、Insight アプリケーションフォルダ (<InstallationDirectory>/HtmlInsight/CustomResources) にコピーできるカスタムデータ (画像、スクリプト、スタイル) を含めることができます。HTML ページには、このフォルダへのリンクが含まれている必要があります。

HTML ページのテンプレートとして次のような項目を使用できます。

{{Locale}} - テンプレートで、en-US などの現在のユーザーロケールを置き換えます。
{{Model}} - 次のプロパティを持つ JavaScript オブジェクト。
- ApplicationName - アプリケーションの名前 (Studio、Admin Console など)。
- Version - Insight のバージョンです。
- Error - エラーメッセージ (エラーページ用)。
モデルを変数に割り当て、必要に応じて HTML ページのスクリプトで使用できます。

HTML エラーページのサンプル

<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>

Insight およびログインパネル認証用のカスタムログインページを作成することもできます。このページには、CustomLogin への送信アクションを含むフォームが含まれている必要があります。エラーページのサンプルに示されているようなエラースクリプトを使用して、このページにモデルテンプレートを追加することができます。

HTML ログインページのサンプル

<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>

カスタム ページ

カスタムページ