Secciones personalizadas de Back-End | Personalización Avanzada | Documentación WS.WebTV | WebTV Solutions

Imprimir

Como desarrollador, puede necesitar añadir nuevas secciones al Administrador de Contenidos para mostrar información adicional, o para gestionar otros datos diferentes a los gestionados nativamente por el sistema. Desde WS.WebTV v3.1 (release 50) es posible añadir secciones al Back-End cuando lo desee.

¿Qué es una sección personalizada de Back-End?
Bueno, es como un lienzo en blanco. Son páginas donde el sistema reemplaza el título, menú y otros datos genéricos del CMS (como textos de los packs de idioma). Como estas páginas son HTML y no contienen código PHP, necesitará "rellenarlas" usando AJAX. Es libre de añadir todos los scripts y elementos HTML que necesite a estas páginas.
NOTA: Cuando sea posible, recomendamos utilizar estructuras de HTML (formularios, campos, listas, tablas, ...) similares a las usadas en otras páginas/plantillas del Back-End de manera que el look de las nuevas páginas sea consistente con el resto del Administrador de Contenidos.

Explicando con un ejemplo:
La siguiente imagen muestra una sección personalizada de Back-End:


Para el ejemplo anterior, definimos una sección de Back-End en el archivo config/Config.inc.php añadiendo el siguiente código:

$CUSTOM_BACKEND_SECTIONS["miSeccion"] = array( 
											"required_access_level"  	=> 1, // 0: Webmaster, 1: Admin, 2: Autor, 3: Colaborador
											"title"						=> "Mi sección",
											"template"					=> "_sample_custom_backend_section.tpl"
											);

Desglosemos el ejemplo:
- $CUSTOM_BACKEND_SECTIONS es un arreglo de secciones. Puede añadir cualquier número de secciones al mismo.

- "miSeccion" es el nombre de la sección (caracteres ASCII - sin acentos, espacios, ni otros signos de puntuación) desde la perspectiva del sistema (y URL). Es el nombre del índice de un nuevo arreglo que contendrá la definición de la sección y también es utilizado en la URL para acceder a la misma. En el caso de este ejemplo, la URL para acceder a la sección sería:
     <WEBTV_URL>/index.php/admin/miSeccion

- El array() asignado contiene la definición de la sección:
     - "required_access_level": Este es el nivel de acceso que un usuario registrado debe tener para poder acceder a la sección.
     - "title": Este es el título para la página de la sección. Si el título contiene caracteres no-ASCII entonces introduzca las entidades HTML como en el ejemplo ("Mi sección"= "Mi secci&oacute;n").
     - "template": Este es el nombre del archivo de la plantilla, localizado en el directorio public/backend . Tenga presente que, para su referencia, hemos incluido el archivo "_sample_custom_backend_section.tpl" en el directorio public/backend .

Cómo enlazar la sección en los menús?
En caso de que necesite añadir un enlace a la sección en la pantalla de inicio y menú superior, puede hacerlo añadiendo el siguiente código Javascript en
Configuración > General > Código HTML Adicional (CMS) / Sección </body>:

<script>
     var accLvl = parseInt("{k.user.accessLevel}");
     var customBackEndSectionURL = "myCustomSection"; // debe coincidir con el índice utilizado en la variable de configuración $CUSTOM_BACKEND_SECTIONS 
     var customBackEndSectionTitle = "Mi sección"; // este es el título del botón (debe ser lo más corto posible)
     if ( accLvl<=1 ) // sólo añadimos el botón si el usuario es Webmaster o Admin
     {
       // añadimos el botón en la pantalla de inicio ...
       if ( $(".homeButtonsCont").length) $(".homeButtonsCont ul").append('<li><a href="'+SITE_BASE_URL+'index.php/admin/'+customBackEndSectionURL+'/" class="homeButton"><img src="'+SITE_BASE_URL+'public/backend/images/pixel.gif" class="iconSettings" alt=""> '+customBackEndSectionTitle+'</a></li>');
       // añadimos el botón en el menú superior ...
       if ( $(".moreOptions").length) $(".moreOptions ul").append('<li><a href="'+SITE_BASE_URL+'index.php/admin/'+customBackEndSectionURL+'/" id="'+customBackEndSectionURL+'"> '+customBackEndSectionTitle+'</a></li>');
     }
</script> 

NOTA: En este ejemplo utilizamos el ícono de "Ajustes" (clase "iconSettings").

El resultado sería como se muestra: