Histórico da Página

HTML

<style>
  /* Início estilo banner */

  .compositiondani-banner {
    position: relative;
    min-height: 320px;
    border-radius: 5px;
    margin-bottom: 5px;
    overflow: hidden;
  }

  .compositiondani-banner-image {
    background-image: url("https://totvscrm.com/wp-content/uploads/2023/08/bannert.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%;
    transform: translate(-50%, -50%);
  }

  .compositiondani-banner-logo {
    width: 400px;
    height: 150px;
    background-image: url("https://totvscrm.com/wp-content/uploads/2023/08/logos.png");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .compositiondani-banner-title {
    margin-bottom: 10px !important;
    padding: 10px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 14px !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: 190px !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: 17px16px;
    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 */

</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">OTIMIZAÇÃO> OTIMIZAÇÃO DE DOWNLOAD DO ESPELHO DE PEDIDO</h1>
    </div>
  </div>
</header>

HTML


<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"/>
  

  <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: 13px14px !important;
}

h3 {  font-size: 13px14px !important;
  font-weight: bold;  

}

h2 {  font-size: 15px !important;
  font-weight: bold;  

}

/* ==============================td, th {
    padding:  =9px;
}

td:first-child {
    width: 100%;
     ESTILOS DE TÍTULOS       =
      =============================== */

#title-text {
  display: none !important;
}

.wiki-content h1,
.wiki-content h2 {
  font-family: "Roboto", sans-serif !important;
 
}

.wiki-content h1 {
  font-size: 16px !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;display: inline-block; /* Converte o elemento td em um bloco em linha para controlar a largura */
    white-space: nowrap; /* Impede a quebra de linha do texto */
    overflow: hidden; /* Esconde o texto que excede o tamanho definido */
    text-overflow: ellipsis; /* Mostra '...' se o texto exceder o tamanho e for cortado */
}

/* ==============================
      =        ESTILOS DE TEXTO  TÍTULOS       =
      =============================== */

.wiki-content p#title-text {
  font-sizedisplay: 14pxnone !important;
}

.justificadowiki-content h1,
.customwiki-justifiedcontent h2 {
  textfont-alignfamily: justify;
  margin: 10px 0 "Roboto", sans-serif !important;
 
}

.wiki-content h1 {
  font-size: 16px !important;
}

/* ==============================
      =       ESTILOS DE LINKS         =
      ==.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;
}

/* ============================= */

.wiki-content a,
.wiki-content a:link,
.wiki-content a:visited,
.wiki-content a:focus,
.wiki-content a:active {
  text-decoration: none;
  color: #42526e;=
      =        ESTILOS DE TEXTO         =
      =============================== */

.wiki-content p {
  font-size: 14px !important;
}

}
.justificado,
.wiki-content a:hover {custom-justified {
  text-align: justify;
  colormargin: white10px 0;
}

/* ==============================
      =       ESTILOS DE CONTAINERLINKS         =
      =============================== */

.container2 {
  display: flex;
  gap: 20px;
  padding: 10px;
}

.custom-contentwiki-content a,
.wiki-content a:link,
.wiki-content a:visited,
.wiki-content a:focus,
.wiki-content a:active {
  backgroundtext-colordecoration: #f5f5f5none;
  paddingcolor: 20px#42526e;
  borderfont-radiussize: 8px14px;
  margin: 0 10px;
  max-width: 100%;
  overflow: hidden;
}

.faq-containerwiki-content a:hover {
  max-widthcolor: 800pxwhite;
  margin: 0 auto;
  padding: 20px;
}

/* =}

/* ==============================
      =       ESTILOS DE CARDS    CONTAINER     =
      =============================== */



.cardcustom-content {
  borderbackground-color: 2px solid #9aa1ad#f5f5f5;
  padding: 20px;
  flexborder-growradius: 18px;
  box-shadowmargin: 0 4px 8px rgba(0, 0, 0, 0.1)10px;
  bordermax-radiuswidth: 8px100%;
  background-color: #f4f5f7;
  color: #42526e;
  overflow-x: hidden;
}

.card:firstfaq-childcontainer {
  flexmax-width: 4800px;
}

.card:last-child {  margin: 0 auto;
  flexpadding: 620px;
}

/* ==============================
      =       ESTILOS DE TABSCARDS          =
      =============================== */

.tabscard {
  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: #1094b8;
  background-color: transparent;
}

.tabs .tab a:focus {
  background-color: rgba(82, 200, 232, 0.25);
}

.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
  color: rgba(16, 148, 184, 0.24);
}

.tabs .indicator {
  background-color: #1094b8;
}

.tab-content {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: 0;
  padding: 10px;
}

.tab-content pre {
  max-width: 100%;
  overflow-x: hidden;
}

/* 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;
  
}



/* ==============================
      =       ESTILOS DE TABS          =
      =============================== */

.tabs {
  background-color: #dfe1e5;
}

.tabs .tab a ={
  color: rgb(66, 82, 110);
}

.tabs .tab  ESTILOS DE ÍCONES        =
      =============================== */

.icon-list,
.icon {
  padding-left: 0;
  list-style-type: nonea:hover,
.tabs .tab a.active,
.tabs .tab a:focus.active {
  color: #1094b8;
  background-color: transparent;
}

.tabs .tab a:focus {
  background-color: rgba(82, 200, 232, 0.25);
}

.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
  color: rgba(16, 148, 184, 0.24);
}

.tabs .indicator {
  background-color: #1094b8;
}

.icontab-content {
  display gap: inline-block0;
  widthpadding: 24px10px;
  vertical-align: middle;
  margin-right: 45px;
  position: relative;
  left: -25px;
}

.item .label i {
  margin-right: 10px}

.tab-content pre {
  max-width: 100%;
  overflow-x: hidden;
}

/* ==============================
      =        ESTILOS DE ÍCONES COMPONENTES       =
      =============================== */

.collapsibleicon-list,
.collapsible-header,
.collapsible-body {icon {
  padding-left: 0;
  boxlist-style-shadowtype: none !important;
}

.faq-questionicon {
  font-weightdisplay: boldinline-block;
  margin-bottomwidth: 5px;
}

.faq-answer {24px;
  marginvertical-bottomalign: 20px;
}

.custom-list {
  padding-left: 0middle;
  margin-leftright: 1.5em;
}

.custom-list li {
  45px;
  position: relative;
  padding-left: 1em-25px;
}

ul.custom-list.item .label i {
  paddingmargin-leftright: 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 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 VÍDEOIMAGENS           =
      =============================== */

#youtube-video-container iframe .imagem-responsiva {
  max-width: 100%;
  height: auto;
  display: block;
}

.video-containercustom-header-bg img {
    max-width: 800px100%;
    margin: 0 autoheight: auto;
  }

.ytp-cued-thumbnail-overlay-image {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
display: block;
}

/* ==============================
      =    OUTROS ESTILOS PERSONALIZADOS DE VÍDEO           =
      =============================== */
.custom-content
#youtube-video-container iframe {
  background-colorwidth: #f5f5f5100%;
  paddingheight: 20pxauto;
  border-radiusdisplay: 8pxblock;
  margin: 0 10px;

}

.video-container {
    max-width: 100%800px;
    overflowmargin: 0 hiddenauto;
  }

.custom-headingytp-cued-thumbnail-overlay-image {
  fontbackground-size: 16pxcover;
  colorbackground-position: #42526ecenter;
  marginwidth: 10px 0100%;
  border-bottomheight: 2px solid #e0e0e0100%;
  padding-bottomposition: 5pxabsolute;
}

/*  font-weight: bold;  
}

#indice {==============================
      =    OUTROS ESTILOS PERSONALIZADOS =
      =============================== */
.custom-content {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 5px8px;
  paddingmargin: 20px0 10px;
  max-width: 100%;
  overflow: hidden;
}

#indice h2.custom-heading {
  textfont-alignsize: center16px;
  margin-bottomcolor: 16px#42526e;
}

#indice ul { margin: 10px 0;
  list-style-type: noneborder-bottom: 2px solid #e0e0e0;
  padding-bottom: 5px;
  paddingfont-leftweight: 0bold;  
}

#indice li {
  paddingborder-radius: 10px5px;
  border-bottompadding: 1px solid #eee20px;
  cursormax-width: pointer100%;
  transitionoverflow: background-color 0.1s easehidden;
}

#indice li:last-child { h2 {
  text-align: center;
  bordermargin-bottom: none16px;
}

#indice li:hoverul {
  backgroundlist-style-colortype: #1094b8none;
  colorpadding-left: white0;
}

/* #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: #1094b8;
  color: white;
}

/* ==============================
  =      ESTILOS DE TABELAS        =
  ============================== */
.custom-grey {
  background-color: #ffffff;
}

.custom-grey th,
.custom-grey td {
  border: 1px solid #42526e;
  padding: 10px;
}

.custom-grey th {
  color: #fff;
  background-color: #42526e;
}



.custom-grey td {
  font-size: 13px;
}

.custom-grey tr:nth-child(odd) {
  background-color: #e4e4e6;
}

.custom-grey tr:nth-child(even) {
  background-color: #dfdfdf;
}

/* ========== FIM DO ESTILO ========= */

    <</style>
  

   
<div class="container2">
  <!-- Primeiro Card -->
  <div class="card">
    <div class="item">
      <span class="label">
        <table border="1">
            <i  <tr>
              <td><i class="fas fa-tags"></i>    
        <div>ProdutoProduto:</div>td>
      </span>
        <div>Automação<td>Automação da Força de Vendas</div>td>
          </div>tr>
      <div class="item">
   <tr>
   <span class="label">
            <i<td><i class="fas fa-link"></i> Linha    
 de Produto:</td>
       <div>Linha de Produto:</div>
     <td>TOTVS <CRM</span>td>
      <div>TOTVS CRM</div>
    </div>tr>
     <div class="item">
     <tr>
   <span class="label">
            <i<td><i class="fas fa-chart-pie"></i>    
Segmento:</td>
         <div>Segmento:</div>
     <td>Cross <Segmentos</span>td>
      <div>Cross Segmentos</div>
    </div>tr>
    <div class="item">
     <tr>
  <span class="label">
              <i<td><i class="fas fa-desktop"></i>    Módulo:</td>
        <div>Módulo:</div>
      <<td>Relatório</span>td>
      <div>Relatório</div>
    </div>tr>
      <div class="item">
   <tr>
   <span class="label">
            <i<td><i class="fas fa-globe"></i>    
Aplicação:</td>
         <div>Aplicação:</div>
     <td>Web/app <móvel</span>td>
       <div>Web/app móvel</div>   </tr>
    </div>
     <div class="item"> <tr>
      <span class="label">
              <i<td><i class="fas fa-hashtag"></i>    
 Identificador:</td>
              <td>
                15266396</td>
          <div>Identificador:</div>tr>
      </span>table>
      <div>15266396<</div>span>
    </div>
    </div>

HTML


  <!-- Segundo Card Tabs e conteúdo das guias -->
  <div class="card">
    <div<ul class="explanationtabs">
      <h2<li class="custom-heading"><i class="fa-solid fa-eye"></i>&nbsp &nbsp VISÃO GERAL</h2>  tab col s4"><a href="#tab1">DETALHES FUNCIONAIS</a></li>
      <p<li class="justificado">
tab col s4"><a href="#tab2">DETALHES TÉCNICOS</a></li>
    A nova funcionalidade do TOTVS CRM - SFA aprimora o processo de geração de relatórios. Anteriormente, ao clicar em "Relatório", era exigida uma escolha manual de formato. Agora, os usuários podem predefinir um formato (PDF ou XLSX) nas configurações. Assim, ao acionar o botão, o download é iniciado automaticamente no formato selecionado, tornando o fluxo mais ágil.</div>
    <div class="explanation">
<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: 20px; margin-left: 50px; margin-right: 50px;">
            <h2<section classid="custom-headingsection1"><i classstyle="famargin-solid fa-rocket"></i>&nbsp &nbsp OBJETIVO</h2>top: 40px;">
      <p class="justificado">
       Aprimorar a experiência na solução, acelerando o download de relatórios no formato escolhido, diminuindo etapas e evitando erros manuais.<!-- Tab 70 conteúdo -->
  <!-- Segundo Card -->

      <h2 class="custom-heading">
      </p>
  <i  </div>
  </div>
</div>
<divclass="fa-solid fa-eye"></i>&nbsp &nbsp VISÃO GERAL
      </h2>
      <p class="container2justificado">
  <!-- ... (seu conteúdo existente) ... -->

  <!-- Tabs e conteúdo das guias -->
  <div class="card">
    <ul class="tabs">
 A nova funcionalidade do TOTVS CRM - SFA aprimora o processo de geração de
        relatórios. <li class="tab col s4"><a href="#tab1">DETALHES FUNCIONAIS</a></li>
Anteriormente, ao clicar em "Relatório", era exigida uma escolha
        manual de <li class="tab col s4"><a href="#tab2">DETALHES TÉCNICOS</a></li>
      <li class="tab col s4"><a href="#tab3">FAQ</a></li>
    </ul>
     <!-- Tab Content -->
 formato. Agora, os usuários podem predefinir um formato (PDF ou
        XLSX) nas configurações. Assim, ao acionar o botão, o download é iniciado
      <div id="tab1" class="col s12">
        <div class="tab-content"> automaticamente no formato selecionado, tornando o fluxo mais ágil.
      </p>
<br>

    <div<h2 styleclass="background-color: #f5f5f5; padding: 20px; margin-left: 10px; margin-right: 10px;">
      custom-heading">
      <i class="fa-solid fa-rocket"></i>&nbsp &nbsp OBJETIVO
    </h2>
    <p  <section idclass="section1" style="margin-top: 40px;"justificado">
      Aprimorar a experiência na solução, acelerando o download de relatórios no
      formato escolhido, diminuindo etapas e evitando erros manuais.
    </p>
    <br>

  <!-- Tab 70 conteúdo... (seu conteúdo existente) ... -->

               <h2 class="custom-heading">
                <i class="fa-solid fa-book"></i> &nbsp ANTES DE COMEÇAR
            </h2>
            <h3>Requisitos</h3>
            <p>Para utilizar o recurso, certifique-se de estar usando a versão padrão da solução.</p>
          </section>

          <section id="section2" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-star"></i>&nbsp DETALHES FUNCIONAIS</h2>
            <h3>Funções </h3>

            <ul class="browser-default">
              <li>
                  <p>
                      <b>Anteriormente</b>, para obter o relatório do pedido no TOTVS SFA ambiente web, era necessário:
                  </p>
                  <ul class="browser-default">
                      <li>Clicar no botão <b>"Relatório"</b>.</li>
                      <li>Selecionar o formato desejado (<b>PDF</b> ou <b>XLSX</b>) em uma nova aba.</li>
                  </ul>
              </li>
              <li>
                  <p><b>Com a melhoria</b>, será inserido um parâmetro nas configurações:</p>
                  <ul class="browser-default">
                      <li><b>Determinar previamente</b> o formato de arquivo.</li>
                      <li><b>Permitir download automático</b> ao clicar no botão <b>"Relatório"</b>.</li>
                  </ul>
              </li>
          </ul>
          
          

          </section>
         
      
          <section id="section3" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>&nbsp COMO USAR?</h2>
            <h3> Passo a Passo</h3>
           
                <ol>
              <li<b>relatório</b>.</li>
              <li>Vá para a pasta de <b>pedidos</b>.</li>
              <li>No card <b>espelho do pedido</b>, clique no ícone <b>lápis de editar</b>.</li>
              <li>Na seção "<b>Downloand sem filtros:</b>", selecione uma das opções <b>"Formato PDF"</b> ou <b>"XLSX"</b>.</li>
              <li>Depois de salvo, ao acessar o pedido e clicar em <b>relatório</b>, automaticamente ele fará o <b>download</b>.</li>
          </ol>
            
            <br>

        <img src="https://totvscrm.com/wp-content/uploads/2023/08/GIF0018.gif" alt="" class="imagem-responsiva"> 

         
          </</section>

          <section id="section4" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i> &nbspEXEMPLO PRÁTICO</h2>
            <h3>Caso de uso</h3>
           
             

<p>
              <b>Cenário<<b>Cenário:</b>: João é representante de vendas. Sua ferramenta principal é o TOTVS CRM - SFA,
  onde ela acompanha os
              pedidos de seus clientes.
            </p>
 <br>
            <p>
              <b>Desafio Antigo<Antigo:</b>: Diariamente, ao necessitar de relatórios de
 pedidos para compartilhar, João
  enfrentava um       pedidos para compartilhar, João enfrentava um processo
              trabalhosoprocesso trabalhoso: primeiro, clicava no botão <b>Relatório</b>Relatório,
  aguardava uma
              nova aba abrir, e depois selecionava o formato desejado para finalmente
              finalmente realizar o download. Eram necessários ao menos 3 cliques e uma
  espera.
</p><br>
<p>
  <b>Solução Atualizada:</b> Agora, após configurar sua preferência de formato no </p>
TOTVS CRM - SFA, João
  precisa apenas clicar no botão Relatório. <br>

A solução, imediatamente, faz o
  download no formato que ele escolheu anteriormente.
</p>
<br>
<p>
  <b>Solução Atualizada:</b> A nova funcionalidade eliminou etapas desnecessárias, permitindo que João
  acesse os relatórios que precisa <b>Solução Atualizada</b>: Agora, após configurar sua preferência decom mais agilidade, otimizando seu tempo e
  eficiência.
</p>

          </section>
    formato no TOTVS
 CRM - SFA, João precisa apenas clicar no botão
          </div>
    <b>Relatório</b>. A solução, imediatamente, faz o download no formato
            <!-- Tab que30 ele escolheu anteriormente.fim -->
          
  </p>
          <!-- Tab <br>
30 fim -->
          <p>
          </div>
    <b>Resultado</b>: A nova funcionalidade eliminou etapas desnecessárias, permitindo </div>
    


      <div id="tab2" class="col s12">
 que João acesse os relatórios que precisa com mais agilidade, otimizando seu<div class="tab-content">
              tempo e eficiência.
    <div style="background-color: #f4f5f7; padding: 20px; margin-left: 50px; margin-right: 50px;">
        </p>
    <section id="section5" style="margin-top: 40px;">
            <!-- Primeira coluna do conteúdo 
da guia 2 -->
       </section>
      
    <h2 class="custom-heading"><i class="fa-solid fa-gear"></i>&nbsp DETALHES TÉCNICOS</h2>
     
       <br>
   </div>
          <!-- Tab 70 conteúdo -->
<h3>Adicionando o Novo Campo</h3>
            <p>Localize-se dentro da tela "Relatório" <div→ style="background-color: #dfe1e5; padding: 20px">
     "Relatório" → "opção Editar relatório". Aqui, você deverá adicionar um novo campo:</p>
         <!-- Tab 30 conteúdo<ul --class="browser-default">
            <div id="indice">    <li><b>Label:</b> "Download sem filtros:"</li>
              <h2><i class="fa-solid fa-address-book"></i> NESTE ARTIGO</h2>
 <li><b>Tipo:</b> Combobox</li>
                 <ul><li><b>Obrigatório:</b> Sim</li>
                <li><b>Persistência:</b> tabela <li data-target="section1">ANTES DE COMEÇAR<<code>RELATORIOBI</code>, campo <code>sglformatosemfiltro</code></li>
                <li><b>Adaptações:</b> Crie um campo do tipo <code>varchar(80)</code> NULLABLE <li data-target="section2">DETALHES FUNCIONAIS<na opção 7 do tools.</li>
            </ul>
        <li data-target="section3">COMO USAR?</li>
                
            <p><b>Obs:</b> adicionar esse novo campo em toda tela de edição dos relatórios que não possuem filtro.</p>
      <li data-target="section4">EXEMPLO PRÁTICO</li>
            <h3>Configurando Opções do <Combobox</ul>
<br>h3>


          </div>
  <p>O combobox terá 3 opções, cada uma correspondendo a um <div id="indice">comportamento específico:</p><br>
            <ol>
   
            <h2><i class="fa-solid fa-link"></i> LINKS ÚTEIS</h2>
      <li><b>Padrão (selecionar formato):</b> Valor a ser persistido: <code>PADRAO</code></li>
       <ul>
         <li><b>Formato PDF:</b> Valor a    <li><a href="https://produtos.totvs.com/produto/totvs-crm/automacao-da-forca-de-vendas/" class="link-item">PORTAL DE PRODUTOS</a><ser persistido: <code>PDF</code></li>
                <li><a href="https://informa.totvs.com/" class="link-item">TOTVS INFORMA</a><<li><b>Formato XLSX:</b> Valor a ser persistido: <code>XLSX</code></li>
            </ol>
    <li><a href="https://centraldeatendimento.totvs.com/hc/pt-br/community/topics" class="link-item">CENTRAL COLABORATIVA</a></li>
    
            <h3>Determinando Comportamentos <de Download</ul>h3>
        </div>
    <p>Ao acionar o botão "Relatório", o 
sistema deve verificar o valor selecionado no combobox e agir de  <!-- Tab 30 fim -->
acordo:</p>
            <ol>
      
          <li><b>Padrão (selecionar <!-- Tab 30 fim -->
  formato):</b> O SFA mantém o modelo atual.</li>
        
        <li><b>Formato  PDF:</div>
b> O SFA inicia o download automático no formato PDF.</div>li>
      </div>


        <div id="tab2" class="col s12">
        <div class="tab-content"> <li><b>Formato XLSX:</b> O SFA inicia o download automático no formato XLSX.</li>
          <div style="background-color: #f5f5f5; padding: 40px; margin-left: 10px; margin-right: 10px;">
  </ol>
        
            <h3>Instrução de Verificação</h3>
  <section id="section5" style="margin-top: 40px;">
       <p>Para confirmar a configuração, realize <!-- Primeira coluna do conteúdo da guia 2 -->
a seguinte busca:</p>


                  <h2<pre><code class="customlanguage-heading"><i class="fa-solid fa-gear"></i>&nbsp ESCOPO TÉCNICO</h2>
sql"> SELECT
                    sglformatosemfiltro
            <h3>Adicionando  o Novo Campo</h3>FROM
            <p>Localize-se dentro da tela "Relatório" → "Relatório" → "opçãorelatoriobi
 Editar relatório". Aqui, você deverá adicionar um novo campo:</p>
       WHERE
     <ul class="browser-default">
              nome  <li><b>Label:</b> "Download sem filtros:"</li>= 'Espelho do Pedido.prpt';</code></pre>
            <br> 


   <li><b>Tipo:</b> Combobox</li>
                <li><b>Obrigatório:</b> Sim</li>div>

                <li><b>Persistência:</b> tabela <code>RELATORIOBI</code>, campo <code>sglformatosemfiltro</code></li>


              
  <li><b>Adaptações:</b> Crie um campo do tipo <code>varchar(80)</code> NULLABLEdiv>
 na opção 7 do tools.</li>div>

    <div id="tab3"       </ul>class="col s12">
            <div class="tab-content">
        <div style="background-color: #f4f5f7; padding: 20px; margin-left: 50px; <p><b>Obs:</b> adicionar esse novo campo em toda tela de edição dos relatórios que não possuem filtro.</p>
        margin-right: 50px;">
              <!-- Primeira coluna do conteúdo da guia 2 -->
            <h3>Configurando Opções do Combobox</h3><div class="container">
            <p>O combobox terá 3 opções, cada uma correspondendo a um comportamento específico:</p><br><h2 class="custom-heading"><i class="fa-solid fa-circle-question"></i> PERGUNTAS FREQUENTES</h2>
            <ol>
    <ul class="collapsible">
           <li><b>Padrão (selecionar formato):</b> Valor a ser persistido: <code>PADRAO</code></li>
  <li>
              <li><b>Formato PDF:</b> Valor a ser persistido: <code>PDF</code></li>
    <div class="collapsible-header"><i class="material-icons">question_answer</i>Posso manter o método antigo de seleção de formato a <li><b>Formatocada XLSX:download?</b>div>
 Valor a ser persistido: <code>XLSX</code></li>
            </ol>
       <div  
            <h3>Determinando Comportamentos de Download</h3>
      class="collapsible-body"><span>Sim! Basta selecionar a opção "Padrão (selecionar formato)" no combobox. Assim, sempre que clicar em "Relatório", será solicitado que escolha o formato desejado.
      <p>Ao    acionar o botão "Relatório", o sistema deve verificar o valor selecionado no combobox e agir de acordo:</p>span></div>
            <ol>
        </li>
        <li><b>Padrão (selecionar formato):</b> O SFA mantém o modelo atual.</li>
     
           <li><b>Formato PDF:</b> O SFA inicia o download automático no formato PDF.</li>
         <!-- Adicione mais perguntas e respostas aqui conforme necessário -->
       <li><b>Formato XLSX:</b> O SFA inicia o download automático no formato XLSX.</li>ul>
            </ol>div>

        
     
       <h3>Instrução de Verificação</h3>
            <p>Para confirmar a configuração, realize a seguinte busca:</p>


        <!-- Primeira coluna do conteúdo da guia 2 -->

          <pre><code class="language-sql"> SELECT
                    sglformatosemfiltro</div>
                FROM
      </div>
  </div>

    
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
  // Inicialização das   relatoriobitabs
  document.addEventListener("DOMContentLoaded", function () {
    var tabs = document.querySelectorAll(".tabs");
    WHEREM.Tabs.init(tabs);
   });
</script>

<script>
  const items = document.querySelectorAll("#indice li");

  items.forEach(item => {
       nomeitem.addEventListener('click', (e) => 'Espelho{
 do Pedido.prpt';</code></pre>
        const targetId   <br>

= e.target.getAttribute('data-target');
          const 
targetElement = document.getElementById(targetId);
          window.scrollTo({
  </div>
            top: targetElement.offsetTop <div style="background-color: #dfe1e5; padding: 20px">- 10,
                <!-- Tab 30 conteúdo -->
                <div id="indice">behavior: "smooth"
               });
      });
            <h2><i class="fa-solid fa-link"></i> LINKS ÚTEIS</h2>
                  <ul>
                      <li><a href});
</script>

<script src="https://kit.fontawesome.com/c97d4c197a.js" crossorigin="anonymous"></script>
<script src="https://produtoscdnjs.totvscloudflare.com/ajax/libs/produto/totvs-crm/automacao-da-forca-de-vendas/" class="link-item">PORTAL DE PRODUTOS</a></li>
       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');
      <li><avar instances href="https://informa.totvs.com/" class="link-item">TOTVS INFORMA</a></li>
                      <li><a href= M.Collapsible.init(elems);
  });
</script>

 <!-- ... (conteudo video) ... -->
 <script src="https://centraldeatendimentowww.totvsyoutube.com/hc/pt-br/community/topics" class="link-item">CENTRAL COLABORATIVA</a></li>
        iframe_api"></script>

 <script>
  var player;
  function onYouTubeIframeAPIReady() {
    player = new    </ul>YT.Player('player', {
              </div>




height: '315',
              width: '560',
            </div>videoId: 'FvsuBOvyyro',
            

playerVars: {
           
        </div>
    </div>

    <div id="tab3" class="col s12">
      <div class="tab-content">
        <div style="background-color: #f5f5f5; padding: 20px">
              <!-- Primeira coluna do conteúdo da guia 2 -->
              <div class="container">
                <h2 class="custom-heading"><i class="fa-solid fa-circle-question"></i> PERGUNTAS FREQUENTES</h2>
                <ul class="collapsible">
                    <li>
                        <div class="collapsible-header"><i class="material-icons">question_answer</i>Posso manter o método antigo de seleção de formato a cada download?</div>
                        <div class="collapsible-body"><span>Sim! Basta selecionar a opção "Padrão (selecionar formato)" no combobox. Assim, sempre que clicar em "Relatório", será solicitado que escolha o formato desejado.
                          </span></div>
                    </li>
                   
                    <!-- Adicione mais perguntas e respostas aqui conforme necessário -->
                </ul>
            </div>

            
                            <!-- Primeira coluna do conteúdo da guia 2 -->

            
            </div>
              <div style="background-color: #dfe1e5; padding: 20px">
                <!-- Tab 30 conteúdo -->
              <div id="indice">
                <h2><i class="fa-solid fa-link"></i> LINKS ÚTEIS</h2>
                <ul>
                    <li><a href="#" class="link-item">PORTAL DE PRODUTOS</a></li>
                    <li><a href="#" class="link-item">TOTVS INFORMA</a></li>
                    <li><a href="#" class="link-item">CENTRAL COLABORATIVA</a></li>
                </ul>
            </div>
          </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) ... -->
 start: 1238, // 20:38 em segundos
        end: 1356   // 22:36 em segundos
      }
    });
  }
</script>

Árvore de páginas

Versões comparadas

Versão antiga 7

Nova versão 8

Chave