Você já deve ter notado que há algum tempo os aplicativos do tipo Model Driven tem um espaço na lateral direita onde em alguns momentos, dependendo do contexto, a plataforma adiciona um painel lateral. Agora por exemplo, é muito utilizada para a questão do Microsoft Copilot.
Porém você também pode utilizar também esse espaço para colocar uma página customizada, uma exibição e até mesmo um formulário.
Porém antes de mostrar como utilizar, é necessário estar atento em algumas regras:
- A largura mínima requerida do painel é de 300 pixels.
- Os painéis são agrupados em dois grupos: Os que podem ser fechados e os que não podem.
- Na ordenação eles ficam por ordem de criação e no grupos primeiros os não podem ser fechado e depois os que podem ser fechados.
- Os painéis que não podem ser fechados são carregados no momento que o aplicativo é aberto.
- Os painéis que podem ser fechados são carregados mediante ação.
Vamos iniciar então colocando painel com um webresource do tipo html para apresentar uma página.
<html>
<head>
</head>
<body>
<iframe src="https://blog.michaelfp.com.br" width="300" height="900" />
</body>
<html>Com esse meu html já incluído no Dataverse, agora devemos criar um javascript para chamar ele, o html, dentro do painel lateral. Ele será incluído no onload do formulário de contato.
function IncluirSidePane()
{
Xrm.App.sidePanes.createPane({
title: "Blog Michael", //Titulo do Painel
imageSrc: "WebResources/mfp_/blog.svg", //icone de apresentação
paneId: "PainelBlog", //Id único do painel
canClose: false // true = sim, false = não. Permite fechar
}).then((pane) => {
//navega no webresource
pane.navigate({
pageType: "webresource",
webresourceName: "mfp_/blogmichael.htm",
})
});
}E agora quando abrimos o nosso formulário podemos ver o painel lateral foi aberto, com a página.
Nosso painel está disponível para ser utilizado. Outro coisa também podemos carregar o formulário da conta relacionada ao contato. E com isso vamos utilizar o seguinte código abaixo.
function IncluirSidePaneConta(executionContext)
{
const formContext = executionContext.getFormContext();
let account = formContext.getAttribute("parentcustomerid");
if (account)
{
let accountId = account.getValue()[0].id;
let accountName = account.getValue()[0].name
Xrm.App.sidePanes.createPane(
{
title: accountName, //titulo do painel
imageSrc: "WebResources/mfp_/customer.svg", //icone
hideHeader: true, //esconde o cabeçalho
canClose: true, //permite fchar
width: 600 //largura
}).then((pane) => {
pane.navigate(
{
pageType: "entityrecord", //Navegar para registro
entityName: "account", //nome logico da entidade
entityId: accountId, //id do registros
})
});
}
}E assim que carregamos o formulário, podemos ver que também abriu o formulário da conta relacionada. Isso pode ser usado para agilizar o acesso do usuário a dados relacionados ou a outras tabelas no processo de negócio.
E ai!? Me diga o que você achou dessa funcionalidade de painéis? No seu projeto ela seria útil? Eu entendo que ela é um abordagem muito boa para diminuir o uso de abas no browser abertas pelo usuário, bem como facilitar a visualização de informações.
Eu espero que tenha gostado e até o próximo post!