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"> CONFIGURAÇÃO DE EDIÇÃO E VISIBILIDADE DOS CAMPOS DE IDENTIFICAÇÃO PARA CLIENTES E LEADS </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>Personalización</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> ME010620221552</td> </tr> </table> </span> </div> </div> <br> <h2 class="custom-heading"> <i class="fa-solid fa-eye"></i>    VISÃOVISIÓN GERALGENERAL </h2> <p class="justificado"> OEl perfeccionamiento aprimoramentoen noel TOTVS CRM traztrae maiormayor flexibilidadeflexibilidad àa personalizaçãola do personalización del formulário formulario de Cliente ey Lead, emen particular àa la visualizaçãovisualización ey ediçãoedición dodel campo de documentos de identificaçãoidentificación. AgoraAhora, con comla aimplementación implementaçãode desteeste recurso, os los usuarios tendrán la capacidad de definir en usuáriosdeterminadas terãocondiciones asi capacidade de definir em determinadas condições se os documentos de identificação devem ser exibidos ou omitidos, alémlos documentos de identificación deben mostrarse u omitirse, además de decidir se si solamente deben devem ser apenas para leituralectura ouo sesi podempueden ser editadoseditarse. </p> <br> <h2 class="custom-heading"> <i class="fa-solid fa-rocket"></i>    OBJETIVO </h2> <p class="justificado"> Ampliar oel controlecontrol de personalizaçãopersonalización en noel TOTVS CRM, oferecendoofreciendo maismás opçõesopciones de configuração configuración para campos sensíveissensibles como documentos de identificación identificaçãoen em formuláriosformularios de Cliente ey Lead, de acordoacuerdo comcon aslas necessidadesnecesidades específicas dos usuários ou da organizaçãode los usuarios o de la organización. </p> <br> <!-- ... (seu conteúdo existente) ... --> <h2 class="custom-heading"> <i class="fa-solid fa-book"></i>   ANTES DE COMEÇARCOMENZAR </h2> <h3>Requisitos</h3> <ol> <li>A<li>La configuraçãoconfiguración de ediçãoedición/visualizaçãovisualización afectará afetaráa todos oslos itensítems de umun documento, por exemploejemplo, tanto el RCPF CPFcomo quantoel RGDI.</li> <li>Não<li>No ées possívelposible criarcrear umauna regraregla distintadiferente para CPFRCPF ey outraotra para RGDI.</li> <li>Documentos marcados como obrigatóriosobligatorios nãono podempueden ser ocultadosocultarse.</li> <li>Se<li>Si oel campo "Tipo de pessoapersona" forse ocultadoocultara, oslos documentos tambémtambién serãose ocultadosocultarán, excetoexcepto oslos que foremsean obrigatóriosobligatorios.</li> <li>Regras<li>Reglas condicionaiscondicionales que utilizemutilicen documentos de identificaçãoidentificación como criterio critériono sãoson inválidasválidas.</li> </ol> <br> </section> <section id="section2" style="margin-top: 40px;"> <h2 class="custom-heading"><i class="fa-solid fa-star"></i>  DETALHESDETALLES FUNCIONAIS<FUNCIONALES</h2> <h3>Funções<h3>Funciones </h3> <ol> <li> <strong>Personalização<strong>Personalización de visibilidadevisibilidad dodel Campo de Documentodocumento:</strong> AgoraAhora oslos usuáriosusuarios têmtienen ala capacidadecapacidad de decidir sesi oslos documentos de identificaçãoidentificación devemdeben sermostrarse exibidosu ouomitirse omitidosy esi seestos elessolamente devemdeben ser apenas para leituralectura ouo editáveiseditables. </li> <li> <strong>Regras<strong>Reglas Condicionalmentecondicionalmente Aplicadasaplicadas:</strong> CertasCiertas regrasreglas podempueden seraplicarse aplicadasal ao campo de documento de identificaçãoidentificación comcon base en naslas condiçõescondiciones definidas por peloel usuáriousuario. </li> </ol> <div class="alert custom-alert-warning" role="alert" style="padding-left: 20px;"> <i class="fas fa-exclamation-triangle"></i> <strong>Atenção<strong>Atención:</strong> <p>Atualmente<p>Actualmente, nãono ées possívelposible criarcrear regrasreglas condicionaiscondicionales que utilizemutilicen documentos de identificaçãoidentifición como critériocriterio. VejaVea algunsalgunos exemplosejemplos de regrasreglas que nãono serãose aceitasaceptarán:</p> <ul> <li><strong>Regla <li><strong>Regrano inválidaválida:</strong> SeSi oel CPFRCPF dodel cliente forfuera 451.611.030-00, oculte oel campo código dodel cliente.</li> <li><strong>Regla <li><strong>Regrano inválidaválida:</strong> SeSi oel usuáriousuario nãono preencheucompletó oel CPF, ala açãoacción de salvargrabar oel cadastroregistro de cliente seráse bloqueadabloqueará.</li> </ul> <p>Recomendamos revisar aslas condiçõescondiciones de suassus regrasreglas para evitar conflitosconflictos ouo problemas de usabilidadeusabilidad.</p> </div> </section> <section id="section3" style="margin-top: 40px;"> <h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>  COMO¿CÓMO USARUTILIZAR?</h2> <h3> PassoPaso a Passo<paso</h3> <ol> <li>Acesse<li>Acceda oal Módulo de PersonalizaçãoPersonalización: InicieComience acessandoaccediendo oal módulo de PersonalizaçãoPersonalización en noel TOTVS CRM. CRM.</li> <li>Personalização<li>Personalización dodel Formulárioformulario: VáVaya para aal área de personalizaçãopersonalización ey selecioneseleccione ala opçãoopción para personalizar oel formulárioformulario de Cliente ou Lead.</li> <li>Configurar el Campo de Documentodocumento de Identificaçãoidentificación: LocalizeEncuentre oel campo de documentos de identificaçãoidentificación ey aplique aslas configuraçõesconfiguraciones desejadasdeseadas para visualizaçãovisualización ey ediçãoedición.</li> <li>Definir RegrasReglas Condicionalmentecondicionalmente Aplicadasaplicadas:SeSi fuera necessárionecesario, defina regrasreglas específicas que serãose aplicadasaplicarán aoal campo comcon base en naslas condiçõescondiçciones fornecidassuministradas.</li> </ol> </section> <section id="section4" style="margin-top: 40px;"> <h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i>  EXEMPLOnbspEJEMPLO PRÁTICO<PRÁCTICO</h2> <h3>Caso de uso<utilización</h3> <p> <b>Cenário<b>Escenario:</b> <p>A<p>La organizaçãoorganización XYZ desejadesea limitar ala visualizaçãovisualización ey ediçãoedición de documentos de identificaçãoidentificación para certosciertos usuáriosusuarios. </p> <br> <b>Desafio<b>Desafío Antigoantiguo:</b> <p>Os<p>Los administradores dodel TOTVS CRM en nala empresa XYZ tinhamtenían dificuldadedificultad empara personalizar oel formulárioformulario de Cliente ey Lead para atender às suassus necessidadesnecesidades. </p> <br> <b>Solução<b>Solución Atualizadaactualizada:</b> <p>Com<p>Con oel novonuevo recurso implementado en noel TOTVS CRM, ala empresa XYZ agoraahora podepuede facilmentepersonalizar personalizarfácilmente ala visualizaçãovisualización ey ediçãoedición dodel campo de documentos de identificaçãoidentificación.</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>Possoi>¿Puedo criarcrear umauna regraregla condicional que oculta oel campo código dodel cliente sesi oel CPFRCPF tivertuviera umun valor específico? </div> <div class="collapsible-body"><span>Não><span>No, atualmenteactualmente nãono ées suportadocompatible criarcrear regrasreglas condicionaiscondicionales que usemutilicen documentos de identificaçãoidentificación como critériocriterio. Por exemploejemplo, umauna regraregla que oculta oel campo código dodel cliente basado baseadaen noel CPFRCPF dodel cliente seriasería considerada inválidano válida. </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> |