Flexible Column Layout

Le flexible column layout convient lorsque les utilisateurs parcourent une hiérarchie et doivent garder le niveau supérieur en vue : une liste de demandes d'achat, une demande, puis l'un de ses postes. Les utilisateurs choisissent dans la liste à gauche et lisent le détail à côté.

Critères de décision :

• Les utilisateurs passent souvent d'un élément à l'autre de la même liste, sur des écrans larges : le flexible column layout économise de la navigation.
• Les utilisateurs passent beaucoup de temps sur un seul objet complexe avec des tableaux larges : les pages plein écran donnent de la place à l'objet.
• La plupart des utilisateurs travaillent sur téléphone : une seule colonne y tient, le bénéfice est donc faible.

Exemple : un acheteur d'Alder Manufacturing garde la liste des demandes d'achat ouvertes dans la première colonne, vérifie la demande de Cedar Office Supply dans la deuxième et ouvre un poste dans la troisième, le tout sans perdre la liste. Le flexible column layout est le bon choix lorsque le contexte entre les niveaux compte davantage que la largeur d'une page donnée.

La disposition comporte trois colonnes, appelées Begin, Mid et End, qui contiennent la liste, le détail et le sous-détail. Une valeur de layout détermine quelles colonnes sont visibles et la largeur de chacune. Le flux recommandé par SAP, que la classe semantic helper encode, se déroule ainsi :

1. L'application démarre avec une colonne, généralement la liste.
2. Choisir un élément ouvre son détail dans la colonne Mid, avec les boutons Full Screen et Close.
3. Choisir un élément dans le détail ouvre le troisième niveau dans la colonne End.
4. Un quatrième niveau ou un niveau plus profond remplace la colonne End en plein écran.

Les utilisateurs peuvent faire glisser les séparateurs de colonnes pour redimensionner les colonnes ou changer de disposition, et le contrôle mémorise leurs largeurs. Le contrôle s'adapte aussi de lui-même à l'appareil : trois colonnes sur un ordinateur, au plus deux sur une tablette, où la première colonne s'atteint par glissement, et une sur un téléphone. Le flexible column layout est donc un conteneur responsive pour les niveaux de navigation, et non un floorplan doté de son propre contenu.

SAP Fiori tools propose un commutateur dans la page map ; les paramètres sous-jacents diffèrent selon la version OData :

Le list report se place dans la première colonne et les object pages remplissent les suivantes. En OData V2, une page peut remplacer la valeur par défaut par sa propre disposition, par exemple en plaçant l'object page principale dans la première colonne et ses postes à côté. Le paramètre appartient à l'application : il se comporte donc de la même façon dans SAP S/4HANA et sur SAP BTP. SAP Fiori elements enregistre les largeurs de colonnes par application et par type d'appareil. Deux limites s'appliquent : l'analytical list page ne prend en charge que la disposition à deux colonnes avec la première colonne développée, et l'overview page n'utilise pas le flexible column layout. Activer le flexible column layout modifie la navigation, pas les annotations.

1. Tableaux larges dans des colonnes étroites. Un tableau conçu pour toute la largeur devient illisible dans la colonne Mid ; réduisez le nombre de colonnes ou utilisez des dispositions pop-in.
2. Promettre trois colonnes partout. Les tablettes en affichent deux et les téléphones une seule : les conceptions doivent donc fonctionner à toutes les largeurs.
3. Placement inattendu des actions. Dans les applications sans draft avec création, modification et suppression, seule la dernière colonne affiche Edit et Delete.
4. Objets sans rapport côte à côte. La disposition exprime une hiérarchie parent-enfant ; deux applications sans rapport n'y ont pas leur place.

Lorsqu'une application SAP Fiori elements ignore le paramètre et s'ouvre toujours en plein écran, vérifiez dans l'ordre : la root view et la classe de routeur (OData V4), la dépendance à la bibliothèque sap.f, la controlAggregation de chaque cible et toute disposition par défaut au niveau de la page. La plupart des problèmes de flexible column layout sont des problèmes de configuration du routage, et non des bugs de rendu.