質問
ユーザーのロールまたはグループに基づいてHTMLの表示と非表示を切り替えるにはどうすればよいですか?
回答
この記事では、次のセクションについて説明します。
ユーザーのロールに基づいてHTMLを非表示または表示にする
非表示にする情報が機密扱いの場合は、ユーザーはWebブラウザでソースの表示機能を選択することで全文を表示できるため、これは有効な解決策ではない可能性があります。
以下は、ヘルプセンターに実装するサンプルコードです。まず、 次のコードをCSSテンプレートの下に挿入します。 次のコードをJSテンプレートの下に挿入します。 グループに基づいてHTMLを表示または非表示にする場合、プロセスはユーザーロールの手順に記載されているプロセスと同じです。まず、 次のコードをCSSテンプレートの下に挿入します。 次のコードをJSテンプレートの下に挿入します。 ヘルプセンターのテンプレートの編集について詳しくは、次の記事を参照してください:「ヘルプセンターテーマのカスタマイズ(Guide ProfessionalおよびEnterprise)」home_page.hbs
ファイル内で最初の要素<div class="anonymous">
<h1>Welcome Anonymous User!</h1>
</div>
<div class="end_user">
<h1>Welcome End-User!</h1>
</div>
<div class="agent">
<h1>Welcome Agent!</h1>
</div>
<div class="manager">
<h1>Welcome Manager!</h1>
</div>div.anonymous, div.end_user, div.agent, div.manager {
width: 100%;
text-align: center;
display: none;
}const anonymous = document.querySelector(".anonymous")
const end_user = document.querySelector(".end_user")
const agent = document.querySelector(".agent")
const manager = document.querySelector(".manager")
// Show div html based on role
if (HelpCenter.user.role=="anonymous"){
anonymous.style.display = "block";
}
if (HelpCenter.user.role=="end_user"){
end_user.style.display = "block";
}
if (HelpCenter.user.role=="agent"){
agent.style.display = "block";
}
if (HelpCenter.user.role=="manager"){
manager.style.display = "block";
}
ユーザーのグループに基づいてHTMLを非表示または表示にする
home_page.hbs
ファイル内で最初の要素const user_group = document.querySelector(".user_group")
<div class="user_group">
<h1>Welcome to L2 Support!</h1>
</div>
div.user_group {
width: 100%;
text-align: center;
display: none;
}
if (groups[i].name == 'L2 Support' && groups[i].isActive
== true)
の行で、「L2 Support」をアカウント内のグループ名に変更します。 const groups = HelpCenter.user.groups;
for (let i = 0; i < groups.length; i++) {
if (groups[i].name == 'L2 Support' && groups[i].isActive == true) {
user_group.style.display = "block";
}
}