Á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;
}   /* impedir vermelho no nav */

#breadcrumb-section > nav {
    background-color: initial !important;
    box-shadow: none !important;
}

@media only screen and (min-width: 601px) {
    nav, 
    nav .nav-wrapper i, 
    nav a.sidenav-trigger, 
    nav a.sidenav-trigger i {
        height: auto !important;
        line-height: normal !important;
    }
}
/* final vermelho no nav */
   </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"> 
            REGLAS DE OCULTAMIENTO Y EDICIÓN CONDICIONALES EN LA PANTALLA 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">DETALLES 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>Producto:</b></td>
              <td>Gestión de clientes</td>
          </tr>
          <tr>
              <td><i class="fas fa-link"></i> <b>Línea de producto:</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>Aplicación:</b></td>
              <td>Web/app 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 VISIÓN GENERAL
      </h2>
      <p class="justificado">
        Ahora, en la pantalla de registro, tiene la libertad de personalizar la visibilidad y la capacidad para edición de los campos de acuerdo con criterios específicos, además de poder validar las informaciones incluidas por medio de reglas definidas. Esta mejora representa una gestión de datos más inteligente y eficiente, alineándose perfectamente a las necesidades y preferencias de su empresa.
        
        
        
      </p>
<br>

    <h2 class="custom-heading">
      <i class="fa-solid fa-rocket"></i>&nbsp &nbsp OBJETIVO
    </h2>
    <p class="justificado"> El principal objetivo de esta actualización es optimizar la gestión de clientes, proporcionando una pantalla más adaptable y dinámica que responde de manera más alineada a sus necesidades específicas.
    </p>
    <br>

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

               <h2 class="custom-heading">
                <i class="fa-solid fa-book"></i> &nbsp ANTES DE COMENZAR
            </h2>
            <h3>Requisitos</h3>
            <p>Para aprovechar al máximo este nuevo recurso, recomendamos que esté familiarizado con el módulo Personalización.</p> <br>

                <h3> Atributos estándar del formulario</h3>

                <p>La mayoría de los atributos del formulario son compatibles con las funciones, sin embargo, existen algunas excepciones que se detalla a continuación. </p> <br>

                <table class="striped custom-grey">
                  <thead>
                  <tr>
                    <th>Nombre técnico</th>
                    <th>Nombre en pantalla</th>
                    <th>Tipo de dato</th>
                    <th>¿Es compatible?</th>
                  </tr>
                  <tr>
                    <td>active</td>
                    <td>Activo</td>
                    <td>Booleano</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>name</td>
                    <td>Nombre</td>
                    <td>Texto</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>tradingName</td>
                    <td>Alias/Nombre fantasía</td>
                    <td>Texto</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>code</td>
                    <td>Código</td>
                    <td>Texto</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>customerPersonType</td>
                    <td>Tipo de persona</td>
                    <td>Relación</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>birthday</td>
                    <td>Fecha de nacimiento/Fecha de fundación</td>
                    <td>Fecha</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>parentAccount</td>
                    <td>Cuenta principal</td>
                    <td>Relación</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>contacts</td>
                    <td>Contactos</td>
                    <td>Relación multivalorada</td>
                    <td>No</td>
                  </tr>
                  <tr>
                    <td>professionalId</td>
                    <td>Responsable</td>
                    <td>Relación</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>phones</td>
                    <td>Teléfono</td>
                    <td>Indefinido</td>
                    <td>No</td>
                  </tr>
                  <tr>
                    <td>emails</td>
                    <td>E-mail</td>
                    <td>Indefinido</td>
                    <td>No</td>
                  </tr>
                  <tr>
                    <td>leadSituation</td>
                    <td>Tipo</td>
                    <td>Relación</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>leadOrigin</td>
                    <td>Origen</td>
                    <td>Relación</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>location</td>
                    <td>Ramos de actividad</td>
                    <td>Relación multivalorada</td>
                    <td>No</td>
                  </tr>
                  <tr>
                    <td>customerGroups</td>
                    <td>Grupos</td>
                    <td>Relación multivalorada</td>
                    <td>No</td>
                  </tr>
                  <tr>
                    <td>customerClassification</td>
                    <td>Clasificación</td>
                    <td>Relación</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>companies</td>
                    <td>Empresas</td>
                    <td>Relación multivalorada</td>
                    <td>No</td>
                  </tr>
                  <tr>
                    <td>note</td>
                    <td>Observación</td>
                    <td>Texto</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>addresses</td>
                    <td>Direcciones</td>
                    <td>Indefinido</td>
                    <td>No</td>
                  </tr>
                  <tr>
                    <td>facebook</td>
                    <td>Facebook</td>
                    <td>Texto</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>instagram</td>
                    <td>Instagram</td>
                    <td>Texto</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>twitter</td>
                    <td>Twitter</td>
                    <td>Texto</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>linkedin</td>
                    <td>LinkedIn</td>
                    <td>Texto</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>website</td>
                    <td>Website</td>
                    <td>Texto</td>
                    <td>Sí</td>
                  </tr>
                </table>

                <br>
                <h3>Atributos personalizados</h3> 
<p>Antes de comenzar a construir reglas utilizando atributos personalizados, es importante verificar si los tipos de atributos seleccionados son permitidos. Consulte la siguiente lista para identificar qué tipos de campos son compatibles:</p><br>

                <table class="striped custom-grey">
                  <thead>
                  <tr>
                    <th>Tipo del atributo personalizado</th>
                    <th>¿Es compatible?</th>
                  </tr>
                  <tr>
                    <td>Booleano</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>Fórmula</td>
                    <td>No</td>
                  </tr>
                  <tr>
                    <td>Indefinido</td>
                    <td>No</td>
                  </tr>
                  <tr>
                    <td>Lista de opciones</td>
                    <td>No</td>
                  </tr>
                  <tr>
                    <td>Número</td>
                    <td>Sí</td>
                  </tr>
                  <tr>
                    <td>Relación</td>
                    <td>Sí *</td>
                  </tr>
                  <tr>
                    <td>Relación remota</td>
                    <td>No</td>
                  </tr>
                  <tr>
                    <td>Subobjeto</td>
                    <td>No **</td>
                  </tr>
                  <tr>
                    <td>Texto</td>
                    <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 campos de relación multivalorados no son compatibles en el momento y es obligatorio tener por lo menos un campo configurado para exhibición. La creación de subobjetos en objetos estándar no está disponible actualmente.
</div>
              
                
          </section>

          <section id="section2" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-star"></i>&nbsp DETALLES FUNCIONALES</h2>
            <h3>Funciones </h3>
            <ol>
              <li>
                <p><b>Reglas de ocultamiento y edición condicional</b>:</p>
                <ul class="browser-default">
                  <li>Habilita la definición de criterios específicos para la exhibición u ocultamiento de
                    campos en la pantalla, proporcionando una visión más enfocada y relevante.
                    </li>
                </ul>
              </li>
              <li>
                <p><b>Validación de campos de registro</b>:</p>
                <ul class="browser-default">
                  <li>Garantiza que los datos incluidos estén correctos y consistentes, minimizando
                    errores y otimizando procesos posteriorees.
                    </li>
                </ul>
              </li>
                           <li>
                <p><b>Opción de registro de mensaje condicional</b>:</p>
                <ul class="browser-default">
                  <li>Permite el registro de mensajes personalizados que se mostrarán si
                    las condiciones atribuidas sean atendidas o no, ayudando en la orientación y
                    notificación a los usuários durante el proceso de registro o edición de informaciones
                    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 ¿CÓMO UTILIZAR?</h2>
            <h3> Paso a paso</h3>

            <p><b>Cómo utilizar la regla de exhibición/edición condicional:</b> </p>
            <br>

            <ol>
                <li>
                  <p>
                    <b>Comience la personalización</b>: Acceda al módulo de
                    personalización.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Cómo acceder a Funcionalidades</b>: Vaya hasta la sección
                    "Funcionalidades".
                  </p>
                </li>
                <li>
                  <p>
                    <b>Cómo iniciar la Edición</b>: Para editar haga clic en el ícono de lápis.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Cómo editar el Formulario</b>: en el card do formulario, haga clic en
                    'editar' y seleccione el campo o la sección que desea modificar.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Cómo definir Configuraciones dinámicas</b>: Seleccione la opción
                    "dinámico" para ajustar las configuraciones de visibilidad o edición.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Cómo incluir reglas</b>: Haga clic en 'incluir regla' y
                    describa la regla que desea implementar en el campo 'Descripción'.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Cómo crear la Expresión lógica</b>: En el campo "Expresión",
                    establezca las condiciones para que se ejecuten las acciones.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Cómo establecer acciones</b>: En 'Acciones', seleccione la acción
                    desejada (como "ocultar" o "exhibir") e identifique el elemento objetivo.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Cómo finalizar</b>: Incluya más acciones si fuera necesario y después
                    haga clic en 'grabar' para finalizar las modificaciones.
                  </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 en el formulario "Clientes"</h3>
            <ol>
              <li>
                <p><b>Comienzo de la configuración</b>:</p>
                <ul>
                  <li>Abra el módulo de objetos y seleccione "Customers".</li>
                </ul>
              </li>
              <li>
                <p><b>Edición</b>:</p>
                <ul>
                  <li>Haga clic en el ícono de lápis para comenzar la edición.</li>
                </ul>
              </li>
              <li>
                <p><b>Cómo acceder a Reglas</b>:</p>
                <ul>
                  <li>En la solapa "REGLAS", haga clic en "Incluir".</li>
                  <li>
                    Seleccione "Regla avanzada" para configurar utilizando expresiones complejas.
                  </li>
                </ul>
              </li>
              <li>
                <p><b>Configuración detallada de la regla</b>:</p>
                <ul>
                  <li>En el campo "Descripción", explique brevemente la regla.</li>
                  <li>
                    Utilize "Observación" para ofrecer detalles adicionales sobre la regla.
                  </li>
                </ul>
              </li>
              <li>
                <p><b>Cómo establecer la expresión</b>:</p>
                <ul>
                  <li>
                    En el campo "Expresión", determine las condiciones necesarias para activar las
                    acciones programadas.
                  </li>
                </ul>
              </li>
              <li>
                <p><b>Configuración del mensaje de alerta</b>:</p>
                <ul>
                  <li>
                    Seleccione cuándo debe mostrarse el mensaje: si las condiciones fueron
                    atendidas o no.
                  </li>
                  <li>
                    Escriba el texto que se mostrará en la pantalla en el campo de texto
                    correspondiente.
                  </li>
                  <li>
                    Especifique dónde se mostrará el mensaje: en la parte superior de la pantalla o debajo del
                    campo correspondiente.
                  </li>
                </ul>
              </li>
              <li>
                <p><b>Finalización</b>:</p>
                <ul>
                  <li>
                    Después de configurar todos los detalles, haga clic en "Grabar" para aplicar las
                    modificacionees realizadas.
                  </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> &nbspEJEMPLO PRÁCTICO</h2>
            <h3>Caso de utilización</h3>
            

            <p>
              <b>Escenario:</b>
              <p>Maria trabaja diariamente con una gran cantidad de datos de clientes, buscando constantemente optimización y confiabilidad en la base de datos. 
                </p>
              
              <br>
              
              <b>Desafío antiguo:</b>
              <p>Antes de la actualización del TOTVS CRM, María enfrentaba desafíos en la gestión de datos. El proceso de entrada de datos era inconsistente, con falta de validación de cumplimentación, lo cual llevaba a errores. La incapacidad de personalizar la visibilidad y capacidad para edición de los campos del formulario también limitaba la eficiencia del proceso, forzando al equipo a navegar por medio de campos irrelevantes y desperdiciar tiempo precioso.
                
                </p>
              
              <br>
              
              <b>Solución actualizada:</b>
              <p>Ahora, estos pueden no solamente personalizar la visibilidad y la capacidad para edición de los campos, sino también implementar reglas condicionales que validan la cumplimentación de los campos en el momento de la 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> PREGUNTAS FRECUENTES</h2>
                <ul class="collapsible">
                  <li>
                    <div class="collapsible-header"><i class="material-icons">question_answer</i>¿Existe una limitación en el número de reglas condicionales que pueden crearse?</div>
                    <div class="collapsible-body"><span>No, sin embargo, es importante observar que la creación de un gran número de reglas puede complicar la gestión y potencialmente desacelerar el sistema. 
                      </span></div>
                </li> 
                <li>
                  <div class="collapsible-header"><i class="material-icons">question_answer</i>¿Los campos que se ocultaron por medio de la personalización son completamente retirados de la base de datos?</div>
                  <div class="collapsible-body"><span>No, no son retirados de la base de datos; estos solamente son ocultados de la interfaz del usuario para simplificar la entrada de datos y la visualización. 
                    </span></div>
              </li> 

              <li>
                <div class="collapsible-header"><i class="material-icons">question_answer</i>¿Cuáles son los operadores disponibles para utilizar en una expresión?</div>
                <div class="collapsible-body"><span><h3>Operadores matemáticos:</h3> <br>
                  <ol>
                    <li><b>"+" (Suma)</b></li>
                    <li><b>"-" (Sustracción)</b></li>
                    <li><b>"*" (Multiplicación)</b></li>
                    <li><b>"/" (División)</b></li>
                    <li>
                      <b>"()" (Paréntesis) -</b> Utilizado para definir la orden de operaciones
                      en una expresión.
                    </li>
                  </ol>

                  <br>

                  <h3>Operadores lógicos:</h3>
<br>
                  <ol>
                    <li>
                      <b>"AND" (Y) -</b> Devuelve verdadero si ambas expresiones fueran
                      verdaderas.
                    </li>
                    <li>
                      <b>"OR" (O) -</b> Devuelve verdadero si por lo menos una de las
                      expresiones fuera verdadera.
                    </li>
                    <li>
                      <b>"!=" (Diferente) -</b> Devuelve verdadero si los valores
                      comparados fueran diferentes.
                    </li>
                    <li>
                      <b>"==" (Igual) -</b> Devuelve verdadero si los valores comparados
                      fueran iguales.
                    </li>
                    <li>
                      <b>">" (Mayor que) -</b> Devuelve verdadero si el valor de la iz
                      quierda fuera maior que el valor de la derecha.
                    </li>
                    <li>
                      <b>"<" (Menor que) -</b> Devuelve verdadero si el valor de la iz
                      quierda fuera menor que el valor de la derecha.
                    </li>
                    <li>
                      <b>">=" (Mayor o igual a) -</b> Devuelve verdadero si el valor
                      de la izquierda fuera mayor o igual que el valor de la derecha.
                    </li>
                    <li>
                      <b>"<=" (Menor o igual a) -</b> Devuelve verdadero si el valor
                      de la izquierda fuera menor o igual que el valor de la dercha.
                    </li>
                  </ol>
                  <br>
                  <h3>Funciones de utilidad:</h3>
                  <br>
                  <ol>
                    <li>
                      <b>"IN" -</b> Verifica si un valor está presente en una lista de
                      valores.
                    </li>
                    <li>
                      <b>"IS_EMPTY" -</b> Verifica si un valor está vacío, y devuelve
                      verdadero si estuviera vacío.
                    </li>
                    <li><b>"IS_NUMBER" -</b> Verifica si un valor es un número.</li>
                    <li>
                      <b>"COALESCE" -</b> Devuelve el primeir valor no nulo en una lista
                      de valores (esta función no fue detallada en su texto, pero es una explicación
                      general de lo que esta realiza).
                    </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>

...