Plusieurs types d’actions sont mis à disposition :

• Bouton : texte présenté sous la forme d’un bouton
• Icône : basé sur la police d’icônes supportée par FlowerDocs Font Awesome 6.1.1
• 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 l’API JS. 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’interagir avec les actions d’un formulaire présentant un document, dossier…

Pour cela plusieurs fonctions sont exposées :

Accéder à une action

À 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’interagir avec en utilisant les fonctions mises à disposition :

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

formAPI.getActions().getFooterActions().registerForAdd(function(action){
    if(action.getName() == "delete") {
		action.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 conteneur de l’action, soit header, footer ou task
• name : le nom de l’action
• function(value, executor) : la fonction à exécuter lorsque l’utilisateur interagit avec l’action

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

formAPI.getActions().getFooterActions().registerForAdd(function(action){
    if(action.getName() == "cancel") {
		formAPI.getActions().registerForActionConfirmation("footer", "cancel", function(value) { ...}
	}
});

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();
  

Note : 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 action

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", 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 de type menu dans l’en-tête d’un formulaire.

var actionSet = formAPI.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 de type Responsive

Ce type d’action combine à la fois une action de type icône et une action de type menu.

Lors de la construction, un entier est fourni permettant d’indiquer le poids de cette action. Ce poids détermine la priorité de l’action à être affichée directement (sous la forme d’icône) lorsque suffisamment de place est disponible.

Lorsqu’il n’y a pas assez de place pour afficher toutes les actions, celles ayant le poids le plus important sont affichées sous forme d’icône en priorité. Les autres sont affichées sous la forme de menu.

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

Il est également possible de changer le poids d’une action responsive native avec la fonction setWeight(actionId, weight) du conteneur d’action.

JSAPI.get().registerForComponentChange( function(formAPI, component, phase) {
	formAPI.getActions().getHeaderActions().registerForAdd(function(action) {
       if(action.getId() == "attach") {
	        formAPI.getActions().getHeaderActions().setWeight(action.getId(), 0); // Dans le menu
       }
       else if(action.getId() == "replaceContent"){
	        formAPI.getActions().getHeaderActions().setWeight(action.getId(), 100); // En première position
       }
    });
});

Note : ce type d’action n’est utilisable que pour les headerActions d’un formulaire d’indexation de composant.

Action DOM

Ce cinquième type d’action possède également les propriétés name et label. La dernière propriété est un élément DOM element. Il est possible d’interagir avec cet élément DOM en utilisant les événements 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");
	}