Hi everyone
I have a modified people search results page (SharePoint Online) where I have added a few fields to the results page. I would like to better organize the fields by placing a horizontal line in there somewhere.
For instance, I would like to add a light gray horizontal line where I drew the red lines on this image:
Here is a copy of my current people search results code:
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"><head><title>UIF People Item with Work Phone</title><!--[if gte mso 9]><xml><mso:CustomDocumentProperties><mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden><mso:MasterPageDescription msdt:dt="string">Displays a result tailored for a person.</mso:MasterPageDescription><mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId><mso:TargetControlType msdt:dt="string">;#SearchResults;#</mso:TargetControlType><mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated><mso:CrawlerXSLFile msdt:dt="string"></mso:CrawlerXSLFile><mso:ManagedPropertyMapping msdt:dt="string">'AboutMe':'AboutMe','AccountName':'AccountName','BaseOfficeLocation':'BaseOfficeLocation','Department':'Department','HitHighlightedProperties':'HitHighlightedProperties','Interests':'Interests','JobTitle':'JobTitle','Organization':'Organization','LastModifiedTime':'LastModifiedTime','Memberships':'Memberships','PastProjects':'PastProjects','Path':'Path','PictureURL':'PictureURL','PreferredName':'PreferredName','Responsibilities':'Responsibilities','Schools':'Schools','ServiceApplicationID':'ServiceApplicationID','SipAddress':'SipAddress','Skills':'Skills','UserProfile_GUID':'UserProfile_GUID','WorkEmail':'WorkEmail','OfficeNumber':'OfficeNumber','OfficeLocator':'OfficeLocator','WorkPhone':'WorkPhone','MobilePhone':'MobilePhone','HomePhone':'HomePhone','WorkId':'WorkId','YomiDisplayName':'YomiDisplayName'</mso:ManagedPropertyMapping><mso:HtmlDesignStatusAndPreview msdt:dt="string">https://uif.sharepoint.com/search/_catalogs/masterpage/Display%20Templates/Search/UIF_Item_Person.html, Conversion successful.</mso:HtmlDesignStatusAndPreview><mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded><mso:HtmlDesignPreviewUrl msdt:dt="string"></mso:HtmlDesignPreviewUrl></mso:CustomDocumentProperties></xml><![endif]--></head><body><div id="Item_Person"><!--#_
if(!$isNull(ctx.CurrentItem) && !$isNull(ctx.ClientControl)){
var id = ctx.ClientControl.get_nextUniqueId();
var itemId = id + Srch.U.Ids.item;
var hoverId = id + Srch.U.Ids.hover;
$setResultItem(itemId, ctx.CurrentItem);
var container_id = id + "_peopleContainer";
var hhProps = Srch.U.createXMLDocument("<root>" + ctx.CurrentItem.HitHighlightedProperties + "</root>");
var encodedPath = $urlHtmlEncode(ctx.CurrentItem.Path);
var has_pn = !$isEmptyString(ctx.CurrentItem.PreferredName);
var has_sip = !$isEmptyString(ctx.CurrentItem.SipAddress);
var has_email = !$isEmptyString(ctx.CurrentItem.WorkEmail);
var has_onumber = !$isEmptyString(ctx.CurrentItem.OfficeNumber);
var has_bolocation = !$isEmptyString(ctx.CurrentItem.BaseOfficeLocation);
var has_olocator = !$isEmptyString(ctx.CurrentItem.OfficeLocator);
var has_wphone = !$isEmptyString(ctx.CurrentItem.WorkPhone);
var has_mphone = !$isEmptyString(ctx.CurrentItem.MobilePhone);
var has_hphone = !$isEmptyString(ctx.CurrentItem.HomePhone);
var has_jt = !$isEmptyString(ctx.CurrentItem.JobTitle);
var has_dp = !$isEmptyString(ctx.CurrentItem.Department);
var has_org = !$isEmptyString(ctx.CurrentItem.Organization);
var has_abme = !$isEmptyString(ctx.CurrentItem.AboutMe);
var has_resp = !$isEmptyString(ctx.CurrentItem.Responsibilities);
var has_pp = !$isEmptyString(ctx.CurrentItem.PastProjects);
var has_ski = !$isEmptyString(ctx.CurrentItem.Skills);
var has_sch = !$isEmptyString(ctx.CurrentItem.Schools);
var has_int = !$isEmptyString(ctx.CurrentItem.Interests);
var has_vlm = !$isEmptyString(ctx.CurrentItem.ProfileViewsLastMonth);
var has_vlw = !$isEmptyString(ctx.CurrentItem.ProfileViewsLastWeek);
var has_query = !$isEmptyString(ctx.CurrentItem.ProfileQueriesFoundYou);
var isSelfSrch = (has_vlm == true || has_vlw == true || has_query == true);
var delimiter = "";
var userPersonaId = $htmlEncode(id) + "_peopleUserPersona";
var uSip = ctx.CurrentItem.SipAddress;
var uEmail = ctx.CurrentItem.WorkEmail;
var uName = ctx.CurrentItem.PreferredName;
var uPicUrl = ctx.CurrentItem.PictureURL;
var hoverUrl = "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_Person_HoverPanel.js";
_#--><div id="_#= $htmlEncode(container_id) =#_" class="ms-srch-people-outerContainer ms-srch-resultHover"><div id="_#= $htmlEncode(itemId) =#_" name="Item" class="ms-srch-people-item" onmouseover="EnsureScriptParams('SearchUI.js', 'HP.Init', event, '_#=$scriptEncode(itemId) =#_', '_#=$scriptEncode(hoverId) =#_', '_#=$scriptEncode(hoverUrl) =#_');" onmouseout="EnsureScriptParams('SearchUI.js', 'HP.Hide');"><div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div><div id="UserPersonaContainer"><div id="UserPersona"><div id="_#= userPersonaId =#_"></div></div></div><div id="UserInfoContainer"><div id="ContactInfo"><div id="NameField"><!--#_
var encodedName = (has_pn == true) ? $htmlEncode(ctx.CurrentItem.PreferredName) : $htmlEncode(ctx.CurrentItem.YomiDisplayName);
var displayName = Srch.U.getSingleHHXMLNodeValue(hhProps, "preferredname");
if ($isEmptyString(displayName)) { displayName = encodedName }
_#--><div id="NameValue" class="ms-srch-ellipsis ms-textLarge"><a clicktype="Result" id="NameFieldLink" href="_#= encodedPath =#_" title="_#= encodedName =#_">_#= displayName =#_</a></div></div><!--#_
if(has_jt == true) {
_#--><div id="JobTitleField"><!--#_
var encodedJtitle = $htmlEncode(ctx.CurrentItem.JobTitle);
var displayJtitle = Srch.U.getSingleHHXMLNodeValue(hhProps, "jobtitle");
if ($isEmptyString(displayJtitle)) { displayJtitle = encodedJtitle }
_#--><div id="JobTitleValue" class="ms-srch-ellipsis" title="_#= encodedJtitle =#_"> _#= displayJtitle =#_ </div></div><!--#_
}
_#--><!--#_
if(has_dp == true) {
_#--><div id="DepartmentField"><!--#_
var encodedDept = $htmlEncode(ctx.CurrentItem.Department);
var displayDept = Srch.U.getSingleHHXMLNodeValue(hhProps, "department");
if ($isEmptyString(displayDept)) { displayDept = encodedDept }
_#--><div id="DepartmentValue" class="ms-srch-ellipsis" title="_#= encodedDept =#_"> _#= displayDept =#_ </div></div><!--#_
}
_#--><!--#_
if(has_org == true) {
_#--><div id="Organization"><!--#_
var encodedorg = $htmlEncode(ctx.CurrentItem.Organization);
var displayorg = Srch.U.getSingleHHXMLNodeValue(hhProps, "Organization");
if ($isEmptyString(displayorg)) { displayorg = encodedorg }
_#--><div id="OrganizationValue" class="ms-srch-ellipsis" title="_#= encodedorg =#_"> _#= displayorg =#_ </div></div><!--#_
}
_#--><!--#_
if(has_olocator == true) {
_#--><div id="OfficeLocator"><!--#_
var encodedolocator = $htmlEncode(ctx.CurrentItem.OfficeLocator);
var displayolocator = Srch.U.getSingleHHXMLNodeValue(hhProps, "OfficeLocator");
if ($isEmptyString(displayolocator)) { displayolocator = encodedolocator }
_#--><div id="OfficeLocatorValue" class="ms-srch-ellipsis" title="_#= encodedolocator =#_"> <b>Office Locator:</b> <a clicktype="Result" id="NameFieldLink" href="_#= ctx.CurrentItem.OfficeLocator =#_">_#= ctx.CurrentItem.OfficeNumber =#_</a></div></div><!--#_
}
_#--><!--#_
if(has_bolocation == true) {
_#--><div id="OfficeBaseLocation"><!--#_
var encodedbolocation = $htmlEncode(ctx.CurrentItem.BaseOfficeLocation);
var displaybolocation = Srch.U.getSingleHHXMLNodeValue(hhProps, "BaseOfficeLocation");
if ($isEmptyString(displaybolocation)) { displaybolocation = encodedbolocation }
_#--><div id="BaseOfficeLocationValue" class="ms-srch-ellipsis" title="_#= encodedbolocation =#_"> <b>Office Location:</b> _#= displaybolocation =#_ </div></div><!--#_
}
_#--><!--#_
if(has_wphone == true) {
_#--><div id="WorkPhone"><!--#_
var encodedwphone = $htmlEncode(ctx.CurrentItem.WorkPhone);
var displaywphone = Srch.U.getSingleHHXMLNodeValue(hhProps, "WorkPhone");
if ($isEmptyString(displaywphone)) { displaywphone = encodedwphone }
_#--><div id="WorkPhoneValue" class="ms-srch-ellipsis" title="_#= encodedwphone =#_"> <b>Office Phone:</b> _#= displaywphone =#_ </div></div><!--#_
}
_#--><!--#_
if(has_mphone == true) {
_#--><div id="MobilePhone"><!--#_
var encodedmphone = $htmlEncode(ctx.CurrentItem.MobilePhone);
var displaymphone = Srch.U.getSingleHHXMLNodeValue(hhProps, "MobilePhone");
if ($isEmptyString(displaymphone)) { displaymphone = encodedmphone }
_#--><div id="MobilePhoneValue" class="ms-srch-ellipsis" title="_#= encodedmphone =#_"> <b>Mobile Phone:</b> _#= displaymphone =#_ </div></div><!--#_
}
_#--><!--#_
if(has_hphone == true) {
_#--><div id="HomePhone"><!--#_
var encodedhphone = $htmlEncode(ctx.CurrentItem.HomePhone);
var displayhphone = Srch.U.getSingleHHXMLNodeValue(hhProps, "HomePhone");
if ($isEmptyString(displayhphone)) { displayhphone = encodedhphone }
_#--><div id="HomePhoneValue" class="ms-srch-ellipsis" title="_#= encodedhphone =#_"> <b>Home Phone:</b> _#= displayhphone =#_ </div></div><!--#_
}
_#--></div><!--#_
if(has_resp == true || has_ski == true || has_pp == true || has_int == true || has_sch == true) {
_#--><div id="MoreInfoShort"><!--#_
if(has_resp == true) {
var encodedVal = Srch.U.getMultipleHHXMLNodeValues(hhProps, "responsibilities", 3, delimiter);
if (Srch.U.e(encodedVal)) { encodedVal = $htmlEncode(Srch.U.getUnEncodedMultiValuedResults(ctx.CurrentItem.Responsibilities, 3, delimiter))}
if (!Srch.U.e(encodedVal)) {
_#--><div id="ResponsibilitiesValue" class="ms-srch-ellipsis"><span id="FieldTitle" class="ms-soften"> _#= $htmlEncode(Srch.Res.item_People_Responsibilities) =#_ </span>
_#= encodedVal =#_</div><!--#_
}
_#--><!--#_
} else if(has_ski == true) {
var encodedVal = Srch.U.getMultipleHHXMLNodeValues(hhProps, "skills", 3, delimiter);
if (Srch.U.e(encodedVal)) { encodedVal = $htmlEncode(Srch.U.getUnEncodedMultiValuedResults(ctx.CurrentItem.Skills, 3, delimiter))}
if (!Srch.U.e(encodedVal)) {
_#--><div id="SkillsValue" class="ms-srch-ellipsis"><span id="FieldTitle" class="ms-soften"> _#= $htmlEncode(Srch.Res.item_People_Skills) =#_ </span>
_#= encodedVal =#_</div><!--#_
}
_#--><!--#_
} else if(has_pp == true) {
var encodedVal = Srch.U.getMultipleHHXMLNodeValues(hhProps, "pastprojects", 3, delimiter);
if (Srch.U.e(encodedVal)) { encodedVal = $htmlEncode(Srch.U.getUnEncodedMultiValuedResults(ctx.CurrentItem.PastProjects, 3, delimiter))}
if (!Srch.U.e(encodedVal)) {
_#--><div id="PastProjectsValue" class="ms-srch-ellipsis"><span id="FieldTitle" class="ms-soften"> _#= $htmlEncode(Srch.Res.item_People_PastProjects) =#_ </span>
_#= encodedVal =#_</div><!--#_
}
_#--><!--#_
} else if(has_int == true) {
var encodedVal = Srch.U.getMultipleHHXMLNodeValues(hhProps, "interests", 3, delimiter);
if (Srch.U.e(encodedVal)) { encodedVal = $htmlEncode(Srch.U.getUnEncodedMultiValuedResults(ctx.CurrentItem.Interests, 3, delimiter))}
if (!Srch.U.e(encodedVal)) {
_#--><div id="InterestsValue" class="ms-srch-ellipsis"><span id="FieldTitle" class="ms-soften"> _#= $htmlEncode(Srch.Res.item_People_Interests) =#_ </span>
_#= encodedVal =#_</div><!--#_
}
_#--><!--#_
} else if(has_sch == true){
var encodedVal = Srch.U.getMultipleHHXMLNodeValues(hhProps, "schools", 3, delimiter);
if (Srch.U.e(encodedVal)) { encodedVal = $htmlEncode(Srch.U.getUnEncodedMultiValuedResults(ctx.CurrentItem.Schools, 3, delimiter))}
if (!Srch.U.e(encodedVal)) {
_#--><div id="SchoolsValue" class="ms-srch-ellipsis"><span id="FieldTitle" class="ms-soften"> _#= $htmlEncode(Srch.Res.item_People_Schools) =#_ </span>
_#= encodedVal =#_</div><!--#_
}
_#--><!--#_
}
_#--></div><!--#_
}
_#--><!--#_
if(has_abme == true || has_ski == true || has_pp == true || has_int == true) {
_#--><div id="MoreInfoLong"><!--#_
if(has_abme == true) {
var encodedVal = Srch.U.getTrimmedProcessedHHXMLString(Srch.U.getSingleHHXMLNodeValue(hhProps, "aboutme"), 125);
if (Srch.U.e(encodedVal)) { encodedVal = $htmlEncode(Srch.U.getTrimmedString(ctx.CurrentItem.AboutMe, 125)) }
if (!Srch.U.e(encodedVal)) {
_#-->
_#= encodedVal =#_<!--#_
}
_#--><!--#_
} else if(has_ski == true && has_resp == true) {
var encodedVal = Srch.U.getTrimmedProcessedHHXMLString(Srch.U.getMultipleHHXMLNodeValues(hhProps, "skills", 3, delimiter), 125);
if (Srch.U.e(encodedVal)) { encodedVal = $htmlEncode(Srch.U.getTrimmedString(Srch.U.getUnEncodedMultiValuedResults(ctx.CurrentItem.Skills, 3, delimiter), 125)) }
if (!Srch.U.e(encodedVal)) {
_#--><span id="FieldTitle" class="ms-soften"> _#= $htmlEncode(Srch.Res.item_People_Skills) =#_ </span>
_#= encodedVal =#_<!--#_
}
_#--><!--#_
} else if(has_pp == true && (has_ski == true || has_resp == true)) {
var encodedVal = Srch.U.getTrimmedProcessedHHXMLString(Srch.U.getMultipleHHXMLNodeValues(hhProps, "pastprojects", 3, delimiter), 125);
if (Srch.U.e(encodedVal)) { encodedVal = $htmlEncode(Srch.U.getTrimmedString(Srch.U.getUnEncodedMultiValuedResults(ctx.CurrentItem.PastProjects, 3, delimiter), 125)) }
if (!Srch.U.e(encodedVal)) {
_#--><span id="FieldTitle" class="ms-soften"> _#= $htmlEncode(Srch.Res.item_People_PastProjects) =#_ </span>
_#= encodedVal =#_<!--#_
}
_#--><!--#_
} else if(has_int == true && (has_pp == true || has_ski == true || has_resp == true)) {
var encodedVal = Srch.U.getTrimmedProcessedHHXMLString(Srch.U.getMultipleHHXMLNodeValues(hhProps, "interests", 3, delimiter), 125);
if (Srch.U.e(encodedVal)) { encodedVal = $htmlEncode(Srch.U.getTrimmedString(Srch.U.getUnEncodedMultiValuedResults(ctx.CurrentItem.Interests, 3, delimiter), 125)) }
if (!Srch.U.e(encodedVal)) {
_#--><span id="FieldTitle" class="ms-soften"> _#= $htmlEncode(Srch.Res.item_People_Interests) =#_ </span>
_#= encodedVal =#_<!--#_
}
_#--><!--#_
}
_#--></div><!--#_
}
_#--><!--#_
if(isSelfSrch == true) {
_#--><hr class="ms-srch-people-item-separator" /><div id="SelfSearchInfo"><div id="Heading"><a id="EditProfileLink" href="_#= $urlHtmlEncode(ctx.CurrentItem.EditProfileUrl) =#_"> _#= $htmlEncode(Srch.Res.item_People_EditProfileLink) =#_ </a></div><div id="Frequency"><span id="FieldTitle" class="ms-soften"> _#= $htmlEncode(Srch.Res.item_People_SelfSearchFrequency) =#_ </span><ul id="FrequencyCard"><li id="MonthlyViews"><!--#_
var encodedVal = (ctx.CurrentItem.ProfileViewsLastMonth == 1) ? $htmlEncode(String.format(Srch.Res.item_People_SelfSearchFrequency_ViewsMonths_Singular, ctx.CurrentItem.ProfileViewsLastMonth)) :
$htmlEncode(String.format(Srch.Res.item_People_SelfSearchFrequency_ViewsMonths_Plural, ctx.CurrentItem.ProfileViewsLastMonth));
_#-->
_#= encodedVal =#_</li><li id="DailyViews"><!--#_
var encodedVal = (ctx.CurrentItem.ProfileViewsLastWeek == 1) ? $htmlEncode(String.format(Srch.Res.item_People_SelfSearchFrequency_ViewsWeeks_Singular, ctx.CurrentItem.ProfileViewsLastWeek)) :
$htmlEncode(String.format(Srch.Res.item_People_SelfSearchFrequency_ViewsWeeks_Plural, ctx.CurrentItem.ProfileViewsLastWeek));
_#-->
_#= encodedVal =#_</li></ul></div><!--#_
if(has_query == true) {
_#--><div id="Keywords"><span id="FieldTitle" class="ms-soften"> _#= $htmlEncode(Srch.Res.item_People_SelfSearchKeywords) =#_ </span><!--#_
var encodedVal = $htmlEncode(Srch.U.getTrimmedString(Srch.U.getUnEncodedMultiValuedResults(ctx.CurrentItem.ProfileQueriesFoundYou, 5, delimiter), 84));
if (!Srch.U.e(encodedVal)) {
_#-->
_#= encodedVal =#_<!--#_
}
_#--></div><!--#_
}
_#--><!--#_
if(!Srch.U.n(ctx.CurrentItem.LastModifiedTime))
{
var lastModifiedTime = ctx.CurrentItem.LastModifiedTime;
var encodedLastModifiedTimeId = $htmlEncode(id + "_lastModifiedTime");
AddPostRenderCallback(ctx, function()
{
Srch.U.renderFriendlyTimeIntervalString(lastModifiedTime, encodedLastModifiedTimeId);
});
_#--><div id="LastModifiedTime"><span class="ms-textSmall">_#= $htmlEncode(Srch.Res.item_People_LastModified) =#_</span><span id="_#= encodedLastModifiedTimeId =#_" class="ms-textSmall ms-srch-ellipsis"></span></div><!--#_
}
_#--></div><!--#_
}
_#--></div></div></div><!--#_
AddPostRenderCallback(ctx, function(){
EnsureScriptFunc("clienttemplates.js", "RenderUserFieldWorker", function() {
var getUserPersona = function() {
var renderCtx = new ContextInfo();
renderCtx.Templates = {};
renderCtx.Templates["Fields"] = {};
var fieldSchemaData = { "PictureOnly":"1", "PictureSize": "Size_72px"};
var listSchema = {"EffectivePresenceEnabled": "1", "PresenceAlt": Srch.Res.item_People_NoPresenceAvailable};
var userData = {"title": uName, "email": uEmail, "picture": uPicUrl, "sip": uSip};
var personaControlElement = document.getElementById(userPersonaId);
if (!Srch.U.n(personaControlElement))
{
personaControlElement.innerHTML = RenderUserFieldWorker(renderCtx, fieldSchemaData, userData, listSchema);
}
if(typeof(ctx.EnqueueImnRequest) == "undefined") { ctx.EnqueueImnRequest = false; }
if (ctx.EnqueueImnRequest == false) {
ctx.ClientControl.add_oneTimeResultRendered(function(){ if (typeof(ProcessImn) != "undefined") { ProcessImn(); } });
ctx.EnqueueImnRequest = true;
}
};
getUserPersona();
});
});
_#--><!--#_
}
_#--></div></body></html>
I'm not a developer, so please keep that in mind. I do appreciate any help. Thanks!