How to show file icons in Filter with Other option

[vishalgoyal2472]

How to show file icons in Filter with Other option as in default SharePoint Online search

[kasperbolarsen]

This might be pretty close, https://github.com/microsoft-search/pnp-modern-search-layouts/tree/main/Refiner%2FFile%20Extensions%20icons

[vishalgoyal2472]

thank you for sharing.

It does not have the same capability which Microsoft search have , Microsoft filter type has clubbed similar file type in one and rest file types in other, please see the logic below they are using, is there any plan to launch the similar feature in future release?

And if I want to contribute in this community by creating this feature how I can start, I have done small works in SPFX but I would love to contribute.

1. Word:
OR(FileType:equals("docx"),FileType:equals("doc"),FileType:equals("docm"),FileType:equals("dot"),FileType:equals("nws"),FileType:equals("dotx"))
->KQL format:
FileType:("docx" OR "doc" OR "docm" OR "dot" OR "nws" OR "dotx")

2. PowerPoint:
OR(FileType:equals("odp"),FileType:equals("ppt"),FileType:equals("pptm"),FileType:equals("pptx"),FileType:equals("potm"),FileType:equals("potx"),FileType:equals("ppam"),FileType:equals("ppsm"),FileType:equals("ppsx"))

->KQL format:
FileType:("odp" OR "ppt" OR "pptm" OR "pptx" OR "potm" OR "potx" OR "ppam" OR "ppsm")

3. Excel:
or(FileType:equals("odc"),FileType:equals("ods"),FileType:equals("xls"),FileType:equals("xlsb"),FileType:equals("xlsm"),FileType:equals("xlsx"),FileType:equals("xltm"),FileType:equals("xltx"),FileType:equals("xlam"))

->KQL format:
FileType:("odc" OR "ods" OR "xls" OR "xlsb" OR "xlsm" OR "xlsx" OR "xltm" OR "xltx" OR "xlam")

4. Visio:
or(FileType:equals("vsd"),FileType:equals("vsx"),FileType:equals("vsdx"),FileType:equals("vdw"),FileType:equals("vdx"),FileType:equals("vss"),FileType:equals("vssx"),FileType:equals("vssm"),FileType:equals("vsdm"),FileType:equals("vstx"),FileType:equals("vstm"))

->KQL format:
FileType:("vsd" OR "vsx" OR "vsdx" OR "vdw" OR "vdx" OR "vss" OR "vssx" OR "vssm" OR "vsdm" OR "vstx" OR "vstm")

5. OneNote:
FileType:equals("one")
->format: FileType:"one"

6. Pdf:
FileType:equals("pdf")
->KQL format: FileType:"pdf"

7. Loop:
or(FileType:equals("loop"),FileType:equals("fluid"))
->KQL format:
FileType:("loop" OR "fluid")

8. Photo:
or(FileType:equals("bmp"),FileType:equals("jpeg"),FileType:equals("png"),FileType:equals("tiff"),FileType:equals("gif"),FileType:equals("rle"),FileType:equals("wmf"),FileType:equals("dib"),FileType:equals("ico"),FileType:equals("wpd"),FileType:equals("odg"))

->KQL format:
FileType:("bmp" OR "jpeg" OR "png" OR "tiff" OR "gif" OR "rle" OR "wmf" OR "dib" OR "ico" OR "wpd" OR "odg")

9. Web page:
or(FileType:equals("HTML"),FileType:equals("MHTML"),FileType:equals("ASPX"))

->KQL format:
FileType:("HTML" OR "MHTML" OR "ASPX")

10. Video:
->KQL Format:
FileType:("wmv" OR "avi" OR "mpg" OR "asf" OR "mp4" OR "ogg" OR "ogv" OR "webm" OR "mov" OR "g2" OR "3gp" OR "3gpp" OR "m2ts" OR "m4a" OR "mkv" OR "mp4v" OR "mts" OR "ts" OR "wav" OR "wma")

11. Others(This is very expensive query):
->KQL format
NOT (FileType:("docx" OR "doc" OR "docm" OR "dot" OR "nws" OR "dotx" OR "odp" OR "ppt" OR "pptm" OR "pptx" OR "potm" OR "potx" OR "ppam" OR "ppsm" OR "odc" OR "ods" OR "xls" OR "xlsb" OR "xlsm" OR "xlsx" OR "xltm" OR "xltx" OR "xlam" OR "vsd" OR "vsx" OR "vsdx" OR "vdw" OR "vdx" OR "vss" OR "vssx" OR "vssm" OR "vsdm" OR "vstx" OR "vstm" OR "one" OR "pdf" OR "loop" OR "fluid" OR "bmp" OR "jpeg" OR "png" OR "tiff" OR "gif" OR "rle" OR "wmf" OR "dib" OR "ico" OR "wpd" OR "odg" OR "HTML" OR "MHTML" OR "ASPX" OR "wmv" OR "avi" OR "mpg" OR "asf" OR "mp4" OR "ogg" OR "ogv" OR "webm" OR "mov" OR "g2" OR "3gp" OR "3gpp" OR "m2ts" OR "m4a" OR "mkv" OR "mp4v" OR "mts" OR "ts" OR "wav" OR "wma"))

[kasperbolarsen]

If the current sample doesn't live up to your expectations or the clients requirements, it will be up to you to create a new layout. We would love to receive a PR with an updated layout. The current one, linked above, was something I made by request of my employer, and as far as I know there are no plans to expand it. SPFx skills will unfortunately not be much use, as layouts are using Handlebars, HTML and CSS Den tors. 21. nov. 2024 kl. 08.00 skrev vishalgoyal2472 < ***@***.***>:

…

thank you for sharing. It does not have the same capability which Microsoft search have , Microsoft filter type has clubbed similar file type in one and rest file types in other, please see the logic below they are using, is there any plan to launch the similar feature in future release? *And if I want to contribute in this community by creating this feature how I can start, I have done small works in SPFX but I would love to contribute.* *1. Word:* OR(FileType:equals("docx"),FileType:equals("doc"),FileType:equals("docm"),FileType:equals("dot"),FileType:equals("nws"),FileType:equals("dotx")) ->KQL format: FileType:("docx" OR "doc" OR "docm" OR "dot" OR "nws" OR "dotx") *2. PowerPoint:* OR(FileType:equals("odp"),FileType:equals("ppt"),FileType:equals("pptm"),FileType:equals("pptx"),FileType:equals("potm"),FileType:equals("potx"),FileType:equals("ppam"),FileType:equals("ppsm"),FileType:equals("ppsx")) ->KQL format: FileType:("odp" OR "ppt" OR "pptm" OR "pptx" OR "potm" OR "potx" OR "ppam" OR "ppsm") *3. Excel:* or(FileType:equals("odc"),FileType:equals("ods"),FileType:equals("xls"),FileType:equals("xlsb"),FileType:equals("xlsm"),FileType:equals("xlsx"),FileType:equals("xltm"),FileType:equals("xltx"),FileType:equals("xlam")) ->KQL format: FileType:("odc" OR "ods" OR "xls" OR "xlsb" OR "xlsm" OR "xlsx" OR "xltm" OR "xltx" OR "xlam") *4. Visio:* or(FileType:equals("vsd"),FileType:equals("vsx"),FileType:equals("vsdx"),FileType:equals("vdw"),FileType:equals("vdx"),FileType:equals("vss"),FileType:equals("vssx"),FileType:equals("vssm"),FileType:equals("vsdm"),FileType:equals("vstx"),FileType:equals("vstm")) ->KQL format: FileType:("vsd" OR "vsx" OR "vsdx" OR "vdw" OR "vdx" OR "vss" OR "vssx" OR "vssm" OR "vsdm" OR "vstx" OR "vstm") *5. OneNote:* FileType:equals("one") ->format: FileType:"one" *6. Pdf:* FileType:equals("pdf") ->KQL format: FileType:"pdf" *7. Loop:* or(FileType:equals("loop"),FileType:equals("fluid")) ->KQL format: FileType:("loop" OR "fluid") *8. Photo:* or(FileType:equals("bmp"),FileType:equals("jpeg"),FileType:equals("png"),FileType:equals("tiff"),FileType:equals("gif"),FileType:equals("rle"),FileType:equals("wmf"),FileType:equals("dib"),FileType:equals("ico"),FileType:equals("wpd"),FileType:equals("odg")) ->KQL format: FileType:("bmp" OR "jpeg" OR "png" OR "tiff" OR "gif" OR "rle" OR "wmf" OR "dib" OR "ico" OR "wpd" OR "odg") *9. Web page:* or(FileType:equals("HTML"),FileType:equals("MHTML"),FileType:equals("ASPX")) ->KQL format: FileType:("HTML" OR "MHTML" OR "ASPX") *10. Video:* ->KQL Format: FileType:("wmv" OR "avi" OR "mpg" OR "asf" OR "mp4" OR "ogg" OR "ogv" OR "webm" OR "mov" OR "g2" OR "3gp" OR "3gpp" OR "m2ts" OR "m4a" OR "mkv" OR "mp4v" OR "mts" OR "ts" OR "wav" OR "wma") *11. Others(This is very expensive query):* ->KQL format NOT (FileType:("docx" OR "doc" OR "docm" OR "dot" OR "nws" OR "dotx" OR "odp" OR "ppt" OR "pptm" OR "pptx" OR "potm" OR "potx" OR "ppam" OR "ppsm" OR "odc" OR "ods" OR "xls" OR "xlsb" OR "xlsm" OR "xlsx" OR "xltm" OR "xltx" OR "xlam" OR "vsd" OR "vsx" OR "vsdx" OR "vdw" OR "vdx" OR "vss" OR "vssx" OR "vssm" OR "vsdm" OR "vstx" OR "vstm" OR "one" OR "pdf" OR "loop" OR "fluid" OR "bmp" OR "jpeg" OR "png" OR "tiff" OR "gif" OR "rle" OR "wmf" OR "dib" OR "ico" OR "wpd" OR "odg" OR "HTML" OR "MHTML" OR "ASPX" OR "wmv" OR "avi" OR "mpg" OR "asf" OR "mp4" OR "ogg" OR "ogv" OR "webm" OR "mov" OR "g2" OR "3gp" OR "3gpp" OR "m2ts" OR "m4a" OR "mkv" OR "mp4v" OR "mts" OR "ts" OR "wav" OR "wma")) — Reply to this email directly, view it on GitHub <#4114 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE5DXIVCKYFEJPEG5Q7QDOD2BWAIJAVCNFSM6AAAAABSEWFHWCVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMZTGI3TKMQ> . You are receiving this because you commented.Message ID: <microsoft-search/pnp-modern-search/repo-discussions/4114/comments/11332752 @github.com>

-- Med venlig hilsen/ Best regards Kasper Bo Larsen

[vishalgoyal2472]

If I need to merge your one in our solution , Do I need to add it in spfx solution I downloaded or it can be configured in Filter webpart itself.

[vishalgoyal2472]

I got it, It need to be merged in Filter webpart layout.

Thank you very much!!

[kasperbolarsen]

It is super easy to customize the layouts
https://microsoft-search.github.io/pnp-modern-search/create-custom-layouts/

In this case, you can either copy the html file content into the "Edit filters template", replacing the existing one ( you will most likely have to adjust the Slot setting, if the layout is using some Slots that is not the default ones). The alternative, with I recommend, is to save the HTML file on the tenant and just insert the true URL to the file as below:

This might be useful too: https://www.m365thinking.com/post/work-with-your-handlebar-based-layouts-in-an-interactive-way

[vishalgoyal2472]

I need to show icons in combo box dropdown, your solution is designed for checkbox.

[kasperbolarsen]

As far as I know there are no samples available for icons in the text fields within a combobox, and you will have to look into whether that is possible at all with the react control we are using.
Based on the number of questions and issue you have raised recently, I'll recommend adjusting your requirements or building your own webpart from scratch if the customer requirements are fixed.

[vishalgoyal2472]

I tried to modify like below, its showing text '22_testing' but not showing file icon, I tried same pnp-icon at other places and its showing file icon correctly,
Anything I am missing here?

<pnp-filtercombobox data-instance-id="{{@root.instanceId}}" data-filter-name="{{filter.filterName}}" data-is-multi="{{filter.isMulti}}" data-show-count="{{filter.showCount}}" data-operator="{{filter.operator}}" data-theme-variant="{{JSONstringify @root.theme}}"> {{#each filter.values}} <option value="{{value}}" data-selected="{{selected}}" data-disabled="{{disabled}}" data-count="{{count}}"> {{name}}22_testing <pnp-iconfile data-extension="docx" data-is-container="false" data-size="32"></pnp-iconfile> <pnp-iconfile data-extension="{{name}}" data-is-container="false" data-size="32"></pnp-iconfile> </option> {{/each}} </pnp-filtercombobox>