Les widgets présent 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.
home.hide=true au niveau d’une équipe et re-définisser 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ésent 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é 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 :
<bean id="tenLastBillRequest" class="com.flower.docs.domain.search.SearchRequest">
<property name="selectClause">
<bean class="com.flower.docs.domain.search.SelectClause">
<property name="fields">
<list>
<value>name</value>
</list>
</property>
</bean>
</property>
<property name="max" value="10" />
<property name="filterClauses">
<list>
<bean class="com.flower.docs.domain.search.AndClause">
<property name="criteria">
<list>
<bean class="com.flower.docs.domain.search.Criterion">
<property name="name" value="classid" />
<property name="type">
<value type="com.flower.docs.domain.search.Types">STRING</value>
</property>
<property name="operator">
<value type="com.flower.docs.domain.search.Operators">EQUALS_TO</value>
</property>
<property name="values">
<list>
<value>ProviderBill</value>
</list>
</property>
</bean>
</list>
</property>
</bean>
</list>
</property>
<property name="orderClauses">
<list>
<bean class="com.flower.docs.domain.search.OrderClause">
<property name="name" value="creationDate" />
<property name="ascending" value="false" />
</bean>
</list>
</property>
</bean>
Ensuite, nous construisons le widget tenLastBillWidget qui va permettre d’afficher la recherche.
Dans cet exemple, nous définissons :
DOCUMENT, les catégories disponibles sont DOCUMENT, TASK, FOLDER, VIRTUAL_FOLDER.la requête définie précédemment tenLastBillRequest
<bean id="tenLastBillWidget" class="com.flower.docs.gui.client.home.HomeSearchPresenter">
<property name="description" >
<list>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="EN" />
<property name="value" value="My first search" />
</bean>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="FR" />
<property name="value" value="Ma première recherche configurée" />
</bean>
</list>
</property>
<property name="search">
<bean class="com.flower.docs.domain.search.Search">
<property name="category">
<value type="com.flower.docs.domain.component.Category">DOCUMENT</value>
</property>
<property name="request" ref="tenLastBillRequest" />
<property name="displayNames">
<list>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="EN" />
<property name="value" value="My last bills" />
</bean>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="FR" />
<property name="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
<bean id="homeWidgets" class="com.flower.docs.gui.client.util.SimpleWidgetCatalog">
<property name="widgets">
<list>
<ref bean="tenLastBillWidget" />
</list>
</property>
</bean>
Ce type de widget permet d’afficher les favoris de l’utilisateur en fonction d’une recherche configurée.
Les utilisateurs ont la possibilité de cliquer sur les résultats affichés pour accéder au composant.
Dans l’exemple ci-dessous, nous commençons par définir la requête qui va alimenter le widget :
<bean id="favoriteRequest" class="com.flower.docs.domain.search.SearchRequest">
<property name="selectClause">
<bean class="com.flower.docs.domain.search.SelectClause">
<property name="fields">
<list>
<value>name</value>
</list>
</property>
</bean>
</property>
<property name="max" value="10" />
</bean>
Ensuite, nous construisons le widget favoriteDocumentsWidget qui va permettre d’afficher la recherche.
Dans cet exemple, nous définissons :
DOCUMENT, les catégories disponibles sont DOCUMENT, TASK, FOLDER, VIRTUAL_FOLDER.la requête définie précédemment favoriteRequest
<bean id="favoriteDocumentsWidget" class="com.flower.docs.gui.client.preferences.favorite.HomeFavoritesPresenter">
<property name="search">
<bean class="com.flower.docs.domain.search.Search">
<property name="id">
<bean class="com.flower.docs.domain.common.Id">
<property name="value" value="documentSearch" />
</bean>
</property>
<property name="category">
<value type="com.flower.docs.domain.component.Category">DOCUMENT</value>
</property>
<property name="request" ref="favoriteRequest" />
<property name="displayNames">
<list>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="EN"/>
<property name="value" value="My favorites"/>
</bean>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="FR"/>
<property name="value" value="Mes favoris"/>
</bean>
</list>
</property>
</bean>
</property>
</bean>
Et pour finir, nous associons le widget favoriteDocumentWidget à un catalogue nommé homeWidgets
<bean id="homeWidgets" class="com.flower.docs.gui.client.util.SimpleWidgetCatalog">
<property name="widgets">
<list>
<ref bean="favoriteDocumentsWidget" />
</list>
</property>
</bean>
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é.
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ésCREATED : les derniers composants créésUPDATED : les derniers composants mis à jour
<bean id="tenLastConsultedDocumentWidget" class="com.flower.docs.gui.client.home.HomeUserSearchPresenter">
<property name="property">
<value type="com.flower.docs.gui.client.localstorage.LocalPersistentCacheKey">OPENED</value>
</property>
<property name="description">
<list>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="EN" />
<property name="value" value="10 last opened documents" />
</bean>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="FR" />
<property name="value" value="10 last opened documents" />
</bean>
</list>
</property>
<property name="search">
<bean class="com.flower.docs.domain.search.Search">
<property name="category">
<value type="com.flower.docs.domain.component.Category">DOCUMENT</value>
</property>
<property name="request">
<bean class="com.flower.docs.domain.search.SearchRequest">
<property name="selectClause">
<bean class="com.flower.docs.domain.search.SelectClause">
<property name="fields">
<list>
<value>name</value>
</list>
</property>
</bean>
</property>
<property name="max" value="10" />
</bean>
</property>
<property name="displayNames">
<list>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="EN" />
<property name="value" value="10 last opened documents" />
</bean>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="FR" />
<property name="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 à recherchertitleTemplate : le template de recherche utilisé pour le titreheadingTemplate : le template de recherche utilisé pour le headercontentTemplate : le template de recherche utilisé pour le contenusearch : la recherche
<bean id="incidentCatalog" class="com.flower.docs.gui.client.home.SearchWidgetCatalog">
<property name="category">
<value type="com.flower.docs.domain.component.Category">TASK</value>
</property>
<property name="titleTemplate">
<list>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="EN" />
<property name="value" value="${IncidentType}" />
</bean>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="FR" />
<property name="value" value="${IncidentType}" />
</bean>
</list>
</property>
<property name="headingTemplate">
<list>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="EN" />
<property name="value" value="Declared on : ${creationDate} by ${owner}" />
</bean>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="FR" />
<property name="value" value="Déclaré le : ${creationDate} par ${owner}" />
</bean>
</list>
</property>
<property name="contentTemplate">
<list>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="EN" />
<property name="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>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="FR" />
<property name="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>
<property name="search">
<bean class="com.flower.docs.domain.search.SearchRequest">
<property name="selectClause">
<bean class="com.flower.docs.domain.search.SelectClause">
<property name="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>
<property name="filterClauses">
<list>
<bean class="com.flower.docs.domain.search.AndClause">
<property name="criteria">
<list>
<bean class="com.flower.docs.domain.search.Criterion">
<property name="name" value="classid" />
<property name="type">
<value type="com.flower.docs.domain.search.Types">STRING</value>
</property>
<property name="operator">
<value type="com.flower.docs.domain.search.Operators">EQUALS_TO</value>
</property>
<property name="values">
<list>
<value>NouvelIncident</value>
</list>
</property>
</bean>
</list>
</property>
</bean>
</list>
</property>
<property name="orderClauses">
<list>
<bean class="com.flower.docs.domain.search.OrderClause">
<property name="name">
<value>lastUpdateDate</value>
</property>
<property name="type">
<value type="com.flower.docs.domain.search.Types">TIMESTAMP</value>
</property>
<property name="ascending">
<value>false</value>
</property>
</bean>
</list>
</property>
<property name="max" value="10"/>
</bean>
</property>
</bean>
Un compteur permet d’afficher le nombre de résultat d’une recherche au sein d’un widget affiché sur la page d’accueil.
<bean id="myCounter" class="com.flower.docs.gui.client.home.SearchCountPresenter">
<property name="header">
<list>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="EN" />
<property name="value" value="New incidents" />
</bean>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="FR" />
<property name="value" value="Nouveaux incidents" />
</bean>
</list>
</property>
<property name="title">
<list>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="EN" />
<property name="value" value="Currently : " />
</bean>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="FR" />
<property name="value" value="Actuellement : " />
</bean>
</list>
</property>
<property name="icon" value="cardCount-icon far fa-file-archive flat-red" />
<property name="search">
<bean class="com.flower.docs.domain.search.Search">
<property name="category">
<value type="com.flower.docs.domain.component.Category">TASK</value>
</property>
<property name="request">
<bean class="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’aggrégation : :
Exemple : Donut de mes courriers en fonction de leur statut
<bean id="myMailsGraph" class="com.flower.docs.gui.client.home.graph.HomeGraphPresenter">
<property name="search">
<bean class="com.flower.docs.domain.search.Search">
<property name="id">
<bean class="com.flower.docs.domain.common.Id">
<property name="value" value="pliSearch" />
</bean>
</property>
<property name="category">
<value type="com.flower.docs.domain.component.Category">TASK</value>
</property>
<property name="request">
<bean class="com.flower.docs.domain.search.SearchRequest">
<property name="selectClause">
<bean class="com.flower.docs.domain.search.SelectClause">
<property name="fields">
<list>
<value>name</value>
</list>
</property>
</bean>
</property>
<property name="filterClauses">
<list>
<bean class="com.flower.docs.domain.search.AndClause">
<property name="criteria">
<list>
<bean class="com.flower.docs.domain.search.Criterion">
<property name="name" value="assignee" />
<property name="type">
<value type="com.flower.docs.domain.search.Types">STRING</value>
</property>
<property name="operator">
<value type="com.flower.docs.domain.search.Operators">EQUALS_TO</value>
</property>
<property name="values">
<list>
<value>${user.id}</value>
</list>
</property>
</bean>
</list>
</property>
</bean>
</list>
</property>
<property name="aggregation">
<bean class="com.flower.docs.domain.search.FieldAggregation">
<property name="field" value="Statut" />
</bean>
</property>
</bean>
</property>
<property name="displayNames">
<list>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="EN"/>
<property name="value" value="My mails"/>
</bean>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="FR"/>
<property name="value" value="Mes courriers"/>
</bean>
</list>
</property>
</bean>
</property>
<property name="description">
<list>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="EN" />
<property name="value" value="Mails which are assigned to me" />
</bean>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="FR" />
<property name="value" value="Les courriers qui me sont assignés" />
</bean>
</list>
</property>
</bean>
Le résultat suivant sur la page d’accueil :
handleDonutClick(selector, fieldName, fieldValue, label).
Avec ce type de graphe, le premier niveau d’aggré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
<bean id="allMailsGraph" class="com.flower.docs.gui.client.home.graph.HomeGraphPresenter">
<property name="search">
<bean class="com.flower.docs.domain.search.Search">
<property name="id">
<bean class="com.flower.docs.domain.common.Id">
<property name="value" value="allSearch" />
</bean>
</property>
<property name="category">
<value type="com.flower.docs.domain.component.Category">TASK</value>
</property>
<property name="request">
<bean class="com.flower.docs.domain.search.SearchRequest">
<property name="selectClause">
<bean class="com.flower.docs.domain.search.SelectClause">
<property name="fields">
<list>
<value>name</value>
</list>
</property>
</bean>
</property>
<property name="filterClauses">
<list>
<bean class="com.flower.docs.domain.search.AndClause">
<property name="criteria">
<list>
<bean class="com.flower.docs.domain.search.Criterion">
<property name="name" value="assignee" />
<property name="type">
<value type="com.flower.docs.domain.search.Types">STRING</value>
</property>
<property name="operator">
<value type="com.flower.docs.domain.search.Operators">DISPLAY</value>
</property>
<property name="values">
<list>
<value>${user.id}</value>
</list>
</property>
</bean>
</list>
</property>
</bean>
</list>
</property>
<property name="aggregation">
<bean class="com.flower.docs.domain.search.FieldAggregation">
<property name="field" value="ServiceDestinataire" />
<property name="nested">
<list>
<bean class="com.flower.docs.domain.search.FieldAggregation">
<property name="field" value="Statut" />
</bean>
</list>
</property>
</bean>
</property>
</bean>
</property>
<property name="displayNames">
<list>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="EN"/>
<property name="value" value="All mails"/>
</bean>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="FR"/>
<property name="value" value="Tous les courriers"/>
</bean>
</list>
</property>
</bean>
</property>
<property name="description">
<list>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="EN" />
<property name="value" value="All the mails in Flower" />
</bean>
<bean class="com.flower.docs.domain.i18n.I18NLabel">
<property name="language" value="FR" />
<property name="value" value="Tous les courriers dans Flower" />
</bean>
</list>
</property>
</bean>
Le résultat suivant sur la page d’accueil :
handleStackedBarClick(selector, bar, serie).
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 :
<property name="id">
<bean class="com.flower.docs.domain.common.Id">
<property name="value" value="AgentSearch" />
</bean>
</property>