SOLVED

Custom display and hover panel SP 2016

%3CLINGO-SUB%20id%3D%22lingo-sub-183307%22%20slang%3D%22en-US%22%3ECustom%20display%20and%20hover%20panel%20SP%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-183307%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20attempting%20to%20modify%20the%20advanced%20search%20results%20page.%20I%20want%20to%20remove%20some%20things%20from%20the%20result%20and%20add%20other%20metadata%20to%20that%20portion.%20I%20also%20want%20to%20open%20a%20preview%20of%20the%20PDF%20files%20that%20are%20in%20the%20result%20set%20when%20you%20hover%20over.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAll%20examples%20of%20this%20are%20for%202013%20and%20i%20have%20issues%20making%20them%20work.%3C%2FP%3E%3CP%3EFirst%20I%20do%20not%20see%20the%20js%20files%20and%20HTML%20files%20in%20the%20same%20location%20when%20I%20open%20SharePoint%20designer.%3C%2FP%3E%3CP%3ESecond%20every%20example%20says%20that%20if%20i%20create%20the%20HTML%20file%20it%20will%20create%20the%20JS%20files%20automatically%20I%20have%20not%20found%20that%20to%20be%20the%20case%20either.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20there%20an%20example%20for%20SP2016%20that%20works%3F%20Am%20I%20missing%20something%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you%20in%20advance!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-186481%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20display%20and%20hover%20panel%20SP%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-186481%22%20slang%3D%22en-US%22%3Eyes%20this%20solved%20the%20issue%20thank%20you!%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-185128%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20display%20and%20hover%20panel%20SP%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-185128%22%20slang%3D%22en-US%22%3E%3CP%3EDid%20you%20check%20if%20the%20publishing%20features%20are%20activated%20on%20Site%20Collection%20and%20Web%20%2F%20Site%20level%3F%3C%2FP%3E%3CP%3EWhen%20those%20are%20not%20activated%20the%20HTML-Files%20are%20usually%20missing.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20you%20do%20not%20want%20to%20activate%20publishing%20features%20on%20this%20site%20you%20can%20create%20a%20Dev-Site%20with%20activated%20Publishing-Features%20and%20create%20your%20display%20templates%20via%20HTML-Templates%20there.%20Afterwards%20you%20can%20copy%20the%20.js%20file%20to%20the%20target%20site.%20Probably%20not%20a%20best%20practice%20but%20it%20works.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20those%20features%20are%20currently%20not%20active%2C%20I'm%20curious%20how%20you%20got%20into%20the%20Design%20Manager%20as%20these%20links%20are%20also%20only%20shown%20if%20publishing%20is%20activated.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-184936%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20display%20and%20hover%20panel%20SP%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-184936%22%20slang%3D%22en-US%22%3E%3CP%3EI%20do%20not%20think%20that%20this%20link%20is%20applicable%20to%20the%20master%20pages%20library%20where%20search%20display%20templates%20reside..%20I%20do%20not%20have%20those%20options......%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20800px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F32620i445B88F20FB3FA0E%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22do%20not%20have%20that%20option.png%22%20title%3D%22do%20not%20have%20that%20option.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-184808%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20display%20and%20hover%20panel%20SP%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-184808%22%20slang%3D%22en-US%22%3E%3CP%3EHere's%20how%20you%20publish%20a%20major%20version%20of%20the%20file.%20Please%20try%20below.%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fsupport.office.com%2Fen-us%2Farticle%2Fpublish-or-unpublish-a-version-of-a-file-8766f85c-350d-46f3-9a80-42de99aff610%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsupport.office.com%2Fen-us%2Farticle%2Fpublish-or-unpublish-a-version-of-a-file-8766f85c-350d-46f3-9a80-42de99aff610%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-184274%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20display%20and%20hover%20panel%20SP%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-184274%22%20slang%3D%22en-US%22%3E%3CP%3EI%20do%20not%20see%20any%20commands%20to%20publish....%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20using%26nbsp%3BSharePoint%202016%2C%20and%20SharePoint%20Designer%3C%2FP%3E%3CBLOCKQUOTE%3E%3CHR%20%2F%3E%3C%2FBLOCKQUOTE%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-184268%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20display%20and%20hover%20panel%20SP%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-184268%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%3EDid%20you%20publish%20the%20HTML%20version%3F%20once%20the%20HTML%20file%20gets%20published%2C%20the%20engine%20will%20automatically%20generate%20the%20associated%26nbsp%3B%20JavaScript%20file.%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-184264%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20display%20and%20hover%20panel%20SP%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-184264%22%20slang%3D%22en-US%22%3E%3CP%3EI%20dropped%20the%20HTML%20file%20in%20_catalogs%2FMasterpage%2FDisplay%20Templates%2FSearch%3C%2FP%3E%3CP%3Eopened%20the%20web%20UI%20and%20saw%20it%20existed%26nbsp%3B%3CSPAN%3Ethen%20edited%20properties%20clicked%20ok%20(only%20thing%20changed%20is%20template%20level%20was%20not%20set%20so%20I%20selected%20Item)%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3ENo%20JS%20files%20created%20anywhere.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20782px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F32537iAB7D5FF7CDBF9D88%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22displaytemplatessearch.png%22%20title%3D%22displaytemplatessearch.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EUnder%20Master%20pages%20from%20top%20site%20settings%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20656px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F32536iB6E1B375E5371166%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22master1.png%22%20title%3D%22master1.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EProperties%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20661px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F32538i66E4CA4A1993809E%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22master2.png%22%20title%3D%22master2.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3ESecond%20Properties%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3Ethen%20edited%20properties%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-184232%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20display%20and%20hover%20panel%20SP%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-184232%22%20slang%3D%22en-US%22%3E%3CP%3ETry%20going%20to%20web%20UI%20edit%20properties%20of%20html%20file%20set%20appropriate%20properties%20and%20check%20in%20and%20it%20should%20create%20a%20js%20file.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-184224%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20display%20and%20hover%20panel%20SP%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-184224%22%20slang%3D%22en-US%22%3E%3CP%3EI%20can%20now%20drop%20files%20into%20the%20mapped%20location.%20However%20when%20I%20drop%20an%20HTML%20file%20into%20the%26nbsp%3Bnetwork%20location%3A%5C%5Cdrmspdev001%4080%5C_catalogs%5Cmasterpage%5CDisplay%20Templates%5CSearch%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Edoes%20not%20create%20any%20.js%20files..%20as%20the%20document%20states%20should%20happen%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-184122%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20display%20and%20hover%20panel%20SP%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-184122%22%20slang%3D%22en-US%22%3E%3CP%3EI%20did%20yes%20and%20that%20was%20my%20result%2C%20i%20can%20not%20map%20the%20drive%20on%20the%20machine%20where%20I%20have%20access..%20i%20can%20map%20it%20from%20another%20machine%20but%20then%20i%20says%20i%20do%20not%20have%20permissions%3C%2FP%3E%3CBLOCKQUOTE%3E%3CHR%20%2F%3E%40Deleted%26nbsp%3Bwrote%3A%3CBR%20%2F%3E%3CP%3EDid%20you%20try%20instructions%20below%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fgeneral-development%2Fhow-to-map-a-network-drive-to-the-sharepoint-master-page-gallery%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fgeneral-development%2Fhow-to-map-a-network-drive-to-the-sharepoint-master-page-gallery%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CHR%20%2F%3E%3C%2FBLOCKQUOTE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-183875%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20display%20and%20hover%20panel%20SP%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-183875%22%20slang%3D%22en-US%22%3E%3CP%3EDid%20you%20try%20instructions%20below%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fgeneral-development%2Fhow-to-map-a-network-drive-to-the-sharepoint-master-page-gallery%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fgeneral-development%2Fhow-to-map-a-network-drive-to-the-sharepoint-master-page-gallery%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-183867%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20display%20and%20hover%20panel%20SP%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-183867%22%20slang%3D%22en-US%22%3E%3CP%3EThank%20you%20for%20the%20reply.%20I%20attempted%20to%20map%20the%20network%20drive%20but%20get%20the%20following%20error%3A%3C%2FP%3E%3CP%3EI%20am%20doing%20this%20on%20the%20same%20box%20that%20sharepoint%20is%20installed%20and%20I%20am%20admin%20on%20that%20box.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F32465i2F54DDBCB5F685EE%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22map%20network%20drive.png%22%20title%3D%22map%20network%20drive.png%22%20%2F%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20537px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F32466i1AB28B6A10C71DEA%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22map%20error.png%22%20title%3D%22map%20error.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-183587%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20display%20and%20hover%20panel%20SP%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-183587%22%20slang%3D%22en-US%22%3E%3CP%3ECan%20you%20take%20a%20look%20at%20article%20below.%20Hope%20this%20helps%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fadministration%2Fstage-11-upload-and-apply-display-templates-to-the-content-search-web-part%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fadministration%2Fstage-11-upload-and-apply-display-templates-to-the-content-search-web-part%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

I am attempting to modify the advanced search results page. I want to remove some things from the result and add other metadata to that portion. I also want to open a preview of the PDF files that are in the result set when you hover over.

 

All examples of this are for 2013 and i have issues making them work.

First I do not see the js files and HTML files in the same location when I open SharePoint designer.

Second every example says that if i create the HTML file it will create the JS files automatically I have not found that to be the case either.

 

Is there an example for SP2016 that works? Am I missing something?

 

Thank you in advance!

13 Replies
Highlighted
Highlighted

Thank you for the reply. I attempted to map the network drive but get the following error:

I am doing this on the same box that sharepoint is installed and I am admin on that box.

 

 

map network drive.pngmap error.png

Highlighted
Highlighted

I did yes and that was my result, i can not map the drive on the machine where I have access.. i can map it from another machine but then i says i do not have permissions


@Deleted wrote:

Did you try instructions below?

 

https://docs.microsoft.com/en-us/sharepoint/dev/general-development/how-to-map-a-network-drive-to-the-sharepoint-master-page-gallery

 

 


 

Highlighted

I can now drop files into the mapped location. However when I drop an HTML file into the network location:\\drmspdev001@80\_catalogs\masterpage\Display Templates\Search

 

does not create any .js files.. as the document states should happen

Highlighted

Try going to web UI edit properties of html file set appropriate properties and check in and it should create a js file.

Highlighted

I dropped the HTML file in _catalogs/Masterpage/Display Templates/Search

opened the web UI and saw it existed then edited properties clicked ok (only thing changed is template level was not set so I selected Item)

 

No JS files created anywhere.

 

 

Under Master pages from top site settingsUnder Master pages from top site settingsPropertiesPropertiesSecond PropertiesSecond Properties

then edited properties

 

Highlighted

Did you publish the HTML version? once the HTML file gets published, the engine will automatically generate the associated  JavaScript file.

Highlighted

I do not see any commands to publish....

 

I am using SharePoint 2016, and SharePoint Designer


Highlighted
Highlighted

I do not think that this link is applicable to the master pages library where search display templates reside.. I do not have those options......

 

do not have that option.png

Highlighted
Solution

Did you check if the publishing features are activated on Site Collection and Web / Site level?

When those are not activated the HTML-Files are usually missing. 

 

If you do not want to activate publishing features on this site you can create a Dev-Site with activated Publishing-Features and create your display templates via HTML-Templates there. Afterwards you can copy the .js file to the target site. Probably not a best practice but it works.

 

If those features are currently not active, I'm curious how you got into the Design Manager as these links are also only shown if publishing is activated.

Highlighted
yes this solved the issue thank you!