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 152 to 155 can be commented out or deleted as the change date is defined later in its own block.

Rows 157 to 164 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.

In the figure above you can see the sequence of dialogs that can be used to include custom VM files via the properties dialog of the search button. On the Actions tab, you can edit the search configuration by clicking on "Edit". Select the desired search configuration in the next dialog and then click on "Edit search configuration". On the Display tab in the properties of the search configuration, you can customize how the search results are displayed with a custom VM file. Click here for more information.

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.