Wie kann ich je nach Rolle oder Gruppe eines Benutzers HTML ausblenden oder anzeigen?

Frage

Wie kann ich je nach Rolle oder Gruppe eines Benutzers HTML ausblenden oder anzeigen?

Antwort

Haftungsausschluss: Dieser Beitrag dient lediglich zu Demonstrationszwecken. Zendesk bietet keine Unterstützung oder Garantie für den Code. Bitte posten Sie eventuelle Probleme im Abschnitt zu den Kommentaren, oder suchen Sie online nach einer Lösung.

Weitere Informationen zum Ein- und Ausblenden von HTML finden Sie in den beiden folgenden Abschnitten:

Basierend auf Benutzerrolle

Basierend auf Benutzergruppe

HTML je nach Rolle des Benutzers aus- oder einblenden

Wenn die Informationen, die Sie ausblenden möchten, sensibel sind, ist dies möglicherweise keine praktikable Lösung für Sie, da der vollständige Text durch die Funktion Quelltext anzeigen im Browser sichtbar wird.

Nachfolgend finden Sie jedoch einen Beispielcode, den Sie in Ihrem Help Center integrieren können, sowie einen Screencast, der zeigt, wo genau Sie ihn einfügen können.

<div class="anonymous">
<center><h1>Welcome Anonymous User!</h1></center>
</div> <div class="end_user">
<center><h1>Welcome End-User!</h1></center>
</div> <div class="agent">
<center><h1>Welcome Agent!</h1></center>
</div> <div class="manager">
<center><h1>Welcome Manager!</h1></center>
</div>

Fügen Sie den folgenden Code unter der CSS-Vorlage ein.

/*hide role-specific div html*/
div.anonymous, div.end_user, div.agent, div.manager {
display: none;
}

Fügen Sie den folgenden Code unter der JS-Vorlage ein.

// Show div html based on role
if (HelpCenter.user.role=="anonymous"){
 $("div.anonymous").show();
}

if (HelpCenter.user.role=="end_user"){
 $("div.end_user").show();
}

if (HelpCenter.user.role=="agent"){
 $("div.agent").show();
}

if (HelpCenter.user.role=="manager"){
 $("div.manager").show();
}

HTML je nach Gruppe des Benutzers aus- oder einblenden

Wenn Sie HTML je nach Gruppenzugehörigkeit ein-/ausblenden möchten, ist der Prozess derselbe wie oben beschrieben. Für die JS-Vorlage verwenden Sie jedoch den folgenden Code.

var groups = HelpCenter.user.groups;
for (var i = 0; i < groups.length; i++) {
 if (groups[i].name == 'L2 Support' && groups[i].isActive == true) {
 $("div.l2").show();
 }
}

Weitere Informationen zum Bearbeiten der Vorlage für Ihr Help Center finden Sie im folgenden Beitrag: Anpassen des Help-Center-Designs (Guide Professional und Enterprise)

Hinweis:jQuery ist standardmäßig nicht verfügbar. Wenn Sie in einem Design anstelle von herkömmlichem JavaScript jQuery-Anweisungen verwenden möchten, müssen Sie eine jQuery-Bibliothek importieren. Weitere Informationen finden Sie im Beitrag: Importieren oder Aktualisieren von jQuery.