“I’m so fancy!” “Fancy” n’a pas seulement été un tube pour Iggy Azalea, ça a également été un hit pour nos clients de Los Angeles à Tokyo. Fancybox est un système de fenêtres modales semblables à des fenêtres contextuelles. Pour ce cas d’utilisation spécifique, j’utilise une Fancybox pour collecter du texte/des instructions. Mon client voulait utiliser une fenêtre modale pour collecter les instructions nécessaires lors de la création d’un nouvel élément graphique. Fancybox permet d’utiliser une action utilisateur, ici un bouton, pour montrer du contenu supplémentaire à l’utilisateur sans quitter la page en cours, et donc de proposer généralement une expérience et un rendu plus agréables.
Pour utiliser une Fancybox, vous aurez besoin de télécharger et installer le bundle Nuxeo Labs. Vous êtes ensuite prêt à l’implémenter. Je vais continuer à utiliser l’exemple “new instructions” pour ce blog.
Étape 1
Ajoutez une nouvelle extension XML à Nuxeo Studio appelée “Fancybox-NewInstructions”. Regardez bien son organisation et les paramètres des chaînes :
Étape 2
Creéz un nouveau schéma appelé “InstructionFB” puis ajoutez un nouveau champ appelé “instructions”. Fancybox l’utilisera pour stocker l’instruction. Une chaîne d’automatisation en aura également besoin plus tard. 
Étape 3
Créez une nouvelle organisation de formulaire appelée “fancybox_Instructions” et associez une zone de texte au champ d’instructions dans le schéma.
Étape 4
Créez une nouvelle chaîne d’automatisation appelée “createInstruction_Fancybox”. Dans notre exemple, elle récupère l’instruction du schéma, crée un nouveau document d’instructions pour le document parent puis navigue vers un onglet personnalisé appelé “Instructions”. Tout ceci se produit lorsque l’utilisateur clique sur le bouton “Create Instruction” dans le cadre Fancybox.
Étape 5
Créez une nouvelle catégorie d’action personnalisée appelée “InstructionActionCat”. Celle-ci nous permet d’ajouter un bouton à l’onglet Instructions pour que la Fancybox soit visible lorsqu’on clique dessus.
Étape 6
Définissez l’onglet devant utiliser la nouvelle catégorie d’action personnalisée. Pour notre exemple, créez un nouvel onglet appelé Instructions. Ajoutez le widget “Toolbar actions” à cet onglet ainsi que le champ Instructions.
Étape 7
Enfin, configurez le widget d’action dans la barre d’outils pour qu’il utilise notre nouvelle “Instruction Action Category” et définissez Actions Display sur “Buttons”. Après un hot swap (ou un redémarrage du serveur), vous devriez être en mesure d’afficher une superbe Fancybox !
Consultez le nouveau centre de documentation Nuxeo pour en savoir plus !