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
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:
- Change date
- Publication date
Instead of the application name, we want to display "My custom search" as the
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
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
## 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
#set($statement = $PreparedQuery.prepare($DbConnection, "SELECT STR_TITEL_6A585D30, TXT_BESCHREIBUNG, DT_VEROEFFENTLICHUNGSDATUM, DT_AENDERUNGSDATUM FROM XDATAGROUP00D1A2186 WHERE LID = ?"))
#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))
#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
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
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.
for more information.
Modify search hits in the Layout Designer
Now the format of the search term will be modified in the
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
will load. The yellow background can now be defined in theCSS
.multisource-search .multisource-records > .record strong
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.