Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
HTML
<style>
  /* Início estilo banner */

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

  .compositiondani-banner-image {
    background-image: url("https://totvscrm.com/wp-content/uploads/2023/08/bannertcapa-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: 400px350px;
    height: 150px180px;
    background-image: url("https://totvscrm.com/wp-content/uploads/2023/08/logoslogo.png");
    background-size: contain;
    background-repeat: no-repeat;
  }

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

      #content.page.view {
    <div class="compositiondani-banner-image"></div>
    <div class="compositiondani-banner-overlay"></div>
    <div class="compositiondani-banner-logo-container">padding-right: 0 !important;
}   /* impedir vermelho no nav */

#breadcrumb-section > nav {
    background-color: initial !important;
 <div class="compositiondani-banner-logo"></div>
  box-shadow:  </div>
    <div class="compositiondani-banner-content">
      <h1 class="compositiondani-banner-title">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
 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/iconcss2?family=Material+Icons"
 =Roboto:wght@400&display=swap" rel="stylesheet"
/>
<link
  rel<div class="stylesheetcompositiondani-banner">
    <div hrefclass="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 DE DOWNLOAD DO ESPELHO DE PEDIDO
</h1>
</header>
  </div>
</div>

HTML
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.jsmaterialize/111.80.0/stylescss/monokaimaterialize.min.css"
/>
  <link

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

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

}

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

}

/* ==============================
      =        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: 5pxhref="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: 14px !important;
}

h3 {  font-size: 14px !important;
  font-weight: bold;  

}

h1 {  font-size: 13px !important;
  

}

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

}

.custom-heading,
h3.custom-h3td, th {
  font-size: 16px;
  colorpadding: #42526e;
  margin-bottom: 20px4px;
}

.custom-h1 {
  color: #feac0e;
}

.explanation h2 {
  font-weight: bold;
}

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

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

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

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

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

.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: 10px white0;
}

/* ==============================
      =       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 4px10px;
 8px rgba(0, 0, 0, 0.1) max-width: 100%;
  border-radiusoverflow: 8pxhidden;
}

.faq-container {
 background max-colorwidth: #f4f5f7800px;
  colormargin: #42526e0 auto;
  overflow-xpadding: hidden20px;
}

.card:first-child {
  flex: 4;
}

.card:last-child {
  flex: 6;
}

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

.tabscard {
  background-colorborder: 2px #dfe1e5solid #9aa1ad;
}

.tabs .tab apadding: {20px;
    color: rgb(66, 82, 110);
}

.tabs .tab a:hover,
.tabs .tab a.active,
.tabs .tab a:focus.active {box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #f4f5f7;
  color: #1094b8#42526e;
  backgroundoverflow-colorx: transparenthidden;
}

.tabs .tab a:focus {
  background-colortop: 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;
}


}



/* ==============================
      =        ESTILOS DE ÍCONESTABS          =
      =============================== */

.icon-list,
.icon {
  padding-left: 0;
  list-style-type: nonetabs {
  background-color: #dfe1e5;
}

.icon.tabs .tab a {
  display: inline-block;
  width: 24px;
  vertical-align: middle;
  margin-right: 45px;
  position: relative;
  left: -25pxcolor: rgb(66, 82, 110);
}

.tabs .tab a:hover,
.tabs .tab a.active,
.tabs .tab a:focus.active {
  color: #6B48FF;
  background-color: transparent;
}

.itemtabs .labeltab ia:focus {
  marginbackground-right: 10pxcolor: rgba(82, 97, 232, 0.25);
}

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

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

.collapsible,
.collapsible-header,
.collapsible-body {
  box-shadow: none !important;
}

.faq-question {
  font-weight: bold;
  margin-bottom: 5px;
}

.faq-answer {
  margin-bottom: 20px;
}

.custom-list =        ESTILOS DE ÍCONES        =
      =============================== */

.icon-list,
.icon {
  padding-left: 0;
  marginlist-style-lefttype: 1.5emnone;
}

.custom-list liicon {
  positiondisplay: relativeinline-block;
  padding-leftwidth: 1em24px;
}

ul.custom-list {  vertical-align: middle;
  paddingmargin-leftright: 10px;
}

ul.custom-list li {45px;
  position: relative;
  list-style-typeleft: disc-25px;
}

.item  padding-left: 30px;.label i {
  margin-bottomright: 10px;
}

.item {/* ==============================
  display:  flex;
  align-items: center;
=   padding: 10px;
ESTILOS  border-bottom: 1px solid #eee;
}

.item:last-childDE COMPONENTES      =
      =============================== */

.collapsible,
.collapsible-header,
.collapsible-body {
  borderbox-bottomshadow: none !important;
}

.item .label faq-question {
  flexfont-weight: 1bold;
  fontmargin-weightbottom: bold5px;
}

.item .valuefaq-answer {
  flexmargin-bottom: 120px;
  text-align: right;
}
.item
}

.custom-list {
  borderpadding-bottomleft: 1px solid #e0e0e00;
  paddingmargin-left: 10px 0;
  display: flex;
  justify-content: space-between1.5em;
}

.custom-list li {
  position: relative;
  alignpadding-itemsleft: center1em;
}

ul.item:lastcustom-childlist {
  borderpadding-bottomleft: none10px;
}

/* Estilos para o label */
.label ul.custom-list li {
  font-weightposition: boldrelative;
  displaylist-style-type: flexdisc;
  align-itemspadding-left: 30px;
  margin-bottom: center10px;
}

.item {
 .label idisplay: {flex;
  marginalign-rightitems: 10pxcenter;
 /* Adiciona espaço depois dos ícones */ padding: 10px;
  border-bottom: 1px solid #eee;
}

/* ==============================
      =     ESTILOS DE IMAGENS         =
      =============================== */

.imagem-responsiva {
  max-width: 100%;
  height: auto;
}

.custom-header-bg img {
  width: 100%;
  height: auto;.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: blockflex;
}

/* ==============================
      =     ESTILOS DE VÍDEO           =
      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 */
}

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

#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;
      =     ESTILOS DE IMAGENS         =
      =============================== */

.imagem-responsiva {
  max-width: 100%;
  height: auto;
}

.custom-header-bg img {
  width: 100%;
  height: 100%auto;
  positiondisplay: absoluteblock;
}

/* ==============================
      =    OUTROS ESTILOS PERSONALIZADOSDE 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: hidden0 auto;
  }

.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 {
  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/* ==============================
      =    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: 1px2px solid #eee#e0e0e0;
  cursorpadding-bottom: pointer5px;
  transitionfont-weight: background-color 0.1s ease;bold;  
}

#indice li:last-child {
  border-bottomradius: none5px;
}

#indice li:hover {  padding: 20px;
  backgroundmax-colorwidth: #1094b8100%;
  coloroverflow: whitehidden;
}

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

.custom-grey th,
.custom-grey td#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: 1px solid #42526e;
  padding: 10pxnone;
}

.custom-grey th#indice li:hover {
  background-color: #fff#6B48FF;
  background-color: #42526ewhite;
}

.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">
 ESTILOS <!-- Primeiro Card -->
DE TABELAS    <div class="card">
   =
 <div class="item">
      <span class="label">
            <i class="fas fa-tags"></i>    
        <div>Produto:</div>
      </span>
      <div>Automação da Força de Vendas</div>
    </div>
   ============================== */
.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>
  

   





  <!-- Tabs e conteúdo das guias -->
  <div class="itemcard">
    <ul  <span class="labeltabs">
      <li class="tab  col   <i classs4"><a href="fas fa-link"></i>    #tab1">DETALHES FUNCIONAIS</a></li>
      <li class="tab <div>Linhacol de Produto:</div>s4"><a href="#tab2">DETALHES TÉCNICOS</a></li>
      </span>
      <div>TOTVS CRM</div><li class="tab col s4"><a href="#tab3">FAQ</a></li>
    </div>ul>
     <!-- Tab <div class="item"Content -->
 
     <span <div id="tab1" class="labelcol s12">
            <i<div class="fas fa-chart-pie"></i>    
tab-content">
           <div>Segmento:</div>
      </span>
      <div>Cross Segmentos</div>
    </div>
    <div class="item">
      <span class="label<div style="background-color: #f4f5f7; padding: 10px; margin-left: 50px; margin-right: 50px;">
            <section id="section1" style="margin-top: 40px;">
            <i class="fas fa-desktop"></i>    
 <!-- Tab 70 conteúdo -->
   <div>Módulo:</div>
  <!-- Segundo Card -->

    </span>
      <div>Relatório</div>
    </div>!-- Primeiro Card -->
    <!-- Primeiro Card -->
    <div class="itemcard">
      <span<div class="labelitem">
            <i<span class="fas fa-globe"></i>    label">
        <div>Aplicação:</div>
      </span>
   <table border="1">
   <div>Web/app móvel</div>
    </div>
    <div class="item"> <tr>
      <span class="label">
            <i<td><i class="fas fa-hashtagtags"></i>    
Produto:</td>
          <div>Identificador:</div>
      <td>Automação da Força de <Vendas</span>td>
       <div>15266396</div>
     </div>tr>
       </div>

  <!-- Segundo Card --><tr>
   <div class="card">
    <div class="explanation">
      <h2 class="custom-heading"><i <td><i class="fa-solidfas fa-eyelink"></i>&nbsp &nbspLinha VISÃOde GERAL</h2>Produto:</td>
  
      <p class="justificado">
       <td>TOTVS ACRM</td>
 nova funcionalidade do TOTVS CRM -     SFA aprimora</tr>
 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> <tr>
                <td><i class="fas fa-chart-pie"></i> Segmento:</td>
                <td>Cross Segmentos</td>
    <div class="explanation">
      <h2 class="custom-heading"><i </tr>
            <tr>
                <td><i class="fa-solidfas fa-rocketdesktop"></i>&nbsp &nbsp OBJETIVO</h2>
 Módulo:</td>
       <p class="justificado">
         Aprimorar<td>Relatório</td>
 a experiência na solução, acelerando o download de relatórios no formato escolhido, diminuindo etapas e evitando erros manuais.
 </tr>
            </p><tr>
    </div>
  </div>
</div>
<div class="container2">
  <!-- ... (seu conteúdo existente) ... -->

  <!-- Tabs e conteúdo das guias -->
  <div class="card">
    <ul class="tabs">
            <td><i class="fas fa-globe"></i> Aplicação:</td>
                <td>Web/app móvel</td>
       <li class="tab col s4"><a href="#tab1">DETALHES FUNCIONAIS</a></li>
 </tr>
        <li class="tab col s4"><a href="#tab2">DETALHES TÉCNICOS</a></li>
    <tr>
             <li class="tab col s4"><a<td><i hrefclass="#tab3">FAQ</a></li>fas fa-hashtag"></i> Identificador:</td>
    </ul>
        <!-- Tab Content -->
 <td>
      <div id="tab1" class="col s12">
        <div class="tab-content"> 15266396</td>
          <div style="background-color: #f5f5f5; padding: 20px; margin-left: 10px; margin-right: 10px;">
   </tr>
        </table>
        </span>
      </div>
    <section id="section1" style="margin-top: 40px;">
  </div> 
 

       <br>

       <!-- TabSegundo 70 conteúdoCard -->
        

       <h2 class="custom-heading">
                <i class="fa-solid fa-bookeye"></i>&nbsp &nbsp ANTESVISÃO DE COMEÇARGERAL
            </h2>
            <h3>Requisitos</h3>
<p class="justificado">
        A nova funcionalidade do TOTVS CRM - <p>ParaSFA utilizaraprimora o processo recurso, certifique-sede geração de
  estar usando a versão padrão da soluçãorelatórios.</p>
 Anteriormente, ao clicar em "Relatório", era exigida uma  </section>

escolha
        manual de formato. Agora, <section id="section2" style="margin-top: 40px;">
    os usuários podem predefinir um formato (PDF ou
        <h2 class="custom-heading"><i class="fa-solid fa-star"></i>&nbsp DETALHES FUNCIONAIS</h2>XLSX) nas configurações. Assim, ao acionar o botão, o download é iniciado
        automaticamente no formato selecionado, <h3>Funções </h3>

   tornando o fluxo mais ágil.
      </p>
<br>

   <ul <h2 class="browsercustom-defaultheading">
      <i class="fa-solid fa-rocket"></i>&nbsp &nbsp OBJETIVO
    <li></h2>
    <p class="justificado">
      Aprimorar a experiência na solução, acelerando o <p>
download de relatórios no
      formato escolhido, diminuindo etapas e evitando erros manuais.
      <b>Anteriormente</b>, para obter o relatório do pedido no TOTVS SFA ambiente web, era necessário:</p>
    <br>

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

                  </p><h2 class="custom-heading">
                  <ul<i class="browser-default">fa-solid fa-book"></i> &nbsp ANTES DE COMEÇAR
            </h2>
          <li>Clicar no botão <b>"Relatório"</b>.</li>
<h3>Requisitos</h3>
            <p>Para utilizar o recurso, certifique-se de estar usando a versão padrão  <li>Selecionar o formato desejado (<b>PDF</b> ou <b>XLSX</b>) em uma nova aba.</li>da solução.</p>
          </section>

          <section id="section2" style="margin-top: 40px;">
     </ul>
       <h2 class="custom-heading"><i class="fa-solid fa-star"></i>&nbsp DETALHES   <FUNCIONAIS</li>h2>
            <h3>Funções  <li></h3>
            <ul class="browser-default">
      <p><b>Com a melhoria</b>, será inserido um parâmetro nas configurações:</p><li>
                  <ul class="browser-default"><p>
                      <li><b>Determinar previamente<<b>Anteriormente</b>, opara formatoobter de arquivo.</li>
          o relatório do pedido no TOTVS SFA ambiente web, era necessário:
            <li><b>Permitir download automático</b> ao clicar no botão <b>"Relatório"</b>.</li>p>
                   </ul><ul class="browser-default">
              </li>
        <li>Clicar no botão <b>"Relatório"</b>.</ul>li>
          
          

   <li>Selecionar o formato desejado (<b>PDF</b> ou  </section>
         <b>XLSX</b>) em uma nova aba.</li>
      
          <section id="section3" style="margin-top: 40px;"> </ul>
            <h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>&nbsp COMO USAR?</h2>li>
            <h3> Passo a Passo</h3><li>
           
       <p><b>Com a melhoria</b>, será inserido um parâmetro nas configurações:</p>
     <ol>
              <li<b>relatório</b>.</li>
<ul class="browser-default">
                  <li>Vá para a pasta de<li><b>Determinar <b>pedidos<previamente</b> o formato de arquivo.</li>
                    <li>No card <b>espelho<li><b>Permitir dodownload pedido<automático</b>, ao cliqueclicar no ícone <b>lápis de editar<botão <b>"Relatório"</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>
ul>
              </li>
         <li>Depois de salvo, ao acessar o pedido e clicar em <b>relatório</b>, automaticamente ele fará o <b>download</b>.</li></ul> 
          </section>
          </ol>
      
      
    <section id="section3" style="margin-top: 40px;">
     <br>

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

   custom-heading"><i class="fa-solid fa-shoe-prints"></i>&nbsp COMO USAR?</h2>
      
      <h3> Passo a  <Passo</section>h3>

          <section id="section4" style="margin-top: 40px;"> <ol>
            <h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i> &nbspEXEMPLO PRÁTICO</h2> <li<b>relatório</b>.</li>
            <h3>Caso de uso</h3>
<li>Vá para a pasta de <b>pedidos</b>.</li>
      
        <li>No card <b>espelho  <p>
      do pedido</b>, clique no ícone <b>lápis de editar</b>.</li>
        <b>Cenário</b>: João é representante de vendas. Sua<li>Na ferramentaseção principal"<b>Downloand é o TOTVS CRM - SFA, onde ela acompanha ossem filtros:</b>", selecione uma das opções <b>"Formato PDF"</b> ou <b>"XLSX"</b>.</li>
              pedidos<li>Depois de seus clientes.
            </p>
<br>
salvo, ao acessar o pedido e clicar em <b>relatório</b>, automaticamente ele fará o <b>download</b>.</li>
          </ol>
   <p>
         
     <b>Desafio Antigo</b>: Diariamente, ao necessitar de relatórios de<br>

        <img src="https://totvscrm.com/wp-content/uploads/2023/08/GIF0018.gif" alt="" class="imagem-responsiva"> 
  pedidos para compartilhar, João enfrentava um processo
  </section>

          <section  trabalhoso: primeiro, clicava no botão <b>Relatório</b>, aguardava uma
id="section4" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i> &nbspEXEMPLO PRÁTICO</h2>
    nova aba abrir, e depois selecionava o formato desejado<h3>Caso parade finalmenteuso</h3>
            

<p>
  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
             <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:</b> Diariamente, ao necessitar de relatórios de pedidos para compartilhar, João
  enfrentava um processo trabalhoso: primeiro, clicava no botão Relatório,
  aguardava uma nova aba abrir, e depois selecionava o formato desejado para
  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 TOTVS CRM - SFA, João
  precisa apenas clicar no botão
 Relatório. A solução, imediatamente, faz o
  download no formato que ele  <b>Relatório<escolheu anteriormente.
</p>
<br>
<p>
  <b>Solução Atualizada:</b>. A nova solução,funcionalidade imediatamente,eliminou fazetapas odesnecessárias, downloadpermitindo noque formatoJoão
  acesse os relatórios que precisa com mais agilidade, otimizando seu tempo e
 que ele escolheu anteriormente.
  eficiência.
</p>

          </p>section>
      
       <br>
  
          <p></div>
          
    <b>Resultado</b>: A nova funcionalidade eliminou etapas desnecessárias, permitindo
 <!-- Tab 30 fim -->
         que João
 acesse os relatórios que precisa com mais agilidade, otimizando seu
  <!-- Tab 30 fim -->
        tempo e eficiência.
            </p>
                        
  div>
        </section>div>
      
         


      <div id="tab2"   </div>class="col s12">
          <!-- Tab 70 conteúdo --<div class="tab-content">
          <div style="background-color: #dfe1e5#f4f5f7; padding: 20px">
    ; margin-left: 50px; margin-right: 50px;">
          <!-- Tab 30 conteúdo -->
<section id="section5" style="margin-top: 40px;">
            <!-- Primeira coluna do conteúdo da guia <div id="indice"2 -->
            <h2  <h2><i class="custom-heading"><i class="fa-solid fa-address-bookgear"></i>&nbsp NESTEDETALHES ARTIGO<TÉCNICOS</h2>
              <ul><br>
            <h3>Adicionando o Novo Campo</h3>
   <li data-target="section1">ANTES DE COMEÇAR</li>
      <p>Localize-se dentro da tela "Relatório"  "Relatório"  "opção    <li data-target="section2">DETALHES FUNCIONAIS</li>
      Editar relatório". Aqui, você deverá adicionar um novo campo:</p>
            <li<ul data-targetclass="section3">COMO USAR?</li>browser-default">
                <li><b>Label:</b> "Download <li data-target="section4">EXEMPLO PRÁTICO<sem filtros:"</li>
                <li><b>Tipo:</b> Combobox</ul>li>
<br>


          </div>
        <li><b>Obrigatório:</b> Sim</li>
  <div id="indice">
              <li><b>Persistência:</b> tabela <code>RELATORIOBI</code>, campo <code>sglformatosemfiltro</code></li>
                <li><b>Adaptações:</b> Crie um campo <h2><i class="fa-solid fa-link"></i> LINKS ÚTEIS</h2>do tipo <code>varchar(80)</code> NULLABLE na opção 7 do tools.</li>
            <ul>
</ul>
            
           <li><a href="https<p><b>Obs://produtos.totvs.com/produto/totvs-crm/automacao-da-forca-de-vendas/" class="link-item">PORTAL DE PRODUTOS</a></li></b> adicionar esse novo campo em toda tela de edição dos relatórios que não possuem filtro.</p>
        
          <li><a href="https://informa.totvs.com/" class="link-item">TOTVS INFORMA</a></li>  <h3>Configurando Opções do Combobox</h3>
            <p>O combobox terá  <li><a href="https://centraldeatendimento.totvs.com/hc/pt-br/community/topics" class="link-item">CENTRAL COLABORATIVA</a></li>3 opções, cada uma correspondendo a um comportamento específico:</p><br>
            </ul><ol>
         </div>
       <li><b>Padrão (selecionar  
    formato):</b> Valor a ser persistido: <code>PADRAO</code></li>
        <!-- Tab 30 fim -->
    <li><b>Formato PDF:</b> Valor a ser persistido: <code>PDF</code></li>
            <!-- Tab 30 fim -->
          
<li><b>Formato XLSX:</b> Valor a ser persistido: <code>XLSX</code></li>
            </div>ol>
        </div>
      </div>


      <div id="tab2" class="col s12"><h3>Determinando Comportamentos de Download</h3>
        <div class="tab-content">
          <div style="background-color: #f5f5f5; padding: 40px; margin-left: 10px; margin-right: 10px;">    <p>Ao acionar o botão "Relatório", o sistema deve verificar o valor selecionado no combobox e agir de acordo:</p>
            <section id="section5" style="margin-top: 40px;">
<ol>
                <!-- Primeira coluna do conteúdo da guia 2 --><li><b>Padrão (selecionar formato):</b> O SFA mantém o modelo atual.</li>
            <h2 class="custom-heading"><i class="fa-solid fa-gear"></i>&nbsp ESCOPO TÉCNICO</h2>
            
 <li><b>Formato PDF:</b> O SFA inicia o download automático no formato PDF.</li>
               <h3>Adicionando o Novo Campo</h3>
            <p>Localize-se dentro da tela "Relatório" → "Relatório" → "opção Editar relatório". Aqui, você deverá adicionar um novo campo:</p><li><b>Formato XLSX:</b> O SFA inicia o download automático no formato XLSX.</li>
            </ol>
        
            <ul class="browser-default"><h3>Instrução de Verificação</h3>
            <p>Para confirmar a  <li><b>Label:</b> "Download sem filtros:"</li>
configuração, realize a seguinte busca:</p>


                   <li><b>Tipo:</b> Combobox</li><pre><code class="language-sql"> SELECT
                <li><b>Obrigatório:</b> Sim</li>
    sglformatosemfiltro
            <li><b>Persistência:</b> tabela <code>RELATORIOBI</code>, campo <code>sglformatosemfiltro</code></li>FROM
                <li><b>Adaptações:</b> Crie um campo dorelatoriobi
 tipo <code>varchar(80)</code> NULLABLE na opção 7 do tools.</li>
            </ul>WHERE
            
        nome = 'Espelho  <p><b>Obs:</b> adicionar esse novo campo em toda tela de edição dos relatórios que não possuem filtro.</p>do Pedido.prpt';</code></pre>
            <br> 


        
      </div>

      <h3>Configurando Opções do Combobox</h3>
   


         <p>O combobox terá
 3 opções, cada uma correspondendo a um comportamento específico:</p><br>div>
    </div>

    <div id="tab3"   <ol>class="col s12">
      <div class="tab-content">
         <li><b>Padrão (selecionar formato):</b> Valor a ser persistido: <code>PADRAO</code></li><div style="background-color: #f4f5f7; padding: 20px; margin-left: 50px; margin-right: 50px;">
              <!-- Primeira <li><b>Formato PDF:</b> Valor a ser persistido: <code>PDF</code></li>coluna do conteúdo da guia 2 -->
              <div class="container">
 <li><b>Formato XLSX:</b> Valor a ser persistido: <code>XLSX</code></li>
         <h2 class="custom-heading"><i class="fa-solid fa-circle-question"></i> PERGUNTAS <FREQUENTES</ol>h2>
        
        <ul class="collapsible">
   <h3>Determinando Comportamentos de Download</h3>
            <p>Ao acionar o<li>
 botão "Relatório", o sistema deve verificar o valor selecionado no combobox e agir de acordo:</p>
         <div class="collapsible-header"><i  <ol>
          class="material-icons">question_answer</i>Posso manter o método antigo de seleção de formato a cada download?</div>
      <li><b>Padrão (selecionar formato):</b> O SFA mantém o modelo atual.</li>
          <div class="collapsible-body"><span>Sim! Basta selecionar a opção <li><b>Formato PDF:</b> O SFA inicia o download automático no formato PDF.</li>
                <li><b>Formato XLSX:</b> O SFA inicia o download automático no formato XLSX.</li>
"Padrão (selecionar formato)" no combobox. Assim, sempre que clicar em "Relatório", será solicitado que escolha o formato desejado.
                          </span></ol>div>
        
            <h3>Instrução de Verificação</h3></li>
            <p>Para confirmar a configuração, realize a seguinte busca:</p>



                   <pre><code class="language-sql"> SELECT
         <!-- Adicione mais perguntas e respostas aqui conforme necessário -->
            sglformatosemfiltro
    </ul>
            FROM</div>

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

        nome = 'Espelho do Pedido.prpt';</code></pre>
            <br>
</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",  <div style="background-color: #dfe1e5; padding: 20px">function () {
    var tabs = document.querySelectorAll(".tabs");
    M.Tabs.init(tabs);
  });
</script>

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

  items.forEach(item  <!-- Tab 30 conteúdo -->
     => {
      item.addEventListener('click', (e) => {
          const <divtargetId id="indice">= e.target.getAttribute('data-target');
          const targetElement = document.getElementById(targetId);
  
        window.scrollTo({
          <h2><i class="fa-solid fa-link"></i> LINKS ÚTEIS</h2>
    top: targetElement.offsetTop - 10,
              behavior: <ul>"smooth"
          });
      });
      <li><a href});
</script>

<script src="https://produtoskit.totvsfontawesome.com/produto/totvs-crm/automacao-da-forca-de-vendas/" class="link-item">PORTAL DE PRODUTOS</a></li>
                      <li><a hrefc97d4c197a.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 


<script src="https://informacdnjs.totvscloudflare.com/" class="link-item">TOTVS INFORMA</a></li>
                      <li><a href="https://centraldeatendimento.totvs.com/hc/pt-br/community/topics" class="link-item">CENTRAL COLABORATIVA</a></li>
                  </ul>
              </div>




              
            </div>
            


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

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


 <!-- ... (conteudo video) ... -->
 <script src="https://cdnjswww.cloudflareyoutube.com/ajax/libs/highlight.js/11.8.0/highlight.min.jsiframe_api"></script>

 <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) ... -->
  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>