Domanda
Come posso nascondere o mostrare il codice HTML in base al ruolo o al gruppo dell'utente?
Risposta
L’articolo include le seguenti sezioni:
- Nascondi o mostra il codice HTML in base al ruolo dell'utente
- Nascondi o mostra il codice HTML in base al gruppo dell'utente
Nascondi o mostra il codice HTML in base al ruolo dell'utente
Se le informazioni che nascondi sono sensibili, questa soluzione potrebbe non essere praticabile, dal momento che un utente può visualizzare il testo completo usando la funzione Visualizza origine pagina nel proprio browser web.
Di seguito è riportato un codice di esempio da implementare nel Centro assistenza. Inizia posizionando il codice direttamente sotto il primo elemento Inserisci il codice seguente sotto il modello CSS: Inserisci il codice seguente sotto il modello JS: Per mostrare o nascondere il codice HTML in base ai gruppi, la procedura è la stessa elencata nei passaggi per i ruoli utente. Inizia posizionando il codice direttamente sotto il primo elemento Inserisci il codice seguente sotto il modello CSS: Inserisci il codice seguente sotto il modello JS: Per ulteriori informazioni sulla modifica del modello del centro assistenza, consulta l'articolo: Personalizzazione del tema del centro assistenza (Guide Professional ed 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";
}
Nascondi o mostra il codice HTML in base al gruppo dell'utente
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)
aggiorna “assistenza di livello 2” con il nome di un gruppo nell’account. 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";
}
}