¿Cómo se puede ocultar o mostrar HTML en función del rol o el grupo del usuario?

Pregunta

¿Cómo se puede ocultar o mostrar HTML según el rol o el grupo del usuario?

Respuesta

Descargo de responsabilidad: Este artículo se ofrece con fines de instrucción únicamente. Zendesk no ofrece soporte para el código ni lo garantiza. Publique cualquier problema que tenga en la sección de comentarios o intente buscar una solución en Internet.

Haga clic en cada una de las dos secciones a continuación si desea información sobre cómo ocultar o mostrar HTML:

Según el rol del usuario

Según el grupo de usuarios

Ocultar o mostrar HTML según el rol del usuario

Si la información que está ocultando es delicada, puede que esta no sea una solución viable para usted, ya que el texto completo se puede mostrar en Viewing Source (ver texto original) en el navegador.

A continuación se muestra un ejemplo de código para implementar en el Centro de ayuda y un screencast que muestra dónde colocarlo.

<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>

Inserte el siguiente código bajo la plantilla de CSS:

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

Inserte el siguiente código bajo la plantilla de JS:

// 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();
}

Ocultar o mostrar HTML según el grupo del usuario

Si desea mostrar u ocultar HTML en función de grupos, el proceso es el mismo que se describe en los pasos para un rol de usuario. Sin embargo, en la plantilla de JS, utilice el código siguiente.

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();
 }
}

Si desea más información sobre cómo editar la plantilla de su Centro de ayuda, consulte el artículo: Personalización del tema del Centro de ayuda (Guide Professional y Enterprise).

Nota: jQuery no se proporciona de manera predeterminada. Asegúrese de importar una biblioteca jQuery si desea usar declaraciones jQuery en un tema en lugar de JavaScript sin formato. Para obtener más información, consulte el artículo: Importar o actualizar jQuery.