SPFX extension placeholder for search bar

Question

I am trying to add some html elements like radio button below my search bar in communication site i.e. to a modern page using spfx extesion. So initially i tried to do it using javascript by just getting the class of the search bar I appended the html elements and I could see my functionality working.

But after deployment I can not see the my webpart on the page, I have found that we can add extensions to only available placeholders in page. So how can we add html elements below search bar in this case?

Answer 1

SPFx extension(application customize) for now only has 2 place holder top and bottom. If you want to add html to any other place you would have to use custom javascript only.

The way you did it using content editor webpart might not work because, webpart would be only available on single page. I would suggest you to do following

1. Create a custom javascript file, in this js file - add your javascript code which add elements below search bar.
2. Create SPFx extension to add reference to custom js file using application customizer. Please note that you have to modify this code a bit to add it to top section or bottom section.

Ref link - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions

var customjs = document.createElement("SCRIPT");
customjs.setAttribute("id","customjs");
customjs.setAttribute("type","text/javascript");      
customjs.setAttribute("src", site absolute url + "/SiteAssets/js/Custom.js"); 
document.getElementsByTagName("body")[0].appendChild(customjs);  

3. Add this SPFx extension to app catalog and install on your target site. You should see custom.js file being loaded on every page load and your code will take care of adding elements below search bar.