Several types of actions are available:

• Button: text presented as a button
• Icon: based on the icon font supported by FlowerDocs Font Awesome 6.1.1
• DOM: HTML element

Actions’ container

Actions are grouped into actions’ containers from which the actions can be accessed to. To access an action, it is therefore necessary to identify which container is concerned.

To list the actions present in a container container, use the following function:

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

All FlowerDocs actions’ containers are accessible via the API JS. This allows them to be manipulated. For example, you can add, delete, deactivate, hide or modify actions in this container.

In a form

The object componentFormAPI.getActions() is used to interact with the actions of a form presenting a document, folder…

Several functions are available for this purpose:

Go to an action

From an action container container, there are several ways to access an action.

• Synchronously (which requires the action to have already been added to the container at runtime):

  var action = container.get(actionId);
  

• Asynchronously:

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

Actions

Available functions

Once an action has been retrieved, you can interact with it using the functions provided:

Example: Disabling the action Cancel of a component

formAPI.getActions().getFooterActions().registerForAdd(function(action){
    if(action.getName() == "delete") {
		action.setEnabled(false);
	}
});

Interactions with component actions

The execution of an action can be reacted at within a component indexing form.

To do this, simply use the function registerForActionConfirmation(container, name, function(value, executor){}):

• container: the action’s container, either header, footer or task
• name: the name of the action
• function(value, executor): the function to be executed when the user interacts with the action

Example: To call a function each time a user clicks on the button Cancel on an indexing page

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

For even greater control over actions, the object executor supplied as a parameter to the closure can be used to:

• Block action execution:

  executor.hold();
  

• Resume action execution:

  executor.resume();
  

• Determine whether action execution is blocked or not:

  executor.isHeld();
  

Note: if an action is not blocked, it will resume once the closure has been executed.

Examples: Blocking the execution of an action until an asynchronous call returns

var actions = formAPI.getActions(); 
actions.registerForActionConfirmation("footer", “Validate", function(value, executor) {
    executor.hold();
    setTimeout(function(){ 
        executor.resume(); 
    }, 3000);
});

var actions = formAPI.getActions(); 
actions.registerForActionConfirmation("footer", “Refuse", function(value, executor) {
    executor.hold();
    setTimeout(function(){  
        JSAPI.get().getNotificationAPI().sendError("The task cannot be refused."); 
    }, 3000);
});

Build an action

Customized actions can be created thanks to API ActionFactoryAPI

Button action

Two types of button action can be created:

• textual or main ones:

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

• minors

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

Example: Add a button-type action to the table displaying the contents of a folder

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

Icon action

This type of action is based on the FontAwesome font, offering a wide choice of icons through CSS styles.

Example: Add icon action on task attachments

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

Menu action

This type of action is based on the FontAwesome font, offering a wide choice of icons through CSS styles and a label.

Example: Add a menu action to a form header.

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

Responsive action

This type of action combines both an icon-type action and a menu-type action.

During construction, an integer is supplied to indicate the weight of this action. This weight determines the priority of the action to be displayed directly (as an icon) when enough space is available.

When there isn’t enough space to display all actions, those with the greatest weight are displayed as icons first. The others are displayed in menu form.

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

You can also change the weight of a native responsive action using the function setWeight(actionId, weight) in the action container.

JSAPI.get().registerForComponentChange( function(formAPI, component, phase) {
	formAPI.getActions().getHeaderActions().registerForAdd(function(action) {
       if(action.getId() == “attach") {
	        formAPI.getActions().getHeaderActions().setWeight(action.getId(), 0); // In the menu
       }
       else if(action.getId() == "replaceContent"){
	        formAPI.getActions().getHeaderActions().setWeight(action.getId(), 100); // In first position
       }
    });
});

Note: this type of action can only be used for headerActions of a component indexing form.

DOM action

This fifth type of action also has the name and label properties. The last property is a DOM element element. It is possible to interact with this DOM element using classic DOM events such as onclick, onmouseover, …

Example:

	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");
	}