Criando painéis laterais usando uma API de cliente

Os desenvolvedores podem criar e gerenciar painéis do lado do aplicativo em um aplicativo controlado por modelos usando a API Xrm.App.sidePanes , que representa a coleção de painéis laterais. Chamar o método createPane adiciona um novo painel que permite a navegação para qualquer formulário de aplicativo controlado por modelo ou página personalizada. As páginas exibidas no painel lateral devem caber dentro da largura mínima de 300 pixels e redimensionar para larguras maiores com base na largura do painel.

As guias são listadas no painel lateral em dois grupos: não fecháveis e fecháveis. Em cada grupo, as guias são listadas na ordem em que foram criadas. O grupo superior contém os painéis que um usuário não pode fechar, e o grupo inferior tem painéis que o usuário pode fechar. O grupo não fechável é preenchido quando o aplicativo é aberto, enquanto o grupo fechável é adicionado com base nas ações do usuário dentro do aplicativo.

Você pode usar um cabeçalho fornecido pela plataforma com o título e o botão Fechar ou pode usar um cabeçalho personalizado.

Você pode adicionar um selo ao painel lateral para indicar ao usuário que uma alteração precisa de atenção. O emblema dá suporte a três modos: um ponto simples, uma contagem ou uma imagem. Por padrão, o indicador é limpo quando o usuário alterna para o painel lateral. Você pode controlar quando o emblema é removido.

Os painéis laterais do aplicativo só têm suporte em navegadores da Web e não são permitidos em players nativos.

Examples

Exibir uma página generativa em um painel lateral

Use o método pageType: "generative" do painel com navigate e a ID da página generativa:

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 obter informações sobre como passar contexto de registro e parâmetros personalizados, consulte Navegar de e para uma página gerativa.

Mostrando um modo de exibição padrão no painel lateral

Os exemplos nesta seção mostram como exibir a exibição padrão de uma tabela no painel lateral do aplicativo. Uma lista de reservas e uma lista de produtos são abertas como painéis não fecháveis.

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 uma linha de tabela

Este exemplo mostra como exibir uma linha no painel lateral. A linha de reserva é aberta em um painel lateral em que o cabeçalho padrão está oculto e a largura é definida como 600 pixels.

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 um recurso da Web

Este exemplo mostra como exibir um recurso da Web no painel lateral. Uma página HTML personalizada é aberta em um painel lateral em que o cabeçalho padrão está visível e o botão fechar 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",
                        })
                    });

Gerenciando painéis laterais

Além de criar painéis laterais e mostrar linhas ou exibições no painel lateral, você também pode:

• Use o método state para recolher o painel lateral programaticamente:

  Xrm.App.sidePanes.state = 0;

• Use o método state para expandir o painel lateral programaticamente:

  Xrm.App.sidePanes.state = 1;

• Altere as propriedades recuperando o painel selecionado:

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

• Recupere um painel específico usando o paneId parâmetro:

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

• Habilite a propriedade de badge em um pain:

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

Usar com Xrm.App.panels.loadPanel

A API Xrm.Panels.loadPanel está sendo substituída por Xrm.App.sidePanes.createPane porque a primeira dá suporte apenas a um único painel, enquanto a última dá suporte a vários painéis. Para habilitar a transição de loadPanel para createPane, as duas APIs podem trabalhar em conjunto com algumas limitações. Se você usar somente loadPanel dentro de um aplicativo controlado por modelos, a experiência permanecerá a mesma. No entanto, se você usar ambos loadPanel e createPane, a primeira limitação é que um ícone de espaço reservado será exibido para o loadPanel. A segunda limitação é que, quando o usuário alterna do loadPanel para o createPane, o aplicativo descarrega o conteúdo de loadPanel para economizar memória e o recarrega ao alternar de volta, sem o estado. Esse comportamento de alternância de guia é o mesmo comportamento usado no modo de aplicativo de várias sessões para gerenciar a memória usada pelo aplicativo. A maioria dos tipos de página restaura corretamente. No entanto, quando um site externo ou recurso da Web é aberto, o estado não é restaurado.

Ao passar a usar createPane, você pode evitar ambas as limitações fornecendo um ícone e habilitando alwaysRender. O alwaysRender mantém o conteúdo do painel quando o usuário alterna, mas usa mais memória, portanto, use-o com moderação.

Artigos relacionados

sidePanes (referência da API do cliente)
loadPanel (Referência de API do Cliente)
Passo a passo: Escreva seu primeiro script de cliente