Add custom css/html and javascript to editform.aspx

Question

How can I set the fields when I display a custom editform.aspx?

I mean, when we create a new item, we use OList.set_item('Sharepoint_column_name', 'ID of HTML tag');

How can I do this to editform? Instead of set item, would it be "get_item"? I want to display the data on the fields, and instead of create a new item, it edit the current item.

Is there anyway to achieve this? Is there any documentation that I can read to achieve this?

Thank you all!

Answer 1

You need to get the item by item ID or another identify, then set the item properties to the fields in the form.

It means, your custom EditForm page should has the identify to know which item is edited.

For example, there is a query string ID=<item id> in the form path: http://<site>/<list>/<form>.aspx?ID=1. We can know the current form is used to edit item which id is 1 from the path.

To display the item information on the page:

First, get the item identify from the path to know which item you are editing.

function GetParameterValues(param) {  
                var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');  
                for (var i = 0; i < url.length; i++) {  
                                var urlparam = url[i].split('=');  
                                if (urlparam[0] == param) {  
                                                return urlparam[1];  
                                }  
                }  
}
var itemId = GetParameterValues("ID");

Then, get the item by identify. For example, get item by ID.

Here is a demo, change the scrips based on need.

<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
</script>
<script language="javascript" type="text/javascript"> 
//source list name
var listName='<list name>';
var itemId = GetParameterValues('ID');  
var clientContext ;
var oItem;
  setTimeout(function() {
                if(itemId!=null && itemId!="undefined"){
      SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getItem);
                }  
  }, 200);            

function GetParameterValues(param) {  
    var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');  
    for (var i = 0; i < url.length; i++) {  
        var urlparam = url[i].split('=');  
        if (urlparam[0] == param) {  
            return urlparam[1];  
        }  
    }  
}  

function getItem() {
    clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle(listName);
                oItem = oList.getItemById(itemId);

    clientContext.load(oItem);

    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceededRetrieve), 
        Function.createDelegate(this, this.onQueryFailed)
    ); 
}

function onQuerySucceededRetrieve(sender, args) {
                // get item information
                  var title=oItem.get_item('Title');
                  var food=oItem.get_item('Food');
                  // if the "Food" is a lookup column
                  //var food = oItem.get_item("Food").get_lookupValue();
                  console.log("title:"+title+";Food:"+food);
                  // use F12 to get the ids of Title field and color field elements. Change ids to yours.
                  document.getElementById("<field element id>").value = title;
                  document.getElementById("<field element id>").value = food;  

}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}
</script>

Update:

Run the updateListItem() function when saving the changes.

<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
</script>
<script language="javascript" type="text/javascript"> 
//source list name
var listName='<list name>';
var itemId = GetParameterValues('ID');  
var clientContext ;
var oItem;
function updateListItem(){
      SP.SOD.executeFunc('sp.js', 'SP.ClientContext', setItem);
}             

function GetParameterValues(param) {  
    var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');  
    for (var i = 0; i < url.length; i++) {  
        var urlparam = url[i].split('=');  
        if (urlparam[0] == param) {  
            return urlparam[1];  
        }  
    }  
}  

function setItem() {
    clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle(listName);
    oItem = oList.getItemById(itemId);

    clientContext.load(oItem);

    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceededRetrieve), 
        Function.createDelegate(this, this.onQueryFailed)
    ); 
}

function onQuerySucceededRetrieve(sender, args) {
    // get information
    // use F12 to get the ids of Title field and color field elements. Change ids to you    rs.
    var title=document.getElementById("<field element id>").value;
    // uodate itemId
    oItem.set_item("Title",title);
    oItem.update();
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}
</script>

Refer to How to Update List Items Using JavaScript

Answer 2

You may read this: https://docs.microsoft.com/en-us/previous-versions/office/developer/sharepoint-2010/hh185011(v%3Doffice.14) It applies to SharePoint 2010 but should work in other versions too.

I simply create custom forms and go the old SharePoint way like this for an edit form (this is one field with a headline in a table):

<tr>
                <td width="190px" valign="top" class="ms-formlabel">
                    <H3 class="ms-standardheader">
                        <nobr>PM</nobr>
                    </H3>
                </td>
                <td width="400px" valign="top" class="ms-formbody">
                    <SharePoint:FormField runat="server" id="ff21{$Pos}" ControlMode="Display" FieldName="PM" __designer:bind="{ddwrt:DataBind('u',concat('ff21',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@PM')}"/>
                    <SharePoint:FieldDescription runat="server" id="ff21description{$Pos}" FieldName="PM" ControlMode="Display"/>
                </td>
            </tr>

It's kinda monkey business and may not be the newest and hottest sh*t but it works for me and my customers.