Histórico da Página

HTML

 <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>JAN<<div>ENE</div>
      <div class="day">6</div>
    </div>
    <div class="article"> <br>
      <h1> ✒️ Reflejar en la aplicación móvil, reglas de exhibición a partir de campos personalizados</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>Leads/Actividades </td>

          </tr>
          <tr>

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

            <th scope="row">Identificador</th>
            <td>ME101120221649b </td>
          </tr>
          <tr>
            <th scope="row">Ticket/Issue</th>
            <td>DTCRMSD-1355 </td>
          </tr>
          <tr>

      </table>
      <br>
      <p> A medida que la aplicación móvil se vuelve un canal más importante para interactuar con los clientes, se hace esencial tener una aplicación de CRM que refleje las principales funcionalidades equivalentes al entorno web. Por ello, extendimos al mobile el acceso a las reglas de exhibición a partir de campos personalizados. Reglas que condicionan el estatus de los campos, dejándolos: ocultos, visibles, editables o solo lectura. Esto permite que el usuario utilice el formulario mobile y no quede expuesto a campos que no necesitan de cumplimentación o que no son necesarios. Este documento lo guiará por el proceso de uso de esta mejora. </p>
      <div class="pause" id="i">📍 ¿Dónde puede encontrarse?</div>
      <p>
      <ol>
        <li> Leads o Actividades </li>
        <li> Cadastro de Leads o Actividades </li>
              </ol>
      </p>

      <div class="pause">🔍 ¿Qué cambió?</a></div>
      <p> El entorno mobile ahora refleja reglas de exhibición a partir de campos personalizados del tipo: text, ID, number, boolean y date. En el siguiente ejemplo, definimos la siguiente regla: Si el campo "Score" fuera igual o mayor que 5,0, ocultar campo "Clasificación".</p> <br>
      <div> <img class="img2" src="https://tdn.totvs.com/download/attachments/733188343/Meu%20projeto8.gif?version=1&modificationDate=1673650931617&api=v2"> </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="Asistente 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