Create a button in the navigation bar on the right

Brass Contributor

Hi!
Could you help me please, what tool can I use to create a button (a simple link to a third party resource) on the navigation bar? As shown in the screenshot.
Screenshot_578.png

4 Replies

@Pavel48n0sh 

Hi!

You can do this using React Script editor webpart!  You can also do it with a regular developed webpart but it I will take more time

 

https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-script-editor

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var addButton;
$(function () {         
    addButton = setInterval(addButton, 300);
});
function addButton(){
 //Add Button here
        $("div[class^='mainHeader'] div[class^='sideActionsWrapper'] div[class^='actionsSubcell']").append($("#YourButtonClass")); //Append to add yourButton
        clearInterval(addButton);
}
</script>

 

@Pavel48n0sh Are you trying to add this button on single page or on all modern pages?

 

For single page: You can use modern script editor web part as mentioned by @NicolasKheirallah 

 

For all modern pages: Use SPFx application customizer to inject custom JS/CSS to add button on all modern pages.

 

Check this for more information: How can I include the same JS and CSS files on multiple SharePoint Modern Page? 

 

Note: DOM manipulation & CSS customizations are not recommended by Microsoft and some of your customization may break if Microsoft changes HTML element id/classes in new release updates.


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

@ganeshsanap Yes, I'm trying to add this button for all modern pages.
I use SPFx Application Customizer and find the class (actionsWrapper-58) I need in order to add a new element (div with class new-link_box) to it.
Screenshot_588.png

const articleDiv = document.querySelector('.actionsWrapper-58');
const elem = document.createElement('div');
elem.classList.add('new-link_box');
articleDiv.insertBefore(elem, articleDiv.firstChild);


But, sometimes when I reload the page, this class can change from actionsWrapper-58 to actionsWrapper-90, in connection with this, the button does not always appear.
Screenshot_589.png
I found out that only these two class names alternate. Now I want to somehow search for this parent block, not by the entire name of the class, but only by the part up to the numbers (actionsWrapper).

@Pavel48n0sh Use div selector like below: 

 

const articleDiv = document.querySelector("div[class^='actionsWrapper-']");

 


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