Carregamento de layout CSV
Saiba como criar e carregar um arquivo CSV que contém uma especificação de layout.
Os layouts são definidos em um blueprint. Quando mais de um layout é definido para um blueprint, os usuários finais passam por eles usando o botão de layout alternativo no canto superior direito da IU de compra.
Os layouts são definidos por meio de um arquivo CSV que contém todas as instruções para o layout. Para facilitar a administração, recomendamos que os administradores criem o layout em uma planilha (Planilhas Google, Microsoft Excel ou similar) e exportem para o formato CSV.
Criando e editando um layout
Acesse um layout na página de administração do blueprint correspondente.
- Em CPQ Painel de navegação do administrador, clique em Planos gráficos (2).
- Clique na guia Layouts (3).
- Clique no nome do blueprint que você deseja acessar.
Para iniciar um novo layout, clique em Criar layout . Para editar um layout existente, clique no nome de um layout na lista.
Você também pode editar um layout no Assistente de layout. Depois que você reimplantar seu blueprint, as novas mudanças de IU aparecem no buyside.
Quando você inicia um novo layout, a janela Novo layout é aberta. Você pode importar um arquivo CSV soltando-o na caixa ou clicando para selecioná-lo no seu computador. (i) Você também pode baixar um arquivo de layout de amostra para sua referência. (ii)
Quando você edita um layout existente:
Clique em Exportação para baixar o arquivo de layout atual. (a)
Clique em para importar um arquivo CSV de layout Substituir (b).
Clique em Salvar (c) para substituir o layout atual pelo layout editado. Se o carregamento do arquivo CSV falhar, todos os erros encontrados no arquivo serão mostrados ao administrador em uma caixa de diálogo de erro.
Usando carregamento de arquivo CSV de layout
Para obter uma introdução completa ao formato CSV de layout, assista ao seguinte vídeo de 26 minutos:
Para obter um exemplo de como um CSV de layout é usado, veja o seguinte vídeo de 4 minutos:
Baixe o arquivo CSV de layout HiTech correspondente:
Formato CSV de layout
Os títulos das colunas são minúsculos.
A coluna de tipo define os componentes de layout. A tabela a seguir mostra valores válidos para esta coluna.
| Valor de tipo | Descrição |
|---|---|
| Def. De nível | Propriedades: Páginas, PagesWithLabels, PagesWithNavigation, ExpandableSection, Tab, TabWithNavigation, VerticalTab, VerticalTabWithNavigation, Acordeon, AcordeonWithNavigation |
| camada | |
| conjunto de colunas | |
| imagem | |
| lista de produtos | |
| coluna de lista de produtos | |
| Assunto: |
O formato de valor da coluna do caminho fornece uma sugestão visual para o posicionamento do rótulo de origem de substituição de elemento e não é usado pela aplicação no momento. Deixe em branco.
rótulo Define o rótulo a ser exibido para o usuário final na IU para camadas e campos.
variablename define um identificador exclusivo para um nível ou campo.- Para camadas, o administrador deve definir valores distintos.
- Para campos, preencha o nome da variável de campo.
A coluna de tipo de exibição do componente define como um campo deve ser exibido. Os seguintes tipos estão disponíveis.
| Tipo de campo | Tipos de exibição de componente |
|---|---|
| Texto |
ReadonlyText Texto Área de texto Data |
| Booliano |
Booliano Rádio Botões de rádio |
| Número |
Número Controle deslizante NumberWithSubmit ReadonlyText ReadOnlyCurrency FormatedNumber |
| Lista de seleção (seleção única) |
Lista de seleção estendida Lista de seleção estendida DisplayOnly Lista de seleção Lista de seleção Somente leitura Rádio Botões de rádio SeleçãoSelecionarGrade de lista de seleção Rádio vertical VisualPicker |
| Lista de seleção (seleção múltipla) |
Lista de seleção MultiSelectEstendida Lista de seleção Estendida MultiSelecioneDisplayOnly Seleção múltipla Lista de seleção múltipla SelecionadoVisualPicker Caixa de seleção VerticalCheckbox |
columnorderna é relevante para componentes em um conjunto de colunas. Usado para fornecer a ordem de classificação dos Campos com base na resolução da tela na IU responsiva.
nome da classe é usado para referenciar classes predefinidas disponíveis em CPQ. Por exemplo, ao colocar uma imagem, uma classe pode definir o fluxo de campos ao redor dessa imagem. Adicione esses nomes de classe ao arquivo CSV de layout na coluna classname. Como os controles max-height e grade interagem com a largura do navegador, recomendamos que você experimente cada classe distintamente, explorando como a classe responde a uma variedade de tamanhos de navegador.
| Efeito | Aplica-se a | Classes compatíveis | Anotações e exemplos |
|---|---|---|---|
| Grade | Campos, imagens | topleft1col1row, topleft1col2row ... topleft1col6row |
grid-column: 1/2 grid-coluna: 1/2; grid-linha: 1/3 grid-coluna: 1/2; grid-linha: 1/4 grid-coluna: 1/2; grid-linha: 1/5 grid-coluna: 1/2; grid-linha: 1/6 grid-coluna: 1/2; grid-linha: 1/6 |
| topleft2col1row, topleft2col2row ... topleft2col6row |
grid-column: 1/3 grid-coluna: 1/3; grid-linha: 1/3 grid-coluna: 1/3; grid-linha: 1/4 grid-coluna: 1/3; grid-linha: 1/5 grid-coluna: 1/3; grid-linha: 1/6 grid-coluna: 1/3; grid-linha: 1/6 |
||
| topleft3col1row, topleft3col2row ... topleft3col6row |
grid-coluna: 1/4 grid-coluna: 1/4; grid-linha: 1/3 grid-coluna: 1/4; grid-linha: 1/4 grid-coluna: 1/4; grid-linha: 1/5 grid-coluna: 1/4; grid-linha: 1/6 grid-coluna: 1/4; grid-linha: 1/6 |
||
| topright1col1row, topright1col2row ... topright1col6row |
grid-column: -2/-1 grid-coluna: -2/-1; grid-linha: 1/3 grid-coluna: -2/-1; grid-linha: 1/4 grid-coluna: -2/-1; grid-linha: 1/5 grid-coluna: -2/-1; grid-linha: 1/6 grid-coluna: -2/-1; grid-linha: 1/6 |
||
| Altura | Campos | mh5, mh10, mh15 ... mh40 | Altura máxima de 5 rem a 40 rem, em incrementos de 5 |
| Largura | Campos | w5, w10, w15 ... w40 | Largura máxima de 5 rem a 40 rem, em incrementos de 5 |
| Largura da coluna da grade | Campos | lc-15m-15max, lc-15m-20max, lc-15m-25max, lc-15m-30max | Essas classes definem a largura das colunas na grade de layout.
|
| Exibir verticalmente, alinhar ao centro | Campos da lista de seleção | vertical-layout, align-center | Padrão: Horizontal (quando o layout é vertical, o padrão é à esquerda) |
| Ocultar rótulo de campo, ocultar rótulo de opção de campo | Exibir componentes: Lista de seleção estendida, lista de seleção multissectEstendida | hide-field-label, hide-field-option-label |
A coluna Valor contém uma cadeia de caracteres JSON para representar as propriedades do elemento (Campo ou productlistcolumn) referenciado nessa linha.
espaço reservado Permite que o administrador defina o texto de espaço reservado que será exibido em um campo de texto até que o usuário final insira um valor.
Componentes com imagens
Para componentes de exibição da lista de seleção que incluem imagens, quando as opções estão desabilitadas, a imagem fica esmaecida. Os administradores podem substituir esse comportamento e forçar a imagem a parecer normal aplicando o. substituição - desabilitada para o campo classname no layout.