Catégories
Consultant, Formateur

Personnaliser le formulaire d’une liste SharePoint

Dans cet exemple, vous découvrirez comment personnaliser les formulaires d’une liste SharePoint. Cette personnalisation est uniquement possible à partir de l’interface moderne. C’est l’interface par défaut. Regardez la copie d’écran ci-dessous qui présente un exemple d’une interface moderne.

Exemple d'interface moderne
Exemple d’interface moderne

Toutefois, il existe aussi une ancienne interface, dite classique ou standard. Celle-ci ne permet pas de faire l’exercice. Regardez la copie d’écran ci-dessous qui présente l’interface classique de la même liste.

Exemple d'interface classique
Exemple d’interface classique

Si d’aventures, vous travaillez avec l’ancienne interface comme ci-dessus, cliquez sur le lien Quitter l’expérience classique.

Concrètement, vous allez personnaliser le formulaire SharePoint avec PowerApps de façon à positionner le champ MontantHT sous le champ Titre et vous disparaître le champ Pièces jointes.

Préparation

  • La liste lstAffaires doit exister dans le site SharePoint avec votre prénom. Pour créer cette liste, suivez la procédure ci-dessous.

Personnaliser les formulaires SharePoint

Ouvrez votre site SharePoint de travail :

Sur le site SharePoint, ouvrez la liste lstAffaires.

Ensuite, dans le menu de la liste, cliquez sur PowerApps, puis dans le sous-menu qui s’ouvre, cliquez sur Personnaliser les formulaires.

Patientez quelques instants, le temps de la génération de votre application et de son enregistrement dans PowerApps.

Pour vous aider, regardez la copie d’écran ci-dessous.

Personnalisation du formulaire SharePoint
Personnalisation du formulaire SharePoint

Modifier le formulaire personnalisé SharePoint

Normalement, le volet Champs est ouvert. Si le volet Champs n’est pas ouvert, cliquez sur le formulaire SharePointForm1 qui se trouve sous FormScreen1, puis dans les propriétés Champs, cliquez sur Modifier les champs : le volet Champs s’ouvre à nouveau.

Dans ce volet, cliquez sur Ajouter un champ : la liste des champs s’affiche.

Dans cette liste, cochez uniquement les deux champs : MontantHT et Responsable.

Ensuite, cliquez sur le bouton Ajouter.

Maintenant, fermez le volet Champs avec la croix.

Pour vous aider, regardez la copie d’écran ci-dessous.

Modification des champs du formulaire
Modification des champs du formulaire

Personnaliser le formulaire

Donnez une couleur pastel à l’écran, comme par exemple :

FormScreen1.Fill = RGBA( 204; 216; 225; 1)

Grâce à la poignée haute et centrale, abaissez la hauteur du contrôle SharePointForm1 d’environ un quart d’écran.

SharePointForm1.Y = 197

Insérez un contrôle image. Vous en trouverez sous le menu Média.

Arrangez le contrôle Image1 afin qu’il occupe la totalité de la hauteur du premier quart de l’écran.

Image1.Height = SharePointForm1.Y
Image1.Height = 444

Avec les propriétés de l’image, ajoutez une image quelconque dans Image1.

Toujours avec les propriétés de l’image, et notamment grâce à la propriété Position de l’image, remplir le contrôle avec l’image.

Pour vous aider, regardez la copie d’écran ci-dessous.

Personnalisation du formulaire
Personnalisation du formulaire

Tester le nouveau formulaire

Vous allez vérifier l’efficacité de vos modifications. Pour cela, cliquez sur le lien dans le coin supérieur gauche, qui s’intitule Revenir à SharePoint : une boite de dialogue s’ouvre.

Dans cette boîte de dialogue, cliquez sur le bouton Publier : la liste SharePoint s’ouvre.

Dans cette liste, cliquez sur un élément quelconque pour l’ouvrir : il s’affiche bien dans le nouveau formulaire PowerApps.

Pour vous aider, regardez la copie d’écran ci-dessous.

Affichage dans le formulaire PowerApps
Affichage dans le formulaire PowerApps

Dans SharePoint, fermez le volet de l’élément affiché.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment personnaliser le formulaire d’une liste SharePoint.

Vous verrez dans un autre exercice que vous pouvez revenir facilement au formulaire d’origine.

Article mis à jour le 12.03.2020

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *