I am trying to create the application customizer to hide save and cancel button from Newform.aspx in Modern UI, I tried writing below code but everything getting hide instead of Save button noticed HTML is getting display: none

      public onInit(): Promise<void> {
        var Libraryurl = this.context.pageContext.list.title;  

        Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
       // this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);  

        let message: string = this.properties.testMessage;
        if (!message) {
          message = '(No properties were provided.)';

        //Dialog.alert(`Hello from ${strings.Title}:\n\n${message}`);  
        // code to hide button
            let newbutton: any = document.getElementsByName("Save")[0] || document.documentElement;  
           // let newbutton2: any = document.getElementsByName("Cancel")[1] || document.documentElement; 
            //let newbutton3: any = document.getElementsByName("Edit columns")[2] || document.documentElement;  

            newbutton.style.display = "none"; 
            //newbutton2.style.display = "none"; 
            return Promise.resolve();

            //newbutton3.style.display = "none"; 

       // this._renderPlaceHolders();

        //return Promise.resolve();

enter image description here


1 Answer 1


You may try this.

public onInit(): Promise<void> {
      Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

      // Wait for the placeholders to be created (or handle them being changed) and then
    // render.
      this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);

      const css: string = 'div.ReactClientForm-editButtons>button{display:none !important}';          
      if (css) {
          // inject the style sheet
          const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
          let customStyle: HTMLStyleElement = document.createElement("style");
          customStyle.title = "MSCustom";
          customStyle.type = "text/css";
      return Promise.resolve<void>();

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.