Histórico da Página

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

São separadas separados entre três listas:

Últimos editados;
Em edição edição;
Publicados.

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

Índice

exclude	.*ndice

Criar

página

portal

01. Na tela inicial, acionar Criar páginaacione Criar portal.

02. Insira as informações solicitadas para o portal.

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#f2f2f2

Nome do portal
Nome do conjunto de páginas que formarão o portal.

Estado

title	Exemplo:

Central de atendimento, Portal RH, Suporte técnico.

Escolha um ícone para ser exibido ao lado do título da página no navegador
Ícone que será apresentado na aba do navegador quando a página for visualizada ou estiver sendo editada. Deve ser uma imagem com o formato ICO, com tamanho de 48x48 pixels. Caso não seja definido um ícone, será exibido por padrão o logo do TOTVS Pages.

Painel

borderColor

bgColor
#e8f6f0

#f2f2f2

#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>

Nome da página inicial
Nome da primeira página do seu portal.

Estado

title	Exemplo:

Sobre nós, Início, Fale conosco.

Endereço da página
URL da página inicial do portal, ou seja, é a URL que será utilizada para acessar o portal como um todo. Ao preencher o nome da página inicial, 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

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;
      box-moz-flex-flowsizing: row wrapborder-box;
    }

    .lms-moz-justify-content: center;text-center {
      text-moz-align-items: center;

    }

   display: .lms-ms-flexbox;full-height {
      -ms-flex-flowheight: row wrap100%;
    }

  -ms-justify-content: center;
 /* Component LMS   -ms-align-items: center;Callout */

    .lms-callout  {
      displayborder: -webkit-flexnone;
      displaypadding: -webkit0px;

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

      display: flex-ms-flexbox;
      -ms-flex-flow: row wrap;      
      -ms-justify-content: center;
      -ms-align-items: center;
    }  
  
    .lms-callout .lms-callout-image {display: -webkit-flex;
      widthdisplay: 24px-webkit-box;
    }

    .lms-callout .lms-callout-body {-webkit-flex-flow: row wrap;
      width-webkit-justify-content: calc(100% - 24px)center;
      padding-left-webkit-align-items: 20pxcenter;

     }

	.lms-callout .lms-callout-citacao { display: flex;
      borderflex-flow: 0pxrow solidwrap;
      border-left-width: 3px;
      borderjustify-left-colorcontent: #f36f21center;
	   margin: 4px;
	  marginalign-leftitems: 25pxcenter;
	  padding-left: 8px;    }
  
    .lms-callout .lms-callout-image {
      font-sizewidth: 13px24px;
	    }

    .lms-callout .lms-callout-thumbbody {
      width: calc(100% - 24px);
      heightpadding-left: 24px20px;
    }

    	.lms-callout .lms-callout-textcitacao {
      colorborder: #58595b0px solid;
      lineborder-left-heightwidth: 1.753px;
      marginborder-left-color: 0#f36f21;
	  margin:  }
</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>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>
</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.

		<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>

03. Clique em Avançar.

04. Selecione o template desejado para a página inicial do portal.

Painel

borderColor	#f2f2f2
bgColor	#f2f2f2

É possível optar por criar a página a partir de um template pronto ou de uma página em branco.

Painel

borderColor	#f2f2f2
bgColor	#f2f2f2

Os templates disponíveis são:

Painel

borderColor	#fdf7e8
bgColor	#fdf7e8

HTML
<div class="lms">

Painel

borderColor	#e8f6f0
bgColor	#e8f6f0

HTML

<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 class="lms-callout-image">
			<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/importante.png" width="24" height="24">
		</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.

05. Na sessão Templates escolher o template a ser utilizado.

Painel

borderColor	#f2f2f2
bgColor	#f2f2f2

Os templates disponíveis são:

Painel

borderColor	#fdf7e8
bgColor	#fdf7e8

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/importante.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>IMPORTANTE!</b><br>Caso o <i>template</i> tenha integração com outro aplicativo no qual o usuário autenticado não possua acesso, não será possível selecioná-lo. Neste caso, será exibido um ícone de alerta com uma mensagem informando em quais aplicativos é necessário ter acesso para utilizar o <i>template</i> em questão.</p>
		</div>
	</div>
</div>

06. Acionar Avançar.

07. Na sessão Mediadores, selecionar o mediador que terá permissão na página inserindo a inicial do nome e clicando sobre o usuário que deseja.

	<div class="lms-callout-body">
			<p class="lms-callout-text"><b>IMPORTANTE!</b><br>Caso o <i>template</i> tenha integração com outro aplicativo no qual o usuário autenticado não possua acesso, não será possível selecioná-lo. Neste caso, será exibido um ícone de alerta com uma mensagem informando em quais aplicativos é necessário ter acesso para utilizar o <i>template</i> em questão.</p>
		</div>
	</div>
</div>

05. Clique em Avançar.

06. Em Adicionar mediadores, localize e selecione os mediadores que terão permissão no portal buscando a partir do nome.

07. Clique em Adicionar.

08. Defina o tipo de permissão que cada usuário terá sobre o portal.

Painel

borderColor	#f2f2f2
bgColor	#f2f2f2

As permissões disponíveis são:

Editar: o usuário poderá apenas editar o portal;

Gerenciar: o usuário poderá editar e excluir o portal;

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

Também é possível excluir um usuário inserido clicando em Excluir Image Addedlocalizado ao lado do seu nome.

09. Acione Concluir08. Definir o tipo de permissão que este usuário terá sobre a página.

Painel

borderColor	#f2f2f2
bgColor	#f2f2f2

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 íconeImage Removedlocalizado ao lado do nome do colaborador definido.

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

Ao concluir a criação do portal, é necessário editar as páginas que o compõem utilizando o Editor de páginas e, então, publicá-lo para que ele possa ser acessado.

Caso a página inicial do portal tenha criada a partir de um template, os componentes que compõem esse template já serão exibidos no momento da edição.

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

^{É necessário ter permissão de acesso ao TOTVS Forms para ver os dados que foram preenchidos nos formulários.}

^{Veja 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 Registro 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.

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 56

Nova versão 57

Chave

Criar

portal

Buscar página

Editar página

Publicar página

Visualizar rascunho

Configurar página

Compartilhar página
Âncora
compartilhar
compartilhar

Ver registros dos formulários

Excluir página

Visualizar página

Atalhos

Árvore de páginas

Histórico da Página

Versões comparadas

Versão antiga 56

Nova versão 57

Chave

Criar

portal

Buscar página

Editar página

Publicar página

Visualizar rascunho

Configurar página

Compartilhar página Âncoracompartilharcompartilhar

Ver registros dos formulários

Excluir página

Visualizar página

Compartilhar página
Âncora
compartilhar
compartilhar