Les fonctionnalités du Page Component

Page Component ». Ensuite, nous déclarons le tableau « commands » qui permettra de contenir tous les commandes que notre « Page Component » pourra traiter.
La fonction « buildCommands » vous permet de voir que notre « Page Component » pourra gérer trois commandes. La première (« InsertUser ») sera en fait appelée lorsque nous sélectionnerons un élément dans le menu déroulant de notre bouton. Cette commande permettra simplement d’ajouter la personne sélectionnée à la page. La deuxième commande permet juste que le bouton soit actif par défaut. Enfin, la troisième commande, quant à elle, permettra de remplir dynamiquement la liste déroulante.

Vous pouvez également remarquer que nous appelons la fonction « PopulationInsertUserSplitButton ». Cette fonction va permettre de récupérer les différentes personnes dans la liste et d’en construire le menu. Nous le faisons maintenant pour une bonne raison.

Effectivement, dans les contrôles de type « DropDown », « SplitButton », « FlyoutAnchor »,… nous pouvons associer une commande au « déroulement » du menu. Généralement, c’est à cet endroit que nous renvoyons une chaîne de caractères contenant le code XML du menu à afficher. Le souci est que cela doit être fait directement.

La récupération des différentes personnes va prendre du temps selon la taille de la liste. La récupération va donc s’exécuter alors que nous devons déjà renvoyer la chaine de caractères contenant le menu, nous serons donc confronté à un problème récurrent en EcmaScript : les exécutions asynchrones. Ici, nous appelons donc la fonction de récupération des éléments dans le « getGlobalCommands ». Effectivement, cette fonction n’est appelée qu’une fois par le « Ribbon », c’est donc un des endroits adéquats pour appeler cette fonction. Ainsi, une fois que le « Ribbon » s’affiche, il se charge de récupérer les données et de construire le menu.

Comme cela, lorsque nous cliquons sur notre bouton, il est presque certain que les données seront chargées. Si ce n’est pas le cas, nous avons un moyen de faire patienter l’utilisateur. Nous verrons cela plus tard.
Notre « prototype » contient également la fonction « canHandleCommand ». Ici, il n’y a pas de condition préalable à l’exécution de notre bouton, nous renvoyons donc directement « true ». La fonction « handleCommand » va nous permettre d’exécuter différentes instructions selon la commande passée en paramètre.

Si la commande est « InsertUser », nous appelons la fonction du même nom en lui faisant passer le paramètre « MenuItemId » de l’objet « properties ». C’est nous-mêmes qui définissons la valeur de ce « MenuItemId » plus bas dans le code. Ici, il vaudra simplement l’id de l’élément correspondant à l’élève à insérer.