Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.


Na tela inicial do TOTVS Pages são apresentadas todas as possibilidades de gerenciamento das páginas. As páginas presentes nessa tela são centralizadas por empresa e ficam disponíveis em um único ponto do aplicativo.

São separadas entre três listas:

  • Últimos editados
  • Em edição 
  • Publicados

Abaixo estão listadas as ações disponíveis:

Índice
exclude.*ndice




Criar página


01. Na tela inicial, acionar Criar página.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Será aberta uma pop-up com as opções de templates, e o usuário deve optar por configurar sua página a partir de um template ou de uma página em branco.

02. Selecionar a opção desejada e acionar Continuar.

03. Preencher as informações da pop-up Configurações da página.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Na sessão Informações. As informações solicitadas são:

Nome da página
Título que será apresentado na página e na aba do browser.

Endereço da página
Endereço URL para acessar a página em questão. Ao escrever o título, esse campo já é automaticamente preenchido, mas pode ser alterado conforme desejado.

Painel
borderColor#e8f6f0
bgColor#e8f6f0
HTML
<style type="text/css">
    .lms * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    .lms-text-center {
      text-align: center;
    }

    .lms-full-height {
      height: 100%;
    }

    /* Component LMS Callout */

    .lms-callout {
      border: none;
      padding: 0px;

      display: -moz-box;
      -moz-flex-flow: row wrap;
      -moz-justify-content: center;
      -moz-align-items: center;

      display: -ms-flexbox;
      -ms-flex-flow: row wrap;
      -ms-justify-content: center;
      -ms-align-items: center;
      
      display: -webkit-flex;
      display: -webkit-box;
      -webkit-flex-flow: row wrap;
      -webkit-justify-content: center;
      -webkit-align-items: center;

      display: flex;
      flex-flow: row wrap;      
      justify-content: center;
      align-items: center;
    }
  
    .lms-callout .lms-callout-image {
      width: 24px;
    }

    .lms-callout .lms-callout-body {
      width: calc(100% - 24px);
      padding-left: 20px;
    }

	.lms-callout .lms-callout-citacao {
      border: 0px solid;
      border-left-width: 3px;
      border-left-color: #f36f21;
	  margin: 4px;
	  margin-left: 25px;
	  padding-left: 8px;
      font-size: 13px;
	}

    .lms-callout .lms-callout-thumb {
      width: 24px;
      height: 24px;
    }

    .lms-callout .lms-callout-text {
      color: #58595b;
      line-height: 1.75;
      margin: 0;
    }
</style>
<div class="lms">
	<div class="lms-callout">
		<div class="lms-callout-image">
			<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/dica.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>DICAS!</b><br>  • Forneça uma URL que seja facilmente interpretável pelo usuário, utilizando palavras chaves. Por exemplo: guia-da-marca.<br>  • Complemente as URLs com títulos para incentivar o usuário a clicar neles.<br>  • Utilize palavras curtas, porém superiores a três caracteres. Evite utilizar caracteres especiais (com exceção de hífen para separar as palavras). </p>
		</div>
	</div>
</div>

Ícone
Ícone que será apresentado na aba do browser, quando a página for visualizada ou estiver sendo editada. Deve ser uma imagem com o formato ICO, com tamanho de 48x48 px. Caso não seja definido um ícone, será apresentado por padrão o logo do TOTVS Pages.

Painel
borderColor#e8f6f0
bgColor#e8f6f0
HTML
<div class="lms">
	<div class="lms-callout">
		<div class="lms-callout-image">
			<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/dica.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>DICA!</b><br>Muitos usuários navegam com várias guias abertas, então sua página precisa se diferenciar! Utilize um logo personalizado para o seu site.</p>
		</div>
	</div>
</div>

04. Acionar Avançar.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Após a inclusão da página, você precisa editá-la utilizando o Editor de páginas e então publicá-la, para que ela possa ser acessada. Caso você tenha criado a página a partir de um template, os componentes referentes a esse template já serão disponibilizados no momento da edição.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Na sessão Templates escolher o template a ser utilizado. Os templates disponíveis são:

  • Página em branco
  • Varejo
  • Educacional
  • Construções e projetos
  • Saúde
  • Logística

05. Acionar Avançar.


Na sessão Mediadores inserir as informações solicitadas:

06. Selecionar o mediador que terá permissão na página inserindo a inicial do nome e clicando sobre o usuário que deseja. 

07. Definir o tipo de permissão que este usuário terá sobre a página. As permissões disponíveis são:

Editar: o usuário poderá apenas editar a página;

Gerenciar: o usuário poderá editar e excluir a página;

Visualizar: o usuário poderá apenas visualizar a página.

Também é possível excluir o colaborador da página por meio do íconelocalizado ao lado do nome do colaborador definido. 

08. Acionar Concluir após todas as configurações.


Buscar página


01. Na barra de busca localizada abaixo de Últimos editados digite o nome da página que deseja buscar.

02. Conforme o nome da página é escrito, é apresentado as páginas correspondente ao nome digitado.


Editar página


01. Na tela inicial, localizar a página a ser alterada.

02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Editar.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Será aberta uma nova guia para alteração da página. As instruções para edição da página estão localizadas no help Editor de páginas.

Painel
borderColor#e8f6f0
bgColor#e8f6f0
HTML
<div class="lms">
	<div class="lms-callout">
		<div class="lms-callout-image">
			<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/dica.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>DICA!</b><br>Você pode usar um atalho para o Editor de páginas, basta clicar em qualquer área do quadro referente à página.</p>
		</div>
	</div>
</div>


Publicar página


01. Na tela inicial, localizar a página a ser publicada.

02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Editar.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Com isso, será aberta uma nova guia com o Editor de páginas.

Painel
borderColor#e8f6f0
bgColor#e8f6f0
HTML
<div class="lms">
	<div class="lms-callout">
		<div class="lms-callout-image">
			<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/dica.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>DICA!</b><br>Você pode usar um atalho para o Editor de páginas, basta clicar em qualquer área do quadro referente à página.</p>
		</div>
	</div>
</div>

03. Na guia aberta, acionar a opção Publicar página, localizada no canto superior direito da tela.

04. Na pop-up de confirmação, acionar Publicar. Ou Cancelar para não concluir a ação.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Após a publicação da página, ela estará disponível para ser acessada publicamente, ou seja, com o link informado, sem a necessidade de autenticação. Para saber como obter o link de acesso, consulte o item Compartilhar.


Visualizar rascunho


01. Na tela inicial, localizar a página a ser visualizada em modo de rascunho.

02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Visualizar rascunho.


Configurar página


01. Na tela inicial, localizar a página a ser configurada.

02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Configurar.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Será aberta a pop-up de Configuração da página, com as mesmas informações solicitadas na ação de Adicionar página. Contudo, uma vez gerado o link da página pública na inclusão da página, esse link não pode mais ser alterado.


Compartilhar página 
Âncora
compartilhar
compartilhar


Essa opção é disponibilizada apenas para páginas já publicadas.

 Veja a imagem

01. Na tela inicial, localizar a página a ser compartilhada.

02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Compartilhar URL.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Ao acionar essa opção, será aberta uma pop-up para apresentar a URL configurada para a página pública.

03. Acionar a opção Copiar link para copiar a URL para a área de transferência.

Painel
borderColor#e8f6f0
bgColor#e8f6f0
HTML
<div class="lms">
	<div class="lms-callout">
		<div class="lms-callout-image">
			<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/dica.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>DICA!</b><br>Lembrando que as páginas criadas no aplicativo TOTVS Pages são <b>responsivas</b>, ou seja, se adaptam para trazer a melhor visualização independentemente do dispositivo de acesso.</p>
		</div>
	</div>
</div>


Ver registros dos formulários


Image AddedVeja o passo a passo

01. Na tela inicial, localizar a página da qual deseja ver os dados que foram preenchidos nos formulários.

02. Acionar o ícone  referente à página, localizado no canto inferior direito do quadro, e logo depois, acionar a opção Registros dos formulários.

03. Selecionar o formulário do qual deseja ver os dados que foram preenchidos.

04. Acionar Ver registros.

05. Selecionar o registro desejado para visualizar seus dados completos.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Mais detalhes sobre as ações disponíveis na listagem podem ser obtidos em Registros de formulário.

06. Depois de visualizar os dados de todos os registros desejados, acionar Fechar , localizado no canto superior esquerdo.

07. Acionar Fechar  novamente para retornar para a página inicial.


Excluir página


01. Na tela inicial, localizar a página a ser excluída.

02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Excluir.

03. Na pop-up de confirmação de exclusão, selecionar Excluir.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

A página será excluída. Com isso, não poderá mais ser acessada por nenhum usuário.


Visualizar página


01. Na tela inicial, localizar a página a ser visualizada.

02. Acionar o ícone  referente à página, localizado no canto inferior direito do quadro, logo depois acionar a opção Visualizar página.

03. Uma nova guia será aberta apresentado a página em modo de visualização.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Uma nota ao topo da página indica que a mesma é apresentada no modo rascunho. O link Editar página abre novamente o editor de páginas.