Exibir código-fonte para 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 <div>, podendo ou não possuir uma classe associado a ela.
<syntaxhighlight lang="html" line="1" >
<div class="my-1-layout"> </div>
</syntaxhighlight>
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:
<syntaxhighlight lang="html" line="1" >
<div class="my-layout1">
   <div class="mL-tab-main">
   <h1>Meu layout</h1>
      <div class="mL-container">
         <div class="myClass" id="1"></div>
         <div class="myClass" id="2"></div>
         <div class="myClass" id="6"></div>
         <div class="myClass" id="15"></div>
      </div>
   </div>
</div>
</syntaxhighlight>

== Página Inicial ==

[[InfoCenter]]