Tuto : Composant de pagination pour galeries (Niveau 🌕🌕🌗🌑🌑)

Étiquetté : canvas, Composants, galerie, tuto

Ressources

Tuto : Composant de pagination pour galeries (Niveau 🌕🌕🌗🌑🌑)

Posté par DavidZed sur 18 novembre 2022 à 22h01
Bonjour,

Voici un petit tuto, étape par étape pour faire votre propre composant de pagination pour vos galeries

1) Design
- En premier lieu, aller dans l’onglet « composants »(1) et cliquez sur « Nouveau composant »(2)
- Renommez le « Pagination »(3) et mettez lui 800 en largeur et 42 en hauteur(4)
- Insérez un container horizontal (5)
- En position, mettez 0 en x et y (6), en largeur mettez la formule : Parent.Width (7)
- Ajoutez ensuite les contrôles suivants, puis renommez les et positionnez-les comme suit dans le container (et dans le même ordre) :
1 : Etiquette de Texte (LabelLignesParPage) => .Text : "lignes par Pages"
2 : Zone de liste déroulante (DropDItemsperPage)
3 : Icone (IconPrecedent) => .Icon : Icon.ChevronLeft
4 : Curseur (SliderPages)
5 : Icône (IconSuivant) => .Icon : Icon.ChevronRight
6 : Etiquette de Texte (LabelPageXSur) => .Text : "Page 1 sur 20" (sera remplacé)
- Vous devriez obtenir ceci :
2) Valeurs d’entrée et de sortie :

Nous allons avoir besoin de plusieurs valeurs d’entrée et de sortie pour que notre composant interagisse avec la galerie dans l’appli, pour ajouter une propriété personnalisée, sélectionnez le composant, et cliquez sur « Nouvelle propriété personnalisée ».
- Pour chaque propriété, indiquez le nom (10), s’il s’agit d’une propriété d’entrée ou de sortie (11), Le type de donnée (12), si le changement de valeur doit déclencher un reset (13)
- Une fois une propriété crée, cliquez sur son nom pour lui donner une valeur par défaut ou une formule(14)
- Voici les propriétés à créer :
  - ItemsCount ; Entrée ; Nombre ; Reset :Oui ; Valeur : 100
  - ChoixItemsParPage ; Entrée ; Tableau ; Reset : Oui ; Valeur : [5;10;20;30;40;50]
  - (Optionnel) Theme ; Entrée ; Enregistrement ; Reset : Oui ; Valeur :
    
    {Font:Font.'Lato Light';Size:11;TextColor:RGBA(51;51;51;1);Fill:RGBA(0;0;0;0);Color1:RGBA(200;40;40;1);Color2:RGBA(87;87;87;1);Color3:RGBA(220;220;220;1)}
  - PagesMax ; Sortie ; Nombre ; Formule :
    
    IfError(RoundUp(Self.ItemsCount/DropDItemsperPage.Selected.Value;0) ;0) // Calcul du nombre total de pages sauf si erreur
  - PageActuelle ; Sortie ; Nombre ; Formule : //Rien pour l’instant
  - ItemsParPage ; Sortie ; Nombre ; Formule :
    
    DropDItemsperPage.Selected.Value
  - FirstN : Sortie ; Nombre ; Formule : //Rien pour l’instant
  - LastN : Sortie ; Nombre ; Formule : //Rien pour l’instant
2 Bis ) Pour quelques clics de plus (Optionnel)

Vous pouvez utiliser les valeurs définies dans Pagination.Theme.* dans les propriétés de texte et de couleurs les objets du composant. Cela vous permettra de l’accorder aux couleurs de vos applis si vous le réutilisez.

3) Calculs et variables :

Intéressons-nous maintenant aux icones < et >, qui vont nous permettre de naviguer entre les pages. Nous allons faire en sorte que ces dernier incrémentent ou décrémentent une variable qui nous servira à déterminer le N° de page en cours, que nous nommerons : vPageNumber
- A :Sur le bouton ‘IconPrecedent’
.OnSelect :
```
Set(vPageNumber; If(vPageNumber>1;vPageNumber - 1;1)) // diminue la page actuelle de 1 sauf si page actuelle = 1
```
.DisplayMode :
```
If(vPageNumber = 1; Disabled; Edit) // Si page actuelle =1, désactivé
```
- B :Sur le bouton ‘IconSuivant’
.OnSelect :
```
Set(vPageNumber; If(vPageNumber<Pagination.PagesMax;vPageNumber+1;Pagination.PagesMax )) // augmente la page actuelle de 1 sauf si arrivé à page max
```
.DisplayMode
```
 If(vPageNumber = Pagination.PagesMax; Disabled; Edit) // Si page actuelle =dernière, désactivé
```
- C : Ensuite le curseur ‘SliderPages’, qui va nous servir à la fois d’indicateur de la page en cours mais également à modifier la page en cours :
.Max :

Pagination.PagesMax

.Min : 1

.Default :

Pagination.PageActuelle

.OnChange :
```
If(Pagination.PagesMax=0;false; Set(vPageNumber; Self.Value)) // Changement de la page actuelle à cette valeur, sauf si total de pages = 0
```
- D : DropDItemsperPage
.items : Pagination.ChoixItemsParPage

.Default : First(Pagination.ChoixItemsParPage).Value
- E : LabelPageXSur
```
.Text : "Page "&vPageNumber & " sur " & Pagination.PagesMax
```
Et enfin, nous appliquons les formules qui vont nous permettre de calculer nos pages aux propriétés de sortie :

PageActuelle : vPageNumber

ItemsParPage : DropDItemsperPage.Selected.Value
```
FirstN :  If(Pagination.PageActuelle=Pagination.PagesMax;Pagination.ItemsCount;Pagination.PageActuelle*Pagination.ItemsParPage)
```
```
LastN :nnIf(Pagination.PageActuelle=Pagination.PagesMax;Pagination.ItemsCount-(Pagination.ItemsParPage*(Pagination.PageActuelle-1));Pagination.ItemsParPage)
```
Ces deux dernières formules vont nous servir de coordonnées pour cibler les lignes à afficher pour la page actuelle

4) Comment utiliser le composant dans l’application :

Dans le menu insérer, ajoutez le composant dans l’application, au-dessus ou en dessous d’une galerie :

Dans la propriété ItemsCount du composant, nous allons compter le nombre de lignes de notre source. Ici, la source que j’utilise dans ma gallerie est une liste Sharepoint qui se nomme ‘Sample List’. On inscrit donc dans le ItemsCount (15) : CountRows('Sample List')

Dans la galerie, nous allons ensuite utiliser nos valeurs calculées par le composant pour cibler les lignes à afficher en fonction de la page actuelle avec les fonction FirstN() et LastN() :
```
LastN(FirstN('Sample List';Pagination_1.FirstN);Pagination_1.LastN)
```
Et voilà, c’est terminé !

PostID=Ejbj4PENexiIIaS
Quentin a répondu Il y a 11 mois, 3 semaines 1 Membre · 2 Réponses
2 Réponses

Nicolas

Membre
21 novembre 2022 à 11h22

Un grand merci DavidZed , ça va être appliquées direct cet après midi

CommentID=aAN1Mv76i68k8xL, PostID=Ejbj4PENexiIIaS
Quentin

Membre
22 novembre 2022 à 15h17

Merci DavidZed !!!

CommentID=jTzZArV5T2crjIu, PostID=Ejbj4PENexiIIaS