Forum Discussion

Pavel48n0sh's avatar
Pavel48n0sh
Brass Contributor
Oct 26, 2022

Create a button in the navigation bar on the right

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.

developer
Extensibility
PnP

4 Replies

  • ganeshsanap's avatar
    ganeshsanap
    MVP
    Oct 26, 2022

    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.

    • Pavel48n0sh's avatar
      Pavel48n0sh
      Brass Contributor
      Oct 27, 2022

      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.

      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.

      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).

      • ganeshsanap's avatar
        ganeshsanap
        MVP
        Oct 27, 2022

        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.

  • NicolasKheirallah's avatar
    NicolasKheirallah
    MVP
    Oct 26, 2022

    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>

     

Resources