Cards

Available Objects

Card

The functions available on the cards are as follows:

Function Description
setTitle(title) Modifies card title
setHeading(heading) Modifies card description
getActions() Recovers the card’s action container
getStyle(style) Retrieves the card’s CSS class
addStyle(style) Adds the CSS class to the card
setStyle(style) Replaces the card’s CSS classes with the one provided
asElement() Retrieves the card as a DOM element

Container cards

Container cards are large cards into which content can be added. The functions available are as follows:

Function Description
setTitle(title) Modifies card title
setCaption(caption) Modifies card description
setIcon(icon) Modifies card icon
addCard(card) Add a card to this one
setContent(content) Allows to add a DOM element to the card
setVisible(isVisible) Allows to hide or show the card
setReduced(isReduced) Allows to reduce the card (only the title is visible)
getStyle(style) Retrieves the card’s CSS class
addStyle(style) Adds the CSS class to the card
setStyle(style) Replaces the card’s CSS classes with the one provided

Recording

To access the cards, you need to register when you add them. There are two types of cards for which the JS API can register, cards of attachments and search results.

Search result

Subscription to the addition of a search result card is performed using the cardAPI object:

var cardAPI = JSAPI.get().getCardAPI();
cardAPI.registerForComponent(function(card component){
	...
}

The function parameters are:

  • card: the added card
  • component: the component created from the search result

Example:

var cardAPI = JSAPI.get().getCardAPI();
cardAPI.registerForComponent(function(card component){
	var actionAPI = JSAPI.get().getActionFactoryAPI();
	var myElement = document.createElement('button'); 
	myElement.innerHTML = "Custom button title";
	var action = actionAPI.buildDOM("className", "My action description", myElement);

	card.getActions().add(action);
	card.setTitle("Title");
	card.setHeading("Heading");

	myElement.onclick= function(){ 
		console.log(card);
		console.log(component.getClassId());
    }
});

Attachment

Loading

For each attachment definition, you can subscribe to the loading of the corresponding card through a subscription mechanism using the cardAPI object:

var cardAPI = JSAPI.get().getCardAPI();
cardAPI.registerForAttachment(function(card, task, attDefinition, component){
	...
}

The function parameters are:

  • card: the added card
  • task: the task to which the attachment is attached
  • attDefinition: the definition of the attachment
  • attComponent: the component attached to the task

Examples:

var cardAPI = JSAPI.get().getCardAPI();

cardAPI.registerForAttachment(function(card, task, definition, component){
	var actionAPI = JSAPI.get().getActionFactoryAPI();
	var myElement = document.createElement('button'); 
	myElement.innerHTML = "Custom button title";
	var action = actionAPI.buildDOM("className", "My action description", myElement);
	
	card.getActions().add(action);
	card.setTitle("Title");
	card.setHeading("Heading");

	myElement.onclick= function(){ 
		console.log(card);
		console.log(task.getClassId());
		console.log(definition.getClassId());
		console.log(component);
    }
});

To programmatically add an attachment to a task, you can trigger an event such as:

var doc = new Document();
doc.setName("Attached document");
doc.setClassId("Claim");

var event = new AddTaskAttachmentEvent("Attachment2", doc);
var formAPI = JSAPI.get().getComponentFormAPI(<identifiant du composant>);
formAPI.fireEvent(event);
}

In order to display the previously programmatically added attachment in the viewer, it must be notified as follows:

formAPI.fireEvent(new AttachmentsLoadedEvent(formApi.getComponent()));

Changes

To react to changes made by users to attachments, you can subscribe to changes on the card object:

card.registerForChange(function(attachment){
	console.info("Detected attachment change: " + attachment);		
});

Actions

Cards with attachments of type DOCUMENT have a set of native actions.

These actions can be managed programmatically using their identifier:

  • upload-version: uploading a new version of a document
  • delete-version: deleting the uploaded version
  • upload-attached: uploading a document to be created
  • delete-attached: deleting existing document added