<style>
/* Início estilo banner */
.compositiondani-banner {
position: relative;
min-height: 220px;
border-radius: 5px;
margin-bottom: 5px;
overflow: hidden;
}
.compositiondani-banner-image {
background-image: url("https://totvscrm.com/wp-content/uploads/2024/04/capa-com-fundo-e-sem-icone-TDN-AZUL2.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: 350px;
height: 180px;
background-image: url("https://totvscrm.com/wp-content/uploads/2023/09/logo-com-descricao-totvsgc.png");
background-size: contain;
background-repeat: no-repeat;
}
.compositiondani-banner-title {
margin-bottom: 10px !important;
padding: 10px !important;
background: rgba(0, 0, 0, 0.5) !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
font-size: 12px !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: 130px !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: 16px;
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 */
#content.page.view {
padding-right: 0 !important;
} /* impedir vermelho no nav */
#breadcrumb-section > nav {
background-color: initial !important;
box-shadow: 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/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">
CAMPOS PERSONALIZADOS EM ITENS DE OPORTUNIDADE
</h1>
</header>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet">
<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"/>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.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 {
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
a:hover {
}
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;
}
td, th {
padding: 6px;
}
* p {
margin-bottom: 0 !important;
}
/* ==============================
= ESTILOS DE TÍTULOS =
=============================== */
#title-text {
display: none !important;
}
#content > div.page-metadata > div {
float: none !important;
line-height: normal !important;
width: auto !important;
display: none !important; /* ou outra propriedade de display que você deseja usar */
margin: 0 !important; /* ou outra propriedade de margin que você deseja usar */
}
#section2 > ol > li:nth-child(2) > p {
margin-bottom: 0;
}
.wiki-content h1,
.wiki-content h2 {
font-family: "Roboto", sans-serif !important;
font-size: 13px!important;
}
.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;
}
/* ==============================
= ESTILOS DE TEXTO =
=============================== */
.wiki-content p {
font-size: 14px !important;
}
.justificado,
.custom-justified {
text-align: justify;
margin: 10px 0;
}
/* ==============================
= 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;
color: #42526e;
font-size: 14px;
}
.wiki-content a:hover {
color: white;
}
/* ==============================
= ESTILOS DE CONTAINER =
=============================== */
.custom-content {
background-color: #f5f5f5;
padding: 20px;
border-radius: 8px;
margin: 0 10px;
max-width: 100%;
overflow: hidden;
}
.faq-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
/* ==============================
= ESTILOS DE CARDS =
=============================== */
.card {
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;
top: 0;
}
/* ==============================
= ESTILOS DE TABS =
=============================== */
.tabs {
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: #0897E9;
background-color: transparent;
}
.tabs .tab a:focus {
background-color: rgba(8, 151, 233, 0.25);
}
.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
color: rgba(16, 148, 184, 0.24);
}
.tabs .indicator {
background-color: #0897E9;
}
.tab-content {
gap: 0;
padding: 10px;
}
.tab-content pre {
max-width: 100%;
overflow-x: 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;
}
.label b {
color: #42526e;
}
td th {
color: #42526e;
}
/* ==============================
= 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;
}
.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 VÍDEO =
=============================== */
#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;
width: 100%;
height: 100%;
position: absolute;
}
/* ==============================
= 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: 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: #0897E9;
color: white;
}
/* ==============================
= ESTILOS DE TABELAS =
============================== */
.custom-grey {
background-color: #ffffff;
}
.custom-grey th,
.custom-grey td {
border: 1px solid #086ea8;
padding: 10px;
color:#064569
}
.custom-grey tr:nth-child(even) td {
background-color: #d2e6f1;
}
.custom-grey tr:nth-child(odd) td {
background-color: #f4f5f7;
}
.custom-grey th {
color: #fff;
background-color: #0897E9;
}
.custom-grey td {
font-size: 13px;
}
.custom-grey tr:nth-child(odd) {
background-color: #e4e4e6;
}
.custom-grey tr:nth-child(even) {
background-color: #dfdfdf;
}
.custom-alert-warning {
background-color: #fdf1dc; /* ou qualquer outra cor que preferir */
color: #5c4225; /* cor do texto */
border: 1px solid #d6800f; /* adicionando borda da mesma cor que o ícone */
padding: 10px; /* adicione padding conforme necessário */
}
.custom-alert-warning .fas {
color: #5c4225; /* cor do ícone no alerta de aviso */
margin-right: 10px; /* espaço extra entre o ícone e o texto */
}
.custom-alert-danger {
background-color: #ffe7ec; /* ou qualquer outra cor que preferir */
color: #9e1d3b; /* cor do texto */
border: 1px solid #eb7893; /* adicionando borda da mesma cor que o ícone */
padding: 10px; /* adicione padding conforme necessário */
}
.custom-alert-danger .fas {
color: #f34b72; /* cor do ícone no alerta de perigo */
margin-right: 10px; /* espaço extra entre o ícone e o texto */
}
.alert-secondary-custom {
background-color: #d9eefa; /* Cor de fundo do alerta */
color: #094f77; /* Cor do texto */
border: 1px solid #094f77; /* adicionando borda da mesma cor que o ícone */
padding: 10px; /* adicione padding conforme necessário */
}
.alert-secondary-custom .fas {
color: #0897E9; /* Cor dos ícones FontAwesome */
margin-right: 10px; /* Espaço extra entre o ícone e o texto */
}
.custom-content ul li {
list-style-type: disc !important; /* Forçando 'bolinhas' */
padding-left: 30px; /* Espaçamento para alinhar com o texto se necessário */
margin-bottom: 10px; /* Espaço entre itens da lista se necessário */
}
/* ========== FIM DO ESTILO ========= */
</style>
<!-- Tabs e conteúdo das guias -->
<div class="card">
<ul class="tabs">
<li class="tab col s4"><a href="#tab1">DETALHES FUNCIONAIS</a></li>
<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: 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="card">
<div class="item">
<span class="label">
<table border="1">
<tr>
<td><i class="fas fa-tags"></i> <b>Produto:</b></td>
<td>Gestão de Clientes</td>
</tr>
<tr>
<td><i class="fas fa-link"></i> <b>Linha de Produto:</b></td>
<td>TOTVS CRM - Vendas</td>
</tr>
<tr>
<td><i class="fas fa-chart-pie"></i> <b>Segmento:</b></td>
<td>Cross Segmentos</td>
</tr>
<tr>
<td><i class="fas fa-desktop"></i> <b>Módulo:</b></td>
<td>Personalização</td>
</tr>
<tr>
<td><i class="fas fa-globe"></i> <b>Aplicação:</b></td>
<td>Web</td>
</tr>
<tr>
<td><i class="fas fa-hashtag"></i> <b>Identificador:</b></td>
<td>
DTCRMSI-458 - ME140220221002</td>
</tr>
</table>
</span>
</div>
</div>
<br>
<h2 class="custom-heading">
<i class="fa-solid fa-eye"></i>    VISÃO GERAL
</h2>
<p class="justificado">
Essa melhoria expande as capacidades de personalização no TOTVS CRM, especificamente para os itens de oportunidade. Essa inovação permite a inclusão de campos personalizados diretamente nos itens de uma oportunidade, melhorando a precisão e a relevância das informações coletadas durante o processo de vendas. Integrada ao CRM, a funcionalidade facilita adaptações rápidas a requisitos específicos de negócio, proporcionando uma experiência mais dinâmica e eficiente para o usuário.
</p>
<br>
<h2 class="custom-heading">
<i class="fa-solid fa-rocket"></i>    OBJETIVO
</h2>
<p class="justificado">
Fortalecer a capacidade de adaptação do processo de vendas ao permitir personalizações específicas nos itens de oportunidades. Isso garante que informações essenciais sejam coletadas e utilizadas eficazmente, apoiando uma tomada de decisão mais informada e promovendo práticas de vendas mais alinhadas às necessidades do cliente.
</p>
<br>
<!-- ... (seu conteúdo existente) ... -->
</section>
<section id="section2" style="margin-top: 40px;">
<h2 class="custom-heading"><i class="fa-solid fa-star"></i>  DETALHES FUNCIONAIS</h2>
<br>
<ol start="1">
<li>
<strong>Permissão para Adicionar Novos Objetos em Itens de Oportunidades</strong>:
<p> O recurso de cadastro de atributos foi habilitado, permitindo a inclusão de campos personalizados nos formulários de itens de oportunidade. Essa capacidade de personalização atende diretamente às exigências das regras de negócio, adaptando o sistema para operar de forma alinhada e eficaz conforme as necessidades específicas. Os tipos de campos que podem ser adicionados incluem: Booleano, Subobjeto, Lista de opções, Data, Fórmula, Relacionamento, Relacionamento remoto, Número e Texto.
<br>
</p>
<img src="https://totvscrm.com/wp-content/uploads/2024/11/MOCKUP-TDN-RELEASE-COMPONENTES0811202401.webp" alt="Atributos - Itens" title="Atributos - Itens" style="width: 100%; height: auto; max-width: 100%; display: block;">
</ol>
<ol start="2">
<li>
<strong>Criação de Regras para Itens de Oportunidades</strong>:
<p>Foi habilitado o recurso de regras de visualização e validação diretamente nos formulários de itens de oportunidade. Esta funcionalidade oferece customização profunda e específica, atendendo às necessidades particulares de cada processo de venda. Com a opção de definir regras simples usando condicionais padrão ou regras avançadas por meio de expressões em campo de texto livre, os usuários ganham controle preciso sobre a entrada de dados e a visibilidade dos campos. Este controle aprimora significativamente a gestão e a execução das oportunidades de vendas.
<br>
<img src="https://totvscrm.com/wp-content/uploads/2024/11/MOCKUP-TDN-RELEASE-COMPONENTES0811202402.webp" alt="Itens" title="Itens" style="width: 100%; height: auto; max-width: 100%; display: block;">
</ol>
<ol start="3">
<li><strong>Personalização do Formulário de Itens de Oportunidades</strong>:
<p>Foi disponibilizado o card Sub-Formulário - Opportunity Items no módulo opportunityItems, onde, na nova versão, o formulário de itens de oportunidade está acessível para personalizações.
</p>
<img src="https://totvscrm.com/wp-content/uploads/2024/11/MOCKUP-TDN-RELEASE-COMPONENTES0911202401-1.webp" alt="Itens" title="Itens" style="width: 100%; height: auto; max-width: 100%; display: block;">
</li>
</ol>
<ol start="4">
<li><strong>Regras Condicionais de Edição e Visibilidade para Itens de Oportunidade</strong>:
<p>Foi habilitado o recurso de regras condicionais para alterar a visibilidade e/ou estado de edição de campos nos formulários de itens de oportunidade.
</p>
<img src="https://totvscrm.com/wp-content/uploads/2024/11/MOCKUP-TDN-RELEASE-COMPONENTES0911202402.webp" alt="Itens" title="Itens" style="width: 100%; height: auto; max-width: 100%; display: block;">
</li>
</ol>
<ol start="5">
<li><strong>Exibição de Campos Personalizados em Itens de Oportunidade</strong>:
<p>Os campos personalizados na tela de itens de oportunidade agora se adaptam conforme as configurações da funcionalidade de personalização, aprimorando a precisão e utilidade dos formulários.
</p>
<img src="https://totvscrm.com/wp-content/uploads/2024/11/MOCKUP-TDN-RELEASE-COMPONENTES0911202403.webp" alt="Itens" title="Itens" style="width: 100%; height: auto; max-width: 100%; display: block;">
</li>
</ol>
<ol start="6">
<li><strong>Inclusão de Tags na Geração de Documentos</strong>:
<p>Tags de atributos personalizados de itens de oportunidade agora podem ser utilizadas na geração de documentos, como contratos.
</p>
<img src="https://totvscrm.com/wp-content/uploads/2024/11/MOCKUP-TDN-RELEASE-COMPONENTES0911202404.webp" alt="Itens" title="Itens" style="width: 100%; height: auto; max-width: 100%; display: block;">
</li>
</ol>
<ol start="7">
<li><strong> Atualizações na API de Integração </strong>:
<p>A integração dos itens de oportunidade recebeu uma atualização significativa com a introdução de um novo endpoint. Agora, o acesso para integrar dados personalizados está mais facilitado através de especificações detalhadas: </p> <br>
<p><strong>Antes</strong>: O endpoint anterior era acessado via:</p>
<div id="main-content" class="wiki-content">
<div class="code panel pdl conf-macro output-block" style="border-width: 1px;" data-hasbody="true" data-macro-name="code">
<div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;">
<b>Antes</b>
</div>
<div class="codeContent panelContent pdl">
<div>
<div id="highlighter_291557" class="syntaxhighlighter sh-django powershell">
<div class="toolbar">
<span><a href="#" class="toolbar_item command_help help">?</a></span>
</div>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
</td>
<td class="code">
<div class="container" title="Hint: double-click to select code">
<div class="line number1 index0 alt2" data-bidi-marker="true">
<code class="powershell plain">POST <a href=" |