Á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;
}

/* ==============================
      =        ESTILOS DE TÍTULOS       =
  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      =
    =============================== */

#title-text* {
  displayfont-family: none !important;
}

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

.wiki-content h1"Roboto", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 18px !importantmargin: 0;
  padding: 0;
}

.wiki-content h2 {
  font-size: 19px !important;a {
  color: #42526e !important;
  bordertext-bottomdecoration: 2px solid #dfe1e5none;
   padding-bottom-webkit-tap-highlight-color: 5pxtransparent;
}

a:hover  font-weight{
  color: boldwhite;  
}

.custom-heading,
h3.custom-h3li {
  font-size: 17px;
  color: #42526e14px !important;
}

h3 {  font-size: 14px !important;
  marginfont-bottomweight: 20pxbold;  

}

.custom-h1 {
  colorfont-size: 13px #feac0e;!important;
  

}

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

}

td, th {
    padding: 4px;
}


/* ==============================
      =        ESTILOS DE TEXTOTÍTULOS         =
      =============================== */

.wiki-content p#title-text {
  font-sizedisplay: 16pxnone !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 a,
.wiki-content a:link,
.wiki-content a:visited,
.wiki-content a:focus,
.wiki-content a:active {
  text-decoration: none;.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: #42526e#feac0e;
}

.wiki-content a:hoverexplanation h2 {
  colorfont-weight: whitebold;
}

/* ==============================
      =        ESTILOS DE CONTAINERTEXTO         =
      =============================== */

.container2wiki-content p {
  displayfont-size: flex;
  gap: 20px;
  padding: 10px;
}
14px !important;
}

.justificado,
.custom-contentjustified {
  backgroundtext-coloralign: #f5f5f5justify;
  paddingmargin: 20px;
  border-radius: 8px;
  margin: 0 10px;
  max-width: 100%;
  overflow: hidden;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* 10px 0;
}

/* ==============================
      =       ESTILOS DE CARDSLINKS         =
      =============================== */

.card {
  border: 2px solid #9aa1ad;
  padding: 20px;
  flex-grow: 1;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #f4f5f7wiki-content a,
.wiki-content a:link,
.wiki-content a:visited,
.wiki-content a:focus,
.wiki-content a:active {
  text-decoration: none;
  color: #42526e;
  overflowfont-xsize: hidden14px;


}

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

.card:last-child content a:hover {
  flexcolor: 6white;
}

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



.tabscustom-content {
  background-color: #dfe1e5#f5f5f5;
}

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

.tabs .tab a:hover,
.tabs .tab a.active,
.tabs .tab a:focus.active {
  color: #1094b8;
  background-color: transparent8px;
  margin: 0 10px;
  max-width: 100%;
  overflow: hidden;
}

.tabs .tab a:focus faq-container {
  backgroundmax-colorwidth: rgba(82, 200, 232, 0.25)800px;
  margin: 0 auto;
  padding: 20px;
}

.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 CARDS         =
      =============================== */

.card {
  border: 2px solid =#9aa1ad;
  padding: 20px;
    box-shadow: ESTILOS0 DE4px ÍCONES8px rgba(0, 0, 0,     =
     0.1);
  border-radius: 8px;
  background-color: #f4f5f7;
  color: #42526e;
  overflow-x: hidden;
   top: 0;
  
}



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

.icon-list,
.icon {
  padding-left: 0;
  list-style-type: none;
}

.icon {
  display: inline-block;
  width: 24px;
  vertical-align: middle;
  margin-right: 45px;
  position: relative;
  left: -25px;
}

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

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

.tabs {
  background-color: #dfe1e5;
}

.tabs .tab =a {
   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-leftcolor: rgb(66, 82, 110);
}

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

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

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

.tabs .indicator {
  background-color: #6B48FF;
}

.tab-content {
   gap: 0;
  padding: 10px;
}

ul.customtab-listcontent lipre {
  positionmax-width: relative100%;
  listoverflow-style-typex: 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 hidden;
}

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

.icon-list,
.icon {
  padding-left: 0;
  list-style-type: none;
}

.icon {
  display: inline-block;
  width: 24px;
  vertical-align: middle;
  margin-right: 45px;
  position: relative;
  left: -25px;
}

.item .label i {
  margin-right: 10px; /* Adiciona espaço depois dos ícones */
}

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

.imagem-responsivacollapsible,
.collapsible-header,
.collapsible-body {
  maxbox-widthshadow: 100%;
  height: autonone !important;
}

.custom-header-bg imgfaq-question {
  widthfont-weight: 100%bold;
  heightmargin-bottom: auto5px;
}

.faq-answer  display{
  margin-bottom: block20px;
}

/* ==============================
      =     ESTILOS DE VÍDEO           =
      =============================== */

#youtube-video-container iframe.custom-list {
  padding-left: 0;
  margin-left: 1.5em;
}

.custom-list li {
  widthposition: 100%relative;
  heightpadding-left: auto;
  display: block1em;
}

ul.videocustom-containerlist {
    maxpadding-widthleft: 800px10px;
    margin: 0 auto;
  }

.ytp-cued-thumbnail-overlay-image}

ul.custom-list li {
  position: relative;
  list-style-type: disc;
  padding-left: 30px;
  margin-bottom: 10px;
}

.item {
  background-sizedisplay: coverflex;
  backgroundalign-positionitems: center;
  widthpadding: 100%10px;
  height: 100%;
  position: absoluteborder-bottom: 1px solid #eee;
}

.item:last-child {
  border-bottom: none;
}

/* ==============================
      =    OUTROS ESTILOS PERSONALIZADOS =
      =============================== */
.custom-content {
  background-color: #f5f5f5.item .label {
  flex: 1;
  font-weight: bold;
}

.item .value {
  flex: 1;
  text-align: right;
}
.item {
  border-bottom: 1px solid #e0e0e0;
  padding: 20px;
  border-radius: 8px10px 0;
  margindisplay: 0 10pxflex;
  maxjustify-widthcontent: 100%space-between;
  overflowalign-items: hiddencenter;
}

.customitem:last-headingchild {
  fontborder-sizebottom: 19pxnone;
}

/* Estilos color: #42526e;
  margin: 10px 0;para o label */
.label {
  borderfont-bottomweight: 2px solid #e0e0e0bold;
  padding-bottomdisplay: 5pxflex;
  fontalign-weightitems: boldcenter;  
}

#indice.item .label i {
  bordermargin-radiusright: 5px10px;
 /* padding: 20px;
  max-width: 100%;
  overflow: hidden;
}

#indice h2 {
  text-align: center;
  margin-bottom: 20px;
}

#indice ul {
  list-style-type: none;
  padding-left: 0;
}

#indice li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

#indice li:last-child {
  border-bottom: none;
}

#indice li:hover {
  background-color: #1094b8;
  color: white;
}

/* Adiciona espaço depois dos ícones */
}

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

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

.custom-header-bg img {
  width: 100%;
  height: auto;
  display: block;
}

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

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

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

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

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

/* 
      =     ESTILOS DE VÍDEO           =
      ====================== FIM DO ESTILO ========= */

#youtube-video-container iframe </style>{
  

   
<div class="container2">
  <!-- Primeiro Card -->
  <div class="card">width: 100%;
  height: auto;
  display: block;
}

.video-container {
    <div class="item">max-width: 800px;
    margin: 0 auto;
 <span class="label">
            <i class="fas fa-tags"></i>    
        <div>Produto:</div>
      </span> }

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

/* ==============================
      <div>Automação= da Força de Vendas</div>
OUTROS ESTILOS   </div>
    <div class="item">PERSONALIZADOS =
      <span class="label">
            <i class="fas fa-link"></i>    
        <div>Linha de Produto:</div>
      </span>
      <div>TOTVS CRM</div>
    </div>
    <div class="item">
      <span class="label">
            <i class="fas fa-chart-pie"></i>    
        <div>Segmento:</div>
      </span>
      <div>Cross Segmentos</div>
    </div>
    <div class="item">
      <span class="label">
            <i class="fas fa-desktop"></i>    
        <div>Módulo:</div>
      </span>
      <div>Relatório</div>
    </div>
    <div class="item">
      <span class="label">
            <i class="fas fa-globe"></i>    
        <div>Aplicação:</div>
      </span>
      <div>Web/app móvel</div>
    </div>
    <div class="item">
      <span class="label=============================== */
.custom-content {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin: 0 10px;
  max-width: 100%;
  overflow: hidden;
}

.custom-heading {
  font-size: 16px;
  color: #42526e;
  margin: 10px 0;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 5px;
  font-weight: bold;  
}

#indice {
  border-radius: 5px;
  padding: 20px;
  max-width: 100%;
  overflow: hidden;
}

#indice h2 {
  text-align: center;
  margin-bottom: 16px;
}

#indice ul {
  list-style-type: none;
  padding-left: 0;
}

#indice li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

#indice li:last-child {
  border-bottom: none;
}

#indice li:hover {
  background-color: #6B48FF;
  color: white;
}

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

.custom-grey th,
.custom-grey td {
  border: 1px solid #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="card">
    <ul class="tabs">
      <li class="tab  col   <i class="fas fa-hashtag"></i>    s4"><a href="#tab1">DETALHES FUNCIONAIS</a></li>
      <li  <div>Identificador:</div>
      </span>
      <div>15266396</div>class="tab col s4"><a href="#tab2">DETALHES TÉCNICOS</a></li>
      <li class="tab col s4"><a href="#tab3">FAQ</a></li>
    </div>ul>
  </div>

   <!-- SegundoTab CardContent -->
 
 <div class="card">
    <div classid="explanation">
      <h2tab1" class="custom-heading"><i class="fa-solid fa-eye"></i>&nbsp &nbsp VISÃO GERAL</h2>  
      <p class="justificadocol s12">
        <div class="tab-content">
        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 style="background-color: #f4f5f7; padding: 10px; margin-left: 50px; margin-right: 50px;">
            <section id="section1" style="margin-top: 40px;">
               <!-- Tab 70 conteúdo -->
  <!-- Segundo Card -->

    <!-- Primeiro Card -->
    <!-- Primeiro Card -->
    <div class="explanationcard">
      <h2<div class="custom-heading"><iitem">
        <span class="fa-solid fa-rocket"></i>&nbsp &nbsp OBJETIVO</h2>
"label">
          <p<table classborder="justificado1">
       Aprimorar a experiência na solução, acelerando<tr>
 o download de relatórios no formato escolhido, diminuindo etapas e evitando erros manuais.
   <td><i class="fas fa-tags"></i> Produto:</p>td>
     </div>
  </div>
</div>
<div class="container2">
  <!-- ... (seu conteúdo existente) ... -->

  <!-- Tabs e conteúdo das guias -->
  <div class="card">
 <td>Automação da Força de Vendas</td>
           <ul class="tabs"> </tr>
      <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>
      <li<td><i class="tab col s4"><a href="#tab3">FAQ</a></li>
    </ul>fas fa-link"></i> Linha de Produto:</td>
     <!-- Tab Content -->
 
           <td>TOTVS <div id="tab1" class="col s12">
CRM</td>
           <div class="tab-content"> </tr>
          <div style="background-color: #f5f5f5; padding: 20px; margin-left: 10px; margin-right: 10px;">
 <tr>
                <section<td><i idclass="section1" style="margin-top: 40px;">
fas fa-chart-pie"></i> Segmento:</td>
                <td>Cross Segmentos</td>
    <!-- Tab 70 conteúdo -->
    </tr>
           <h2 class="custom-heading"> <tr>
                <i<td><i class="fa-solidfas fa-bookdesktop"></i> &nbsp ANTES DE COMEÇARMódulo:</td>
                <td>Relatório</td>
            </h2>tr>
            <h3>Requisitos</h3><tr>
              <p>Para utilizar o recurso, certifique-se de estar usando a versão padrão da solução.</p><td><i class="fas fa-globe"></i> Aplicação:</td>
                <td>Web/app móvel</td>
            </section>tr>

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

   <td>
         <ul class="browser-default">
        15266396</td>
      <li>
      </tr>
            <p></table>
        </span>
      </div>
        <b>Anteriormente</b>, para obter o relatório do pedido no TOTVS SFA ambiente web, era necessário:
     </div> 
 

      <br>

       <!-- Segundo Card -->

       <h2 class="custom-heading">
       </p>
 <i class="fa-solid fa-eye"></i>&nbsp &nbsp VISÃO GERAL
      </h2>
      <ul<p class="browser-defaultjustificado">
        A nova funcionalidade do TOTVS CRM - SFA aprimora o processo de geração de
 <li>Clicar no botão <b>"Relatório"</b>.</li>
    relatórios. Anteriormente, ao clicar em "Relatório", era exigida uma escolha
        manual de <li>Selecionarformato. oAgora, formatoos desejado (<b>PDF</b> ou <b>XLSX</b>) em uma nova aba.</li>
usuários podem predefinir um formato (PDF ou
        XLSX) nas configurações. Assim, ao acionar o botão, o download é </ul>
iniciado
        automaticamente no formato selecionado, tornando o fluxo mais ágil.
      </li>p>
<br>

    <h2 class="custom-heading">
      <i class="fa-solid  <li>fa-rocket"></i>&nbsp &nbsp OBJETIVO
    </h2>
    <p class="justificado">
      Aprimorar a experiência <p><b>Com a melhoria</b>na solução, seráacelerando inseridoo umdownload parâmetrode nas configurações:</p>relatórios no
      formato escolhido, diminuindo etapas e evitando erros manuais.
    </p>
 <ul class="browser-default">
  <br>

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

            <li><b>Determinar previamente</b> o formato de arquivo.</li><h2 class="custom-heading">
                <i class="fa-solid fa-book"></i> &nbsp ANTES  <li><b>Permitir download automático</b> ao clicar no botão <b>"Relatório"</b>.</li>
    DE COMEÇAR
              </ul>h2>
              <<h3>Requisitos</li>h3>
          </ul>
  <p>Para utilizar o recurso, certifique-se de estar usando 
a versão padrão        
da solução.</p>
          </section>
         
      
          <section id="section3section2" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-shoe-printsstar"></i>&nbsp COMODETALHES USAR?<FUNCIONAIS</h2>
            <h3> Passo a Passo<<h3>Funções </h3>
           
 <ul class="browser-default">
              <ol><li>
                  <li<b>relatório</b>.</li>
<p>
               <li>Vá   para a pasta de <b>pedidos<<b>Anteriormente</b>.</li>
              <li>No card <b>espelho do pedido</b>, clique no ícone <b>lápis de editar</b>.</li>, para obter o relatório do pedido no TOTVS SFA ambiente web, era necessário:
                  </p>
              <li>Na  seção "<b>Downloand sem filtros:</b>", selecione uma das opções <b>"Formato PDF"</b> ou <b>"XLSX<ul class="browser-default">
                      <li>Clicar no botão <b>"Relatório"</b>.</li>
                  <li>Depois de salvo, ao acessar<li>Selecionar o pedidoformato e clicar em <b>relatório</b>, automaticamente ele fará o <b>download</b>desejado (<b>PDF</b> ou <b>XLSX</b>) em uma nova aba.</li>
                  </ol>ul>
              </li>
             <br>

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

<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.</section>
li>
          <section id="section4" style="margin-top: 40px;">
         <li><b>Permitir download automático</b> <h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i> &nbspEXEMPLO PRÁTICO</h2>ao clicar no botão <b>"Relatório"</b>.</li>
            <h3>Caso de uso</h3>
    </ul>
       
       </li>
     <p>
     </ul> 
        <b>Cenário</b>: João é representante de vendas. Sua ferramenta principal é o TOTVS CRM - SFA, onde ela acompanha os </section>
         
      
          <section id="section3" style="margin-top: 40px;">
 pedidos de seus clientes.
            </p>
<br>
            <p><h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>&nbsp COMO USAR?</h2>
            <h3> Passo <b>Desafioa Antigo</b>: Diariamente, ao necessitar de relatórios de
Passo</h3>

            <ol>
        pedidos para compartilhar, João enfrentava um processo <li<b>relatório</b>.</li>
              trabalhoso:<li>Vá primeiro,para clicavaa nopasta botãode <b>Relatório<<b>pedidos</b>,.</li>
 aguardava uma
            <li>No card nova<b>espelho aba abrir, e depois selecionava o formato desejado para finalmente
do pedido</b>, clique no ícone <b>lápis de editar</b>.</li>
              <li>Na seção realizar"<b>Downloand o download. Eram necessários ao menos 3 cliques e uma espera.sem filtros:</b>", selecione uma das opções <b>"Formato PDF"</b> ou <b>"XLSX"</b>.</li>
            </p>
  <li>Depois de salvo, ao acessar o pedido e clicar  <br>

     em <b>relatório</b>, automaticamente ele fará o <b>download</b>.</li>
       <p>
   </ol>
           <b>Solução Atualizada</b>: Agora, após configurar sua preferência de

            <br>

        formato no TOTVS CRM - SFA, João precisa apenas clicar no botão
    <img src="https://totvscrm.com/wp-content/uploads/2023/08/GIF0018.gif" alt="" class="imagem-responsiva"> 
          </section>

          <b>Relatório</b>. A solução, imediatamente, faz o download no formato
<section id="section4" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i>    que ele escolheu anteriormente.
&nbspEXEMPLO PRÁTICO</h2>
            <h3>Caso de <uso</p>h3>
            <br>

<p>
  <b>Cenário:</b> João é representante de vendas. Sua ferramenta principal é <p>
o TOTVS CRM - SFA,
  onde ela acompanha os pedidos de   <b>Resultado</b>: A nova funcionalidade eliminou etapas desnecessárias, permitindo
              que João acesse os relatórios que precisa com mais agilidade, otimizando seu
              tempo e eficiência.
            </p>
                        
          </section>
      
         
          </div>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 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 com mais agilidade, otimizando seu tempo e
  eficiência.
</p>

          <!-- Tab 70 conteúdo -->
  /section>
      
        <div style="background-color: #dfe1e5; padding: 20px">
 
          </div>
       <!-- Tab 30 conteúdo -->
            <div id="indice">
   <!-- Tab 30 fim -->
           <h2><i class="fa-solid fa-address-book"></i> NESTE ARTIGO</h2>

            <!-- Tab 30 fim <ul>-->
          
        <li data-target="section1">ANTES DE COMEÇAR</li> </div>
        </div>
    


      <li<div data-targetid="section2">DETALHES FUNCIONAIS</li>tab2" class="col s12">
        <div class="tab-content">
          <li<div data-targetstyle="section3">COMO USAR?</li>
      background-color: #f4f5f7; padding: 20px; margin-left: 50px; margin-right: 50px;">
            <li<section data-targetid="section5"section4">EXEMPLO PRÁTICO</li>
   style="margin-top: 40px;">
            </ul>
<br>


          </div>
!-- Primeira coluna do conteúdo da guia 2 -->
            <div<h2 idclass="indice">
     custom-heading"><i class="fa-solid fa-gear"></i>&nbsp DETALHES TÉCNICOS</h2>
            <br>
            <h2><i class="fa-solid fa-link"></i> LINKS ÚTEIS</h2><h3>Adicionando o Novo Campo</h3>
            <ul>
<p>Localize-se dentro da tela "Relatório"  "Relatório"  "opção Editar relatório". Aqui, você deverá adicionar um <li><a href="https://produtos.totvs.com/produto/totvs-crm/automacao-da-forca-de-vendas/" class="link-item">PORTAL DE PRODUTOS</a></li>
novo campo:</p>
                    <li><a href="https://informa.totvs.com/"<ul class="linkbrowser-item">TOTVS INFORMA</a></li>default">
                <li><a href="https://centraldeatendimento.totvs.com/hc/pt-br/community/topics" class="link-item">CENTRAL COLABORATIVA</a></li>
<li><b>Label:</b> "Download sem filtros:"</li>
                <li><b>Tipo:</ul>b> Combobox</li>
        </div>
          <li><b>Obrigatório:</b> Sim</li>
            <!-- Tab 30 fim -->
     <li><b>Persistência:</b> tabela <code>RELATORIOBI</code>, campo <code>sglformatosemfiltro</code></li>
      
            <!-- Tab 30 fim -->
          
<li><b>Adaptações:</b> Crie um campo do tipo <code>varchar(80)</code> NULLABLE na opção 7 do tools.</li>
            </div>ul>
        </div>
    
  </div>


      <div id="tab2" class="col s12">
        <div class="tab-content">
          <div style="background-color: #f5f5f5; padding: 40px; margin-left: 10px; margin-right: 10px;">
 <p><b>Obs:</b> adicionar esse novo campo em toda tela de edição dos relatórios que não possuem filtro.</p>
        
            <h3>Configurando Opções do <section id="section5" style="margin-top: 40px;">
Combobox</h3>
            <p>O combobox terá <!-- Primeira coluna do conteúdo da guia 2 -->3 opções, cada uma correspondendo a um comportamento específico:</p><br>
            <ol>
 <h2 class="custom-heading"><i class="fa-solid fa-gear"></i>&nbsp ESCOPO TÉCNICO</h2>
          <li><b>Padrão  
     (selecionar formato):</b> Valor a ser persistido: <code>PADRAO</code></li>
       <h3>Adicionando o Novo Campo</h3>
      <li><b>Formato PDF:</b> Valor a ser  <p>Localize-se dentro da tela "Relatório" → "Relatório" → "opção Editar relatório". Aqui, você deverá adicionar um novo campo:</p>
     persistido: <code>PDF</code></li>
                <li><b>Formato XLSX:</b> Valor a ser persistido: <code>XLSX</code></li>
           <ul class="browser-default"> </ol>
        
        <li><b>Label:</b> "Download sem filtros:"</li>
 <h3>Determinando Comportamentos de Download</h3>
            <li><b>Tipo:</b> Combobox</li>
                <li><b>Obrigatório:</b> Sim</li><p>Ao acionar o botão "Relatório", o sistema deve verificar o valor selecionado no combobox e agir de acordo:</p>
            <ol>
    <li><b>Persistência:</b> tabela <code>RELATORIOBI</code>, campo <code>sglformatosemfiltro</code></li>
        <li><b>Padrão (selecionar formato):</b> O SFA mantém o modelo <li><b>Adaptações:atual.</b>li>
   Crie um campo do tipo <code>varchar(80)</code> NULLABLE na opção 7 do tools.</li>
  <li><b>Formato PDF:</b> O SFA inicia o download automático no formato PDF.</ul>li>
            
    <li><b>Formato XLSX:</b> O SFA inicia o download automático no formato <p><b>Obs:XLSX.</b>li>
 adicionar esse novo campo em toda tela de edição dos relatórios que não possuem filtro.</p>ol>
        
            <h3>Configurando<h3>Instrução Opçõesde do Combobox<Verificação</h3>
            <p>O<p>Para comboboxconfirmar teráa 3 opçõesconfiguração, cada uma correspondendorealize a umseguinte comportamento específicobusca:</p><br>p>


            <ol>
      <pre><code class="language-sql"> SELECT
        <li><b>Padrão (selecionar formato):</b> Valor a ser persistido: <code>PADRAO</code></li>
     sglformatosemfiltro
           <li><b>Formato PDF:</b> Valor a ser persistido: <code>PDF</code></li> FROM
                <li><b>Formato XLSX:</b> Valor a ser persistido: <code>XLSX</code></li> relatoriobi
            </ol>
    WHERE
    
            <h3>Determinando Comportamentos de Download</h3>
 nome = 'Espelho do Pedido.prpt';</code></pre>
          <p>Ao acionar o<br> botão "Relatório", o sistema deve verificar o valor selecionado no combobox e agir de acordo:</p>


              </div>

            <ol>


           
      <li><b>Padrão (selecionar formato):</b> O SFA mantém o modelo atual.</li>div>
    </div>

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

<h2 class="custom-heading"><i class="fa-solid fa-circle-question"></i> PERGUNTAS FREQUENTES</h2>
                  <pre><code<ul class="language-sqlcollapsible"> SELECT
                    sglformatosemfiltro<li>
                FROM
        <div class="collapsible-header"><i class="material-icons">question_answer</i>Posso manter o método antigo de seleção de formato a cada relatoriobidownload?</div>
                WHERE
        <div class="collapsible-body"><span>Sim! Basta selecionar a opção "Padrão (selecionar formato)" no combobox.  nome = 'Espelho do Pedido.prpt';</code></pre>
Assim, sempre que clicar em "Relatório", será solicitado que escolha o formato desejado.
              <br>

            </span></div>
                    </div>li>
              <div style="background-color: #dfe1e5; padding: 20px">
     
                    <!-- Tab 30 conteúdo Adicione mais perguntas e respostas aqui conforme necessário -->
                <div id="indice">
</ul>
            </div>

    
        
          <h2><i class="fa-solid fa-link"></i> LINKS ÚTEIS</h2>
                  <!-- Primeira coluna do conteúdo da guia 2 <ul>-->

            
          <li><a href="https://produtos.totvs.com/produto/totvs-crm/automacao-da-forca-de-vendas/" class="link-item">PORTAL DE PRODUTOS</a></li>
  </div>
             
      </div>
  </div>

    <li><a
<script hrefsrc="https://informacdnjs.totvscloudflare.com/" class="link-item">TOTVS INFORMA</a></li>
     /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  <li><a href="https://centraldeatendimento.totvs.com/hc/pt-br/community/topics" class="link-item">CENTRAL COLABORATIVA</a></li>
      = document.querySelectorAll("#indice li");

  items.forEach(item => {
      item.addEventListener('click', (e) => {
          const  </ul>targetId = e.target.getAttribute('data-target');
          const targetElement   </div>



= document.getElementById(targetId);
          window.scrollTo({
    
          top:  </div>targetElement.offsetTop - 10,
            


  behavior: "smooth"
        
  });
      </div>});
    });
</div>script>

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

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