Thursday, October 2, 2008

Attach Custom Button on Editform.aspx and Newform

Including the "Custom " Button to the Page
Open the SharePoint Site containing the List to modify using SharePoint Designer
2007 and use the Folder List to navigate to the target List under the folder Lists
(In this example, I will be using the Links list that comes along with any site
created using the Team Site site template). Double click on the NewForm.aspx page.
The NewForm.aspx page would open in code view. Identify the Content control with the
ContentPlaceHolderId of PlaceHolderMain. We will be actively inserting extra
JavaScript and HTML within this Content control that will alter the behavior of the
page. First of all, let's insert the appearance of the 2 HTML elements that we will
be inserting into the rendered page. The <table> element here is made hidden
as it serves no purpose but as a "host" to the 2 <td> elements that
are marked with their respective IDs which we will be using later. Note that the
first <td> element contains the "OK and New" button that will
perform certain custom JavaScript function when clicked upon. We will be diving into
the JavaScript function's details later. Insert the HTML code right above the
closing tag of the Content control </asp:Content>.

<table style="display:none">
<tr>
<td id="oCustomButton" class="ms-toolbar" nowrap="true">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="right" width="100%" nowrap>
<input type="button" value="Custom Button"
onclick="submitForm()" class="ms-ButtonHeightWidth" target="_self" />
</td>
</tr>
</table>
</td>
<td id="oSeparator" class="ms-separator"> </td>
</tr>
</table>

Next task is inserting the relevant elements into the right position on the page,
such that it appears next to the OK button, along the Cancel button as well.
Insert the following JavaScript code into a script element into the page right below
the above pasted HTML codes:

<script language="javascript" type="text/javascript">
function attachCustomButton()
{ var oAryTables = new Array();
var oCustomButton = null;
var oSeparator = null;
var oNodeTemp = null;
oCustomButton = document.getElementById("oCustomButton");
oSeparator = document.getElementById("oSeparator");
oAryTables = document.getElementsByTagName("table");
for(var i = 0; i < oAryTables.length; i++)
{ if(oAryTables[i].className == "ms-formtoolbar")
{ oNodeTemp =
oAryTables[i].firstChild.firstChild.insertBefore(oSeparator.cloneNode(true),
oAryTables[i].firstChild.firstChild.firstChild.nextSibling);
oAryTables[i].firstChild.firstChild.insertBefore(oCustomButton.cloneNode(true),
oNodeTemp);
}
}
} _spBodyOnLoadFunctionNames.push("attachCustomButton");
</script>

Now write your own code for the ButtonClick Event.
;)

1 comment:

  1. hi. This is great.

    how to submit the item using the new customButton?

    ThanksK!
    kevin

    ReplyDelete

RootComponent types in solution.xml file in Dynamics CRM 365/2016

In Microsoft Dynamic CRM 2016/365 are you as confused as me when looking at the solution.xml from the solution export? looking at the xml a...