Advanced Techniques - Custom presentation of search results

This workshop demonstrates how custom VM files can be integrated for presenting search results. In addition to the custom presentation and order of the data, found terms will also be highlighted. The example application can be downloaded here and imported into your portal as usual. When importing the application, make sure to activate the setting "Import with application data".

Create the VM file

Copy the file "application.vmi" in the portal directory internal/system/vm/common/search/result. Create a new folder in the same directory and call it "custom". Paste the copied file into this new folder and call it "my-application.vmi". The example file uses the following data fields in the search results: Instead of the application name, we want to display "My custom search" as the source.

Modify the VM file

Open the file "my-application.vmi" in a text editor. The value from the corresponding data field in the application should be shown for the change date.

Rows 149 to 152 can be commented out or deleted as the change date is defined later in its own block.

Rows 154 to 161 are replaced by the following code.

Please note: The names of the data fields and data groups come from the example application and have the corresponding German names (e.g. "TXT_BESCHREIBUNG"). These need to be adjusted to your own names, if you have created your own application.
## Custom modification
<dt class="source">$I18N.get("SEARCH2_COLUMN_SOURCE"): My custom search</dt>
	##GUID of the current data group
	#set ($dgguid = $recordInfo.getDGGuid())
	##ID of the current data record
	#set ($myrecid = $recordInfo.getRecId())
	##IF GUID of the current data group == GUID of the data group of this search configuration
	#if($dgguid == "054713578DA3050A194EC5B23E7981CAC7C63483") 
	##SELCET Query with the required data fields
	$statement.setInt(1, $myrecid)
	#set($rs = $statement.executeQuery())
	#foreach($element in $rs)
		#set($title = $!element.getStringValue(1))
		#set($text = $!element.getStringValue(2))
		#set($dtpublish = $!element.getTimestampValue(3))
		#set($dtchanged = $!element.getTimestampValue(4))
		#set($pubDay = $DtUtil.wrap($dtpublish))
		#set($chgDay = $DtUtil.wrap($dtchanged))
		##Current timezone
		#set($timeZone = $User.getTimeZone())
		<dt>Published on $normalRenderer.renderDateTime($pubDay)    Last changed on $normalRenderer.renderDateTime($chgDay) </dt>
## End of custom modification
Save the changes and close the file.

In the example application, the modified VM file is already integrated in the properties dialog of the search configuration.

Modify search hits in the Layout Designer

Now the format of the search term will be modified in the Design module. Open the current portal layout.

In the Search area, search for ".multisource-search .multisource-records > .record strong". When you double-click on the search hit, the Element settings will load. The yellow background can now be defined in theCSS.
.multisource-search .multisource-records > .record strong  
	font-weight: bolder;  
	background-color: yellow;  
Save the layout and open the application in the browser.

Result in the browser

Search for "Title" here. The search results will be displayed according to the changes made.