Ajouter un filtre de vue transverse

Support
1

Request description

Bonjour,

J’ai une vue de type Dashboard qui présente plusieurs objets sous plusieurs formats (chart, liste). Tous ont en commun un champ “Pays”.
Je dois mettre en place un filtre unique Pays qui va filtrer tous les éléments de mon Dashboard.
Auriez-vous des conseils sur la meilleure façon de l’implémenter ?

  • tout javascript

  • utiliser les filtres de vue, mais je n’arrive pas à les faire fonctionner en refSelect, et je ne pense pas qu’on puisse les appliquer à plusieurs objets
    [EDIT] En regardant le bundle ui, on dirait qu’il n’est pas autorisé d’utiliser des références avec les filtres de vue
    if (f.type != $app.TYPE_ID && !f.ref && f.searchable)

  • utiliser un objet externe avec un champ d’objet externe, mais là encore, je ne sais pas vraiment comment procéder

Si vous avez des pistes et des exemples, je suis preneuse !
Merci !
Emmanuelle

[Platform]
Status=OK
Version=6.3.16
Variant=full
BuiltOn=2026-09-09 19:41
2

Bonjour Emmanuelle,

Effectivement le bon pattern ici serait d’utiliser un filtre de vue: ❌ v6.2 | Simplicité Documentation

Infos complémentaires
  • Nouvel item de Vue avec setting :
{ 
  period: true|false, 
  periodFromDate: "%", 
  periodToDate: "%",
  vertical: false,
  compact: true,
  filters: [{
     object: "DemoSupplier",
     field: "demoSupName",
     filter: "%"
  }, ... ]
}

Enrichie avec les meta-data pour affichage front.

  • editable :
    • compact / horizontal / vertical
    • recherche par période
    • liste d’object field

image
image748×1474 48.8 KB

  • positionnable comme un item de vue

image
image2462×1392 243 KB

  • event pour notifier les widgets
// filters = { fromDate, toDate, fields... };
myWidget
.addClass("js-view-filters")
.on("ui.view.filters", (e,filters) => { /* apply the filters to widget */ });

Fais-moi savoir si tu as besoin d’un exemple “live” :wink:

4

Bonjour Simon,

Merci de ta réponse et désolée de mon retour tardif !
J’ai testé un peu pour voir, mais j’ai l’impression que

  • je ne peux pas faire un filtre de type “loupe”
  • je ne peux pas l’appliquer sur plusieurs objets

Pour l’instant, j’ai fait un Select2 à la mano, mais j’aurais bien aimé pouvoir avoir un champ “loupe” pour être plus uniforme dans les écrans.
Je mets ce que j’ai fait au cas où ça serve à quelqu’un.

Côté front

HTML

<div class="cdpcountrysearch">
	<div class="dashboard-area-centered dashboard-area-reduced">
		<select id="cdpcountrysearchCty" multiple="multiple" name="countries[]">
		</select>
	</div>
</div>

CLASS

Simplicite.UI.ExternalObjects.CdpCountrySearch = class extends Simplicite.UI.ExternalObject {
	async render(params, data = {}) {
		console.log('Country search');
		$('#cdpcountrysearchCty').on("change", function(e) {
		    var selectedCtys = $('#cdpcountrysearchCty').select2('data');
		    const ctyCount = selectedCtys.length;
		    
		    if (ctyCount > 0)
		    {
		    	let ctyFilterValue = '';
		    	let ctyFilterIds = '';
			    selectedCtys.forEach((selectedCty,idx) => {
						ctyFilterValue += "'" + selectedCty.text + "'";
						ctyFilterIds += selectedCty.id;
						if (idx < ctyCount - 1)
						{
							ctyFilterValue += ',';
							ctyFilterIds += ',';
						}
					});
					
				$ui.grant.setParameter("DASHBOARD_CTY_FILTER", ctyFilterValue);
				$ui.grant.setParameter("DASHBOARD_CTY_IDS", ctyFilterIds);
				
		    }
		    else
		    {
		    	$ui.grant.setParameter("DASHBOARD_CTY_FILTER", "");
				$ui.grant.setParameter("DASHBOARD_CTY_IDS", "");
		    }
		    
		    $('a[href="#tabs_CdpAdminView_0_0"]').click();

		});


		var countries = $ui.app.getBusinessObject("CdpCountry");
		
		countries.search().then(listSearch => {
				
				var data = [];
				
				for (var i = 0 ; i < listSearch.length ; i++) {
					
					var ctyId = listSearch[i].row_id;
					var ctyCode = listSearch[i].cdpCtyName;
					var ctyName = listSearch[i].cdpCtyCountryId__isoCtyName;
					
					data[i] = {value:ctyCode,id:ctyId,text:ctyCode + ' - ' + ctyName};
				}
				
				let inputCty = $('#cdpcountrysearchCty').select2({data: data, placeholder: 'Enter one or several country code or name to filter', allowClear: true});
				
				let ctyFilterArray = [];
				
				$ui.grant.getParameter("DASHBOARD_CTY_IDS").then(ctyFilterParam => {
					
					if (ctyFilterParam !== null && ctyFilterParam !== undefined && ctyFilterParam !== '')
					{
						ctyFilterArray = ctyFilterParam.toString().split(',');
						$(inputCty).val(ctyFilterArray).trigger('change.select2');
					}
				});
		
				
			});
			
					
	}
};

Côté back

@Override
	public void preSearch() {
	    
	    String ctyFilter = getGrant().getParameter("DASHBOARD_CTY_FILTER");
		AppLog.info("ctyFilter " + ctyFilter, getGrant());
	    
	    if (ctyFilter != null && !ctyFilter.isEmpty())
	    	setFieldFilter("cdpCtyName","IN (" + ctyFilter + ")");
	    else
	    	getField("cdpCtyName").resetFilter();

	    super.preSearch();
	}

Bonne fin de journée !
Emmanuelle