Layout: Um mergulho mais profundo

Aprenda conceitos avançados de layout em CPQ, incluindo camadas, conjuntos de colunas e layouts de lista de produtos. Entenda como estruturar páginas, guias e seções em arquivos CSV para criar interfaces de configuração dinâmicas e responsivas com experiências do usuário organizadas e intuitivas.

Tiers e TierDef

As camadas definem as seções da página.

Cada camada e subcamada precisa de um TierDef que defina o tipo de exibição do componente (coluna F). Cada camada tem as seguintes opções: Guia, ExpandableSection, Páginas, Acordeão, AcordeonWithNavegação, e VerticalTab. Cada um dos exemplos abaixo mostra a mesma configuração com diferentes estruturas de camada.

• Guias:

  

• ExpandableSection (isso torna o layout mais vertical)
• Páginas:

  

Você também pode ter subcamadas dentro de camadas.

Nível da guia com um subnível ExpandableSection:

Uma captura de tela do arquivo CSV usado para criar este layout de dois níveis é mostrada abaixo. As células realçadas mostram como os diferentes níveis são sinalizados. Como as linhas 9 e 10 têm o mesmo caminho que a linha superior tierDef na linha 8, as células são exibidas em um layout de guia.

Não defina rótulo ou nome variável no nível TierDef (linha 8 na imagem). Eles são aplicados no nível de camada (linhas 9 e 10).

Coluna de rótulo

Para campos e camadas, o texto inserido na coluna de rótulo é o texto que aparece na tela no layout. O rótulo das linhas amarelas aparece como o rótulo de cada guia. A coluna de rótulo também é usada para campos.

variablename

As variáveis são usadas para definir o caminho e chamar campos específicos criados em CPQ. Na linha 9 da imagem a seguir, o variablename backgroundÉ definido na coluna E. Nas linhas 25 a 29, backgroundÉ adicionado ao caminho (coluna B). Isso permite CPQ saiba que eles vão em backgroundnível.

As variáveis pertencentes ao layout devem ser diferentes das variáveis definidas em CPQ para campos ou regras. Isso ocorre porque as variáveis definidas em CPQ Também são usados no CSV de layout. Os nomes de variáveis atribuídos a um campo em CPQ As IU são usadas para adicionar o campo ao layout. As imagens a seguir mostram o arquivo CSV que faz referência a uma variável de campo (variablename desiredIrons) que foi criado em CPQ resultando na exibição do campo no layout.

Tipos de conjunto de colunas

Os conjuntos de colunas ajudam a definir o posicionamento vertical de objetos em uma camada. O layout é responsivo à largura do navegador (que pode mudar), portanto CPQ Usa conjuntos de colunas para ajudar o administrador a identificar um ponto de interrupção de linha intencional.

Se o usuário estiver usando uma janela menor em que todo o conjunto de colunas não couber em uma linha, as colunas continuarão na próxima linha. O fim do conjunto de colunas sempre aciona uma nova linha.

Nas imagens a seguir, o. usero campo faz parte de 1 conjunto de colunas, enquanto os campos leftHandede. bagfazem parte de um segundo conjunto de colunas. Se a janela do navegador se tornar muito pequena para todas as três imagens (opções da lista de seleção para user), o conjunto de colunas continua na próxima linha. Mesmo que haja espaço para o. leftHandedao lado da terceira imagem, está em uma nova linha.

Ordem da coluna

. columnorderA coluna no arquivo CSV muda a ordem das colunas no mesmo conjunto de colunas. Os campos não precisam ser adicionados ao CSV em ordem, como visto na imagem a seguir.

Layouts da lista de produtos

A lista de produtos é como o recurso do carrinho de compras das configurações é personalizado. Para adicionar itens à lista de produtos, uma nova regra de produto é criada. Quando o usuário seleciona Simples , os seguintes campos estão disponíveis:

Se o usuário quiser que o campo seja exibido no layout, ele adicionará uma coluna ao CSV de layout do campo. (O usuário usaria os valores em ProductList.<param>coluna da tabela vinculada como o nome da variável. Consulte a observação 1 para obter a imagem a seguir.)

A seguir está uma captura de tela da seção da lista de produtos do CSV de layout.

Algumas coisas a serem observadas:

1. As variáveis nesta coluna correspondem aos valores na productList. <param>Coluna (hauss- extList e Lista estão ausentes). Isso informa CPQ para adicionar as entradas do usuário à tabela.
2. Para ajustar o alinhamento do texto nas colunas individuais, adicione a classe slds-text- align_left, slds-text-align_right, ou slds-text-align_center. Para adicionar vários nomes de classe, separe-os com um espaço.
3. price, liste. extListsempre alinhe à direita para que os números fiquem bem alinhados.
4. Para economizar espaço na tela, selecione modalpara location.

Componentes de camada

Use esses nomes de propriedade do componente de camada na coluna de componente de um layout CSV.

Tabela 1. Componentes de camada

Componente	Nome da propriedade	Descrição
Contêiner básico	BasicContainer	Contêiner de camada sem decoração ou navegação
Seções expansíveis	ExpandableSection	Exiba camadas em seções expansíveis com barra cinza como cabeçalho da seção Configuração de valor para estado inicial: DefaultState: Atraso | Recolhido Para carregar lentamente o nível, use "Atraso", que abrirá a seção depois que outras seções começarem a renderizar
Acordeão	Accordion	Semelhante às seções expansíveis, mas apenas uma é expandida
Acordeão com navegação	AccordionWithNavigation	Semelhante às seções expansíveis, mas apenas uma é expandida, e os botões Avançar/Anterior estão incluídos
Guias	Tab	Exiba camadas em um grupo de guias horizontais
Guias verticais	VerticalTab	Exibir camadas em um grupo de guias verticais (as guias estão à esquerda)
Páginas	Pages	Exibir camadas como páginas com uma barra de navegação de andamento na parte superior (os nomes das camadas são exibidos ao passar o mouse)
Páginas com rótulos	PagesWithLabels	Exibir camadas como páginas com uma barra de navegação de andamento na parte superior, incluindo rótulos que truncam conforme necessário (sem exibição de passar o mouse)