Gerenciador de transações: Layouts

Os layouts no Gerenciador de transações podem ser gerenciados na IU do administrador usando o editor de layout ou diretamente no formato YAML. Este tópico fornece os detalhes das várias estruturas de layout, campos, botões e efeitos e fornece snippets de código.

No Gerenciador de transações, os layouts retêm grande parte da aparência da experiência do usuário de configuração. Em janeiro de 2026, um editor de layout visual foi introduzido no Gerenciador de transações. Os layouts podem ser editados no formato YAML; no entanto, a opção de editar em JSON foi desativada em favor do editor visual. Campos, eventos, efeitos de IU e linhas estão disponíveis para exibição e são detalhados abaixo.

Formatos de layout (visual e YAML)

Os layouts podem ser gerenciados no editor visual ou no YAML. O editor visual é selecionado por padrão, mas os administradores podem alternar para YAML.

Criando um novo layout

Para criar um novo layout, navegue até a IU do administrador do Gerenciador de transações e clique em Layouts no menu à esquerda e clique em - Adicionar layout para adicionar um novo layout ao blueprint.

Um layout existente pode ser copiado usando a função Salvar como no layout.

O layout requer um nome e um nome de variável. Clique no campo Nome, insira o nome do novo layout e clique em Salvar para prosseguir. Embora o nome possa ser editado posteriormente no layout, o nome da variável não é editável depois que o layout é salvo.

Quando o layout é salvo, o editor visual é aberto. O layout padrão inclui alguns itens-chave, como o nível principal, uma grade de item de linha e um recurso de pesquisa de produto.

Nomes de layout e associação de fase

O nome da variável do layout é usado para mapear layouts para fases. Para mapear um layout para uma fase, use o nome da fase como o nome do layout. Um layout chamado "layout" é mapeado para qualquer fase que não tenha layout mapeado para ele. O texto padrão é anexado a todas as variáveis de layout.

Por exemplo, quando as fases são nomeadas Rascunho, Aprovada e Executada, e os layouts são nomeados Rascunho e Layout, o mapeamento é o seguinte:

Tabela 1. Associação de fase

Fase	Nome do layout
Rascunho	rascunho
Aprovada	layout
Executado	layout

O layout Detalhe de linha opcional exibe detalhes em uma linha selecionada na grade de item de linha. Esta exibição é iniciada por meio do efeito de IU Detalhe de linha. Este layout requer seu próprio arquivo de layout e o nome da variável deve terminar com _linedetail . Esses layouts seguem o mesmo mapeamento que as fases. Continuando com o exemplo acima, se você quiser um layout Detalhe de linha para a fase Rascunho, o nome deve ser draft_linedetail .

O código YAML do layout pode ser acessado usando a alternância de exibição no subcabeçalho. Os administradores podem atualizar o layout usando o editor visual ou editando diretamente o código YAML. O YAML de cada elemento também pode ser acessado na seção Valor bruto das propriedades do elemento.

. Salvar o botão salva a versão atual do layout. No entanto, o blueprint deve ser implantado para que a nova versão seja usada no tempo de execução. Se houver erros no layout, o botão Salvar será desabilitado. Para identificar erros, selecione o botão Mensagens de erro no subcabeçalho. Na exibição YAML, procure marcas vermelhas no lado direito da tela que indicam o local do erro.

Informações gerais de layout

Clique no ícone de engrenagem (configurações) no subcabeçalho para acessar as configurações de layout.

As configurações incluem o seguinte:

Identidade visual

Personalize o cabeçalho.

Exibição de moeda

Defina o estilo de exibição da moeda: Código, símbolo ou nenhum.

Quando o preço for 0, exiba

Defina o comportamento quando o preço for zero.

Quando o preço estiver indefinido, exiba

Defina o comportamento quando o preço estiver indefinido.

Permitir a seleção de opções desabilitadas

Permita que o usuário selecione itens desabilitados em uma lista de seleção. O caso de uso serve para exibir uma mensagem de explicação, se selecionado.

Mudanças de campo de destaque

Quando habilitados, os campos são brevemente destacados. Recomendado quando os campos são atualizados por meio de regras ou integrações ou se usuários simultâneos são esperados.

Ocultar cabeçalho

Oculta a seção do cabeçalho do layout.

Tema

Os layouts do Gerenciador de transações podem ser personalizados com temas. Os temas podem ser habilitados na guia Personalizar tema. Para obter mais informações, consulte Personalizando CPQ com temas.

Sevrons de andamento da fase

O componente Chevron de andamento das fases exibe uma barra de divisa horizontal para representar visualmente a progressão de uma transação por fases. Pode ser definido estaticamente ou dinamicamente e é configurável por meio de layout YAML. Para obter mais informações, consulte Gerenciador de transações: Layouts - A divisa de andamento das fases.

Camadas

As camadas são seções de informações da sua transação. As camadas são a parte superior da estrutura hierárquica de um layout do Gerenciador de transações. Você pode usar camadas para organizar suas informações de transação para que seja mais fácil encontrar e entender para o usuário adquirido. Conjuntos de colunas, camadas ou uma grade de item de linha podem ser adicionados em um nível, mas uma grade de item de linha deve ser o único elemento em um nível.

Os tipos de camada incluem acordeão, expansível, guias, guias verticais, cabeçalhos, e páginas. O tipo e a profundidade de uma camada podem ser configurados na guia Definição de camada.

Conjuntos de colunas

Como na configuração, os conjuntos de colunas são objetos no layout que permitem organizar campos e eventos na exibição do tempo de execução. Os campos e eventos podem ser organizados horizontalmente em um conjunto de colunas. Os campos e eventos são organizados verticalmente usando vários conjuntos de colunas no mesmo nível. Você pode adicionar campos, imagens, texto e botões em um conjunto de colunas.

Conjuntos de colunas: Campos

Os campos são um tipo de objeto que pode ser colocado na matriz de elementos de um conjunto de colunas. Os campos fornecem a fonte de entrada de dados da transação. Os campos podem ser adicionados, removidos e ordenados em um conjunto de colunas na guia Organizar layout. Uma vez adicionadas, propriedades de campo adicionais podem ser definidas na guia Editar informações do campo.

Na guia Editar informações do campo, mudar o tipo de exibição do campo para "área de texto" permite que o usuário redimensione o campo.

ColunnSets: Eventos

Eventos são objetos que fazem com que determinadas ações sejam executadas. Os eventos são normalmente representados no layout como um botão. Para adicionar um evento, adicione um botão a um conjunto de colunas e alterne Botão de evento configuração. Uma vez habilitado, um evento pode ser selecionado na lista de seleção de eventos.

Grade de item de linha

O objeto Grade do item de linha exibe as informações do produto incluídas na transação. Informações detalhadas do produto e informações de preço são exibidas no objeto Grade do item de linha.

No editor de layout, uma grade de item de linha é incluída por padrão e tem as três seções a seguir:

Cabeçalho da grade do item de linha

Os botões podem ser adicionados e exibidos na grade do item de linha no tempo de execução.

Coluna da grade do item de linha

Os campos podem ser adicionados, removidos e ordenados e exibidos como colunas na grade de item de linha.

Botões de nível de linha

Os botões podem ser adicionados e exibidos em cada linha na grade de item de linha.

A grade de item de linha tem as seguintes propriedades de layout, cada uma das quais é habilitada quando seu valor é verdadeiro . As propriedades devem ser definidas no editor principal do YAML.

• showLineNumbers: habilita números de linha fáceis de usar
• supportLongText: Uma propriedade do campo Grade do item de linha que habilita um popover no campo quando selecionado
• autoScrollIntoView: Suaviza a interação de rolagem entre o corpo da transação e o Lig

Snippet de código YAML:

     - depth: 1
      label: Line Items
      lineGrid:
        columns:
          - order: 1
            variableName: txn.line.product.name
          - order: 2
            variableName: txn.line.product.partnerId
        showLineNumbers: true
        lineLevelButtons:
          - icon: settings
            label: Line Details
            uiEffect:
              type: lineDetail
              target: slideout
            variableName: reconfig
          - event: cloneLine
            label: Clone Lines
            variableName: cloneLine
          - label: Add To Favorites
            uiEffect:
              type: addFavorite
            variableName: addFavorites
        gridHeaderButtons:
          - label: Add Lines
            uiEffect:
              type: productSearch
              target: slideout
              options:
                products: true
                favorites: true
            variableName: productSearch
          - label: Add To Favorites
            uiEffect:
              type: addFavorite
            variableName: addFavorites
          - label: Reconfigure Lines
            uiEffect:
              type: reconfigure
              target: slideout
            variableName: reconfig
        autoScrollIntoView: true
      variableName: lineItems

Os botões de evento no nível de linha podem ter um ícone definido. Os ícones devem ser definidos no código YAML na seção Valor bruto das propriedades do botão de linha ou no editor principal de YAML. Os botões podem usar ícones especificados da biblioteca do utilitário SLDS.

Tabela 2. Ícones disponíveis

automatize	buyer_group_qualifier	divisa para baixo	chevronleft	chevrondireita	chevronup
escolha	limpar	relógio	fechar	custom_apps	excluir
inoperante	editar	favorito	esquerda	lightning_extension	direita
Pergunta	pesquisar	configurações	target_mode	três pontos	threedots_vertical

Snippet de código YAML:

        lineLevelButtons:
          - icon: settings
            label: Line Details
            uiEffect:
              type: lineDetail
              target: slideout
            variableName: reconfig
          - event: cloneLine
            label: Clone Lines
            variableName: cloneLine
          - label: Add To Favorites
            uiEffect:
              type: addFavorite
            variableName: addFavorites

Por fim, há três maneiras de exibir números de linha na grade de item de linha: Por meio de uma propriedade de layout ou por um de dois campos do sistema:

• . showLineNumberspropriedade de layout. Por ter um desempenho eficiente e não ter limite para o número de linhas, este é o método recomendado.

  showLineNumbers exibe números de linha sequenciais para linhas visíveis. A numeração é redefinida quando um filtro ou uma pesquisa se aplica à grade de item de linha.

• . txn.line.orderNumbercampo do sistema

  txn.line.orderNumber exibe a numeração hierárquica de linhas para todas as linhas (por exemplo: 1, 1,1, 2, 2,1, 2,2, 2,2.1). A numeração não é redefinida quando um filtro ou uma pesquisa se aplica à grade de item de linha. A numeração pode ser aplicada a até 2 000 linhas.

  O campo tem as mesmas propriedades de layout que outros campos no nível de linha e pode ser adicionado ao layout no Grade de linha seção do layout.

  Para habilitar este campo, envie uma solicitação ao suporte ao cliente.

• . txn.line.numbercampo do sistema

  txn.line.number exibe a numeração sequencial de linhas para todas as linhas (ou seja, 1, 2, 3 e assim por diante).

  Assim como acontece com txn.line.orderNumber, a numeração não é redefinida quando um filtro ou uma pesquisa é aplicada e há um máximo de 2 000 linhas. O campo tem as mesmas propriedades de layout que outros campos no nível de linha e pode ser adicionado ao layout no Grade de linha seção do layout. Para habilitar este campo, envie uma solicitação ao suporte ao cliente.

Pesquisa da lista de produtos

O objeto Pesquisa da lista de produtos fornece um conjunto de propriedades de layout para os resultados da pesquisa da lista de produtos no fluxo de adição de linhas/pesquisa de produto. Por padrão, a pesquisa da lista de produtos é adicionada por meio de Adicione linhas Botão de efeito de IU. Os campos podem ser adicionados, removidos e reordenados no objeto de Pesquisa de produto para definir a IU de tempo de execução. As propriedades relacionadas podem ser encontradas em três locais:

• As propriedades do botão com o efeito de IU de Pesquisa de produto
• Propriedades de pesquisa da lista de produtos acessadas por meio do objeto Pesquisa de produtos no layout
• Cada um dos campos no objeto de Pesquisa da lista de produtos no layout

As propriedades do botão Efeito de IU incluem:

Destino do efeito de IU

As opções para a exibição de Pesquisa de produto

Mostrar produtos

Adiciona a guia Produtos à pesquisa de produtos

Mostrar Favoritos

Adiciona a guia Favoritos do usuário à pesquisa de produto

Local da ação

O local dos botões de ação na exibição de pesquisa de produto

As propriedades do objeto de Pesquisa da lista de produtos incluem:

• Classificação padrão primária: Defina até dois parâmetros usados para classificar os resultados da pesquisa. Os seguintes campos podem ser usados como parâmetros:
  • modificado
  • criado(a)
  • Nome (padrão se nenhum parâmetro estiver definido)
  • ID de parceiro
  • Productcode
  • descrição
  • Preço unitário
  • Configurável externamente
  A ordem pode ser definida por parâmetro como asc ou descr .
• Pesquisa ao enviar: Determina se os resultados da pesquisa são atualizados conforme o usuário digita ou somente quando o usuário clica Enviar .

As propriedades no nível do campo incluem:

Largura da coluna

Valor compatível com CSS para definir a largura

Alinhamento

Alinhamento de cabeçalho e valores

Habilite a classificação

Quando habilitado, permite que a coluna seja classificada

Habilitar popover de texto longo

Quando habilitado, um popover é exibido quando o valor no campo é selecionado

Efeitos de IU

Os efeitos de IU são elementos de layout que adicionam funcionalidades específicas a um botão. Os efeitos de IU incluem:

URL

Abre o URL associado em linha, em uma janela modal, em um painel deslizante ou em uma nova guia ou janela.

Âncora

Navega até o local especificado na transação

Pesquisa de produto

Abre o catálogo de produtos, iniciando o fluxo Adicionar produtos

Detalhe da linha

Abre o layout de detalhe de linha

Reconfigurar

Abre os produtos selecionados para configuração de UX

Adicionar favorito

Abre uma janela modal para descrever e criar um favorito a partir da seleção

Gerencie favoritos

Abre o Gerenciador de favoritos

Atualizar sessão

Verifica se a sessão foi modificada e, em caso afirmativo, atualiza o SessionID e mescla as mudanças.

Linhas de exportação

Exporta para um arquivo CSV todas as linhas em uma transação que atendem às configurações de classificação, filtro e mostrar/ocultar coluna.

Snippets de código YAML

Propriedades de layout:

# Layout version
version: 1
# Layout identifiers
label: Example layout
variableName: default_ExampleLayout
# Tier definitions
tierDef:
  - depth: 1
    representation: BasicContainer
# Layout
layout:
  label: layoutsection
  variableName: layoutsection
  tiers:
    - label: tier1
      variableName: tier1
      depth: 1

Camadas:

# Layout
layout:
  label: layoutsection
  variableName: layoutsection
  tiers:
    - label: tier1
      variableName: tier1
      depth: 1

Conjuntos de colunas:

columnSets:
        - elements:
            - type: field
              columnOrder: 1
              variableName: txn.opportunity.id
          variableName: col1

Conjunto de colunas com campos:

columnSets:
        - elements:
            - type: field
              columnOrder: 1
              variableName: txn.opportunity.id
            - type: field
              columnOrder: 1
              variableName: txn.custom.opportunityName
            - type: field
              classInfo: mw20
              columnOrder: 1
              variableName: txn.custom.primaryContact
          variableName: col1

Conjunto de colunas com eventos:

To be added

Propriedades do campo:

fields:
  - type: Text
    label: Custom line field
    variableName: txn.line.custom.customText
  - type: ReadOnlyText
    label: TXN Number
    variableName: txn.custom.tXNNumber

Pesquisa da lista de produtos:

productList:
  columns:
    - label: Product ID
      sortable: true
      variableName: id
    - label: Product Name
      variableName: name
    - label: Product description
      variableName: description
      supportLongText: true
    - label: Price
      variableName: unitPrice
  defaultSort:
    - externallyConfigurable,desc
    - name

Conceitos relacionados

• Gerenciador de transações: Layouts - Efeitos de IU
• Gerenciador de transações: Layouts - opções de temas