Conteneur

Description

Le Conteneur (wrapper) est l'élément de structure principal de BWEB. C'est un bloc qui peut contenir d'autres blocs enfants, servant de base pour organiser la mise en page.

Il supporte le mode répétition (vb_Repeat) pour créer des boucles forEach sur des entity selections ORDA. C'est le seul type de bloc structurel qui peut être imbriqué librement.

Propriété	Champ technique	Type	Description
Nom du bloc *	blocName	text	Nom unique du bloc (obligatoire)
ID	id	text	Attribut HTML id
Ancre	data-anchor	text	Ancre de navigation intra-page
Répéter	vb_Repeat	checkbox	Active la boucle forEach sur entity selection

Événement supporté : on-click — Déclenché au clic sur le conteneur. Configure une classe (WebFormController, renderFunction ou table ORDA) et une fonction à exécuter.

Paramètres

ID

Champ technique : id (type text)

Définit l'attribut HTML id sur le conteneur. Permet de cibler le bloc en CSS ou JavaScript. Doit être unique dans la page. Utile pour les ancres, les animations ou l'accès direct via document.getElementById().

Nom d'ancre

Champ technique : data-anchor (type text)

Définit un nom d'ancre pour la navigation intra-page. Lorsqu'un menu de type ancres (vb_AnchorMenu) est configuré, il génère automatiquement des liens vers les blocs ayant un data-anchor. Le scroll smooth est géré automatiquement.

Parent de l'ancre

Champ technique : blocName (type text, obligatoire)

Nom unique du bloc dans la page. Ce nom est utilisé pour identifier le bloc dans l'arborescence de la structure, dans les événements (ciblage de blocs), et dans les fonctions renderFunction (hideBloc, showBloc, toggleDisplay, etc.).

Ordre de l'élément

Champ technique : order (type number, dans l'onglet Mise en page)

Propriété CSS order. Permet de réordonner visuellement les enfants dans un conteneur Flex ou Grid sans modifier leur position dans le DOM. Un nombre plus élevé place l'élément plus loin.

Répéter

Champ technique : vb_Repeat (type checkbox)

Active le mode boucle forEach. Le conteneur et tout son contenu seront dupliqués pour chaque entité de l'entity selection ORDA liée au module. Chaque itération a accès aux données de l'entité courante. Indispensable pour afficher des listes de cartes, des grilles de produits, etc.

Fonction à exécuter

Section Événements on-click

Le conteneur supporte un événement on-click configurable avec :

vt_confirmMessage — Message de confirmation avant exécution
vt_Condition — Expression conditionnelle (le clic n'est traité que si la condition est vraie)
vt_ClassName — Classe à appeler : WebFormController, renderFunction, ou un nom de table ORDA
vt_FunctionName — Fonction à exécuter dans la classe sélectionnée

Nom de la variable

Section Affichage conditionnel

Permet de contrôler la visibilité du conteneur selon des conditions :

linked — Champs dont dépend l'affichage
effect — Effet appliqué : none, disabled, hidden
userRightNeeded — Restriction par rôle utilisateur
conditionalDisplay — Expression conditionnelle
effectForConditionalDisplay — Effet conditionnel : none, disabled, hidden, notLoaded

Mise en page

Disposition

Champ technique : layout (type select)

Définit le mode de disposition CSS du conteneur :

Block — Éléments empilés verticalement (display: block)
Flex — Disposition flexible (display: flex), active les options de direction, justification et alignement ci-dessous
Grid — Grille CSS (display: grid), active les colonnes et lignes template
None — Masque le conteneur (display: none)

Espacement

Champ technique : gap + gapUnit (number + select)

Définit l'espacement entre les éléments enfants (gap CSS). Fonctionne en mode Flex et Grid. Unités disponibles : px, %, em, rem, vw.

Justification du contenu

Champ technique : flexJustifyContent (type radio)

Contrôle la distribution des enfants sur l'axe principal (justify-content) :

start — Début
end — Fin
center — Centré
between — Espacé entre (space-between)
around — Espacé autour (space-around)
evenly — Espacé uniformément (space-evenly)

Alignement des objets

Champ technique : flexAlignItem (type radio)

Contrôle l'alignement des enfants sur l'axe transversal (align-items) :

start — Haut
end — Bas
center — Centré
baseline — Aligné sur la ligne de base du texte
stretch — Étiré pour remplir le conteneur

Direction

Champ technique : flexDirection (type select)

Définit la direction de l'axe principal du flex :

Colonne — Empilé verticalement (column)
Colonne inversée — Vertical inversé (column-reverse)
Ligne — Aligné horizontalement (row)
Ligne inversée — Horizontal inversé (row-reverse)

Enrouler les éléments

Champ technique : flexWrap (type checkbox)

Active le retour à la ligne automatique (flex-wrap: wrap). Sans cette option, les enfants restent sur une seule ligne et peuvent déborder. Avec, les enfants passent à la ligne suivante lorsqu'il n'y a plus de place.

Template Colonne

Champ technique : gridColumns (type number)

Nombre de colonnes de la grille CSS. Génère grid-template-columns: repeat(N, 1fr). Actif uniquement quand la disposition est réglée sur Grid.

Template Ligne

Champ technique : gridRows (type number)

Nombre de lignes de la grille CSS. Génère grid-template-rows: repeat(N, 1fr). Actif uniquement quand la disposition est réglée sur Grid. Combiné avec les colonnes, permet de créer des grilles complexes.