Personalización de la consola Sitios web (IU clásica)

Adición de una columna personalizada a la consola Siteadmin (Siteadmin)

La consola Administración de sitios web se puede ampliar para mostrar columnas personalizadas. La consola se basa en un objeto JSON que se puede ampliar creando un servicio OSGI implementando el ListInfoProvider interfaz. Este servicio modifica el objeto JSON que se envía al cliente para crear la consola.

Este tutorial paso a paso explica cómo mostrar una nueva columna en la consola de administración de sitios web implementando el ListInfoProvider interfaz. Consiste en los siguientes pasos:

1. Creación del servicio OSGI e implementación del paquete que lo contiene en el servidor AEM.
2. (opcional) Prueba del nuevo servicio emitiendo una llamada JSON para solicitar el objeto JSON que se utiliza para crear la consola.
3. Visualización de la nueva columna ampliando la estructura de nodos de la consola en el repositorio.

Creación del servicio OSGI

La variable ListInfoProvider La interfaz define dos métodos:

• updateListGlobalInfo, para actualizar las propiedades globales de la lista,
• updateListItemInfo, para actualizar un solo elemento de lista.

Los argumentos para ambos métodos son:

• request, el objeto de solicitud HTTP de Sling asociado,
• info, el objeto JSON que se va a actualizar, que es, respectivamente, la lista global o el elemento de lista actual,
• resource, un recurso de Sling.

La implementación de muestra a continuación:

• Añade un starred para cada elemento, que es true si el nombre de la página empieza por un e y false en caso contrario.

• Añade un starredCount , que es global para la lista y contiene el número de elementos de la lista de inicio.

Para crear el servicio OSGI:

1. En CRXDE Lite, crear un paquete.
2. Agregue el código de muestra siguiente.
3. Construya el paquete.

El nuevo servicio está funcionando.

package com.test;

import com.day.cq.commons.ListInfoProvider;
import com.day.cq.i18n.I18n;
import com.day.cq.wcm.api.Page;
import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Service;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.commons.json.JSONException;
import org.apache.sling.commons.json.JSONObject;

@Component(metatype = false)
@Service(value = ListInfoProvider.class)
public class StarredListInfoProvider implements ListInfoProvider {

    private int count = 0;

    public void updateListGlobalInfo(SlingHttpServletRequest request, JSONObject info, Resource resource) throws JSONException {
        info.put("starredCount", count);
        count = 0; // reset for next execution
    }

    public void updateListItemInfo(SlingHttpServletRequest request, JSONObject info, Resource resource) throws JSONException {
        Page page = resource.adaptTo(Page.class);
        if (page != null) {
            // Consider starred if page name starts with 'e'
            boolean starred = page.getName().startsWith("e");
            if (starred) {
                count++;
            }
            I18n i18n = new I18n(request);
            info.put("starred", starred ? i18n.get("Yes") : i18n.get("No"));
        }
    }

}

Prueba del nuevo servicio

Cuando abre la consola Administración de sitios web y navega por su sitio, el explorador emite una llamada ajax para obtener el objeto JSON utilizado para crear la consola. Por ejemplo, al navegar hasta el /content/geometrixx , se envía la siguiente solicitud al servidor de AEM para crear la consola:

https://localhost:4502/content/geometrixx.pages.json?start=0&limit=30&predicate=siteadmin

Para asegurarse de que el nuevo servicio se esté ejecutando después de haber implementado el paquete que lo contiene:

1. Apunte el navegador a la siguiente URL:
   https://localhost:4502/content/geometrixx.pages.json?start=0&limit=30&predicate=siteadmin

2. La respuesta debe mostrar las nuevas propiedades de la siguiente manera:

Visualización de la nueva columna

El último paso consiste en adaptar la estructura de nodos de la consola Administración de sitios web para mostrar la nueva propiedad de todas las páginas de Geometrixx superponiendo /libs/wcm/core/content/siteadmin. Proceda de la siguiente manera:

1. En el CRXDE Lite, cree la estructura de nodos /apps/wcm/core/content con nodos de tipo sling:Folder para reflejar la estructura /libs/wcm/core/content.

2. Copiar el nodo /libs/wcm/core/content/siteadmin y péguelo a continuación /apps/wcm/core/content.

3. Copiar el nodo /apps/wcm/core/content/siteadmin/grid/assets a /apps/wcm/core/content/siteadmin/grid/geometrixx y cambia sus propiedades:

   • Eliminar pageText

   • Establezca pathRegex a /content/geometrixx(/.*)?
     Esto hará que la configuración de cuadrícula esté activa para todos los sitios web de geometrixx.

   • Establezca storeProxySuffix a .pages.json

   • Edite el storeReaderFields propiedad multivalor y agregue la variable starred valor.

   • Para activar la funcionalidad MSM, agregue los siguientes parámetros MSM a la propiedad multi-String storeReaderFields:

     • msm:isSource
     • msm:isInBlueprint
     • msm:isLiveCopy

4. Agregue un starred nodo (de tipo nt:unstructured) debajo /apps/wcm/core/content/siteadmin/grid/geometrixx/columns con las siguientes propiedades:

   • dataIndex: starred de tipo String

   • header: Starred de tipo String

   • xtype: gridcolumn de tipo String

5. (opcional) Suelte las columnas que no desee mostrar en /apps/wcm/core/content/siteadmin/grid/geometrixx/columns

6. /siteadmin es una ruta de vanidad que, de forma predeterminada, señala a /libs/wcm/core/content/siteadmin.
   Para redirigir esto a su versión de siteadmin en /apps/wcm/core/content/siteadmin definir la propiedad sling:vanityOrder tener un valor superior al definido en /libs/wcm/core/content/siteadmin. El valor predeterminado es 300, por lo que es adecuado cualquier valor superior.

7. Vaya a la consola Administración de sitios web y vaya al sitio de Geometrixx:
   https://localhost:4502/siteadmin#/content/geometrixx.

8. La nueva columna denominada Starred está disponible y muestra la información personalizada de la siguiente manera:

Paquete de muestra

El resultado de este tutorial está disponible en la Personalización de la consola de administración de sitios web paquete en Package Share.

Recursos de Business.Adobe.com

Ecommerce Integrations Content Insights Targeted Content Customer Communications Content Intelligence Mobile Forms