PNP Search Filter Design

Deleted
Not applicable

Hi all,

 

I would like to change the design of the filter. Can I use CSS, React? Where exactly do I need to upload these stylesheets?

 

12B8F369-8764-4CE2-B09F-A6D93CED805D.jpeg

6 Replies

@Deleted 

 

PnP Search Filter does provide custom layout option where you can customize design for it

 

https://microsoft-search.github.io/pnp-modern-search/usage/search-filters/layouts/

 

You can take existing template as base which you can find at https://github.com/microsoft-search/pnp-modern-search/tree/main/search-parts/src/layouts/filters and then you can upload it somewhere in document library and adapt based on your requirements.


After that you can provide it in property pane as shown below

 

kalpeshvaghela_0-1677073138844.png

 


Hope it will helpful to you and if so then Please mark my response as Best Response & Like to help others in this community

Thanks very much for your answer. Also, do you know how to manage to display the name of the image?

@Deleted 

 

Please elaborate your requirement more here what do exactly mean by "how to manage to display the name of the image?"

@kalpeshvaghela 

 

Do you see the image which is in the image? This is the name of the image.

 

37DCD18E-5208-4049-B1D3-500172F52917_4_5005_c.jpeg

@kalpeshvaghela 

 

Another question: if I remove all options except title, the image doesn't appear. When all selections are present, I see the image. I don't understand why? How is it possible to remove all other information except the image view.

 

0CECB078-E2C6-4CFB-AD9E-F36F8344CB6C_4_5005_c.jpegDF25A561-3D6A-4AFA-A574-56FC5E7925FB.jpeg

@kalpeshvaghela Hi do you know what I mean?