질문
사용자의 역할이나 그룹에 따라 HTML을 숨기거나 표시하려면 어떻게 해야 하나요?
답변
HTML 숨기기 또는 표시에 대한 내용은 아래 두 섹션을 각각 클릭하세요.
사용자 역할 기준
사용자 그룹 기준
사용자의 역할에 따라 HTML 숨기기 또는 표시
숨기고 있는 정보가 민감한 경우 사용자가 웹 브라우저에서 소스 페이지 보기 기능을 사용하여 전체 텍스트를 볼 수 있으므로 이 방법이 적합하지 않을 수 있습니다.
다음은 헬프 센터에서 구현할 샘플 코드입니다. 먼저 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";
}
}