Actions

Surcharger les actions natives ou ajouter des actions personnalisées.

Plusiers types d’actions sont mis à disposition :

  • Bouton : texte présenté sous la forme d’un bouton
  • Icône : basé sur les différentes polices d’icônes supportés par Flower
  • DOM : élément HTML

Conteneur d’actions

Les actions sont regroupées dans des conteneurs d’actions à partir desquels il est possible d’accéder aux actions. Pour accéder à une action, il est donc nécessaire d’identifier quel conteneur est concerné.


Pour lister les actions présentes dans un conteneur container, il faut utiliser la fonction suivante :

    console.log("Container actions : " + container.getIds());


Tous les conteneurs d’actions de FlowerDocs sont accessibles via la JSAPI. Ceci permet de les manipuler, par exemple, il est possible d’ajouter, supprimer, désactiver, cacher ou bien modifier des actions de ce conteneur.

Dans un formulaire

L’objet componentFormAPI.getActions() permet d’intéragir avec les actions d’un formulaire présentant un document, dossier…

Pour cela plusieurs fonctions sont exposées :

Fonctions Description
getHeaderActions() Récupère le conteneur d’action dans l’en-tête
getTaskActions() Récupère le conteneur d’action permettant la création de tâches
getFooterActions() Récupère le conteneur d’action de pied de page (validation, annulation…)

Accéder à une action

A partir d’un conteneur d’action container, plusieurs moyens permettent d’accéder à une action.

  • De manière synchrone (ce qui nécessite que l’action soit, lors de l’exécution, déjà ajoutée au conteneur) :

    var action = container.get(actionId);
    
  • De manière asynchrone :

    container.registerForAdd(function(action){});
    

Les actions

Fonctions disponibles

Une fois qu’une action a été récupérée, il est possible d’intéragir avec en utilisant les fonctions mises à disposition :

Fonctions Description
setEnabled(enabled) Activer ou désactiver l’action
isEnabled() Détermine si l’action est activée ou non
setTemporaryDisabled(disabled) Désactive de manière temporaire une action (seulement pour les boutons)
getId() Récupère l’identifiant d’une action
execute() Exécute l’action de manière programmatique

Exemple : Désactiver l’action Annuler d’un composant

var actions = componentFormAPI.getActions();
var cancelAction = actions.getFooterActions().get("cancel");
cancelAction.setEnabled(false);

Interactions avec les actions de composant

Au sein d’un formulaire d’indexation d’un composant, il est possible de réagir à l’exécution d’une action.

Pour cela, il suffit d’utiliser la fonction registerForActionConfirmation(container, name, function(value, executor){}) :

  • container : le container de l’action soit header, footer ou task
  • name le nom de l’action
  • function(value, executor) la fonction à exécuter lorsque l’utilisateur intéragit avec l’action

Exemple : Pour appeler une fonction à chaque fois qu’un utilisateur clique sur le bouton Annuler d’une page d’indexation

JSAPI.get().registerForComponentChange(function(api, results, phase) {
	api.getActions().registerForActionConfirmation("footer", "cancel", function(value) {
		//do some stuff
	})
});

Pour avoir un contrôle encore plus fin sur les actions, l’objet executor fourni en paramètre à la closure permet de :

  • Bloquer l’exécution de l’action :

    executor.hold();
    
  • Reprendre l’exécution de l’action :

    executor.resume();
    
  • Déterminer si l’exécution de l’action est bloquée ou non :

    executor.isHeld();
    

Nota : si l’exécution d’une action n’est pas bloquée, elle reprend une fois la closure exécutée.


Exemples : Bloquer l’exécution d’une action jusqu’à l’obtention du retour d’un appel asynchrone

var actions = formAPI.getActions() 
actions.registerForActionConfirmation("footer", "Valider", function(value, executor) {
    executor.hold();
    setTimeout(function(){ 
        executor.resume(); 
    }, 3000);
});
var actions = formAPI.getActions() 
actions.registerForActionConfirmation("footer", "Refuser", function(value, executor) {
    executor.hold();
    setTimeout(function(){  
        JSAPI.get().getNotificationAPI().sendError("La tâche ne peut pas être refusée."); 
    }, 3000);
});

Construire une actions

Grâce à l’API ActionFactoryAPI, il est possible de créer des actions personnalisées.

Action de type bouton

Deux sortes d’action de type bouton peuvent être créées :

  • les textuelles ou principales :

    JSAPI.get().getActionFactoryAPI().buildTextual(id, displayName, function(a){});
    
  • les mineures

    JSAPI.get().getActionFactoryAPI().buildMinor(id, displayName, function(a){});
    

Exemple : Ajout d’une action de type bouton sur le tableau présentant le contenu d’un dossier

JSAPI.get().registerForFolderChildrenLoaded(function(api, component, phase) {
	var action = JSAPI.get().getActionFactoryAPI().buildTextual("action", "Mon action","fa fa-plus" function(a)
	{
		console.log("execute action: " + a.getId());
	});
	api.getDocumentChildren().getActions().add(action);
});

Action de type icône

Ce type d’action se base sur la police de caractère FontAwesome proposant un choix important d’icône à travers des styles CSS.

Exemple : Ajout d’une action icône sur les pièces jointes d’une tâche

var cardAPI = JSAPI.get().getCardAPI();
cardAPI.registerForAttachment(function(card, task, definition, component){
	var actionAPI = JSAPI.get().getActionFactoryAPI();
	var action = actionAPI.buildIcon("myAction","Mon action", "fa fa-user", function(actionPresenter){
		console.info("on click");
		actionPresenter.setEnabled(false);
    });
    card.getActions().add(action);
});

Action de type menu

Ce type d’action se base sur la police de caractère FontAwesome proposant un choix important d’icône à travers des styles CSS et un label.

Exemple : Ajout d’une action icône sur les pièces jointes d’une tâche

var actionSet = JSAPI.get().getLastComponentFormAPI().getActions().getHeaderActions();
var actionAPI = JSAPI.get().getActionFactoryAPI();
var action = actionAPI.buildMenu("myAction", "Mon menu", "fa fa-user", function(actionPresenter){
		console.info("on click");
});
actionSet.add(action)

Action DOM

Ce troisième type d’action possède également les propriétés name et label. La dernière propriété est un élement DOM element. Il est possible d’intéragir avec cet élément DOM en utilisant les évenements classiques de DOM comme onclick, onmouseover, …

Exemple :

	var actionAPI = JSAPI.get().getActionFactoryAPI();
	
	var element = document.createElement('button'); 
	element.innerHTML = "Custom button title";
	var action = actionAPI.buildDOM("className", "hover label", element);

	element.onclick= function(){ 
		console.log("Click on DOM button");
	}