Ajouter des compteurs à vos onglets

Repérez dès le premier coup d'oeil le nombre de composants à considérer dans un onglet.

18/02/2019

Objectifs

Cet article a pour objectif de montrer comment rajouter (facilement) des compteurs au niveau d’un onglet dans la barre de menu Flower.

Ce compteur sera basé sur une recherche afin de déterminer sa valeur.

Prérequis :

  • Notion de Javascript
  • Notion de JQuery
  • Onglet basé sur un dossier virtuel

Place au script !

Affichage du compteur

Commençons par définir une fonction nous permettant d’afficher un compteur :

function displayBadge(selector, found){
  setTimeout(function(){
    var label = document.createElement("span");
    label.className="badge badge-pink badge-pill float-right";  
    label.innerText=found;
    $(selector).append(label);
  }, 1000);
}

La variable selector identifie l’onglet concerné (ouvrez les outils développeurs de votre navigateur préféré et répérez la classe de l’onglet).

Un compteur de tâche

Nous allons maintenant nous appuyer sur les résultats d’une recherche de tâche pour afficher notre compteur :

JSAPI.get().task().search(new SearchRequest(), function(results){
  displayBadge(".BrowsePlacePersonnelleTab", results.length);
});

Affinons la recherche

Une requête vide n’est ni optimisée ni adaptée, nous allons donc lui ajouter quelques critères. Construisons notre requête avec les critères adaptés :

function buildMyGECTasksRequest(){
	var request = new SearchRequest();
	request.setMax(0);
	request.setStart(0);
	var filters = new AndClause();
	request.addFilterClause(filters);
	
	var me = new Criterion();
	me.setName("assignee");
	me.addValue(JSAPI.get().getUserAPI().getCurrentUser().getId());
	filters.addCriterion(me);
	
	var workflow = new Criterion();
	workflow.setName("workflow");
	workflow.addValue("GEC");
	workflow.addValue("Inform");
	filters.addCriterion(workflow);
	
	return request;
}

Et relançons notre recherche :

JSAPI.get().task().search(buildMyGECTasksRequest(), function(results){
  displayBadge(".BrowsePlacePersonnelleTab", results.length);
});

Avec un peu de couleur

Et si maintenant nous choisissions un code couleur en fonction du  nombre de résultat : 

function displayBadge(selector, found){
  setTimeout(function(){
    var label = document.createElement("span");
    if(found == 0){
      label.className="badge badge-success badge-pill float-right";
    }
    else if(found < 3){
      label.className="badge badge-primary badge-pill float-right";
    }
    else if(found < 6){
      label.className="badge badge-pink badge-pill float-right";
    }
    else if(found < 11){
      label.className="badge badge-warning badge-pill float-right";
    }
    else if(found < 16){
      label.className="badge badge-danger badge-pill float-right";
    }
    label.innerText=found;
    $(selector).append(label);
  }, 3000);
}


Pour aller plus loin : Lancer régulièrement la recherche et remplacer le badge ajouté pour que votre compteur soit toujours cohérent !