Skip Ribbon Commands
Skip to main content
Sign In

How to change button captions

How to change button captions

 

Question

     How to change button captions in modern forms.

Answer

 
  1. In New or Edit item, open the script editor then click the gear icon on the top-right side of the form and select "script editor":


     
    This will open the script editor popup:

  2. Copy and paste the below script into script editor. Please replace the highlighed portion of the script with your own button caption text.
//#region Change 'Save' button caption  
//*****************************************************************
// Change 'Save' button caption     
//*****************************************************************
 

kwizcom.ModernUILibrary.FormPage.OnReady("change-button-caption", function (form) {
   if (form.context.pageType === 4) return;//only work on new/edit item form    
   document.querySelector("[data-icon-name='Save']").parentNode.querySelector("span[class*='ms-Button-label']").innerHTML = "sauvegarder";
   document.querySelector("[data-icon-name='SaveAs']").parentNode.querySelector("span[class*='ms-Button-label']").innerHTML = "appliquer";
   document.querySelector("[data-icon-name='Cancel']").parentNode.querySelector("span[class*='ms-Button-label']").innerHTML = "Annuler";
   document.querySelector("[data-icon-name='Link']").parentNode.querySelector("span[class*='ms-Button-label']").innerHTML = "lien";  
   form.SetButtonState({
     save: { text: "sauvegarder" },
     apply: { text: "appliquer" },
     close: { text: "Annuler" }
    });
   document.querySelector("label[class*='kw-formTitle']").innerHTML = document.querySelector("label[class*='kw-formTitle']").innerHTML.replace("New Item", "nouvel élément");
   document.querySelector("label[for^='AttachmentsFieldControl']").innerHTML = "Pièces jointes";
   document.querySelector("div[title='Add Attachment']").querySelector("div[class*='ms-Button-label']").innerHTML = "ajouter une pièce jointe";
   document.querySelector("div.ms-Persona").querySelectorAll("div").forEach((function(x){if(x.innerHTML == "You created this item") x.innerHTML = "Vous avez créé cet élément";}));
});
//#endregion Change 'Save' button caption 

Use Case with example:

In modern forms I would like to change the top and bottom button captions from English to French. 



Using the above script, you will notice that the script changes the top and bottom button caption text to French.



 

Created at 11/30/2021 2:18 PM by Kiran Gandhi (UTC-05:00) Eastern Time (US and Canada)
Last modified at 6/1/2022 1:39 PM by Kiran Gandhi (UTC-05:00) Eastern Time (US and Canada)
Total Views: 2453

Tags
Article Type: How-To
Recent Discussions
There are no items to show in this view.