O melhor visual personalizado que você nunca ouviu falar

Se você está procurando por visuais personalizados para o LuckyTemplates, vou mostrar a você um incrível que acredito que 99% de vocês nunca viram ou ouviram falar antes. Você pode assistir ao vídeo completo deste tutorial na parte inferior deste blog.

Eu me deparei com isso no , que tratava de compras, estoque e vendas. Tínhamos um conjunto de dados focado principalmente em ordens de compra, contas a receber e faturas.

Para este desafio, precisávamos retratar o tempo entre esses eventos e visualizá-los de maneira útil. Uma das coisas que me chamou a atenção inicialmente sobre esse desafio foi que seria ótimo se pudéssemos mostrar os diferentes eventos em uma linha do tempo horizontal com escala de data. Eu sabia que não havia como fazer isso nos visuais básicos do LuckyTemplates.

Então, fui ao mercado AppSource e procurei visuais personalizados que pudessem fazer cronogramas horizontais. Eu encontrei algo chamado Query On Timeline .

Ele tem algo que eu estava procurando - uma barra com datas e gráficos e a capacidade de incluir algumas informações adicionais abaixo da linha, como datas de ordem de compra, datas de conhecimento de embarque e datas de fatura.

Existem outras maneiras de usar isso, como este estilo Kanban.

Você também pode usar a versão reduzida sem os recursos visuais.

Ou escolha o estilo cascata.

Você pode até optar pelo estilo picture-in-line.

Existem muitas maneiras de fazer isso. Quando comecei a investigar isso, descobri que não havia documentação sobre isso. Surpreendentemente, não havia nada sobre isso na comunidade da Microsoft, onde quase sempre você pode encontrar algo que responda à sua pergunta.

Eu tive que explorar este principalmente por conta própria. Neste blog, quero mostrar o que fiz com ele e orientá-lo sobre como usá-lo, caso esteja interessado em aplicá-lo a seus próprios relatórios.

Esta foi a minha entrada para o Desafio #7 usando o visual Query on Timeline.

O visual inferior esquerdo tem esta chave: o laranja era para as datas dos pedidos de compra, o azul médio eram as contas a receber e o azul escuro eram as datas das faturas.

Cada uma das ordens de compra possui vários materiais com diferentes datas de entrega e diferentes datas de fatura. Tudo é totalmente dinâmico então se você selecionar em outro pedido de compra, pode ver que o visual muda e pode filtrar por material.

Você também pode sair do foco para ver toda a gama de datas associadas às diferentes contas a receber e faturas.

Se você clicar em qualquer um desses ícones, ele o levará à página deles. Por exemplo, se você clicar na fatura…

…ele o levará a um modelo de fatura simulada.

Da mesma forma, se você for para o pedido de compra, ele o levará a um modelo de pedido de compra. A mesma coisa acontece para entregas e conhecimentos de embarque.

Índice

• Principais etapas para obter um dos melhores visuais personalizados para o LuckyTemplates
• Preparando seus visuais
• Preparando seu modelo de dados
• Formatando os visuais personalizados para o LuckyTemplates
• Conclusão

Principais etapas para obter um dos melhores visuais personalizados para o LuckyTemplates

Este é um visual sofisticado e há várias etapas importantes para que funcione em seus próprios relatórios. A primeira é preparar seus recursos visuais .

A segunda etapa é carregar os visuais em um site de hospedagem pública onde você pode obter facilmente as URLs para manipulação no LuckyTemplates.

Você também precisa configurar sua URL complementar , que, neste caso, são os modelos simulados que vinculamos aos ícones.

Em seguida, você precisa configurar seu modelo de dados de maneira consistente com os requisitos da Consulta na linha do tempo .

Ao contrário de outros visuais que são flexíveis ao lidar com uma variedade de modelos de dados, este requer algumas limitações estritas sobre como você estrutura seu modelo.

Você deve levar isso em consideração com antecedência e, em seguida, configurar o próprio visual. Tem muita configurabilidade, algumas delas não sendo intuitivas.

Preparando seus visuais

Vamos começar com a Etapa 1. Eu uso um site chamado Flat Icon para meus recursos visuais.

Existem muitos bons sites de ícones; isso acontece de ser o que eu uso. O que fiz foi selecionar três ícones, um para compras, entregas e faturas.

Eu alterei esses ícones usando meu tema de cores. Se você está curioso para saber como fazer com que eles correspondam ao seu tema de cores, confira meu vídeo sobre como organizar códigos hexadecimais fáceis para o LuckyTemplates .

Depois de configurar suas fotos, imagens ou ícones, faça o download e envie-os para um site de hospedagem de imagens. Mais uma vez, há muitos bons. O que eu uso chama-se ImgBB , que é um site gratuito e fácil de usar.

Os ícones que usei em minha entrada para a linha do tempo de consulta são os ícones laranja, azul médio e azul escuro.

A chave aqui é selecionar os ícones necessários e selecionar Obter códigos incorporados .

Isso permitirá que você veja os links do visualizador .

Clique no botão suspenso e vá para Links diretos.

Em seguida, copie esses links em um bloco de notas. A chave aqui é obter os URLs dessas imagens hospedadas publicamente.

Isso é semelhante ao que você fará para seus URLs suplementares. Nesse caso, o site de onde procedi se chama Template Labs .

Copiei as URLs do pedido de compra, do conhecimento de embarque e dos modelos de fatura em um bloco de notas. Vamos lidar com isso da mesma forma que vamos lidar com as URLs dos ícones.

Preparando seu modelo de dados

A próxima coisa a fazer é preparar nosso modelo de dados. Mostrarei como a maioria das pessoas no desafio lidou com seus modelos de dados. Esta é a apresentação de Mudassir Ali, e ele montou uma entrada maravilhosa para este desafio. Eu realmente encorajo você a dar uma olhada nisso.

Há muitos recursos visuais e dicas de ferramentas realmente interessantes incorporados aqui, bem como algumas técnicas interessantes. Para conseguir isso, ele construiu um modelo de dados com três tabelas de fatos, o que é uma abordagem perfeitamente adequada para esse desafio.

Essa foi uma boa maneira de fazer os cálculos e chegar às descobertas analíticas necessárias. Mas este modelo não suportará a abordagem de linha do tempo.

Minha apresentação foi basicamente muito trabalho de consulta avançada para obter essas três tabelas de fatos em uma tabela de transação de ponta a ponta.

No fórum, podemos escrever extensivamente sobre como criamos nossas entradas. Você pode ler para ver como montei a tabela de transações de ponta a ponta em detalhes.

Se olharmos para a tabela de transações, temos várias datas: data do pedido de compra, data da fatura, data das contas a receber e outras datas calculadas.

O que é necessário para a Query On Timeline é uma única coluna de data. Então, depois de juntar esta tabela de transação única, eu a desativei e, em seguida, vinculei a versão não dinâmica ao meu modelo de dados. Observe que o título diz pivô, mas na verdade não é pivô.

Se dermos uma olhada na tabela de transações novamente, veremos a coluna de categoria de data e a única coluna de data .

A coluna Categoria de data foi basicamente reduzida em três categorias principais: solicitado , recebido e faturado . Mas também existem máximos e mínimos locais e globais.

Também temos a URL da Ordem de Compra (PO URL).

Se olharmos novamente para a tabela de transações, veremos as colunas calculadas para essas URLs, que são instruções que analisam a categoria de dados e atribuem a URL do site de hospedagem de imagens ao ícone apropriado.

Fazemos a mesma instrução SWITCH semelhante para atribuir o modelo, que também é baseado no campo Categoria de data.

Foi assim que atribuí o ícone e o modelo adequados para cada um dos registros.

Se voltarmos à tabela não dinâmica, veremos a Coluna de data única , a Categoria de data e os dois campos de URL para pedidos de compra e modelos.

Isso é tudo o que precisamos para configurar a linha do tempo corretamente.

Se entrarmos em nosso visual e nos campos principais aqui, o título é a categoria de data não dinâmica que mostrei a você.

A Data/Hora pode ser uma de duas coisas: a data da tabela de fatos na versão não dinâmica ou a data validada na tabela Date. Qualquer um trabalha aqui.

A URL opcional é a URL do modelo que está vinculada ao clique no ícone.

A Imagem opcional é o campo URL da ordem de compra.

Agora, se dermos uma olhada no campo PO URL, precisamos definir a Categoria de dados em URL de imagem, pois o padrão será automaticamente texto. Se você mantiver como texto, as imagens não serão renderizadas corretamente.

Se você configurá-lo para o campo URL, as imagens virão corretamente do site de hospedagem de imagens.

Essas etapas são basicamente como você pode obter os campos fundamentais configurados corretamente no visual.

Formatando os visuais personalizados para o LuckyTemplates

Agora, quero apenas orientá-lo sobre algumas das formatações que fiz para o relatório. O primeiro que é relevante é Stagger Text , que cria um efeito cascata.

Se desligarmos o Stagger Text, o que obtemos é tudo na mesma linha. Mas quando você tem vários campos relativamente próximos uns dos outros, eles simplesmente se sobrepõem e se tornam ilegíveis. É por isso que escalonamos o texto no cálculo automático.

A função Text on Top permite mover o texto em cascata abaixo para acima da linha.

Os títulos em negrito permitem destacar o título em negrito. Há também alguma formatação de data que você pode fazer no eixo X. Você pode mostrar ou não as datas no eixo.

Os interruptores Manual Scale Date também são importantes porque, se você ativá-los, o ponto inicial e o ponto final permanecerão constantes.

Isso precisa estar ativado porque temos um período fixo de tempo para os dados. Queremos mostrar em relação a esse ponto fixo no tempo onde esses diferentes eventos ocorrem.

Se desativarmos isso, o último ponto de dados em cada pedido de compra se tornará o ponto final dessa linha. Como você pode ver, o ponto final é março.

Nesse caso, queremos ativar o dimensionamento manual e iniciá-lo em 1º de janeiro, que é o início do conjunto de dados, e finalizá-lo em 30 de junho, que é o final do conjunto de dados.

A escala manual de pixels define a largura da linha. A única razão pela qual ativamos isso foi criar uma lacuna para que não corresse e criar uma barra de rolagem na parte inferior.

As propriedades de elemento único são úteis se você tiver apenas um evento por categoria.

Como ele não possui formatação condicional personalizada completa , você pode definir a fonte, a cor e as propriedades de cada categoria com esse recurso. Ele só permite que você faça o primeiro, enquanto os demais estão na cor padrão. Esperançosamente, em uma versão posterior, eles terão a formatação condicional completa.

As configurações de imagem permitem dimensionar o tamanho de suas imagens e manter o espaçamento adequado.

O estilo permite escolher entre vários estilos: estilo de barra, estilo de linha, estilo de cascata e estilo Kanban.

Estamos usando o estilo Barra, mas para outros aplicativos, você pode querer experimentar e brincar com esse recurso.

Esse visual personalizado também tem uma capacidade dinâmica de mostrar a data de hoje, mas não é relevante nesse caso porque não se estende ao comprimento de nossos dados.

Ele também tem a capacidade de baixar as datas como um arquivo de calendário do Google Calendar ou Outlook.

Conclusão

Este é um exemplo de como configurar visuais personalizados para o LuckyTemplates. É necessária muita experimentação para obter a aparência exata, mas acho que fornece uma maneira valiosa de exibir os dados.

Esperançosamente, você achou este tutorial útil e encontrou algo que pode querer experimentar e brincar.

Assine a LuckyTemplates TV se ainda não o fez. Temos muitos novos conteúdos de vídeo saindo em breve.