Popups

    Différents types de popup peuvent être instanciées ou modifiées :

    • Création de composants
    • Affichage de métadonnées de composant existant
    • Activité
    • Recherche
    • Contenu DOM
    • Liaison d’un document à un dossier parent


    Ces popups peuvent être instantiées à l’aide de l’API JS :

        JSAPI.get().getPopupAPI();
    


    Afin de modifier les différents attributs communs des popups, les fonctions suivantes sont à disposition :

    Fonction Description
    setIcon(String iconStyle) Définition de l’icone de la popup
    setTitle(String title) Définition du titre de la popup
    setDescription(String description) Définition de la description de la popup
    addStyle(String style) Ajout d’un style sur la popup
    setContent(Element content) Ecrase le contenu existant du corps de la popup
    addContent(Element element) Ajout d’un élément dans le corps la popup
    clearContent() Vide le contenu du corps de la popup
    setClosable() Active la possibilité de fermer la popup avec la croix de la popup
    addCloseHandler(CloseCallback callback) Ajout d’un callback sur la fermeture de la popup
    show() Ouverture de la popup
    close() Fermeture de la popup

    Ce type de popup permet de lancer la création d’un composant en affichant, dans une popup, un formulaire d’indexation.

    Pour instancier une popup de création, il est nécessaire de lui fournir un composant en entrée (ici newTask) :

    var newTask = new Task();
    var popup = JSAPI.get().getPopupAPI().buildComponentCreation(newTask);
    

    Un callback peut être fourni à cette méthode afin de réagir à la création du composant :

    var newTask = new Task();
    newTask.setClassId("ClaimProcess_Start");
    var popup = JSAPI.get().getPopupAPI().buildComponentCreation(newTask, function(saved){
        console.info("The task has been created: "+saved.getId());
    });
    popup.show();
    

    Ce type de popup permet d’afficher les tags d’un composant existant au sein d’une popup.

    Pour instancier ce type de popup, il est nécessaire de fournir à l’API un composant existant :

    var popup = JSAPI.get().getPopupAPI().buildComponentFields(document);
    

    Exemple : Affichage des tags d’un document dans une popup

    
    JSAPI.get().document().get(["documentId"], function(documents){
    	var document = documents[0];
    	console.info("Got: "+document.getId());
    	var popup = JSAPI.get().getPopupAPI().buildComponentFields(document);
    	popup.setTitle("Mon document");
    	popup.setDescription("Consultez les tags du document");
    	popup.setIcon("fa fa-book");
    	popup.show();
    
    	},
    	function(error){
    		console.error("Documents could not be get: " + error);
    	});
    

    Ce type de popup permet d’ouvrir une place au sein d’une popup, via JavaScript.

    1. Instancier la place à ouvrir

    Si la place correspond à celle d’un composant, l’instanciation s’effectue en renseignant sa catégorie et son identifiant.

    var componentPlace = new flower.docs.PlaceBuilder.build(category, id);
    

    Les autres places peuvent instanciées à partir d’un token. Ce token est défini de la même façon que pour la page par défaut.

    var place = new flower.docs.PlaceBuilder.build(token);
    

    2. Instanciation de la popup

    var popup = JSAPI.get().getPopupAPI().buildPlace(place);
    

    Exemple : ouverture de l’écran de modification d’un document au sein d’une popup

    var place = new flower.docs.PlaceBuilder.build("DOCUMENT", "45376503-dfda-4abc-bc2f-32ac8a8b88d1");
    var popup = JSAPI.get().getPopupAPI().buildPlace(place);
    popup.show();
    

    Exemple : ouverture de la page d’accueil au sein d’une popup

    var place = new flower.docs.PlaceBuilder.build("home");
    var popup = JSAPI.get().getPopupAPI().buildPlace(place);
    popup.show();
    

    Ce type de popup permet d’ouvrir un formulaire de recherche dans une popup.

    Pour ouvrir un formulaire de recherche dans une popup, les paramètres suivant sont nécessaires :

    • category : Catégorie sur laquelle l’on souhaite effectuer une recherche
    • template : Nom du template à utiliser pour la recherche
    • callback : Fonction de sélection de composant dans la recherche, il va permettre de manipuler le composant selectionné dans la popup. Il peut, par exemple, être ajouter en tant que pièce jointe d’une tâche.
    popup = JSAPI.get().getPopupAPI().buildSearch(category, template, function(component){ 
    	console.log("Selected component id="+ component.getId());
    }); 
    popup.show();
    

    La popup de type Contenu DOM permet d’ajouter un élement DOM dans une popup. Ceci permet donc d’ajouter un élément construit en JS dans une popup.

    var domElement = document.createElement('div'); 
    domElement.innerHTML = "Hello world"; 
    var popup = JSAPI.get().getPopupAPI().buildDOM(domElement);
    popup.show();
    

    Attachement d’un document à un dossier parent

    Cette partie détaille les interactions possibles avec le widget appelé ComponentAttacher permettant d’attacher un composant à un dossier.

    Ce type de popup ne peut pas être créé manuellement mais il est possible de s’abonner à son ouverture de la façon suivante :

    JSAPI.get().getPopupAPI().registerForComponentAttacherOpen(function(popup){
    	popup.setTitle("Mon nouveau titre");
    	popup.setRapidSearchVisible(false); 
    	popup.getActions().get("advancedSearch").setEnabled(false); 
    });  
    

    Les propriétés modifiables sur les autres types de popup le sont également sur celle-ci. Les fonctions suivantes sont spécifique à ce type de popup :

    Propriétés Description
    setRapidSearchVisible(boolean visible) Visibilité de la recherche rapide
    setSearchTemplate(String searchTemplate) Définir le formulaire de recherche utilisé pour la recherche avancée
    attach(Folder folder) Attache le composant courant à un dossier
    getActions() Permet de récupérer l’ActionSetAPI correspondant, pour manipuler les différentes actions présentes.

    Les actions disponibles via la méthode getActions() sont :

    • browseFolder : Parcourir l’arborescence de dossier
    • advancedSearch : Recherche avancée
    • newFolder : Création d’un nouveau dossier


    La popup affichée lors du clic sur l’action browseFolder va afficher une arborescence de dossier. Il est possible que pour certains besoins l’arborescence complète ne correspondent pas à vos besoins et qu’une certaine partie de celle-ci soit autorisée pour un attachement. Dans ce cas là, il est possible de restreindre l’affichage des différents dossiers dans cette arborescence de la façon suivante :

    folderAttacher = JSAPI.get().getPopupAPI().getFolderAttacher();
    folderAttacher.register(function(folder,toAttach, callback){
    	if(folder.getName() == "2014"){
        	console.error("Remove item " + folder.getName() + " from browse tree");
    		callback.onSuccess(null);
    	}
    	else if(folder.getName() == "Arondor"){
    		console.log("Force disable selection for "+ folder.getName());
    		callback.onSuccess(new SelectableTreeItem(folder.getName(),false));
        }
    	else{
    		console.log("Use applicative selection for "+ folder.getName());
    		callback.onSuccess(new SelectableTreeItem(folder.getName()));
    	}
    });
    

    Dans l’exemple ci-dessus, le composant ayant pour nom Arondor sera affiché mais non sélectionnable. Celui avec le nom 2014 ne sera pas affiché et les autres seront affichés.
    Dans ce dernier cas, la sélection utilisée est celle calculée par l’application, c’est-à-dire qu’elle est affichée uniquement si la classe du composant courant est dans la liste des enfants autorisés du dossier.

    Cette partie détaille les interactions possibles avec le widget appelé ComponentAttacher permettant d’attacher un composant à un dossier.

    Ce type de popup ne peut pas être créé manuellement mais il est possible de s’abonner à son ouverture de la façon suivante :

    JSAPI.get().getPopupAPI().registerForComponentAttacherOpen(function(popup){
    	popup.setTitle("Mon nouveau titre");
    	popup.setRapidSearchVisible(false); 
    	popup.getActions().get("advancedSearch").setEnabled(false); 
    });  
    

    Les propriétés modifiables sur les autres types de popup le sont également sur celle-ci. Les fonctions suivantes sont spécifique à ce type de popup :

    Propriétés Description
    setRapidSearchVisible(boolean visible) Visibilité de la recherche rapide
    setSearchTemplate(String searchTemplate) Définir le formulaire de recherche utilisé pour la recherche avancée
    attach(Folder folder) Attache le composant courant à un dossier
    getActions() Permet de récupérer l’ActionSetAPI correspondant, pour manipuler les différentes actions présentes.

    Les actions disponibles via la méthode getActions() sont :

    • browseFolder : Parcourir l’arborescence de dossier
    • advancedSearch : Recherche avancée
    • newFolder : Création d’un nouveau dossier


    La popup affichée lors du clic sur l’action browseFolder va afficher une arborescence de dossier. Il est possible que pour certains besoins l’arborescence complète ne correspondent pas à vos besoins et qu’une certaine partie de celle-ci soit autorisée pour un attachement. Dans ce cas là, il est possible de restreindre l’affichage des différents dossiers dans cette arborescence de la façon suivante :

    folderAttacher = JSAPI.get().getPopupAPI().getFolderAttacher();
    folderAttacher.register(function(folder,toAttach, callback){
    	if(folder.getName() == "2014"){
        	console.error("Remove item " + folder.getName() + " from browse tree");
    		callback.onSuccess(null);
    	}
    	else if(folder.getName() == "Arondor"){
    		console.log("Force disable selection for "+ folder.getName());
    		callback.onSuccess(new SelectableTreeItem(folder.getName(),false));
        }
    	else{
    		console.log("Use applicative selection for "+ folder.getName());
    		callback.onSuccess(new SelectableTreeItem(folder.getName()));
    	}
    });
    

    Dans l’exemple ci-dessus, le composant ayant pour nom Arondor sera affiché mais non sélectionnable. Celui avec le nom 2014 ne sera pas affiché et les autres seront affichés.
    Dans ce dernier cas, la sélection utilisée est celle calculée par l’application, c’est-à-dire qu’elle est affichée uniquement si la classe du composant courant est dans la liste des enfants autorisés du dossier.