Create/Modify Search Styles

If you want to add new styles of displaying the search results (or modify the existing ones) you have to follow the steps below:

1. Create New Style in WorkWithPlus for Web Settings

If you want to create a new style, go to WorkWithPlus for Web Settings -> Template -> 'Master Page Search Styles' Property and add them here (the maximum amount of attributes to display in the search is 3):

AdvancedSearchImg05 

2. Update Web Component WWP_SearchWC

This Web Component is the one displayed by the Search Popover, so you need to add the new style/or modify the existing one inside the Free Style Grid (from the instance), and then update the code in order to use it:

There is a Table node for each style, and inside it each style has its own controls. For example, the style 'title' contains only one variable, for 'title and image' it contains 2 variables, one of the data type image. In the case of the icon, it is an image that we modify by changing the Theme class with a font icon, for example 'fa fa-home'.

AdvancedSearchImg09

Then, in the event that loads the freestyle grid, the cell of each main table's style is hidden by default, and then there is a 'Case' for displaying the correspondent style.

AdvancedSearchImg14

So, in order to use this new Style, you need to add:

<Table_CellControlName>.Visible = false at the top of the <FreeStyleGrid>.Load Event

And then a new 'Case' filtering by the new style name (to filter in the Case, we use the data contained in the element 'DisplayType' of the variable &WWP_SearchResults):

Case &WWP_SearchResults.CurrentItem.Result.CurrentItem.DisplayType = !"<NewStyleName>"
            <Table_CellControlName>.Visible = True
            &DisplayType2_Title = &WWP_SearchResults.CurrentItem.Result.CurrentItem.Description
            DisplayType2_Icon.Caption = format(!"<i class='SearchResultIcon %1'></i>", &WWP_SearchResults.CurrentItem.Result.CurrentItem.Description2)

 

3. Update the Web Panel WWP_Search

The Web Panel WWP_Search is the one displayed when you click in 'Show all results'. So, in this Web Panel you need to make analogous modifications to the ones made in the Web Component WWP_SearchWC