Flexible Column Layout

O flexible column layout é adequado quando os usuários percorrem uma hierarquia e precisam manter o nível acima à vista: uma lista de requisições de compra, uma requisição e, depois, um de seus itens. Os usuários escolhem na lista à esquerda e leem o detalhe ao lado.

Critérios de decisão:

• Os usuários alternam com frequência entre itens da mesma lista, em telas largas: o flexible column layout economiza navegação.
• Os usuários passam muito tempo em um único objeto complexo com tabelas largas: páginas em tela cheia dão espaço ao objeto.
• A maioria dos usuários trabalha no celular: ali cabe apenas uma coluna, então o benefício é pequeno.

Exemplo: um comprador da Alder Manufacturing mantém a lista de requisições abertas na primeira coluna, confere a requisição da Cedar Office Supply na segunda e abre um item na terceira, tudo sem perder a lista. O flexible column layout é a escolha certa quando o contexto entre os níveis importa mais do que a largura de qualquer página isolada.

O layout tem três colunas, chamadas Begin, Mid e End, que contêm a lista, o detalhe e o subdetalhe. Um valor de layout decide quais colunas ficam visíveis e qual a largura de cada uma. O fluxo recomendado pela SAP, que a classe auxiliar semântica (semantic helper) codifica, funciona assim:

1. O app começa com uma coluna, geralmente a lista.
2. Escolher um item abre seu detalhe na coluna Mid, com os botões Full Screen e Close.
3. Escolher um item no detalhe abre o terceiro nível na coluna End.
4. Um quarto nível, ou mais profundo, substitui a coluna End em tela cheia.

Os usuários podem arrastar os separadores de coluna para redimensionar colunas ou alternar layouts, e o controle memoriza as larguras escolhidas. O controle também se adapta sozinho ao dispositivo: três colunas no desktop, no máximo duas no tablet, onde a primeira coluna é acessada arrastando, e uma no celular. O flexible column layout é, portanto, um contêiner responsivo para níveis de navegação, e não um floorplan com conteúdo próprio.

O SAP Fiori tools oferece uma chave de ativação no page map; as configurações subjacentes diferem conforme a versão do OData:

O list report fica na primeira coluna e as object pages preenchem as seguintes. No OData V2, uma página pode sobrescrever o padrão com seu próprio layout, por exemplo movendo a object page principal para a primeira coluna e seus itens para o lado. A configuração pertence ao app, por isso se comporta da mesma forma no SAP S/4HANA e no SAP BTP. O SAP Fiori elements salva as larguras das colunas por app e por tipo de dispositivo. Há dois limites: a analytical list page suporta apenas o layout de duas colunas com a primeira coluna expandida, e a overview page não usa o flexible column layout. Ativar o flexible column layout muda a navegação, não as anotações.

1. Tabelas largas em colunas estreitas. Uma tabela projetada para largura total fica ilegível na coluna Mid; reduza as colunas ou use layouts de pop-in.
2. Prometer três colunas em todos os dispositivos. Tablets mostram duas e celulares uma, então os designs precisam funcionar em qualquer largura.
3. Posição inesperada das ações. Em apps sem draft com criação, atualização e exclusão, apenas a última coluna mostra Edit e Delete.
4. Objetos sem relação lado a lado. O layout expressa uma hierarquia pai-filho; dois apps sem relação não pertencem a ele.

Quando um app SAP Fiori elements ignora a configuração e continua abrindo em tela cheia, verifique nesta ordem: a root view e a classe de router (OData V4), a dependência da biblioteca sap.f, a controlAggregation de cada target e qualquer layout padrão no nível da página. A maioria dos problemas de flexible column layout são problemas de configuração de roteamento, e não bugs de renderização.