Les widgets présents sur la page d’accueil sont définis par équipe grâce la propriété home.widget.catalog=<identifiant du catalogue> à partir de catalogues de widgets.
Cachez la page d’accueil en ajoutant la propriété home.hide=true au niveau d’une équipe et re-définissez la page par défaut comme n’étant pas la page d’accueil.
Ce type de widget permet d’afficher la concaténation des champs présents dans la selectClause de la recherche pour chaque composant remonté par la recherche configurée.
Les utilisateurs ont la possibilité de cliquer sur un des résultats affichés afin d’accéder au composant.
Dans l’exemple ci-dessous, nous commençons par définir la requête qui va alimenter le widget :
Ensuite, nous construisons le widget tenLastBillWidget qui va permettre d’afficher la recherche.
Dans cet exemple, nous définissons :
le type de composant recherché, la catégorie: ici DOCUMENT, les catégories disponibles sont DOCUMENT, TASK, FOLDER, VIRTUAL_FOLDER.
les titre et description internationalisés du widget
la requête définie précédemment tenLastBillRequest
<beanid="tenLastBillWidget"class="com.flower.docs.gui.client.home.HomeSearchPresenter"><propertyname="description"><list><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="EN"/><propertyname="value"value="My first search"/></bean><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="FR"/><propertyname="value"value="Ma première recherche configurée"/></bean></list></property><propertyname="search"><beanclass="com.flower.docs.domain.search.Search"><propertyname="category"><valuetype="com.flower.docs.domain.component.Category">DOCUMENT</value></property><propertyname="request"ref="tenLastBillRequest"/><propertyname="displayNames"><list><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="EN"/><propertyname="value"value="My last bills"/></bean><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="FR"/><propertyname="value"value="Mes 10 dernières factures"/></bean></list></property></bean></property></bean>
Et pour finir, nous associons le widget tenLastBillWidget à un catalogue nommé homeWidgets
Cette partie détaille l’affichage de widgets basés sur les composants modifiés, créés ou consultés par l’utilisateur courant.
Les composants sont déterminés à partir d’informations enregistrées dans le cache du navigateur. Cette fonctionnalité nécessite donc que le navigateur de l’utilisateur ait la fonction Local storage activée.
De plus, après purge du cache du navigateur, les informations sont donc supprimées.
Dans cet exemple, nous définissons en plus des propriétés décrites précédemment, la propriété property avec pour valeur :
OPENED : les derniers composants visualisés
CREATED : les derniers composants créés
UPDATED : les derniers composants mis à jour
<beanid="tenLastConsultedDocumentWidget"class="com.flower.docs.gui.client.home.HomeUserSearchPresenter"><propertyname="property"><valuetype="com.flower.docs.gui.client.localstorage.LocalPersistentCacheKey">OPENED</value></property><propertyname="description"><list><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="EN"/><propertyname="value"value="10 last opened documents"/></bean><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="FR"/><propertyname="value"value="10 last opened documents"/></bean></list></property><propertyname="search"><beanclass="com.flower.docs.domain.search.Search"><propertyname="category"><valuetype="com.flower.docs.domain.component.Category">DOCUMENT</value></property><propertyname="request"><beanclass="com.flower.docs.domain.search.SearchRequest"><propertyname="selectClause"><beanclass="com.flower.docs.domain.search.SelectClause"><propertyname="fields"><list><value>name</value></list></property></bean></property><propertyname="max"value="10"/></bean></property><propertyname="displayNames"><list><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="EN"/><propertyname="value"value="10 last opened documents"/></bean><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="FR"/><propertyname="value"value="1O derniers documents consultés"/></bean></list></property></bean></property></bean>
Il existe un autre type de catalogue de recherche n’étant pas basé sur une liste de widget comme le WidgetCatalog mais basé sur une recherche, le SearchWidgetCatalog. Ceci permet d’avoir un widget sous forme de carte par recherche.
Les propriétés à définir sont :
category : la catégorie de composant à rechercher
titleTemplate : le template de recherche utilisé pour le titre
headingTemplate : le template de recherche utilisé pour le header
contentTemplate : le template de recherche utilisé pour le contenu
search : la recherche
<beanid="incidentCatalog"class="com.flower.docs.gui.client.home.SearchWidgetCatalog"><propertyname="category"><valuetype="com.flower.docs.domain.component.Category">TASK</value></property><propertyname="titleTemplate"><list><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="EN"/><propertyname="value"value="${IncidentType}"/></bean><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="FR"/><propertyname="value"value="${IncidentType}"/></bean></list></property><propertyname="headingTemplate"><list><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="EN"/><propertyname="value"value="Declared on : ${creationDate} by ${owner}"/></bean><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="FR"/><propertyname="value"value="Déclaré le : ${creationDate} par ${owner}"/></bean></list></property><propertyname="contentTemplate"><list><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="EN"/><propertyname="value"value="<b/> ${classid} </b> <br/> Status : ${StatusIncident}<br/> Assigned to: ${assignee}<br/> ${IncidentType} on : ${IncidentLocation} for building '${Building}' <br/><br/> <i> Last modification : ${lastUpdateDate} </i> <br/>"/></bean><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="FR"/><propertyname="value"value="<b/> ${classid} </b> <br/> Statut : ${StatusIncident}<br/> Assigné à : ${assignee}<br/> ${IncidentType} au niveau de : ${IncidentLocation} pour l'immeuble : '${Building}' <br/><br/> <i> Dernière modification : ${lastUpdateDate} </i> <br/>"/></bean></list></property><propertyname="search"><beanclass="com.flower.docs.domain.search.SearchRequest"><propertyname="selectClause"><beanclass="com.flower.docs.domain.search.SelectClause"><propertyname="fields"><list><value>classid</value><value>IncidentType</value><value>IncidentLocation</value><value>Building</value><value>owner</value><value>name</value><value>creationDate</value><value>lastUpdateDate</value><value>StatusIncident</value></list></property></bean></property><propertyname="filterClauses"><list><beanclass="com.flower.docs.domain.search.AndClause"><propertyname="criteria"><list><beanclass="com.flower.docs.domain.search.Criterion"><propertyname="name"value="classid"/><propertyname="type"><valuetype="com.flower.docs.domain.search.Types">STRING</value></property><propertyname="operator"><valuetype="com.flower.docs.domain.search.Operators">EQUALS_TO</value></property><propertyname="values"><list><value>NouvelIncident</value></list></property></bean></list></property></bean></list></property><propertyname="orderClauses"><list><beanclass="com.flower.docs.domain.search.OrderClause"><propertyname="name"><value>lastUpdateDate</value></property><propertyname="type"><valuetype="com.flower.docs.domain.search.Types">TIMESTAMP</value></property><propertyname="ascending"><value>false</value></property></bean></list></property><propertyname="max"value="10"/></bean></property></bean>
Un compteur permet d’afficher le nombre de résultats d’une recherche au sein d’un widget affiché sur la page d’accueil.
<beanid="myCounter"class="com.flower.docs.gui.client.home.SearchCountPresenter"><propertyname="header"><list><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="EN"/><propertyname="value"value="New incidents"/></bean><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="FR"/><propertyname="value"value="Nouveaux incidents"/></bean></list></property><propertyname="title"><list><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="EN"/><propertyname="value"value="Currently : "/></bean><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="FR"/><propertyname="value"value="Actuellement : "/></bean></list></property><propertyname="icon"value="cardCount-icon far fa-file-archive flat-red"/><propertyname="search"><beanclass="com.flower.docs.domain.search.Search"><propertyname="category"><valuetype="com.flower.docs.domain.component.Category">TASK</value></property><propertyname="request"><beanclass="com.flower.docs.domain.search.SearchRequest"/></property></bean></property></bean>
Dans la page d’accueil, il est possible d’afficher des graphiques définis à partir de recherche. Le type de graphique est automatiquement déterminé à partir du nombre d’agrégation :
un niveau d’agrégation : donut
deux niveaux d’agrégation : histogramme
Donut
Exemple : Donut de mes courriers en fonction de leur statut
<beanid="myMailsGraph"class="com.flower.docs.gui.client.home.graph.HomeGraphPresenter"><propertyname="search"><beanclass="com.flower.docs.domain.search.Search"><propertyname="id"><beanclass="com.flower.docs.domain.common.Id"><propertyname="value"value="pliSearch"/></bean></property><propertyname="category"><valuetype="com.flower.docs.domain.component.Category">TASK</value></property><propertyname="request"><beanclass="com.flower.docs.domain.search.SearchRequest"><propertyname="selectClause"><beanclass="com.flower.docs.domain.search.SelectClause"><propertyname="fields"><list><value>name</value></list></property></bean></property><propertyname="filterClauses"><list><beanclass="com.flower.docs.domain.search.AndClause"><propertyname="criteria"><list><beanclass="com.flower.docs.domain.search.Criterion"><propertyname="name"value="assignee"/><propertyname="type"><valuetype="com.flower.docs.domain.search.Types">STRING</value></property><propertyname="operator"><valuetype="com.flower.docs.domain.search.Operators">EQUALS_TO</value></property><propertyname="values"><list><value>${user.id}</value></list></property></bean></list></property></bean></list></property><propertyname="aggregation"><beanclass="com.flower.docs.domain.search.FieldAggregation"><propertyname="field"value="Statut"/></bean></property></bean></property><propertyname="displayNames"><list><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="EN"/><propertyname="value"value="My mails"/></bean><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="FR"/><propertyname="value"value="Mes courriers"/></bean></list></property></bean></property><propertyname="description"><list><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="EN"/><propertyname="value"value="Mails which are assigned to me"/></bean><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="FR"/><propertyname="value"value="Les courriers qui me sont assignés"/></bean></list></property></bean>
Le résultat suivant sur la page d’accueil :
Démonstration d'un donut
Pour rediriger l’utilisateur lors d’un clic sur une série, surchargez la méthode Javascript handleDonutClick(selector, fieldName, fieldValue, label).
Histogramme
Avec ce type de graphe, le premier niveau d’agrégation est utilisé pour afficher les colonnes verticales. Le second niveau permet de définir les séries.
Exemple : Histogramme de tous les courriers en fonction du service et du statut
<beanid="allMailsGraph"class="com.flower.docs.gui.client.home.graph.HomeGraphPresenter"><propertyname="search"><beanclass="com.flower.docs.domain.search.Search"><propertyname="id"><beanclass="com.flower.docs.domain.common.Id"><propertyname="value"value="allSearch"/></bean></property><propertyname="category"><valuetype="com.flower.docs.domain.component.Category">TASK</value></property><propertyname="request"><beanclass="com.flower.docs.domain.search.SearchRequest"><propertyname="selectClause"><beanclass="com.flower.docs.domain.search.SelectClause"><propertyname="fields"><list><value>name</value></list></property></bean></property><propertyname="filterClauses"><list><beanclass="com.flower.docs.domain.search.AndClause"><propertyname="criteria"><list><beanclass="com.flower.docs.domain.search.Criterion"><propertyname="name"value="assignee"/><propertyname="type"><valuetype="com.flower.docs.domain.search.Types">STRING</value></property><propertyname="operator"><valuetype="com.flower.docs.domain.search.Operators">DISPLAY</value></property><propertyname="values"><list><value>${user.id}</value></list></property></bean></list></property></bean></list></property><propertyname="aggregation"><beanclass="com.flower.docs.domain.search.FieldAggregation"><propertyname="field"value="ServiceDestinataire"/><propertyname="nested"><list><beanclass="com.flower.docs.domain.search.FieldAggregation"><propertyname="field"value="Statut"/></bean></list></property></bean></property></bean></property><propertyname="displayNames"><list><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="EN"/><propertyname="value"value="All mails"/></bean><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="FR"/><propertyname="value"value="Tous les courriers"/></bean></list></property></bean></property><propertyname="description"><list><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="EN"/><propertyname="value"value="All the mails in FlowerDocs"/></bean><beanclass="com.flower.docs.domain.i18n.I18NLabel"><propertyname="language"value="FR"/><propertyname="value"value="Tous les courriers dans FlowerDocs"/></bean></list></property></bean>
Le résultat suivant sur la page d’accueil :
Démonstration d'un histogramme
Pour rediriger l’utilisateur lors d’un clic sur une série, surchargez la méthode Javascript handleStackedBarClick(selector, bar, serie).
Lien avec un formulaire de recherche
Les widgets basés sur une recherche peuvent être couplés à un formulaire de recherche.
Ainsi en cliquant sur le titre du widget, l’utilisateur sera redirigé vers le formulaire de recherche défini avec les critères pré-remplis s’ils sont affichés ou autorisés.
Pour définir le formulaire de recherche à ouvrir, il est nécessaire de rajouter la propriété suivante au niveau du bean de recherche :