Language	Title	Date
en	-	-
fr	-	-
es	-	-

Crear un menú basado en los derechos del usuario y en un archivo XML

Última modificación por Aurelie Bertrand el 2025/02/07 10:22

Introducción
Paso 1: Configuración del archivo XML
Paso 2: Lectura del archivo y construcción del menu
Paso 3: Creación del contenedor del menú
Paso 4: Estilizar el menú

Introducción

A menudo se requiere la creación de un menú basado en derechos. Aquí hay un enfoque genérico para crear este menú.
Este enfoque permite un menú rápido para configurar y diseñar.

Paso 1: Configuración del archivo XML

Crear un archivo XML que contendrá toda la configuración de los menús. Este archivo se puede crear con la ayuda de un editor de código como Visual Studio Code oNotepad++.
Dentro de este archivo, copiar y adaptar el código provisto a continuación.

Suponemos que hay un menú principal y submenús por cartera (o por rol).

⚠ Este archivo no puede contener el carácter &

Guardar este archivo como menus.xml
Vaya en el editor de cuadros de mando
Abrir el administrador de imágenes
Sube este archivo menus.xml como lo haría por una imagen.

Paso 2: Lectura del archivo y construcción del menu

Abrir el editor Javascript
Agregar las líneas de código a continuación. Estas líneas contienen las funciones de construcción del menú.

ddCtrl.addCurrentPageChangeListener(function(currentPage,bFirstTime)
{
   if(currentPage.indexOf("Inicio")){ // Se supone que la página del menú lleve la palabra 'Inicio' en su nombre.
       var contentMenu = "<table class=\"custom-menu\">";
       var userRoles = ddCtrl.getUserRoles();
       var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
           if (this.readyState == 4 && this.status == 200) {
                console.log(xhttp);
                menus = xhttp.responseXML.getElementsByTagName("menu");
   for(i = 0; i < menus.length; i++){
                   var menuRole= menus[i].getAttribute("role");
                   var menuTitle = menus[i].getAttribute("title");
                   var menuClass = menus[i].getAttribute("class");

                   if(ddCtrl.getCurrentRole() == menuRole)
                    {
                       var sections = menus[i].getElementsByTagName("section");
                       for(var j = 0; j < sections.length; j++)
                        {
                           var sectionTitle = sections[j].getAttribute("title");
                           var sectionClass = sections[j].getAttribute("class");
                           var tuiles = sections[j].getElementsByTagName("link");
                           var contentSection = "";
                           var hasAtLeastOne = false;

                            contentSection += "<tr>";
                            contentSection += "<td colspan=\"" + tuiles.length + "\" class=\"" + sectionClass + "\">" + sectionTitle + "</td>";
                            contentSection += "</tr>";

                            contentSection += "<tr>";
                           for(var k = 0; k < tuiles.length; k++)
                            {
                               var tuileTitle = tuiles[k].getAttribute("name");
                               var tuileInfobulle = tuiles[k].getAttribute("title");
                               var tuileClass = tuiles[k].getAttribute("class");
                               var tuileImg = tuiles[k].getAttribute("img");
                               var tuileDestination = tuiles[k].getAttribute("idPage");
                               var tuileRole = tuiles[k].getAttribute("role");
                               if(userRoles.includes(tuileRole) || tuileRole == "")
                                {
                                    contentSection += "<td class=\"" + tuileClass + "\" title=\"" + tuileInfobulle + "\" onClick=\"javascript:ddCtrl.changePage(\'" + tuileDestination + "\');\"><img src=\"" + tuileImg +"\"/><br/>" + tuileTitle + "</td>";
                                    hasAtLeastOne = true;
                                }
                            }
                            contentSection += "</tr>";

                           if(hasAtLeastOne)
                            {
                                contentMenu += contentSection;
                            }
                        }
                       break;
                    }
                }
                contentMenu += "</table>";
                console.log("menu" + menuRole)
               document.getElementById("menu" + menuRole).innerHTML = contentMenu;
            }
        }
        xhttp.open("GET", "./file/config/web/public/menus.xml", true);
        xhttp.send();
    }
});

Comportamiento de esta función:

En una página llamada Inicio (para cada rol), la función buscará el archivo “menus.xml”. En este archivo, miraremos todos los menús para encontrar el que tiene el rol igual al rol de la billetera actual.
Para cada sección, mostraremos un título y todos los mosaicos que componen esa sección.

⇒ La sección solo se muestra si el usuario tiene al menos 1 mosaico visible (para el cual tiene derechos y un rol no vacío).
Tenga cuidado, si desea que un mosaico haga referencia a una página de otro portafolio, coloque el identificador del rol en el enlace. De lo contrario, el mosaico se mostraría pero no se podría hacer clic en él.

Paso 3: Creación del contenedor del menú

En el editor de cuadros de mando, vaya al rol que tendrá un menú
Cree una página cuyo nombre contenga la palabra "Inicio"
Inserte un editor de texto vacío y ponga este contenido: <div id = ”menuXXX”> </div> con XXX el identificador del rol actual.
Recuerde eliminar el borde, el menú y el encabezado

Paso 4: Estilizar el menú

A continuación, indicamos las clases que se pueden usar en el CSS para diseñar el menú.

.custom-section-title{
  font-size: 22px !important;
}
.custom-tuile{
   border-radius: 10px;
   border: 1px solid black;
   text-align: center;
   font-weight: bold;
}
.custom-tuile:hover{
   background-color: #E6E6E6;
}
.custom-tuile:active{
   opacity: 0.6;
}
.custom-menu{
   vertical-align: center;
}