Cadastro de Layouts

Gerenciamento

Para acessar a tela de gerenciamento dos layouts, basta acessar o menu “Layouts”.

Dentro da página existe uma listagem de todos os layouts cadastrados.

Nesta tela é possível o cadastro de novos layouts através do botão de adicionar que redirecionará para o formulário de cadastro.

Na listagem possui o ícone de exclusão que excluirá o layout desejado.

Clicando no nome do layout é possível editar os itens já cadastrados.

Cadastro/Edição

Ao clicar no botão adicionar ou no nome do layout na listagem, será exibida a tela de cadastro/edição.

Nesta tela é possível definir um nome para o layout e os arquivos que farão parte dele.

Extensões de arquivos suportados para upload: .css, .html e .js.

Ao ser escolhido o arquivo, temos as opções disponíveis na grid:

• Trocar opção para substituir o arquivo escolhido
• Excluir opção para excluir o arquivo escolhido
• Página principal: opção para definir qual será o primeiro arquivo html a ser carregado no painel (para caso de layouts que possuam n arquivos html).

Botão para salvar o cadastro/edição.

Botão para cancelar o cadastro/edição e voltar para a listagem de layouts.

Padrão do HTML

O Html devará começar com a tag html

, podendo ou não possuir uma classe associado a ela.

1 <div class="my-1-layout"> </div>

A div aonde o indicador será exibido deverá possuir o atributo id, onde o id deverá ser o Id do indicador na tabela “Indicator”. Este id poderá também ser identificado na área de configurações do indicador (Menu Indicadores) ao lado do nome do indicador. Necessariamente, o indicador deve ser vinculado com o painel antes de ser utilizador o layout personalizado.

Importante: O layout não poderá conter mais de uma div com o mesmo id (não repetir o mesmo indicador no mesmo layout).

Segue abaixo um exemplo de layout .html:

 1 <div class="my-layout1">
 2    <div class="mL-tab-main">
 3    <h1>Meu layout</h1>
 4       <div class="mL-container">
 5          <div class="myClass" id="1"></div>
 6          <div class="myClass" id="2"></div>
 7          <div class="myClass" id="6"></div>
 8          <div class="myClass" id="15"></div>
 9       </div>
10    </div>
11 </div>

Página Inicial

InfoCenter