TOTVS Fluig

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 2

changes.mady.by.user Julia Larissa Schultz

Gravado em

comparado com

Nova versão Atual

changes.mady.by.user Denise De Deus

Gravado em

Chave

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

A solução TOTVS Fluig No-Code será descontinuada em 30/10/2024 e não estará mais disponível para acesso a partir dessa data.

Mais informações podem ser obtidas em Descontinuação TOTVS Fluig No-Code.

Dica
titleDica!

Encontre os recursos existentes nos aplicativos TOTVS Fluig No-Code na nova solução que já está disponível: o TOTVS Collab.

Assim, você pode continuar usufruindo de todos os benefícios da gestão de projetos e tarefas, além de promover a colaboração no seu time!


Índice

Índice

Índiceoutlinetrue

exclude.*ndice
stylenone


Falando

...

de Início...

...

Esse recurso possibilita a construção de modernas páginas que podem ser publicadas para acessos externos à plataforma. Os templates fluig foram elaborados de modo a simplificar e agilizar essa construção, trazendo novas ideias e proporcionando um compartilhamento mais fácil das informações.

Nota
titleAtenção!
  • Permissões: O recurso Pages Beta só pode ser acessado por administradores ou usuários com permissão de acesso.
  • Visualização da página: O recurso Pages Beta é exclusivo para a criação de páginas públicas. Se você deseja desenhar páginas que sejam acessadas apenas internamente, utilize o recurso Minhas páginas via Painel de Controle.

Image Removed

Acessar páginas

01. No menu principal acionar Soluções, logo depois acionar a opção Pages.

Painel

Será aberta uma nova guia do browser, contendo todas as páginas configuradas nesse ambiente. As páginas estão separadas por últimas que foram editadas, aquelas que estão em edição e as que já foram publicadas.

Adicionar página

01. Na tela Páginas públicas, acionar Nova página.

Painel

Será aberta uma janela com 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 janela Configuração da página.

Image Added

...

Na página inicial, é possível criar portais e ver todos os existentes categorizados em:

  • Últimos editados: são os portais recentemente editados;
  • Em edição: são portais que estão edição, podendo ser portais que nunca foram publicados ou que já foram publicados, mas agora estão passando por alterações;
  • Publicados: são portais que estão publicados e disponíveis para acesso.

Além disso, também é possível efetuar várias ações de gerenciamento dos portais, tais como editar, configurar, ver em modo rascunho, excluir, dentre outras.

Image Added


Criar portal

...

01. Em Início, clique em Criar portal.

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

Painel
borderColor#f2f2f2
bgColor#f2f2f2

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

Estado
titleExemplo:

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á exibido na aba do navegador quando o portal for visualizado ou estiver sendo editado. Deve ser uma imagem com o formato ICO e com tamanho de 48x48 pixels. Caso não seja definido um ícone, será exibido 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 é preciso se diferenciar! Utilize um ícone personalizado para o seu portal.</p>
		</div>
	</div>
</div>

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

Estado
titleExemplo:

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

Painel

As informações solicitadas são:

  • Nome da página: título que será apresentado na página e na aba do browser.
    • Código 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

    se desejado.

  • Í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 fluig.

    • 04. Acionar Concluir.

    Depois de criar o portal, mesmo que o nome da página inicial seja alterado, a URL permanecerá a que foi definida no momento da criação do portal.

    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>A URL da página deve ser única por empresa, ou seja, não é possível ter páginas com a mesma URL em portais diferentes na mesma empresa.</p>
		</div>
	</div>
</div>
    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>  • Crie 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 uma página em branco ou a partir de um template pronto. Os templates são categorizados em Templates básicos e Templates avançados.

    Painel
    borderColor#f2f2f2
    bgColor#f2f2f2

    Os templates básicos disponíveis são:

    Os templates avançados 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>

    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.

    As permissões são aplicadas a todas as páginas do portal.

    Também é possível remover um usuário inserido clicando em Remover Image Added localizado ao lado do seu nome.

    09. Clique em Concluir.

    Painel
    borderColor#f2f2f2
    bgColor#f2f2f2

    Ao concluir a criação, o portal é exibido em uma nova aba com a sua página inicial em modo de edição, onde também é possível criar outras páginas a partir do menu Páginas, configurá-las e publicá-las.

    Caso a página inicial do portal tenha sido criada

    Painel

    Após a inclusão da página, você precisa editá-la utilizando o Desenhador 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 que compõem esse template já serão disponibilizados exibidos no momento da edição.

    Editar página

    01. Na tela Páginas públicas, localizar a página a ser alterada.

    02. Acionar em qualquer área relacionada a essa página.

    Painel

    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 Desenhador de páginas.

    Publicar página

    01. Na tela Páginas públicas, localizar a página a ser publicada.

    02. Acionar em qualquer área relacionada a essa página.

    Painel

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

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

    Visualizar página

    01. Na tela Páginas públicas, localizar a página a ser visualizada.

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

    Painel

    Será aberta uma nova guia para visualização da página. Ela só poderá ser visualizada se já tiver sido publicada.

    Configurar página

    01. Na tela Páginas públicas, localizar a página a ser configurada.

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

    Painel

    Será aberta a janela 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 a URL da página

    Image Removed Visualize a imagem

    01. Na tela Páginas públicas, localizar a página a ser compartilhada.

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

    Painel

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

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

    Remover página

    01. Na tela Páginas públicas, localizar a página a ser removida.

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

    03. Na janela de confirmação de exclusão, selecionar Excluir.

    Painel

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

    . Porém, é possível adicionar mais componentes ou alterar os componentes já exibidos a partir do menu Componentes.


    Buscar portal

    ...

    01. Em Início, digite o nome do portal que deseja buscar na barra de busca localizada abaixo de Últimos editados.

    02. Conforme o nome é digitado, são exibidos os portais correspondentes ao nome digitado.


    Visualizar rascunho do portal

    ...

    Essa ação existe apenas para portais que estão em edição.

    01. Na tela inicial, localize o portal que deseja visualizar em modo rascunho.

    02. Clique em AçõesImage Addedlocalizado no canto inferior direito do quadro do portal.

    03. Clique em Visualizar rascunho.

    04. Veja as páginas do portal em modo rascunho.


    Editar portal

    ...

    01. Em Início, localize o portal a ser alterado.

    02. Clique em AçõesImage Addedlocalizado no canto inferior direito do quadro do portal.

    03. Clique em Editar.

    Painel
    borderColor#f2f2f2
    bgColor#f2f2f2

    Ao clicar nesta opção, o portal é exibido em uma nova aba em modo de edição, onde é possível efetuar as alterações desejadas nas configurações do próprio portal ou nas páginas que o compõem.


    Configurar portal

    ...

    01. Em Início, localize o portal que deseja configurar.

    02. Clique em AçõesImage Addedlocalizado no canto inferior direito do quadro do portal.

    03. Clique em Configurar.

    04. Efetue as alterações desejadas para o portal.

    05. Ao finalizar, clique em Concluir.


    Ver registros dos formulários existentes no portal

    ...

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

    Image AddedVeja o passo a passo

    01. Em Início, localize o portal do qual deseja ver os dados que foram preenchidos nos formulários.

    02. Clique em AçõesImage Addedlocalizado no canto inferior direito do quadro do portal.

    03. Clique em Registro dos formulários.

    04. Selecione o formulário do qual deseja ver os dados que foram preenchidos.

    05. Clique em Ver registros.

    06. Selecione 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.

    07. Depois de visualizar os dados de todos os registros desejados, clique em Fechar Image Added, localizado no canto superior esquerdo.

    08. Clique em Fechar Image Added novamente para retornar para a página inicial.


    Excluir portal

    ...

    É necessário ter a permissão Gerenciar para excluir portais.

    01. Em Início, localize o portal que deseja excluir.

    02. Clique em AçõesImage Addedlocalizado no canto inferior direito do quadro do portal.

    03. Clique em Excluir.

    04. Na mensagem exibida, clique em Excluir para confirmar a exclusão do portal.

    Painel
    borderColor#f2f2f2
    bgColor#f2f2f2

    Ao excluir um portal, todas as páginas internas associadas a ele também serão excluídas.


    Visualizar portal

    ...

    Essa ação existe apenas para portais que já foram publicados.

    01. Em Início, localize o portal que deseja visualizar.

    02. Clique em AçõesImage Addedlocalizado no canto inferior direito do quadro do portal.

    03. Clique em Visualizar página.

    04. Veja o portal completo na nova guia que foi aberta.


    Compartilhar URL do portal 
    Âncora
    compartilhar
    compartilhar

    ...

    Essa ação existe apenas para portais que já foram publicados.

    01. Em Início, localize o portal do qual deseja obter a URL para compartilhar.

    02. Clique em AçõesImage Addedlocalizado no canto inferior direito do quadro do portal.

    03. Clique em Compartilhar URL.

    04. Clique em Copiar Image Added para copiar a URL do portal.

    05. Compartilhe a URL do portal onde e com quem desejar.

    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 dos portais criados 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>
    Informações
    titleFique atento!
    Esta documentação é válida a partir da atualização 1.6.5 - Liquid. Se você utiliza uma atualização anterior, ela pode conter informações diferentes das quais você vê na sua plataforma.