Creación de paneles laterales mediante una API de cliente

Los desarrolladores pueden crear y administrar paneles laterales de la aplicación dentro de una aplicación basada en modelos mediante el uso de la API Xrm.App.sidePanes, que representa la colección de paneles laterales. Al llamar al método createPane se agrega un nuevo panel que permite la navegación a cualquier formulario de aplicación basada en modelos o página personalizada. Las páginas que se muestran en el panel lateral deben caber dentro del ancho mínimo de 300 píxeles y cambiar de tamaño a anchos mayores según el ancho del panel.

Las pestañas se enumeran en el panel lateral en dos grupos: no se puede cerrar y se puede cerrar. Dentro de cada grupo, las pestañas se enumeran en el orden en el que se crearon. El grupo superior contiene los paneles que un usuario no puede cerrar y el grupo inferior tiene paneles que el usuario puede cerrar. El grupo que no se puede cerrar se completa cuando se abre la aplicación, mientras que el grupo que se puede cerrar se agrega en función de las acciones del usuario dentro de la aplicación.

Puede usar un encabezado proporcionado por la plataforma con el título y el botón Cerrar, o puede usar un encabezado personalizado.

Puede agregar una insignia al panel lateral para indicar al usuario que un cambio necesita atención. La insignia admite tres modos: un simple punto, un recuento o una imagen. De forma predeterminada, el distintivo se borra cuando el usuario cambia al panel. Puede controlar cuándo se borra la insignia.

Los paneles laterales de la aplicación solo se admiten en los navegadores web y están prohibidos en los reproductores nativos.

Nota

Esta API no está disponible para implementaciones locales de Dynamics 365 Customer Engagement. Más información: API de cliente no admitidas en Customer Engagement (on-premises)

Ejemplos

Mostrar una página generativa en un panel lateral

Utilice el método del navigate panel con pageType: "generative" y el identificador de página generativo:

const pane = await Xrm.App.sidePanes.createPane({
    title: "My Generative Page",
    paneId: "GenPage",
    canClose: true,
    width: 400
});

await pane.navigate({
    pageType: "generative",
    pageId: "<genPageID>"
});

Para obtener información sobre cómo pasar el contexto de registro y los parámetros personalizados, vea Navegar a y desde una página generativa.

Mostrando una vista predeterminada en el panel lateral

Los ejemplos de esta sección muestran cómo mostrar la vista predeterminada de una tabla en el panel lateral de la aplicación. Una lista de reservas y una lista de productos se abren como paneles que no se pueden cerrar.

Xrm.App.sidePanes.createPane({
    title: "Reservations",
    imageSrc: "WebResources/sample_reservation_icon",
    paneId: "ReservationList",
    canClose: false
}).then((pane) => {
    pane.navigate({
        pageType: "entitylist",
        entityName: "sample_reservation",
    })
});

Xrm.App.sidePanes.createPane({
    title: "Products",
    imageSrc: "WebResources/sample_product_icon",
    paneId: "ProductList",
    canClose: false
}).then((pane) => {
    pane.navigate({
        pageType: "entitylist",
        entityName: "sample_product",
    })
});

Mostrar una fila de tabla

Este ejemplo muestra cómo mostrar una fila en el panel lateral. La fila de reserva se abre en un panel lateral donde el encabezado predeterminado está oculto y el ancho se establece en 600 píxeles.

Xrm.App.sidePanes.createPane({
    title: "Reservation: Ammar Peterson",
    imageSrc: "WebResources/sample_reservation_icon",
    hideHeader: true,
    canClose: true,
    width: 600
}).then((pane) => {
    pane.navigate({
        pageType: "entityrecord",
        entityName: "sample_reservation",
        entityId: "00aa00aa-bb11-cc22-dd33-44ee44ee44ee",
    })
});

Mostrar un recurso web

En este ejemplo se muestra cómo mostrar un recurso web en el panel lateral. Se abre una página HTML personalizada en un panel lateral donde el encabezado predeterminado está visible y el botón Cerrar está oculto.

Xrm.App.sidePanes.createPane({
                        title: "Registration Page",
                        imageSrc: "WebResources/msfp_SurveyIcon_32",
                        paneId: "RegistrationPage",
                        canClose: false
                    }).then((pane) => {
                        //navigate to webresource
                        pane.navigate({
                            pageType: "webresource",
                            webresourceName: "new_RegistrationPage",
                        })
                    });

Gestionar paneles laterales

Además de crear paneles laterales y mostrar filas o vistas dentro del panel lateral, también puede:

• Utilizar el método state para contraer el panel lateral mediante programación:

  Xrm.App.sidePanes.state = 0;

• Utilizar el método state para expandir el panel lateral mediante programación:

  Xrm.App.sidePanes.state = 1;

• Cambie las propiedades recuperando el panel seleccionado:

  var lastPane = Xrm.App.sidePanes.getSelectedPane();
lastPane.width = 400;

• Recupere un panel específico mediante el parámetro paneId:

  var reservationPane = Xrm.App.sidePanes.getPane("ReservationList");
reservationPane.close();

• Habilitar la propiedad badge en un panel:

  Xrm.App.sidePanes.getSelectedPane().badge = 1;

Use con Xrm.App.panels.loadPanel

La API Xrm.Panels.loadPanel se reemplaza por Xrm.App.sidePanes.createPane porque el primero solo admite un único panel, mientras que el segundo admite varios paneles. Para habilitar la transición de loadPanel a createPane, las dos API pueden funcionar junto con algunas limitaciones. Si solo se usa loadPanel dentro de una aplicación controlada por modelos, la experiencia sigue siendo la misma. Sin embargo, si usa tanto loadPanel como createPane, la primera limitación es que aparece un icono de marcador de posición para el loadPanel. La segunda limitación es que cuando el usuario cambia de loadPanel a createPane, la aplicación descarga el contenido de loadPanel para ahorrar memoria y lo vuelve a cargar al volver sin el estado. Este comportamiento del conmutador de pestañas es el mismo que se usa en el modo de aplicación de varias sesiones para administrar la memoria usada por la aplicación. La mayoría de los tipos de página se restauran correctamente. Sin embargo, cuando se abre un sitio externo o un recurso web, el estado no se restaura.

Al cambiar a usar createPane, puede evitar ambas limitaciones proporcionando un icono y habilitando alwaysRender. alwaysRender mantiene el contenido del panel cuando el usuario cambia de pestaña, pero consume más memoria, así que úselo con moderación.

Artículos relacionados

sidePanes (Referencia de API de cliente)
loadPanel (referencia de API de cliente)
Guía paso a paso: Escriba su primer script cliente