Forum Discussion

vish3027's avatar
vish3027
Copper Contributor
Aug 20, 2020

Custom Sites web part

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?

SharePoint Online

9 Replies

  • Matti Paukkonen's avatar
    Matti Paukkonen
    Iron Contributor
    Aug 21, 2020

    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-parts.sppkg

     

    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.

     

     Template editor

     

     

     

     

    • vish3027's avatar
      vish3027
      Copper Contributor
      Aug 21, 2020

      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

      • ganeshsanap's avatar
        ganeshsanap
        MVP
        Aug 21, 2020

        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.

         

Resources