0

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!

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

  • Hello Joanna, thank you very much for your help and happy new year! Could you please help me a little more? When I try to save the edit, it creates a new item. What script would I need to use to modify a current existing item and not create a new one? – Eddie Jan 2 at 15:52
  • Check the Update in my answer. Run the function when saving the changes (clicking the save button). If my answer is helpful, please don';t forget to accept it as the best answer. It will also help other community members find the helpful information quickly. – JoannaW_MSFT Jan 3 at 2:06
  • Joanna, thank you again for your help. I was calling my save function instead of update function. Problem solved! Thank you very much! – Eddie Jan 3 at 13:35
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.

  • How do I set values to the fields when I open edit page? I mean, let's suppose I have an input field called 'Food', how do I get the value of the 'Food' column and set it on 'Food' input field to be able to edit it? – Eddie Dec 19 '18 at 16:40
  • My way is not via "Edit Page" but with SharePoint Designer (or any other dev environment of your choice). You'll need the Designer at least for the publishing step of the newly created form. – airliner Dec 20 '18 at 6:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.