Add new SharePoint Button

[Adamya Kant]

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.

[Alexander Bautz]

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

[Adamya Kant]

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.

[Alexander Bautz]

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

[Adamya Kant]

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.

[Alexander Bautz]

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

[Author]

Posts