Histórico da Página
| 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ÇÃOCONFIGURACIÓN DE EDICIÓN EDIÇÃOY EVISIBILIDAD VISIBILIDADEDE DOSLOS CAMPOS DE IDENTIFICAÇÃOIDENTIFICACIÓN PARA CLIENTES EY 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">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>Personalización</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>
ME010620221552</td>
</tr>
</table>
</span>
</div>
</div>
<br>
<h2 class="custom-heading">
<i class="fa-solid fa-eye"></i>    VISIÓN GENERAL
</h2>
<p class="justificado">
El perfeccionamiento en el TOTVS CRM trae mayor flexibilidad a la personalización del formulario de Cliente y Lead, en particular a la visualización y edición del campo de documentos de identificación. Ahora, con la implementación de este recurso, los usuarios tendrán la capacidad de definir en determinadas condiciones si los documentos de identificación deben mostrarse u omitirse, además de decidir si solamente deben ser para lectura o si pueden editarse.
</p>
<br>
<h2 class="custom-heading">
<i class="fa-solid fa-rocket"></i>    OBJETIVO
</h2>
<p class="justificado">
Ampliar el control de personalización en el TOTVS CRM, ofreciendo más opciones de configuración para campos sensibles como documentos de identificación en formularios de Cliente y Lead, de acuerdo con las necesidades específicas de 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 COMENZAR
</h2>
<h3>Requisitos</h3>
<ol>
<li>La configuración de edición/visualización afectará a todos los ítems de un documento, por ejemplo, tanto el RCPF como el DI.</li>
<li>No es posible crear una regla diferente para RCPF y otra para DI.</li>
<li>Documentos marcados como obligatorios no pueden ocultarse.</li>
<li>Si el campo "Tipo de persona" se ocultara, los documentos también se ocultarán, excepto los que sean obligatorios.</li>
<li>Reglas condicionales que utilicen documentos de identificación como criterio no son válidas.</li>
</ol>
<br>
</section>
<section id="section2" style="margin-top: 40px;">
<h2 class="custom-heading"><i class="fa-solid fa-star"></i>  DETALLES FUNCIONALES</h2>
<h3>Funciones </h3>
<ol>
<li>
<strong>Personalización de visibilidad del Campo de documento:</strong>
Ahora los usuarios tienen la capacidad de decidir si los documentos de identificación
deben mostrarse u omitirse y si estos solamente deben ser para lectura o
editables.
</li>
<li>
<strong>Reglas condicionalmente aplicadas:</strong>
Ciertas reglas pueden aplicarse al campo de documento de identificación con
base en las condiciones definidas por el usuario.
</li>
</ol>
<div class="alert custom-alert-warning" role="alert" style="padding-left: 20px;">
<i class="fas fa-exclamation-triangle"></i> <strong>Atención:</strong>
<p>Actualmente, no es posible crear reglas condicionales que utilicen documentos de identifición como criterio. Vea algunos ejemplos de reglas que no se aceptarán:</p>
<ul>
<li><strong>Regla no válida:</strong> Si el RCPF del cliente fuera 451.611.030-00, oculte el campo código del cliente.</li>
<li><strong>Regla no válida:</strong> Si el usuario no completó el CPF, la acción de grabar el registro de cliente se bloqueará.</li>
</ul>
<p>Recomendamos revisar las condiciones de sus reglas para evitar conflictos o problemas de usabilidad.</p>
</div>
</section>
<section id="section3" style="margin-top: 40px;">
<h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>  ¿CÓMO UTILIZAR?</h2>
<h3> Paso a paso</h3>
<ol>
<li>Acceda al Módulo de Personalización: Comience accediendo al módulo de Personalización en el TOTVS CRM. CRM.</li>
<li>Personalización del formulario: Vaya al área de personalización y seleccione la opción para personalizar el formulario de Cliente ou Lead.</li>
<li>Configurar el Campo de documento de identificación: Encuentre el campo de documentos de identificación y aplique las configuraciones deseadas para visualización y edición.</li>
<li>Definir Reglas condicionalmente aplicadas:Si fuera necesario, defina reglas específicas que se aplicarán al campo con base en las condiçciones suministradas.</li>
</ol>
</section>
<section id="section4" style="margin-top: 40px;">
<h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i>  EJEMPLO PRÁCTICO</h2>
<h3>Caso de utilización</h3>
<p>
<b>Escenario:</b>
<p>La organización XYZ desea limitar la visualización y edición de documentos de
identificación para ciertos usuarios.
</p>
<br>
<b>Desafío antiguo:</b>
<p>Los administradores del TOTVS CRM en la empresa XYZ tenían dificultad para
personalizar el formulario de Cliente y Lead para atender sus necesidades.
</p>
<br>
<b>Solución actualizada:</b>
<p>Con el nuevo recurso implementado en el TOTVS CRM, la empresa XYZ ahora puede personalizar fácilmente la visualización y edición del campo de documentos de identificació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> PREGUNTAS FRECUENTES</h2>
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">question_answer</i>¿Puedo crear una regla condicional que oculta el campo código del cliente si el RCPF tuviera un valor específico?
</div>
<div class="collapsible-body"><span>No, actualmente no es compatible crear reglas condicionales que utilicen documentos de
identificación como criterio. Por ejemplo, una regla que oculta el campo código del
cliente basado en el RCPF del cliente sería considerada no 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>
|
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas