Add new SharePoint Button

Forums General discussion Add new SharePoint Button

Viewing 5 reply threads
  • Author
    Posts
    • #11524
      Adamya Kant
      Participant

      I need to add new Button in the Form which can act as Save button avaialble in the SharePoint and set some values based on button clicked. How can I do that.

    • #11556
      Alexander Bautz
      Keymaster

      Hi,
      If you are using DFFS you can set a rule on “the form is saved” to set the values you need to set. If you are not using DFFS, or you want to insert a new button you can use this method: https://spjsblog.com/forums/topic/save-message-dialog-box/#post-6714

      Alexander

    • #12340
      Adamya Kant
      Participant

      Hi Alex

      Thanks for help. What if I need to change the alignment to left of Save and Cancel button instead of default right alignment.

    • #12387
      Alexander Bautz
      Keymaster

      Not sure I follow. The code I linked to above will insert the new button to the left of the save button. If you want it to the right, change “before” to “after”, and “diidIOSaveItem” to “diidIOGoBack” in the code snippet.

      (function(){
      	var b = [""];
      	b.push("<td class='ms-toolbar' nowrap='nowrap'>");
      	b.push("<input type='button' class='ms-ButtonHeightWidth' value='Your new button' onclick='YourCustomSaveFunction();' />");
      	b.push("</td>"); 
      	b.push("<td class='ms-separator'> </td>");
      	$("input[id$=diidIOGoBack]:last").parents("table:first").parents("td:first").after(b.join(""));
      })();

      Alexander

    • #12608
      Adamya Kant
      Participant

      Alex

      Sorry for confusion.
      I am not trying to add new button but want to change alignment of SharePoint “Save and Cancel” from right aligned to left aligned.

      Why it is required?
      As I am using side by side settings, Save and Cancel buttons are out of screen and we need to scroll to right to find them.

    • #12641
      Alexander Bautz
      Keymaster

      You can restrict the width of the placeholder by using this code:

      $("input[id$=diidIOGoBack]:last").parents(".ms-formtoolbar:first").css("width","700px");

      If you need rearrange it, you can use something like this:

      var firstTD = $("input[id$=diidIOGoBack]:last").parents("table.ms-formtoolbar:first").find("td.ms-toolbar:first");
      $(firstTD).next().attr("width","auto");
      $(firstTD).css({"width":"99%","padding-left":"20px"}).insertAfter($(firstTD).parent().find("td.ms-toolbar:last"));

      Please note that this is tested in O365 only so it might need some tinkering.

      Alexander

Viewing 5 reply threads
  • You must be logged in to reply to this topic.