Custom Sites web part

Copper Contributor

Hello All,

I need some help.

 

We have out of box Sites web part in SharePoint Online which gives updated for sites from hub.

 

I want to create similar web part with little modification(content will be same, css changes) using Spfx.

 

Anyone who can help me with this?

9 Replies

Hi @vish3027,

 

I case just a layout change is enough, you might want to use  PnP Modern Search Web Part.

https://github.com/microsoft-search/pnp-modern-search/releases/download/3.14.2/pnp-modern-search-par...

 

All you need to do is adjust your query on Search Results Web Part and you can design you own layout with HandleBars template.

 

For search query template you can use this.
contentclass:STS_Site AND DepartmentId={<Hub site id>}

 

 

You can edit your display template from web part settings or create a HandleBars template file and link it to web part.

SharePoint pnp search.png

 Template editor

SharePoint PnP search template editor.png

 

 

 

 

Hi @Matti Paukkonen  

 

I want to create exact copy of SITES web part only changes will be Header section styling and Overall height.

 

I am not sure about how the data/content coming into SITES web part.

 

I will refer your solution as well.

 

Thanks

@vish3027 If you just want to change the CSS of single web part then you can use Modern Script Editor web part and add your custom CSS to SharePoint page.

Modern Script Editor 

 

Alternatively, you can create a SPFx Application customizer and apply your custom CSS to your SharePoint pages/webparts.

Overview of SharePoint Framework Extensions 


Please click Mark as Best Response if my post helped you solve your issue. This will help others find the correct solution easily. It also closes the item. If the content was useful in other ways, please consider giving it Like.

 

Hello @ganeshsanap 

 

I have Modern Script editor on page and currently i have applied css using that only.

 

But there are updates changes coming from Microsoft which causing change in name structure classes and because of which changes applied through Modern script editor were lost, In last 2 weeks there are 4 times i have updated my css structure because of updates.

 

For that reason only i am looking for custom webpart soultion.

 

Application customizer, I am currently trying this as well. If you have any sample solution where you applied css to webaprt with App custo. that will help me as well.

 

Thank You

@vish3027 Check below references:

  1. Inject Custom CSS on SharePoint Modern Pages using SPFx Extensions 
  2. UPDATE: Inject Custom CSS on SharePoint Modern Pages using SPFx Application Extensions 

Please click Mark as Best Response if my post helped you solve your issue. This will help others find the correct solution easily. It also closes the item. If the content was useful in other ways, please consider giving it Like.

 

 

@ganeshsanap 

Unbelievable! You have to be a programmer to simply change the font-family of your site(s).

 

Honestly, I hope the MS Developpers extract the typescript stuff and the SPFx as a NORMAL task to change a design via ootB PowerShell Scripts. Like they already did with extracting the typescript API from the office script Editor in online Office files. It works fine without complicated other Coding Stuff, but WITHIN the current "Automate" Tab.

 

All the best,

Eva

Hello @Eva Vogel , @ganeshsanap , @Matti Paukkonen 

Can you provide articles on creating custom Sites Web part? 

 

Thank You

Hello @vish3027,

did you test out this article from ganeshsanap? 

https://tahoeninjas.blog/2018/10/29/update-inject-custom-css-on-sharepoint-modern-pages-using-spfx-a...

 

Tell us, if some of the tricks worked for you.

 

Greets, Eva

 

Hello @Eva Vogel ,

 

In this article it uses Microsoft classes and those class names are changing continuously. Hence looking for different workaround.

 

With Modern Script editor we are doing almost same thing applying custom css using Microsoft class names.

 

Thanks