Pergunta
Como posso ocultar ou exibir HTML com base na função ou no grupo do usuário?
Resposta
Este artigo abrange as seguintes seções:
- Ocultar ou exibir HTML com base na função do usuário
- Ocultar ou exibir HTML com base no grupo do usuário
Ocultar ou exibir HTML com base na função do usuário
Se as informações que você estiver ocultando forem confidenciais, essa pode não ser uma solução viável, pois um usuário pode visualizar o texto completo usando a função Visualizar fonte da página em seu navegador.
Veja abaixo um exemplo de código para implementação em sua central de ajuda. Primeiro, coloque o código logo abaixo do primeiro elemento Insira o código a seguir no modelo CSS: Insira o código a seguir no modelo JS: Se quiser mostrar ou ocultar HTML com base em grupos, o processo é o mesmo listado nas etapas da função do usuário. Primeiro, coloque o código logo abaixo do primeiro elemento Insira o código a seguir no modelo CSS: Insira o código a seguir sob o modelo JS: Para obter mais informações sobre a edição do modelo da sua central de ajuda, consulte o artigo: Personalização do tema de sua Central de Ajuda (Guide Professional e 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";
}
Ocultar ou exibir HTML com base no grupo do usuário
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)
atualize o "Suporte L2" para um nome de grupo na conta. 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";
}
}