Árvore de páginas

Versões comparadas

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
maxLevel2

Image Added


Esse componente permite importar formulários

públicos do

que foram criados no TOTVS Forms

para

 e definidos como Públicos para a sua página.

Image Added


No Editor de páginas, ao passar o cursor do mouse sobre esse componente e acionar 

 são apresentadas as seguintes configurações:

Geral

Image Removed Veja a imagem

Configurar componente Image Added são exibidas todas as configurações disponíveis.


Geral Image Added


Configura as propriedades gerais do componente.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Código da âncora
Código gerado automaticamente ao incluir o componente na página, mas pode ser alterado para facilitar a identificação.

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>Com a âncora, você consegue direcionar o usuário para o ponto exato da página em que seu componente está inserido. Isso pode ser feito, por exemplo, com um item do componente <a href = "http://tdn.totvs.com/x/sY9qH" style="color: #41d262">Menu</a>, fazendo-o abrir essa âncora da página.</p>
		</div>
	</div>
</div>

Formulário
Formulário criado no TOTVS Forms que será importado para a página.

Expandir conteúdo
Configuração de largura do componente. Se essa opção estiver habilitada. o componente será redimensionado conforme a largura da tela.

Logotipo
Imagem de logo que deve ser apresentada no rodapé. A imagem deve ser um arquivo da galeria ou do próprio dispositivo.Mensagem de CopyrightTexto apresentado abaixo da logo e dos ícones.

Painel
borderColor#e8f6f0#fdf7e8
bgColor#e8f6f0#fdf7e8
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/dicaimportante.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>DICA><b>IMPORTANTE!</b><br>Insirab><br>Apenas formulários osdefinidos direitoscomo de<a marcahref registrada com o nome de sua empresa= "https://tdn.totvs.com/x/K645HQ#Forms|Editordeformul%C3%A1rios-Configura%C3%A7%C3%B5es" style="color: #e1af29">Públicos</a> podem ser incluídos na página.</p>
		</div>
	</div>
</div>

Expandir conteúdo
Configuração de largura do componente. Se essa opção estiver habilitada, o componente será redimensionado conforme a largura da tela.

Espaçamento internoexterno
Configura o Configuração de espaçamento que deve ser apresentado no interior ao redor do componente, alterando a posição que o texto irá obedecer. O ícone Image Modified indica que pode ser definida uma medida específica para cada lado e o ícone Image Modified indica que será definida uma medida igual para todos os lados. 

Itens 

Image Removed Veja a imagem

Gerencia e configura os itens que devem ser apresentados no rodapé. 

Image Added

Importar formulário para a página


Image AddedVeja o passo a passo

01. Depois de criar sua página, acione ComponentesImage Added.

02. Clique no componente Formulário e arraste ele para sua página.

03. Na aba lateral que é aberta imediatamente ao soltar o componente na página, acione Selecionar.

04. Selecione o formulário que deseja adicionar na sua página.

Painel
borderColor#f2f2f2
bgColor#f2f2f2
 Adicionar item
Essa opção permite adicionar ícones ao rodapé, e esses ícones direcionam para outros endereços web

Serão exibidos apenas formulários públicos para seleção.

05. Clique em Selecionar.

06. Defina as demais configurações disponíveis para o componente, se desejar.

07. Clique em Fechar configurações Image Added.

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>DICA!</
b><br>Insira os links de suas redes sociais, para demonstrar maior representatividade na web
b><br>É possível ver os dados respondidos no formulário a partir da própria página. Veja os passos em <a href= "https://tdn.totvs.com/x/8I5qH#Pages|In%C3%ADcio-Verregistrosdosformul%C3%A1riosexistentesnoportal" style="color: #41d262">Ver registros dos formulários</a>.</p>
		</div>
	</div>
</div>

Remover item

Remover o item do rodapé.

Configuração dos itens

Cada item tem a seguinte configuração:

Imagem
Imagem que deve ser apresentada no link do rodapé. A imagem deve ser um arquivo da galeria ou do próprio dispositivo.

Título
Configura o título do link.

URL
Endereço web que será aberto ao acionar o item.

Abrir em uma nova aba?
Indica se o endereço deve ser aberto em uma nova aba ou na atual.