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;
}
</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 CONDICIONAISCONDICIONALES: ATRIBUTOS DE TIPO RELACIONAMENTORELACIÓN PARA OBJETOS PERSONALIZADOS
</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</td>
</tr>
<tr>
<td><i class="fas fa-hashtag"></i> <b>Identificador:</b></td>
<td>
ME190120231025</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">
Esta actualización introduce un nuevo atributo que facilita la personalización de formularios en las áreas de Leads, Actividades y Clientes. Con los "atributos de relación", puede definir conexiones directas entre diferentes campos del formulario, permitiendo que la selección en un campo afecte directamente las opciones disponibles en otros.
</p>
<br>
<h2 class="custom-heading">
<i class="fa-solid fa-rocket"></i>    OBJETIVO
</h2>
<p class="justificado"> El objetivo principal de esta mejora es simplificar y hacer más dinámica la personalización de formularios en el TOTVS CRM.
</p>
<br>
<!-- ... (seu conteúdo existente) ... -->
<h2 class="custom-heading">
<i class="fa-solid fa-book"></i>   ANTES DE COMENZAR
</h2>
<h3>Requisitos</h3>
<p>Para utilizar este recurso, es importante entender un poco sobre fórmulas y cómo funcionan las reglas condicionales en el sistema. Esto le va a ayudar a utilizar al máximo las nuevas opciones de personalización disponibles.
</p>
</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>
<p>
<b>Reglas condicionales de visibilidad y edición</b>: Utilizando
atributos del tipo "relación simple", ahora es posible crear reglas que determinan cuándo y cómo serán visibles o editables ciertos campos en sus formularios utilizando atributos del tipo "relación simple". Esto significa que puede configurar sus formularios para que ciertos campos solamente aparezcan o puedan editarse bajo condiciones específicas, optimizando la experiencia del usuario y evitando errores de cumplimentación.
</p>
</li>
<li>
<p>
<b>Reglas de validación</b>: De la misma forma, los atributos de "relación simple" pueden utilizarse para establecer reglas de validación en sus formularios. Esto facilita la implementación de controles de calidad en los datos incluidos en el sistema, garantizando que las informaciones atiendan a criterios específicos antes de ser aceptadas.
</p>
</li>
</ol>
</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>
<b>Cómo utilizar la regla de exhibición/edición condicional:</b>
<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 del 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 regras</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 deseada (como "ocultar" o "mostrar") 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/workrelacionw.mp4" type="video/mp4">
</video>
</p><br>
<h3>Regla de validación en el formulario </h3>
<ol>
<li>
<p><b>Comienzo de la configuración</b>:</p>
<ul>
<li>Abra el módulo de objetos y seleccione el objeto deseado (Leads, Actividades y Clientes).</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 la regla brevemente.</li>
<li>
Utilice "Observación" para ofrecer detalles adicionales sobre la regla.
</li>
</ul>
</li>
<li>
<p><b>Cómo establececer 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
modificaciones 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/ser5.mp4" type="video/mp4">
</video>
</p><br>
</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> ¿Qué son los "atributos de relación"?
</div>
<div class="collapsible-body"><span> Los "atributos de relación" sirven como una ponte entre diferentes campos
en un formulario, facilitando la creación de reglas condicionais más
sofisticadas y personalizadas. Lo cual, por su vez, puede mejorar la eficiencia
de los procesos de negocios, al permitir que los formularios respondan
dinámicamente con base en las entradas y condiciones específicas.
</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