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.
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 taskname le nom de l’actionfunction(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);
});
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 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 a être affichée directement (sous la forme d’icône) lorsque suffisamment de place est disponible.
Lorsqu’il n’y 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 = JSAPI.get().getLastComponentFormAPI().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
}
});
});
Nota : ce type d’action n’est utilisable que pour les headerActions d’un formulaire d’indexation de composant.
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");
}
