Create a search results design

1. Overview
2. General results
3. News results
4. News results (secure)
5. Search Form

See also:

1. Render search results using the WCM search component
2. Search result design examples
3. Page navigation design example

Overview

The search element is used to define the design used to display search results.

1. Select a search service.

2. Select a search collection.

3. Specify paging options for the search element.

   1. Enter the number of items displayed in each navigator page.

   2. Enter the number of the page to display first.

   3. Enter the maximum number of results pages to be included in the navigator design.

   4. Enter the number of results pages to read ahead when using a page navigation element. For example, if we enter 3, the page navigation element calculates results up to 3 pages ahead of the current page. Increasing this number improves the accuracy of the page navigation element. Lowering this number imrpves the performance of the page navigation element when rendered.

4. Select how to sort the search results.

5. Enter HTML, text, and tags into the component design fields to set the layout of the search results:

   Header, separator and footer:

   The code entered in the header designs and the footer designs will appear before and after the displayed search results. The code entered into the separator appears between each displayed search result.

   Result:

   The search results are displayed here. To display the search results as hyperlinks, include a placeholder in the search result layout. The simplest way to create a result layout is to use the "namelink" placeholder.

   No Results:

   Enter text to display if no results are returned.

Example: General results

Header:

<p>[PageInfo value="totalItems"] results found for <span id="searchQuery"></span></p>
<ul class="vertical menu">
<li>
    <div class="grid-x headers">
        <div class="cell medium-2">Relevance</div>
        <div class="cell medium-8">Title</div>
    </div>
</li>

Result design 1:

<!-- Display metadata.  In this case the title -->

[Plugin:ifNotEmpty value="[Placeholder tag='titlelink']"]
    <li>
        <div class="grid-x">
            <div class="cell medium-2">
                <div class="relevance">
                    <div style="width: [attributeResource attributeName="relevance" format="###" separator=","]%;" title="highest">
                    <i class="fi-star"></i>
                    <i class="fi-star"></i>
                    <i class="fi-star"></i>
                    <i class="fi-star"></i>
                    <i class="fi-star"></i></div>
                </div>
            </div>
            <div class="cell medium-10">

                <h2>[Placeholder tag="titlelink"]</h2>

                [Plugin:Equals 
                    text1="Alerts Authoring Template" 
                    text2="[attributeResource 

                    attributeName='authoringtemplate' separator=',']"] 
                    <p style="margin-bottom: 0px;"><strong>Published:</strong>
                        [attributeResource 
                            attributeName="effectivedate" format="DATE_MEDIUM" separator=","]
                    </p>
                [/Plugin:Equals]
                [Plugin:Otherwise]
                    [Plugin:Equals 
                        text1="News Template" 
                        text2="[attributeResource 
    
                        attributeName='authoringtemplate' separator=',']"] 
                        <p style="margin-bottom: 0px;"><strong>Published:</strong>
                            [attributeResource 
                                 attributeName="effectivedate" format="DATE_MEDIUM" separator=","]
                        </p>
                    [/Plugin:Equals]
                [/Plugin:Otherwise]
                [Plugin:Otherwise]
                    [Plugin:Equals 
                         text1="Feature News Template" 
                         text2="[attributeResource 
                         attributeName='authoringtemplate' separator=',']"] 
                        <p style="margin-bottom: 0px;"><strong>Published:</strong>
                            [attributeResource 
                         attributeName="effectivedate" 
                         format="DATE_MEDIUM" separator=","]
                        </p>
                    [/Plugin:Equals]
                [/Plugin:Otherwise]
                <-- END: Code Change  -->

                [Plugin:ifNotEmpty value="[attributeResource attributeName='summary' separator=',']"]
                <p><strong>Summary:</strong>
                    [attributeResource attributeName="summary" separator=","]
                </p>
                [/Plugin:ifNotEmpty]
            </div>
           <!--
      <div class="cell medium-2">[attributeResource attributeName="effectivedate" format="DATE_MEDIUM" separator=","]</div>
             -->
        </div>
    </li>
[/Plugin:ifNotEmpty]

Footer:

</ul>
[Component name="technical assets/search/firstpagination" resultsPerPage="" startPage=""]
[Component name="technical assets/search/secondpagination" resultsPerPage="" startPage=""]
<div class="cell medium-3">
</div>
</div>
</pre>

News search results

Header

<div id="newsTableAnonymous" 
     class="datatableDefer" 
     data-headings="Date, Headline, Category" 
     data-structure="date, heading, category" 
     data-columns="20%, 50%, 30%" 
     data-sort="0, 1, 2">
</div>

<style>
#newsTableAnonymous table th, #newsTableAnonymous table td 
{
    padding: 1rem !important;
    border: none;
    font-size: 1rem;
}

#newsTableAnonymous table thead, table tbody, table tfoot
{
  border:none;
}

.pp_center
{
 text-align: center;
}

#newsTableAnonymous table
{
 margin-bottom:0;
}

#newsTableAnonymous table th 
{
    background-color: #fff;
    font-weight: bold;
    border-top: 2px solid #ddd;
    border-bottom: 5px solid #0d4877; 
    border-right: 10px solid #fff;
    border-left: 1px solid #fff;
}

#newsTableAnonymous table td 
{
    background-color: #f7f7f7;
    padding: 5px 10px 20px;
    border-bottom: 1px solid #ddd;
    border-right: 10px solid #fff;
    border-left: 1px solid #fff;
}

#newsTableAnonymous .paging .totals {
    width: 20%;
}

#newsTableAnonymous .paging .sizing {
    width: 25%;
}
</style>

<script>

var newsJSONArray = [];
var url;
var category;
var siteArea;
var newsJSONObj;
var jsonDate;
var headingLink;
var heading;

Result design 1:

<!-- Generate URL to site area based on current context and assign to variable url -->

url = "[URLCmpnt context="autofill" type="sitearea" htmlencode="false" mode="current"]";

category = decodeURIComponent(url).split("/");

<!-- Accomodate commas for a specific site area -->

if(category[4] != null)
{
   siteArea = category[4].replace(/[+]/g, " ");
   if(siteArea == "Do Re Me")
 {
    siteArea = "Do, Re, Me";
 }
}
else
{
   siteArea = category[3];
}

<!-- Assign publishDate to variable jsonDate -->

jsonDate = '[Property context="autofill" type="content" format="yyyy/MM/dd" field="publishdate"]';

<!-- Assemble a complete link based on the title of the item -->

headingLink = '[Placeholder tag="titlelink"]';

heading = $(headingLink);
headingLink = $(heading).attr("href");
heading = $(heading).text();

<!-- Render results -->

newsJSONObj = 
{
 "date": jsonDate,
 "heading": heading,
 "category": siteArea,
 "headingLink": headingLink
};
newsJSONArray.push(newsJSONObj);

Footer

var resultNewsJSON = {"items" : newsJSONArray, "numRows" : newsJSONArray.length};
$(document).ready( function(){initNewsGrid();});

function underlineHeading(data){
var heading= data['heading'];
var headingHref = data['headingLink'];
  return '<a href='+headingHref+' class="text-underline">'+heading+'</a>';
}

function createSiteAreas(data){
var category = data['category'];
  return '<p class= "bold">'+category+'</p>';
}
function getMonthName(date){
   mlist = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
   return mlist[date.getMonth()];
};

function formatDateString(data){
 var dateString = data['date'];
 var date = new Date(dateString);
 return getMonthName(date)+" "+date.getDate()+", "+date.getFullYear();
}

function initNewsGrid(){
 var newsGrid = gridParams($("#newsTableAnonymous"),
                {
                 json : resultNewsJSON,
                 sortBy:0,
                 sortOrder:'-',
                 paging:true, 
                 pageSize:20,
                 pageSizes:[20,50],
                 currentPage:1,
                 columns: [
                   {
                     pos:0,
                     condition: "formatDateString(data.items[j])"
                   },
                   {
                     pos:2,
                     condition: "createSiteAreas(data.items[j])"
                   },{
                     pos:1,
                     condition: "underlineHeading(data.items[j])"
                 }]
                }
               );
}
</script>

Separator:

No markup has been entered into this field

No result design:

<p id="noNewsSearchResults"> No Search Results !</p>

Secure news results

Header

<div id="newsTable" 
     class="datatableDefer" 
     data-headings="Alert, Date, Headline, Category" 
     data-structure="icon, date, heading, category" 
     data-columns="10%, 18%, 42%, 30%" 
     data-sort="0, 1, 2, 3">
</div>

<style>
#newsTable table th, #newsTable table td {
    padding: 1rem !important;
    border: none;
    font-size: 1rem;
}

#newsTable table thead, table tbody, table tfoot{
  border:none;
}
.pp_center{
 text-align: center;
}

#newsTable table{
 margin-bottom:0;
}
#newsTable table th {
    background-color: #fff;
    font-weight: bold;
    border-top: 2px solid #ddd;
    border-bottom: 5px solid #0d4877; 
    border-right: 10px solid #fff;
    border-left: 1px solid #fff;
}

#newsTable table td {
    background-color: #f7f7f7;
    padding: 5px 10px 20px;
    border-bottom: 1px solid #ddd;
    border-right: 10px solid #fff;
    border-left: 1px solid #fff;
}

#newsTable .paging .totals {
    width: 20%;
}

#newsTable .paging .sizing {
    width: 25%;
}
</style>
<script>
var newsJSONArray = [];
var url;
var category;
var siteArea;
var newsJSONObj;
var jsonDate;
var headingLink;
var heading;
$("#noNewsSearchResults").addClass("hide");

Result design 1 (Secure news results):

<!-- Based on current context, generate URL to site area and get siteArea name. -->

url = "[URLCmpnt context="autofill" type="sitearea" htmlencode="false" mode="current"]";

category = decodeURIComponent(url).split("/");

if(category[4] != null)
{
  siteArea = category[4].replace(/[+]/g, " ");

  if(siteArea == "Do Re Me")
  {
   siteArea = "Do, Re, Me";
  }

}
else
{
  siteArea = category[3];
}

<!-- Assign publishDate to variable jsonDate -->

jsonDate = '[Property context="autofill" type="content" format="yyyy/MM/dd" field="publishdate"]';

<!-- Assemble a complete link based on the title of the item -->

headingLink = '[Placeholder tag="titlelink"]';

heading = $(headingLink);
headingLink = $(heading).attr("href");
heading = $(heading).text();


newsJSONObj = 
{
 "icon": '[Plugin:IfEqualRenderingPlugin 
           text1="Alerts Authoring Template" compute="once" 
           text2="[Property context='autofill' type='content' field='authtemplatename']"]
               <i class="fi-info red reverse-block pp_center"> </i>
          [/Plugin:IfEqualRenderingPlugin]',

 "date": jsonDate,
 "heading": heading,
 "category": siteArea,
 "headingLink": headingLink
};
newsJSONArray.push(newsJSONObj);

Footer:

var resultNewsJSON = {"items" : newsJSONArray, "numRows" : newsJSONArray.length};
$(document).ready( function(){initNewsGrid();});

function underlineHeading(data)
{
var heading= data['heading'];
var headingHref = data['headingLink'];
  return '<a href='+headingHref+' class="text-underline">'+heading+'</a>';
}

function createSiteAreas(data)
{
var category = data['category'];
  return '<p class= "bold">'+category+'</p>';
}
function getMonthName(date)
{
   mlist = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
   return mlist[date.getMonth()];
};

function formatDateString(data)
{
 var dateString = data['date'];
 var date = new Date(dateString);
 return getMonthName(date)+" "+date.getDate()+", "+date.getFullYear();
}

function initNewsGrid()
{
  var newsGrid = gridParams
  (
    $("#newsTable"),
    {
    json : resultNewsJSON,
    sortBy:1,
    sortOrder:'-',
    paging:true, 
    pageSize:20,
    pageSizes:[20,50],
    currentPage:1,
    columns: [
    {
        pos:1,
        condition: "formatDateString(data.items[j])"
    },
    {
        pos:3,
        condition: "createSiteAreas(data.items[j])"
    },{
        pos:2,
        condition: "underlineHeading(data.items[j])"
      }]
   }
  );
}
</script>

Separator:

No markup has been entered into this field

No result design:

<script>
$("#noNewsSearchResults").addClass("hide");
</script>

 No Search Results !

Search Form

[Component name="myportal technical assets/scripts/html - sec - non-sec2"]
<div class = "grid-x">
<div class = "medium-10 cell"> 

<form id="pageSearch" 
      name="searchQueryFormPage" 
      method="post" 
      action="?urile=wcm:path%3A%2FContent%2BLibrary%2FSite%2BUtilities%2FSearch" 
      onsubmit="submitSearch('pageSearch')">

<div class="grid-x">
<div class="medium-4 cell" >

<select name="searchSiteArea" id="mpthemeSearchFilter">
    <option value="/content library">Across Site</option>
    <option value="/content library/mysite/forms">Forms</option>
    <option value="/content library/mysite/news">News</option>
    <option value="/content library/mysite/policies" class="sec_info" > Policies </option>
</select>

<input name="search_query" type="hidden"> 

</div>

<div class="medium-8 cell">
<label for="mpthemeSearchBoxInput" class="mpthemeDisplayNone hide">Search</label>

<input placeholder="Search My Site" 
       class="mpthemeSearchText" 
       type="text" 
       id="mpthemeSearchBoxInputPage" 
       name="query" 
       style="padding-right: 1.75rem;">

<button type="submit" class="mpthemeSearchButton fi-magnifying-glass" title="Click to perform a search." style="color:#0266a3;" ></button>

</div>
</div> 
</form>
</div>
</div>

Parent Create a search component

Previous topic: Set a location for the search component

Next topic: Search component properties

Related tasks:
Insert an image in an element
Insert a link in an element
Insert element tags
Create web content tags