Layouts
Os layouts definem como a experiência de configuração se parece e se sente para seus usuários. Eles controlam onde os campos aparecem, como as etapas são agrupadas e como a lista de produtos (carrinho de compras) é apresentada, transformando a lógica e os dados de um blueprint em uma IU intuitiva e guiada CPQ.
Um layout é a camada de apresentação de uma experiência de configuração. Quando um blueprint reúne campos, regras, layouts e produtos configuráveis, o layout se concentra em como esses elementos são exibidos:
- Quais campos aparecem em cada página ou guia
- Como as seções são agrupadas e rotuladas
- Como conjuntos, seletores de produto e mensagens são organizados
- Como a lista de produtos é renderizada junto com a configuração
Os layouts são definidos por blueprint. Um único blueprint pode ter um ou mais layouts, oferecendo flexibilidade para oferecer suporte a diferentes personas, canais ou experiências de demonstração sem duplicar a lógica de configuração.
Quando um blueprint tem vários layouts, os usuários finais podem alternar entre eles usando o controle de layout alternativo no canto superior direito da IU do configurador.
Como os layouts se encaixam no modelo de configuração
Os layouts são colocados na camada de apresentação da pilha de configuração do CPQ:
- Os campos coletam e exibem dados.
- Comportamento de controle de regras (visibilidade, mensagens, cálculos, inclusão de produto e muito mais).
- Os blueprints vinculam campos, regras, layouts e produtos configuráveis em uma única experiência de configuração.
- Os layouts definem a interface de compra (páginas, guias, seções e lista de produtos) sem alterar a lógica subjacente.
Como os layouts fazem referência a nomes de variáveis de campo e parâmetros da lista de produtos, você pode iterar com segurança no layout (por exemplo, reorganizar camadas ou alterar tipos de exibição) sem modificar regras ou estruturas de dados.
Blocos de construção de layout
Os layouts são compostos por elementos estruturais e visuais reutilizáveis que você define em um arquivo CSV de layout e refina no Assistente de layout ou no editor de layout.
- Páginas (PagesWithLabels): Divida a configuração em etapas discretas com navegação de andamento.
- Guias (VerticalTab): Agrupe o conteúdo relacionado horizontal ou verticalmente para alternar rapidamente.
- Acordeão (AcordeonWithNavigation): Mostre uma seção expandida de cada vez para conteúdo longo ou complexo.
- ExpandableSection: Permitir que os usuários expandam ou recolham conteúdo conforme necessário.
- Contêiner básico: Forneça um contêiner sem estilo para agrupamento simples.
Você pode aninhar camadas para criar layouts multinível, por exemplo, páginas que contêm guias ou guias que contêm seções expansíveis.
Definição de layout e ferramentas
Os layouts são criados e mantidos usando uma combinação de arquivos CSV e ferramentas no produto:
- Carregamento de layout CSV
- Formato de definição primária para layouts
- Criado em uma ferramenta de planilha e exportado para um arquivo CSV
- Oferece suporte ao controle total sobre camadas, conjuntos de colunas, campos, lista de produtos e propriedades de componentes
- Assistente de layout
- Ajuda a gerar rapidamente um layout inicial a partir dos campos de um blueprint
- Fornece uma visualização visual de camadas e agrupamentos principais
- Atua como um ponto de partida; o ajuste fino é feito por meio do arquivo CSV ou do editor de layout
- Editor de layout
- Permite editar um layout existente diretamente na IU do administrador
- Oferece suporte à organização de camadas e conjuntos de colunas, edição de rótulos, ajuste de tipos de exibição e atualização de propriedades estendidas
- Fornece atalhos de teclado e dicas visuais para elementos ausentes ou parcialmente compatíveis
Independentemente da ferramenta que você usa, o layout é armazenado como uma definição estruturada que pode ser exportada, versionada e substituída à medida que sua experiência de configuração evolui.
Conteúdos repetíveis e conjuntos
Os layouts também controlam como os conjuntos são apresentados:
- Como tabelas (linhas e colunas com cabeçalhos)
- Como listas (linhas no estilo cartão com seleção opcional e comportamento de pesquisa)
- Em repetidores que concentram o usuário em um índice definido de cada vez
As propriedades de layout específicas do conjunto, como direção de expansão, controles de tamanho, indicadores de mensagem, controles de adição/remoção em linha e comportamento de carregamento/download, são configuradas no layout por meio de propriedades estendidas e JSON de valor bruto.
A seção da lista de produtos de um layout define como o carrinho de compras é exibido:
- Quais parâmetros da lista de produtos aparecem como colunas (por exemplo, nome, quantidade, preço, atributos estendidos)
- Como as colunas são rotuladas e alinhadas
- Se a lista de produtos está em linha ou em uma janela
As colunas da lista de produtos são orientadas pelo arquivo CSV de layout usando lista de produtos e. coluna de lista de produtos tipos e por referência ProductList. <param>valores definidos nas regras de produto e tabelas subjacentes.