User friendly search page

Hello Julien,

I have implemented something like what you're referring to. I have a section where a client manages "areas" and zip codes are assigned to each area (in a detail in this section). This client didn't want to have to create a filter to locate the area for a zip each time they needed - they always locate an area by a zip code in the area. I implemented the ability to search for an area based on a zip code in the detail for the area. It turned out like this: 

Basically, I did the following in the section schema: 

1) Add a text attribute for the value being searched, you'll also want to add an onChange for the attribute so it triggers a change event method. Mine looks like this (note, all the updateSection function does is refresh the section - this is a function in the base section):

attributes: {
	"ZipSearchValue": {
		dataValueType: Terrasoft.DataValueType.TEXT,
		value: "",
		onChange: "updateSection"
	}
}

2) Add an element to the diff bound to the attribute in #1. You could add this with parentName "FiltersContainer" or "GridUtilsContainer", depending on where you want it, but you'll likely need to style it with some CSS to get it to look right. Mine looks like this: 

{
	"operation": "insert",
	"name": "ZipSearchText",
	"parentName": "FiltersContainer",
	"propertyName": "items",
	"index": 0,
	"values": {
		"layout": {
			"colSpan": 12,
			"rowSpan": 1,
			"column": 0,
			"row": 0,
			"layoutName": "FiltersContainer"
		},
		"hasClearIcon": true,
		"bindTo": "ZipSearchValue",
		"caption": "Find zip",
		"classes": {
			"wrapClassName": ["fx-zipsearch"]
		}
	}
}

3) When the user types in the textbox, it will trigger the onChange which just refreshes the section. When the section refreshes, it will call the getFilters method in the section code where you can append to the filters for the list. I have an article about that here: https://customerfx.com/article/programmatically-overriding-or-adding-fi… My filter method looks like this:

getFilters: function() {
	var filters = this.callParent(arguments);
 
	if (!Ext.isEmpty(this.get("ZipSearchValue"))) {
		var filter = Terrasoft.createFilterGroup(),
			subFilters = Terrasoft.createFilterGroup();
 
		subFilters.add("ZipValueFilter",
			Terrasoft.createColumnFilterWithParameter(Terrasoft.ComparisonType.EQUAL, "UsrZipCodeValue", this.get("ZipSearchValue").trim())
		);
 
		filter.addItem(Terrasoft.createExistsFilter("[UsrZipCode:UsrDistributorArea].Id", subFilters));
		filters.add("ZipSearchFilter", filter);
	}
 
	return filters;
}

Hope this helps get you started.

Ryan

Ryan Farley,

Thank you for your contribution. It will be very useful.

In the "OperatorCustomerEngagementCenter" package there is a client module named "SearchAccountAndContactPage.js". You can find a screenshot here: https://community.creatio.com/questions/adding-button-search-contacts-a…

I will try to load a custom view like this and use your answer to create filters. I'll post how I did it once done so other people can do it too.

Best regards,

Julien