Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
HTML
<style>
    /* Início estilo banner */
  
    .compositiondani-banner {
      position: relative;
      min-height: 220px;
      border-radius: 5px;
      margin-bottom: 5px;
      overflow: hidden;
    }
  
    .compositiondani-banner-image {
      background-image: url("https://totvscrm.com/wp-content/uploads/2023/08/capa-com-fundo-e-sem-icone-TDN21.png");
      background-size: cover;
      min-height: inherit;
      width: 100%;
    }
  
    .compositiondani-banner-overlay {
      min-height: inherit;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      pointer-events: none;
    }
  
    .compositiondani-banner-logo-container {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, -50%);
    }
  
    .compositiondani-banner-logo {
      width: 350px;
      height: 180px;
      background-image: url("https://totvscrm.com/wp-content/uploads/2023/09/logo-com-descricao-totvsgc.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  
    .compositiondani-banner-title {
      margin-bottom: 10px !important;
      padding: 10px !important;
      background: rgba(0, 0, 0, 0.5) !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      font-size: 12px !important;
      line-height: 1.3 !important;
      max-height: 133px !important;
      font-family: "Roboto", sans-serif !important;
      -webkit-line-clamp: 3 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      color: #ffffff !important;
      position: relative !important;
      margin-top: 130px !important;
      border-radius: 10px !important;
    }
  
    .compositiondani-banner-content {
      position: absolute;
      padding: 30px;
      max-width: 60%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      color: white;
      text-align: center;
    }
  
    .custom-header h1 {
      font-size: 16px;
      background-color: rgba(0, 0, 0, 0.6);
      padding: 10px;
      border-radius: 5px;
      margin: 0;
    }
  
    .negrito-materialize {
      font-weight: bold;
    }
  
    .custom-margin-justified {
      margin: 0 20px;
      text-align: justify;
    }
      /* Final estilo banner */

      #content.page.view {
    padding-right: 0 !important;
}
  
  </style>
  
  <header>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet"/>
  
    <div class="compositiondani-banner">
      <div class="compositiondani-banner-image"></div>
      <div class="compositiondani-banner-overlay"></div>
      <div class="compositiondani-banner-logo-container">
        <div class="compositiondani-banner-logo"></div>
      </div>
      <div class="compositiondani-banner-content">
        <h1 class="compositiondani-banner-title"> 
            REGRASREGLAS DE OCULTAÇÃOOCULTAMIENTO Y EEDICIÓN EDIÇÃOCONDICIONALES CONDICIONAISEN NALA TELAPANTALLA DE CLIENTES
  </h1>
  </header>
    </div>
  </div>

  <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Inclua o estilo do tema Monokai -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/monokai.min.css"/>
  
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />

  <style>
  /* ==============================
    =       CONFIGURAÇÕES GERAIS      =
    =============================== */

* {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

a {
  color: #42526e;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a:hover {
  color: white;
}

li {  font-size: 14px !important;
}

h3 {  font-size: 14px !important;
  font-weight: bold;  

}

h1 {  font-size: 13px !important;
  

}

h2 {  font-size: 15px !important;
  font-weight: bold;  

}

td, th {
    padding: 6px;
}

* p {
    margin-bottom: 0 !important;
}

/* ==============================
      =        ESTILOS DE TÍTULOS       =
      =============================== */

#title-text {
  display: none !important;
}

#content > div.page-metadata > div {
    float: none !important;
    line-height: normal !important;
    width: auto !important;
    display: none !important; /* ou outra propriedade de display que você deseja usar */
    margin: 0 !important; /* ou outra propriedade de margin que você deseja usar */
}

#section2 > ol > li:nth-child(2) > p {
    margin-bottom: 0;
}



.wiki-content h1,
.wiki-content h2 {
  font-family: "Roboto", sans-serif !important;
  font-size: 13px!important;
 
}

.wiki-content h1 {
  font-size: 13px !important;
}

.wiki-content h2 {
  font-size: 14px !important;
  color: #42526e !important;
  border-bottom: 2px solid #dfe1e5;
   padding-bottom: 5px;
  font-weight: bold;  
}

.custom-heading,
h3.custom-h3 {
  font-size: 16px;
  color: #42526e;
  margin-bottom: 20px;
}

.custom-h1 {
  color: #feac0e;
}

.explanation h2 {
  font-weight: bold;
}

/* ==============================
      =        ESTILOS DE TEXTO         =
      =============================== */

.wiki-content p {
  font-size: 14px !important;
}

.justificado,
.custom-justified {
  text-align: justify;
  margin: 10px 0;
}

/* ==============================
      =       ESTILOS DE LINKS         =
      =============================== */

.wiki-content a,
.wiki-content a:link,
.wiki-content a:visited,
.wiki-content a:focus,
.wiki-content a:active {
  text-decoration: none;
  color: #42526e;
  font-size: 14px;


}

.wiki-content a:hover {
  color: white;
}

/* ==============================
      =       ESTILOS DE CONTAINER     =
      =============================== */



.custom-content {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin: 0 10px;
  max-width: 100%;
  overflow: hidden;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* ==============================
      =       ESTILOS DE CARDS         =
      =============================== */

.card {
  border: 2px solid #9aa1ad;
  padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #f4f5f7;
  color: #42526e;
  overflow-x: hidden;
   top: 0;

  
}



/* ==============================
      =       ESTILOS DE TABS          =
      =============================== */

.tabs {
  background-color: #dfe1e5;
}

.tabs .tab a {
  color: rgb(66, 82, 110);
}

.tabs .tab a:hover,
.tabs .tab a.active,
.tabs .tab a:focus.active {
  color: #6B48FF;
  background-color: transparent;
}

.tabs .tab a:focus {
  background-color: rgba(82, 97, 232, 0.25);
}

.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
  color: rgba(16, 148, 184, 0.24);
}

.tabs .indicator {
  background-color: #6B48FF;
}

.tab-content {
   gap: 0;
  padding: 10px;
}

.tab-content pre {
  max-width: 100%;
  overflow-x: hidden;
}

/* ==============================
      =        ESTILOS DE ÍCONES        =
      =============================== */

.icon-list,
.icon {
  padding-left: 0;
  list-style-type: none;
}

.icon {
  display: inline-block;
  width: 24px;
  vertical-align: middle;
  margin-right: 45px;
  position: relative;
  left: -25px;
}

.item .label i {
  margin-right: 10px;
}

.label b {
color: #42526e;
}

td th {
color: #42526e;
}

/* ==============================
      =    ESTILOS DE COMPONENTES      =
      =============================== */

.collapsible,
.collapsible-header,
.collapsible-body {
  box-shadow: none !important;
}

.faq-question {
  font-weight: bold;
  margin-bottom: 5px;
}

.faq-answer {
  margin-bottom: 20px;
}

.custom-list {
  padding-left: 0;
  margin-left: 1.5em;
}

.custom-list li {
  position: relative;
  padding-left: 1em;
}

ul.custom-list {
  padding-left: 10px;
}

ul.custom-list li {
  position: relative;
  list-style-type: disc;
  padding-left: 30px;
  margin-bottom: 10px;
}

.item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.item:last-child {
  border-bottom: none;
}

.item .label {
  flex: 1;
  font-weight: bold;
}

.item .value {
  flex: 1;
  text-align: right;
}
.item {
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item:last-child {
  border-bottom: none;
}

/* Estilos para o label */
.label {
  font-weight: bold;
  display: flex;
  align-items: center;
}

.item .label i {
  margin-right: 10px; /* Adiciona espaço depois dos ícones */
}

/* ==============================
      =     ESTILOS DE IMAGENS         =
      =============================== */

.imagem-responsiva {
  max-width: 100%;
  height: auto;
}

.custom-header-bg img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==============================
      =     ESTILOS DE VÍDEO           =
      =============================== */

#youtube-video-container iframe {
  width: 100%;
  height: auto;
  display: block;
}

.video-container {
    max-width: 800px;
    margin: 0 auto;
  }

.ytp-cued-thumbnail-overlay-image {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
}

/* ==============================
      =    OUTROS ESTILOS PERSONALIZADOS =
      =============================== */
.custom-content {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin: 0 10px;
  max-width: 100%;
  overflow: hidden;
}

.custom-heading {
  font-size: 16px;
  color: #42526e;
  margin: 10px 0;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 5px;
  font-weight: bold;  
}

#indice {
  border-radius: 5px;
  padding: 20px;
  max-width: 100%;
  overflow: hidden;
}

#indice h2 {
  text-align: center;
  margin-bottom: 16px;
}

#indice ul {
  list-style-type: none;
  padding-left: 0;
}

#indice li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

#indice li:last-child {
  border-bottom: none;
}

#indice li:hover {
  background-color: #6B48FF;
  color: white;
}

/* ==============================
  =      ESTILOS DE TABELAS        =
  ============================== */
.custom-grey {
  background-color: #ffffff;
}

.custom-grey th,
.custom-grey td {
  border: 1px solid #362194;
  padding: 10px;
  color:#362194
}

.custom-grey tr:nth-child(even) td {
  background-color: #e6e0f7;
}

.custom-grey tr:nth-child(odd) td {
  background-color: #f4f5f7;
}

.custom-grey th {
  color: #fff;
  background-color: #443391;
}



.custom-grey td {
  font-size: 13px;
}

.custom-grey tr:nth-child(odd) {
  background-color: #e4e4e6;
}

.custom-grey tr:nth-child(even) {
  background-color: #dfdfdf;
}

.custom-alert-warning {
  background-color: #fdf1dc; /* ou qualquer outra cor que preferir */
  color: #5c4225; /* cor do texto */
  border: 1px solid #d6800f; /* adicionando borda da mesma cor que o ícone */
  padding: 10px; /* adicione padding conforme necessário */
 
}

.custom-alert-warning .fas {
  color: #5c4225; /* cor do ícone no alerta de aviso */
  margin-right: 10px; /* espaço extra entre o ícone e o texto */
}

.custom-alert-danger {
  background-color: #ffe7ec; /* ou qualquer outra cor que preferir */
  color: #9e1d3b; /* cor do texto */
  border: 1px solid #eb7893; /* adicionando borda da mesma cor que o ícone */
  padding: 10px; /* adicione padding conforme necessário */
  
}

.custom-alert-danger .fas {
  color: #f34b72; /* cor do ícone no alerta de perigo */
  margin-right: 10px; /* espaço extra entre o ícone e o texto */
}


.alert-secondary-custom {
    background-color: #F2EEFF; /* Cor de fundo do alerta */
    color: #3217a7; /* Cor do texto */
    border: 1px solid #9475f7; /* adicionando borda da mesma cor que o ícone */
  padding: 10px; /* adicione padding conforme necessário */
}

.alert-secondary-custom .fas {
    color: #6B48FF; /* Cor dos ícones FontAwesome */
    margin-right: 10px; /* Espaço extra entre o ícone e o texto */
}


/* ========== FIM DO ESTILO ========= */

  </style>
  

   





  <!-- Tabs e conteúdo das guias -->
  <div class="card">
    <ul class="tabs">
      <li class="tab col s4"><a href="#tab1">DETALHES>DETALLES FUNCIONAIS<FUNCIONALES</a></li>
      <li class="tab col s4"><a href="#tab3">FAQ</a></li>
    </ul>
     <!-- Tab Content -->
 
      <div id="tab1" class="col s12">
        <div class="tab-content">
          <div style="background-color: #f4f5f7; padding: 10px; margin-left: 50px; margin-right: 50px;">
            <section id="section1" style="margin-top: 40px;">
               <!-- Tab 70 conteúdo -->
  <!-- Segundo Card -->

    <!-- Primeiro Card -->
      <!-- Primeiro Card -->
  <div class="card">
    <div class="item">
      <span class="label">
        <table border="1">
          <tr>
              <td><i class="fas fa-tags"></i> <b>Produto<b>Producto:</b></td>
              <td>Gestão<td>Gestión de Clientes<clientes</td>
          </tr>
          <tr>
              <td><i class="fas fa-link"></i> <b>Linha<b>Línea de Produtoproducto:</b></td>
              <td>TOTVS CRM</td>
          </tr>
          <tr>
              <td><i class="fas fa-chart-pie"></i> <b>Segmento:</b></td>
              <td>Cross Segmentos</td>
          </tr>
          <tr>
              <td><i class="fas fa-desktop"></i> <b>Módulo:</b></td>
              <td>Personalização</td>
          </tr>
          <tr>
              <td><i class="fas fa-globe"></i> <b>Aplicação<b>Aplicación:</b></td>
              <td>Web/app móvel<móvil</td>
          </tr>
          <tr>
              <td><i class="fas fa-hashtag"></i> <b>Identificador:</b></td>
              <td>
                
                ME260520220840</td>
          </tr>
      </table>
      </span>
    </div>
    </div>
 

      <br>

      <h2 class="custom-heading">
        <i class="fa-solid fa-eye"></i>&nbsp &nbsp VISÃOVISIÓN GERALGENERAL
      </h2>
      <p class="justificado">
        AgoraAhora, naen la telapantalla de cadastroregistro, vocêtiene temla a liberdadelibertad de personalizar ala visibilidade
visibilidad y la capacidad para edición   e a editabilidade dosde los campos de acordoacuerdo comcon critérioscriterios específicos, alémademás de poder
 validar las informaciones incluidas por medio de validarreglas asdefinidas. informaçõesEsta inseridasmejora atravésrepresenta deuna regrasgestión definidas.de Este
datos más inteligente y eficiente, alineándose perfectamente a aperfeiçoamentolas representanecesidades umay gestãopreferencias de dadossu maisempresa.
 inteligente e eficiente,
     
   alinhando-se perfeitamente às necessidades e preferências da sua empresa.
        
        

         
      </p>
<br>

    <h2 class="custom-heading">
      <i class="fa-solid fa-rocket"></i>&nbsp &nbsp OBJETIVO
    </h2>
    <p class="justificado">
O El principal objetivo destade esta atualizaçãoactualización ées otimizaroptimizar ala gestãogestión de clientes, proporcionando umauna telapantalla maismás adaptáveladaptable ey dinâmicadinámica que responde de formamanera maismás alinhadaalineada àsa suassus necessidadesnecesidades específicas.
    </p>
    <br>

  <!-- ... (seu conteúdo existente) ... -->

               <h2 class="custom-heading">
                <i class="fa-solid fa-book"></i> &nbsp ANTES DE COMEÇARCOMENZAR
            </h2>
            <h3>Requisitos</h3>
            <p>Para aproveitaraprovechar aoal máximo este novonuevo recurso, recomendamos que esteja
               esté familiarizado comcon oel módulo PersonalizaçãoPersonalización.</p> <br>

                <h3> Atributos padrõesestándar dodel formulário<formulario</h3>

                <p>A<p>La mayoría maioriade doslos atributos dodel formulárioformulario sãoson suportadoscompatibles paracon aslas funçõesfunciones, porémsin embargo,
 existen algunas excepciones que se detalla a continuación. </p> <br>

        existem algumas exceções que foram detalhadas logo abaixo. </p> <br>

                <table class="striped custom-grey">
                  <thead>
                  <tr>
                    <th>Nome<th>Nombre Técnico<técnico</th>
                    <th>Nome<th>Nombre emen Tela<pantalla</th>
                    <th>Tipo dode Dado<dato</th>
                    <th>É<th>¿Es Suportadocompatible?</th>
                  </tr>
                  <tr>
                    <td>active</td>
                    <td>Ativo<<td>Activo</td>
                    <td>Booleano</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>name</td>
                    <td>Nome<<td>Nombre</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>tradingName</td>
                    <td>Apelido<td>Alias/NomeNombre Fantasia<fantasía</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>code</td>
                    <td>Código</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>customerPersonType</td>
                    <td>Tipo de Pessoa<persona</td>
                    <td>Relacionamento<<td>Relación</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>birthday</td>
                    <td>Data<td>Fecha de Nascimentonacimiento/DataFecha de Fundação<fundación</td>
                    <td>Data<<td>Fecha</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>parentAccount</td>
                    <td>Conta<td>Cuenta Pai<principal</td>
                    <td>Relacionamento<<td>Relación</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>contacts</td>
                    <td>Contatos<<td>Contactos</td>
                    <td>Relacionamento<td>Relación Multivalorado<multivalorada</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>professionalId</td>
                    <td>Responsável<<td>Responsable</td>
                    <td>Relacionamento<<td>Relación</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>phones</td>
                    <td>Telefone<<td>Teléfono</td>
                    <td>Indefinido</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>emails</td>
                    <td>E-mail</td>
                    <td>Indefinido</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>leadSituation</td>
                    <td>Tipo</td>
                    <td>Relacionamento<<td>Relación</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>leadOrigin</td>
                    <td>Origem<<td>Origen</td>
                    <td>Relacionamento<<td>Relación</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>location</td>
                    <td>Ramos de Atividade<actividad</td>
                    <td>Relacionamento<td>Relación Multivalorado<multivalorada</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>customerGroups</td>
                    <td>Grupos</td>
                    <td>Relacionamento<td>Relación Multivalorado<multivalorada</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>customerClassification</td>
                    <td>Classificação<<td>Clasificación</td>
                    <td>Relacionamento<<td>Relación</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>companies</td>
                    <td>Empresas</td>
                    <td>Relacionamento<td>Relación Multivalorado<multivalorada</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>note</td>
                    <td>Observação<<td>Observación</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>addresses</td>
                    <td>Endereços<<td>Direcciones</td>
                    <td>Indefinido</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>facebook</td>
                    <td>Facebook</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>instagram</td>
                    <td>Instagram</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>twitter</td>
                    <td>Twitter</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>linkedin</td>
                    <td>LinkedIn</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>website</td>
                    <td>Website</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                </table>

                <br>
                <h3>Atributos personalizados</h3> 
<p>Antes de começarcomenzar a construir regrasreglas utilizando atributos personalizados, ées importante
 verificar conferirsi selos os tipos de atributos selecionadosseleccionados sãoson permitidos. Consulte ala siguiente lista abaixo para identificar quais
 qué tipos de campos sãoson suportadoscompatibles:</p><br>

                <table class="striped custom-grey">
                  <thead>
                  <tr>
                    <th>Tipo dodel Atributoatributo Personalizado<personalizado</th>
                    <th>É<th>¿Es Suportadocompatible?</th>
                  </tr>
                  <tr>
                    <td>Booleano</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>Fórmula</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>Indefinido</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>Lista de Opções<opciones</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>Número</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>Relacionamento<<td>Relación</td>
                    <td>Sim<td>Sí *</td>
                  </tr>
                  <tr>
                    <td>Relacionamento<td>Relación Remoto<remota</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>SubObjeto<<td>Subobjeto</td>
                    <td>Não<td>No **</td>
                  </tr>
                  <tr>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                </table>
<br>
                
<div class="alert custom-alert-warning" role="alert" style="padding-left: 20px;">
  <i class="fas fa-info-circle"></i> 
   Los Os campos de relacionamentorelación multivalorados no nãoson sãocompatibles suportadosen noel momento ey es éobligatorio obrigatóriotener terpor aolo menos umun campo configurado para exibiçãoexhibición. ALa criaçãocreación de subobjetos emen objetos padrõesestándar nãono está disponíveldisponible atualmenteactualmente.
</div>
              
                
          </section>

          <section id="section2" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-star"></i>&nbsp DETALHESDETALLES FUNCIONAIS<FUNCIONALES</h2>
            <h3>Funções<h3>Funciones </h3>
            <ol>
              <li>
                <p><b>Regras<p><b>Reglas de Ocultaçãoocultamiento ey Ediçãoedición Condicional<condicional</b>:</p>
                <ul class="browser-default">
                  <li>Habilita ala definiçãodefinición de critérioscriterios específicos para ala exibiçãoexhibición ouu ocultaçãoocultamiento de
                    campos naen la telapantalla, proporcionando umauna visãovisión maismás focadaenfocada ey relevante.
                    </li>
                </ul>
              </li>
              <li>
                <p><b>Validação<p><b>Validación de Camposcampos de Cadastro<registro</b>:</p>
                <ul class="browser-default">
                  <li>Assegura<li>Garantiza que oslos dadosdatos inseridosincluidos estejamestén corretoscorrectos ey consistentes, minimizando
                    erroserrores ey otimizando processosprocesos subsequentesposteriorees.
                    </li>
                </ul>
              </li>
                           <li>
                <p><b>Opção<p><b>Opción de Cadastroregistro de Mensagemmensaje Condicional<condicional</b>:</p>
                <ul class="browser-default">
                  <li>Permite oel registro de mensagensmensajes customizadaspersonalizados que serãose apresentadasmostrarán quandosi
                    condiçõeslas condiciones atribuídasatribuidas foremsean atendidas ouo nãono, auxiliandoayudando en nala orientaçãoorientación ey
                    notificación notificaçãoa aoslos usuários durante oel processoproceso de cadastroregistro ouo ediçãoedición de informaçõesinformaciones
                    de cliente.</li>
            </ol>
            
          </section>
         
      
          <section id="section3" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>&nbsp COMO¿CÓMO USARUTILIZAR?</h2>
            <h3> PassoPaso a Passo<paso</h3>

            <p><b>Para<p><b>Cómo utilizar ala regraregla de exibiçãoexhibición/ediçãoedición condicional:</b> </p>
            <br>

            <ol>
                <li>
                  <p>
                    <b>Inicie<b>Comience ala Personalização<personalización</b>: AcesseAcceda oal módulo de
                    personalizaçãopersonalización.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Acessando<b>Cómo acceder a Funcionalidades</b>: Vaya atéhasta ala seçãosección
                    "Funcionalidades".
                  </p>
                </li>
                <li>
                  <p>
                    <b>Iniciando<b>Cómo iniciar ala Edição<Edición</b>: Clique no ícone Para editar haga clic en el ícono de lápis para editar.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Editando<b>Cómo editar oel Formulário<Formulario</b>: Noen el card do formulárioformulario, cliquehaga clic emen
                    'editar' ey selecioneseleccione oel campo ouo ala seçãosección que desejadesea modificar.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Definindo<b>Cómo definir ConfiguraçõesConfiguraciones Dinâmicas<dinámicas</b>: EscolhaSeleccione ala opçãoopción
                    "dinâmicodinámico" para ajustar aslas configuraçõesconfiguraciones de visibilidadevisibilidad ouo ediçãoedición.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Cómo <b>Adicionandoincluir Regras<reglas</b>: CliqueHaga clic emen 'adicionarincluir regraregla' ey
                    descrevadescriba ala regraregla que desejadesea implementar noen el campo 'DescriçãoDescripción'.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Cómo <b>Criandocrear ala ExpressãoExpresión Lógica<lógica</b>: En Noel campo "ExpressãoExpresión",
                    estabeleçaestablezca aslas condiçõescondiciones para que asse açõesejecuten sejamlas executadasacciones.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Estabelecendo<b>Cómo establecer Ações<acciones</b>: EmEn 'AçõesAcciones', selecioneseleccione ala açãoacción
                    desejada (como "ocultar" ouo "exibirexhibir") e identifique oel elemento alvoobjetivo.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Finalizando<<b>Cómo finalizar</b>: AdicioneIncluya más maisacciones açõessi sefuera necessárionecesario ey depoisdespués
                    cliquehaga clic emen 'salvargrabar' para finalizar aslas alteraçõesmodificaciones.
                  </p>
                </li>
              </ol>
              <br>

              <p>
                <video autoplay loop muted style="width: 100%; height: auto; max-width: 100%; display: block;">
                  <source src="https://totvscrm.com/wp-content/uploads/2023/09/condicionalcliente.mp4" type="video/mp4">
                </video>
              </p>
              
            
            <br />


            <h3>Regra de validación Validaçãoen noel formulárioformulario "Clientes"</h3>
            <ol>
              <li>
                <p><b>Comienzo <p><b>Iníciode dala Configuração<configuración</b>:</p>
                <ul>
                  <li>Abra oel módulo de objetos ey selecioneseleccione "Customers".</li>
                </ul>
              </li>
              <li>
                <p><b>Edição<<p><b>Edición</b>:</p>
                <ul>
                  <li>Clique no ícone<li>Haga clic en el ícono de lápis para iniciarcomenzar ala ediçãoedición.</li>
                </ul>
              </li>
              <li>
                <p><b>Acessando<p><b>Cómo acceder asa Regras<Reglas</b>:</p>
                <ul>
                  <li>Na<li>En la abasolapa "REGRASREGLAS", cliquehaga clic emen "AdicionarIncluir".</li>
                  <li>
                    EscolhaSeleccione "RegraRegla Avançadaavanzada" para configurar usandoutilizando expressõesexpresiones complexascomplejas.
                  </li>
                </ul>
              </li>
              <li>
                <p><b>Configuración <p><b>Configuraçãodetallada Detalhadade dala Regra<regla</b>:</p>
                <ul>
                  <li>No<li>En el campo "DescriçãoDescripción", explique brevemente ala regraregla.</li>
                  <li>
                    Utilize "ObservaçãoObservación" para fornecerofrecer detalhesdetalles adicionaisadicionales sobre ala regraregla.
                  </li>
                </ul>
              </li>
              <li>
                <p><b>Cómo <p><b>Estabelecendoestablecer ala Expressão<expresión</b>:</p>
                <ul>
                  <li>
                    NoEn el campo "ExpressãoExpresión", determine aslas condiçõescondiciones necessáriasnecesarias para ativaractivar aslas
                    açõesacciones programadas.
                  </li>
                </ul>
              </li>
              <li>
                <p><b>Configuração<p><b>Configuración dadel Mensagemmensaje de Alerta<alerta</b>:</p>
                <ul>
                  <li>
                    SelecioneSeleccione quandocuándo adebe mensagemmostrarse deveel ser mostradamensaje: sesi aslas condiçõescondiciones foramfueron
                    atendidas ouo nãono.
                  </li>
                  <li>
                    EscrevaEscriba oel texto que será exibido na tela nose mostrará en la pantalla en el campo de texto
                    correspondentecorrespondiente.
                  </li>
                  <li>
                    Especifique ondedónde ase mensagemmostrará seráel exibidamensaje: no topo da tela ou abaixo doen la parte superior de la pantalla o debajo del
                    campo correspondentecorrespondiente.
                  </li>
                </ul>
              </li>
              <li>
                <p><b>Finalização<<p><b>Finalización</b>:</p>
                <ul>
                  <li>
                    ApósDespués de configurar todos oslos detalhesdetalles, cliquehaga emclic en "SalvarGrabar" para aplicar aslas
                    alteraçõesmodificacionees feitasrealizadas.
                  </li>
                </ul>
              </li>
            </ol>
            
          <br /> 
       
          <p>
            <video autoplay loop muted style="width: 100%; height: auto; max-width: 100%; display: block;">
              <source src="https://totvscrm.com/wp-content/uploads/2023/09/validacaocampo.mp4" type="video/mp4">
            </video>
          </p>

          </section>

          <section id="section4" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i> &nbspEXEMPLOnbspEJEMPLO PRÁTICO<PRÁCTICO</h2>
            <h3>Caso de uso<utilización</h3>
            

            <p>
              <b>Cenário<b>Escenario:</b>
              <p>Maria lidatrabaja diariamente comcon umauna grandegran quantidadecantidad de dadosdatos de clientes, buscando constanteconstantemente optimización otimizaçãoy econfiabilidad fiabilidadeen nala base de dadosdatos. 
                </p>
              
              <br>
              
              <b>Desafio<b>Desafío Antigoantiguo:</b>
              <p>Antes dade la atualizaçãoactualización dodel TOTVS CRM, MariaMaría enfrentavaenfrentaba desafios
desafíos en la gestión de datos. El proceso de entrada de datos era inconsistente, con falta nade gestãovalidación de dados. O processo de entradacumplimentación, lo cual llevaba a errores. La incapacidad de dados
personalizar la visibilidad y capacidad para edición de los campos del formulario también limitaba la eficiencia eradel inconsistenteproceso, comforzando faltaal deequipo validaçãoa denavegar preenchimento,por omedio que
de campos irrelevantes y desperdiciar tiempo precioso.
          levava a erros. A incapacidade de personalizar a
                visibilidade e editabilidade dos campos do formulário também limitava a
                eficiência do processo, forçando a equipe a navegar através de campos
                irrelevantes e desperdiçar tempo precioso.
                
                </p>
              
              <br>
              
              <b>Solução<b>Solución Atualizadaactualizada:</b>
              <p>Agora<p>Ahora, elesestos podempueden nãono apenassolamente personalizar ala visibilidadevisibilidad ey ala editabilidadecapacidad dos
para edición de              los campos, massino tambémtambién implementar regrasreglas condicionaiscondicionales que validamvalidan ola preenchimento
cumplimentación de los campos             dos campos noen el momento dode preenchimento do formulário, garantindo dados mais
                precisos e confiáveisla cumplimentación del formulario, garantizando datos más precisos y confiables.</p>
              
              <br>
              
              
              </p>
          </section>
      
         
          </div>
          
            <!-- Tab 30 fim -->
          
            <!-- Tab 30 fim -->
          
          </div>
        </div>
    


    

    <div id="tab3" class="col s12">
      <div class="tab-content">
        <div style="background-color: #f4f5f7; padding: 20px; margin-left: 50px; margin-right: 50px;">
              <!-- Primeira coluna do conteúdo da guia 2 -->
              <div class="container">
                <h2 class="custom-heading"><i class="fa-solid fa-circle-question"></i> PERGUNTASPREGUNTAS FREQUENTES<FRECUENTES</h2>
                <ul class="collapsible">
                  <li>
                    <div class="collapsible-header"><i class="material-icons">question_answer</i>Existei>¿Existe una umalimitación limitaçãoen noel número de regrasreglas condicionaiscondicionales que podempueden ser criadascrearse?</div>
                    <div class="collapsible-body"><span>Não><span>No, nosin entantoembargo, ées importante notarobservar que ala criaçãocreación de umun grandegran número de regrasreglas podepuede complicar ala gestãogestión ey potencialmente desacelerar oel sistema. 
                      </span></div>
                </li> 
                <li>
                  <div class="collapsible-header"><i class="material-icons">question_answer</i>Osi>¿Los campos que se foramocultaron por ocultadosmedio atravésde dala personalizaçãopersonalización sãoson completamente removidosretirados de dola bancobase de dadosdatos?</div>
                  <div class="collapsible-body"><span>Não><span>No, no nãoson sãoretirados removidosde dola bancobase de dadosdatos; elesestos sãosolamente apenasson ocultados dade la interfaceinterfaz dodel usuáriousuario para simplificar ala entrada de dadosdatos ey ala visualizaçãovisualización. 
                    </span></div>
              </li> 

              <li>
                <div class="collapsible-header"><i class="material-icons">question_answer</i>Quaisi>¿Cuáles sãoson oslos operadores disponíveisdisponibles para usarutilizar emen umauna expressãoexpresión?</div>
                <div class="collapsible-body"><span><h3>Operadores Matemáticos:</h3> <br>
                  <ol>
                    <li><b>"+" (Soma)</b></li>
                    <li><b>"-" (Subtração)</b></li>
                    <li><b>"*" (Multiplicação)</b></li>
                    <li><b>"/" (Divisão)</b></li>
                    <li>
                      <b>"()" (Parênteses) -</b> Usado para definir a ordem de operações
                      em uma expressão.
                    </li>
                  </ol>

                  <br>

                  <h3>Operadores Lógicos:</h3>
<br>
                  <ol>
                    <li>
                      <b>"AND" (E) -</b> Retorna verdadeiro se ambas as expressões forem
                      verdadeiras.
                    </li>
                    <li>
                      <b>"OR" (OU) -</b> Retorna verdadeiro se pelo menos uma das
                      expressões for verdadeira.
                    </li>
                    <li>
                      <b>"!=" (Diferente) -</b> Retorna verdadeiro se os valores
                      comparados forem diferentes.
                    </li>
                    <li>
                      <b>"==" (Igual) -</b> Retorna verdadeiro se os valores comparados
                      forem iguais.
                    </li>
                    <li>
                      <b>">" (Maior que) -</b> Retorna verdadeiro se o valor à
                      esquerda for maior que o valor à direita.
                    </li>
                    <li>
                      <b>"<" (Menor que) -</b> Retorna verdadeiro se o valor à
                      esquerda for menor que o valor à direita.
                    </li>
                    <li>
                      <b>">=" (Maior ou igual a) -</b> Retorna verdadeiro se o valor
                      à esquerda for maior ou igual ao valor à direita.
                    </li>
                    <li>
                      <b>"<=" (Menor ou igual a) -</b> Retorna verdadeiro se o valor
                      à esquerda for menor ou igual ao valor à direita.
                    </li>
                  </ol>
                  <br>
                  <h3>Funções de Utilidade:</h3>
                  <br>
                  <ol>
                    <li>
                      <b>"IN" -</b> Verifica se um valor está presente em uma lista de
                      valores.
                    </li>
                    <li>
                      <b>"IS_EMPTY" -</b> Verifica se um valor está vazio, e retorna
                      verdadeiro se estiver vazio.
                    </li>
                    <li><b>"IS_NUMBER" -</b> Verifica se um valor é um número.</li>
                    <li>
                      <b>"COALESCE" -</b> Retorna o primeiro valor não nulo em uma lista
                      de valores (essa função não foi detalhada no seu texto, mas é uma explicação
                      geral do que ela faz).
                    </li>
                  </ol>
                  
                  </span></div>
            </li> 


                
                    <!-- Adicione mais perguntas e respostas aqui conforme necessário -->

                </ul>
                
            </div>

            
                            <!-- Primeira coluna do conteúdo da guia 2 -->

            
            </div>
             
      </div>
  </div>

    
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
  // Inicialização das tabs
  document.addEventListener("DOMContentLoaded", function () {
    var tabs = document.querySelectorAll(".tabs");
    M.Tabs.init(tabs);
  });
</script>

<script>
  const items = document.querySelectorAll("#indice li");

  items.forEach(item => {
      item.addEventListener('click', (e) => {
          const targetId = e.target.getAttribute('data-target');
          const targetElement = document.getElementById(targetId);
          window.scrollTo({
              top: targetElement.offsetTop - 10,
              behavior: "smooth"
          });
      });
  });
</script>

<script src="https://kit.fontawesome.com/c97d4c197a.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 


<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script> 

<script>hljs.highlightAll();</script>
  


<script src="scripts.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.collapsible');
      var instances = M.Collapsible.init(elems);
  });
</script>

 <!-- ... (conteudo video) ... -->
 <script src="https://www.youtube.com/iframe_api"></script>

 <script>
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '315',
      width: '560',
      videoId: 'FvsuBOvyyro',
      playerVars: {
        start: 1238, // 20:38 em segundos
        end: 1356   // 22:36 em segundos
      }
    });
  }
</script>

...