Mudanças entre as edições de "Cadastro de Layouts"

De MSTECH wiki
Ir para: navegação, pesquisa
 
(2 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
==GERENCIAMENTO==
+
==Gerenciamento==
 
Para acessar a tela de gerenciamento dos layouts, basta acessar o menu “Layouts”.  
 
Para acessar a tela de gerenciamento dos layouts, basta acessar o menu “Layouts”.  
  
Linha 10: Linha 10:
 
Clicando no nome do layout é possível editar os itens já cadastrados.
 
Clicando no nome do layout é possível editar os itens já cadastrados.
  
==CADASTRO/EDIÇÃO==
+
==Cadastro/Edição==
  
 
Ao clicar no botão adicionar ou no nome do layout na listagem, será exibida a tela de cadastro/edição.
 
Ao clicar no botão adicionar ou no nome do layout na listagem, será exibida a tela de cadastro/edição.
Linha 27: Linha 27:
 
Botão para cancelar o cadastro/edição e voltar para a listagem de layouts.
 
Botão para cancelar o cadastro/edição e voltar para a listagem de layouts.
  
==PADRÃO DO HTML==
+
==Padrão do HTML==
  
 
O Html devará começar com a tag html <div>, podendo ou não possuir uma classe associado a ela.
 
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>
 
<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.
 
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.
  
Linha 40: Linha 40:
 
<syntaxhighlight lang="html" line="1" >
 
<syntaxhighlight lang="html" line="1" >
 
<div class="my-layout1">
 
<div class="my-layout1">
<div class="mL-tab-main">
+
  <div class="mL-tab-main">
<h1>Meu layout</h1>
+
  <h1>Meu layout</h1>
<div class="mL-container">
+
      <div class="mL-container">
<div class="myClass" id="1"></div>
+
        <div class="myClass" id="1"></div>
<div class="myClass" id="2"></div>
+
        <div class="myClass" id="2"></div>
<div class="myClass" id="6"></div>
+
        <div class="myClass" id="6"></div>
<div class="myClass" id="15"></div>
+
        <div class="myClass" id="15"></div>
</div>
+
      </div>
</div>
+
  </div>
 
</div>
 
</div>
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
== Página Inicial ==
 +
 +
[[InfoCenter]]

Edição atual tal como às 12h09min de 5 de janeiro de 2017

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