Histórico da Página

HTML

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<div class="top">
    <div class="header">
      <center> <img class="img" src="https://tdn.totvs.com/download/attachments/732664978/log.png?version=1&modificationDate=1673393212156&api=v2" alt=""> </center>

    </div>
  </div>
  <div class="content">
    <div class="date"> <br>
      <div>ENE</div>
      <div class="day">6</div>
    </div>
    <div class="article"> <br>
      <h1> ✒️ Reglas con multiniveles de ocultación y edición condicionales en la pantalla de Actividades</h1>
      <br>
      <span class="badge badge-melhoria">MEJORA</span>
      <br> <br>

      <table>
        <colgroup>
          <col span="2" class="day">
          <col>
          <col>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead>


          <tr>

            <th scope="row">Producto</th>
            <td>TOTVS CRM Gestión de clientes</td>

          </tr>
          <tr>

            <th scope="row">Módulo</th>
            <td>Personalización </td>

          </tr>
          <tr>

            <th scope="row">Entorno</th>
            <td>Funcionalidades </td>
          </tr>
          <tr>

            <th scope="row">Identificador</th>
            <td>ME260520220839b </td>
          </tr>
          <tr>
            <th scope="row">Ticket/Issue</th>
            <td>DTCRMSD-1104 </td>
          </tr>
          <tr>

      </table>
      <br>
      <p> Los equipos de ventas siempre están sobrecargados con el número de actividades que necesitan hacer. El problema es que, a veces, acaban completando campos que no son relevantes para sus actividades y se olvidan de completar campos importantes. Todo esto acaba ocasionando más trabajo para el equipo de ventas, que ya tiene mucho para hacer. Pensando en esto, ahora es posible condicionar la exhibición y edición de actividades a partir de reglas. Este documento lo guiará por el proceso de uso de mejora.      </p>
      <div class="pause" id="i">📍 ¿Dónde puede encontrarse?</div>
      <p>
      <ol>
        <li> Módulo Personalización </li>
        <li> Funcionalidades </li>
  <li> Activities </li> 
 <li> Card formulário </li>  
             </ol>
      </p>

      <div class="pause">🔍  ¿Qué cambió?</a></div>
      <p> Hemos puesto a disposición una sección en el recurso de funcionalidades para que sea posible registrar, editar y eliminar reglas de exhibición y/o edición condicionadas a una expresión de validación.  Las acciones posibles para modificación de los estatus de los elementos cuando la regla condicional sea atendida son: <br> <br>

<strong> Ocultar - </strong>  Oculta el elemento en el formulario <br><br>

<strong> Visible -  </strong>   El elemento seleccionado será visible en el formulario <br><br>

<strong>Dejar editable -  </strong>  El elemento podrá editarse en pantalla <br><br>

<strong>Dejar solamente lectura -  </strong>  Determina que el elemento no pueda editarse, es decir, solo se permitirá la lectura de la información presente en el atributo.<br><br>

Ejemplo de una ocultación a partir de una regla condicional:<br> 

 

Cuando el tipo de actividad sea "e-mail", quiero que oculte el elemento de pantalla "Local". Para todos los otros tipos de actividades, estos campos deben mostrarse normalmente. </p>                            <div class="box info-box">
            <i class="fa fa-info-circle">             </i>
            <strong>Info</strong>
          <p>La regla condicional aplica cambio de comportamiento en los fomularios de web y mobile.
          </div><div> <img class="img3" src="https://tdn.totvs.com/download/attachments/733191203/gif%20regras%20%281%29.gif?version=1&modificationDate=1673805185471&api=v2" alt="Image" height="80%" width="100%"> </div>        
<br>

<div> <img class="img3" src="https://tdn.totvs.com/download/attachments/733191203/gif%20regras%202%20%282%29.gif?version=1&modificationDate=1673807513697&api=v2" alt="Image" height="80%" width="100%"> </div>  

<br>
 <p> Con la regla aplicada, usted puede editar, borrar y si fuera necesario, incluso deshabilitar. </p> <br>       <div> <img class="img3" src="https://tdn.totvs.com/download/attachments/733191203/gif%20regras%203.gif?version=1&modificationDate=1673808144650&api=v2" alt="Image" height="80%" width="100%">     
     

<p>Agregamos nuevos íconos de estatus de visualización y edición, que muestran instantáneamente los campos que son objeto de reglas condicionales. Estos íconos se muestran en la sección de personalización del formulario — permitiendo tener un panorama de estatus y acción realizada por medio de reglas.  

 <div> <center><img class="img3" src="https://tdn.totvs.com/download/attachments/733191203/Sem-t%C3%ADtulo-1.png?version=1&modificationDate=1673811615851&api=v2" alt="Image" height="60%" width="60%"> </center> </div>                 
<br>
 </div>

HTML

<style>

 #title-text {
	display: none !important;}   @import "compass/css3";  @import "compass/css3";

* {
  box-sizing: border-box;
  font-family: lato;
}



blockquote {
  margin: 3%;
  border-left: 10px solid #363636;
  padding: 2%;
  color: #222;
  background: #fff;
  font-style: italic;
  line-height: 130%;
}



.top {
  width: 100%;
  background: #363636;
  
}

.img {
image-resolution: 5px 5px 9px;
image-rendering: auto;
image-orientation:0deg
}

.header {
  max-width: 1200px;
  width: 98%;
  height: 7em;
  margin: 0px auto;
  overflow: hidden;

  
  h1 {
    text-align: center;     
    font-weight: bold;     
    color: #fff;
    padding: 20px;
   font-size: 22px;

     div {
      margin: 0;
      font-weight: normal;
      font-size: 1.8em;
    }
  }
  .author {
    font-size: 0.8em;
    font-weight: normal;
    border-top: 1px dashed #555;
    border-bottom: 1px dashed #555;
    max-width: 160px;
    text-align: center;
    margin: -1em auto 0 auto;
    padding: 0.3em;
    text-transform: uppercase;
    color: #ccc;
  }
}

.content {
  max-width: 750px;
  margin:0px auto;
  padding: 0;
}

.date {
  float: left;
  width: 10%;
  color: #444;
  text-align: center;
  div {
    margin: 0;
    line-height: 50%;
  }}
  .day {
    float: left;
    margin-top: 0.1em;
    width: 100%;
    color: #FEAC0E;
    font-size: 200%;
  }
}

.date-line {
  display: none;
}

.article {
  width: 90%;
  margin: 0 0 6em 0;
  float: left;
  padding: 0 1.3em 0 1.3em;
  border-left: 5px solid #FEAC0E;
 background: rgb(247, 247, 252);
 
  }
  h2 {
    font-weight: normal;       
    font-size: 22px;
   font-weight: bold;
   color: #555555;
    margin: 0;
  }
  h3 {
    font-weight: normal;
    font-size: 16px;
    color: #888;
    font-style: italic;
    margin: 0 0 1em 0;
  }
  p {
    margin: 0;
    padding-top: 8px;
    color: #555;
    text-align: justify;
    font-size: 16px;
    line-height: 150%;
    
  }

li{

  font-size: 16px;
  color: #555555;
}    

div{
    font-style: 16px;
    color: #555;
  }
  .firstpara {
    text-indent: 0;
    font-size: 16px;
  }
  .pause {
    margin: 2em auto 2em auto;
    color: #555555;
    width: 60%;
    padding: 10px;
    text-align: center;
   font-size: 20px;
 

    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .firstcharacter {
    float: left;
    font-size: 16px;
    font-weight: bold;
    color: #555;
    line-height: 0.6em;
    padding-top: 0.12em;
    padding-right: 0.1em;
    padding-left: 0;
  }
}

.footer {
  max-width: 1200px;
  width: 98%;
  height: 50px;
  margin: 0px auto;
  overflow: hidden;
  border-top: 1px solid #ccc;}
  .copy {
    float: right;
    font-style: italic;
    color: #888;
    padding: 1% 1% 0 0;
  }
}

.prev a,
.next a {
  position: fixed;
  top: 9.6em;
  padding: 1em;
  background: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.prev a:hover,
.next a:hover {
  background: #fff;
}
.prev a {
  left: 0.7em;
}
.next a {
  right: 0.7em;
}

@media only screen and (max-width: 450px) {
  .content {
    margin-top: 2em;
  }
  .social {
    display: none;
  }
  .date {
    display: none;
  }
  .date-line {
    display: inline;
  }
  .article {
    width: 100%;
    margin: 0 auto 2em auto;
    border-left: none;
    padding-bottom: 2em;
    border-bottom: 1px solid #ccc;
    p {
      font-size: 1.2em;
    }
  }
  .header {
    height: auto;
    position: fixed;
    top: 0;
    padding: 0;
    margin: 0;
    background: rgb(34, 16, 171)
     
    h1 {
      text-align: center;
      width: 100%;
      margin: 0;
      color: #f1f1f1;
      span {
        font-size: 80%;
      }
    }
    .author {
      display: none;
    }
  }
  .footer {
    text-align: center;
    padding: 3%;
    height: 40px;
    .copy {
      float: none;
    }
  }
  .prev a,
  .next a {
    position: relative;
    margin-bottom: 2em;
    text-align: center;
    top: 0;
  }
  .prev a {
    float: left;
    width: 40%;
  }
  .next a {
    float: right;
    width: 40%;
  }s
.table {
font-family: lato;
background-color: #fff;

}
  
#wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  inset: 0;
  justify-content: center;
  align-items: center;
}}
.flexWrap {
  display: flex;
  gap: 2px;
  width: 110px;
}
#disclaimer {
  font-family: sans-serif;
  color: #333333;
  position: fixed;
  top: 5%;
  right: 5%;
  width: 5%;
} 

.badge-primary {
  color: #8686FF;
  background-color: #F3F3FF;
    border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold  }

.badge-secondary{
  color: #ebeef0;
  background-color: #2abe74;
    border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold 

}

.badge-novo {
  color: #fff;
  background-color: #20d691;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold  }

.badge-danger{
  color: #ebeef0;
  background-color: #e93e9c;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold }

.badge-manutencao {
  color: #FFF;
  background-color: #efc307;
  border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold;
}

.badge-melhoria {
  color: #FFF;
  background-color: #6f60f6;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold;
}
.badge-light {
  color: #8686FF;
  background-color: #F3F3FF
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold;
}
.badge-dark {
  color: #ebeef0;
  background-color: #064118;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold } 


body {
  font-family: lato;
}
table {
  border-collapse: collapse;
}
th {
  text-align: left;
  background-color: #363636;
  color: #fff;
}
caption {
  font-size: 1.5rem;
  text-align: left;
  padding-bottom: 1rem;
}
td, th {
  padding: 0.5rem;
  border: 3px solid #fff;
}
tbody tr:nth-child(odd),
tfoot tr:nth-child(even) {
   background-color: #fff;
}
tfoot tr td:first-child {
  border: none;
  background-color: white;
}
tfoot {
border-top: 5px solid #fff;
}

.img2 {
   width:50%;
    height:auto;
    padding:2%;
    margin-bottom:4%;
    align-content: center;
    display: block;
    margin-left: auto;
    margin-right: auto }

 #f7f7fc;
  }  



}
container{
    width: 50%;
}
.borderbox{
  border: 1px dashed #ebebeb;
  width:45%;
  margin: 50px auto;
  border-radius: 8px;
  border-width:2px;
}
.box{
  position:relative;
  width:auto;
  height:auto;
  margin: 50px auto;
  padding: 20px;
  box-shadow: 0px 1px 8px 1px #ebebeb;
  border-radius: 8px;
}
.sucess-box{
    border-left: solid 5px #3FC43C;
    background-color: #fff;

} .info-box{
    border-left: solid 5px #585EC2;
    background-color: #fff;
}
.warning-box{
    border-left: solid 5px #EFA162;
    background-color: #fff;
}
.error-box{
    border-left: solid 5px #F32D70;
    background-color: #fff;
}
.fa{
    padding-right:10px;
}
.fa-check-circle{
  color: #3FC43C;
} 
.fas fa-info-circle
{
  color: #585EC2;
}
.warning-box .fa-exclamation-triangle{
  color: #EFA162;
}
.error-box .fa-exclamation-triangle{
  color: #E63470;
}
p{
  padding:0px 28px;
}
.time{
  color:#9b9b9b;
}
.fa-close{
    color:#BCC4CD;
}
.close{
  position:absolute;
  top: 20px;
  right:20px; 
}
.link1,
.link2,
.link3,
.link4{
  opacity:0;
  margin-left:20px;
  text-decoration:none;
}
.link1{
  color:#3FC43C;
}
.link2{
  color:#585EC2;
}
.link3{
  color:#EFA162;
}
.link4{
  color:#E63470;
}
.box:hover a{
  opacity:1;
}
 </style>

HTML

<div class="speech-row">
    <div class="speech-img"><a href="https://totvscst.zendesk.com/hc/pt-br/#home" target="_blank"><img src="https://tdn.totvs.com/download/attachments/731900022/01.png?version=1&modificationDate=1673107757259&api=v2" alt="AssistenteAsistente virtual"></a></div>
    <div class="speech-bubble"><b>¡Hola!👋</b> Soy Carolina, asistente virtual de TOTVS. ¿Aún tiene dudas? ¡Acceda a la central de ayuda y explore todos los contenidos ofrecidos por TOTVS CRM - Gestión de clientes!  </div>
  </div>

HTML

<style>  body {
  margin: 0; // 1
  font-family: lato;
  font-size: 16px;
  font-weight: $font-weight-base;
  line-height: $line-height-base;
  color: #555555
  text-align: left; // 3
  background-color: $body-bg; // 2
}

.speech-bubble {
  max-width: 300px;   
  font-family: lato;   
  color: #555555;
font-size: 16px;
   margin: 1rem;
  padding: 1rem;
  position: relative;
  border: 2px solid #FEAC0E;
  background: #fff;
  border-radius: 0.4em;
}
.speech-row {
  display: flex;
  justify-content: center;
}

img {
  overflow-clip-margin: content-box;
  overflow: clip;
}

.speech-img img {
  border-radius: 50%;
}
img {
  vertical-align: middle;
  border-style: none;
}
.speech-img {
  align-self: center;
  max-width: 100%;
  height: auto;
}
*,
::after,
::before {
  box-sizing: border-box;
}

img {
  overflow-clip-margin: content-box;
  overflow: clip;
}
.speech-bubble:before,
.speech-bubble:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-right-color: #FEAC0E;
  border-left: 0;
  margin-top: -20px;
  margin-left: -20px;
}

.speech-bubble:after {
  border-right-color: #fff;
  margin-left: -18px;
  z-index: 1;
}
    </style>

Árvore de páginas

Versões comparadas

Versão antiga 2

Nova versão Atual

Chave