locked
Populate List Column from Document Library Column RRS feed

  • Question

  • Hi

    I have edited my EditForm.aspx view for my document library (Doc Library 1)  to include a list (My List 1) in a web part.

    I have created a connection between a column in My List 1 (Parent ID) and a column in Doc Library 1 (ID).  So that when you open the View Form or Edit Form for a particular item in Doc Library 1, it only shows the relevant Items from My List 1.

    What I want to do is automatically populate Parent ID with the value of ID when I'm adding a new item into My List 1.

    I would guess at a bit of javascript would do this for me, but I'm not entirely sure where to start with it all.

    Any help would be greatly appreciated.

    Thanks...

    John

    Wednesday, August 15, 2012 2:34 PM

Answers

  • Yes, Javascript and JQuery will give you what you need. This is how I do it:

    On the EditForm, I make the list webpart have no toolbar - which gets rid of the default 'add new item' link (because I was never very successful in modifying it).
    I add an HTML Form Web Part that uses SPServices to get the ID from the query string and then create a link to the NewForm of the list with a new parameter of it's own (here I'm using ProjID). Don't use ID as a parm, it won't work correctly:

    <div id="xxAddTime"></div>
    <script src="/Javascript/JQuery/JQueryMin.js"></script>
    <script src="/Javascript/JQuery/jquery.SPServices.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    // get ID from query string
    var queryStringVals = $().SPServices.SPGetQueryString();
    var projID = queryStringVals["ID"];
    var linkToItTime = "https://servernames/Lists/Timesheet/NewForm.aspx?ProjID=" + projID ;
    var link = '<a href="#" onclick="displayRequest(\'' + STSHtmlEncode(linkToItTime) + '\', true); return false;">Add timesheet entry</a>';
    
    
    // modal display of NewForm
    
    $('#xxAddTime').empty();
    $('#xxAddTime').append(link );
    });
    
    // -------------------------------------------------------------------------------------------------------------------
    // General modal popup
    // -------------------------------------------------------------------------------------------------------------------
    function displayRequest(modalLink, refreshOption) {
    var options = SP.UI.$create_DialogOptions();
    options.url = modalLink;
    options.AllowMaximize = true;
    if(refreshOption) {
    options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
    }
     SP.UI.ModalDialog.showModalDialog(options);
        }
    // -------------------------------------------------------------------------------------------------------------------
    // Reload page
    // -------------------------------------------------------------------------------------------------------------------
     function CloseCallback(result, target) {
    	if (result === SP.UI.DialogResult.OK) {
            location.reload(true);
    	}
        }
    </script>	

    You don't have to use SPServices, you can do it all in Javascript.Make sure you have SPServices and JQuery stored somewhere where everyone has read access - you can see on mine it's up at the root of the site in a document library called Javascript.

    Then, on the NewForm of your list, you need javascript to pick up your query parameter and fill in your ParentID field. How that's done depends on if your ParentID is a lookup field or a straight text field. You can use SPServices again to pick up the query parm, then JQuery to find your ParentID field and set the value.


    Robin


    • Edited by Robin In OR Wednesday, August 15, 2012 4:03 PM
    • Marked as answer by johncondron Tuesday, August 21, 2012 3:30 PM
    Wednesday, August 15, 2012 4:02 PM
  • I've never used setFieldValue, so I'm not sure that routine does - it would have to be something part of the standard SP javascript?

    I grabbed this from the web a while back - there's probably better code out there that uses JQuery, but this is what I use to set a lookup field. If the field you've got is a lookup, you have to take into consideration the differences between how it is rendered if it has less than 20 values or more than 20 values (fieldName would be the title):

    function setLookupFromFieldName(fieldName, value) {
          if (value == undefined) return;
          var theSelect = getTagFromIdentifierAndTitle("select","Lookup",fieldName);
     
        // if theSelect is null, it means that the target list has more than
        // 20 items, and the Lookup is being rendered with an input element
          if (theSelect == null) {
            var theInput = getTagFromIdentifierAndTitle("input","",fieldName);
            ShowDropdown(theInput.id); //this function is provided by SharePoint
            var opt=document.getElementById(theInput.opt);
            setSelectedOption(opt, value);
            OptLoseFocus(opt); //this function is provided by SharePoint
          } else {
            setSelectedOption(theSelect, value);
          }
        }
        
        function setSelectedOption(select, value) {
          var opts = select.options;
          var l = opts.length;
          if (select == null) return;
          for (var i=0; i < l; i++) {
            if (opts[i].value == value) {
              select.selectedIndex = i;
              return true;
            }
          }
          return false;
        }
        function getTagFromIdentifierAndTitle(tagName, identifier, title) {
          var len = identifier.length;
          var tags = document.getElementsByTagName(tagName);
          for (var i=0; i < tags.length; i++) {
            var tempString = tags[i].id;
            if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
              return tags[i];
            }
          }
          return null;
        }
    

    If it's not a lookup field but it's a standard input field, you should be able to do something like

    $('input[title="xxxx"]').val(myFieldVar);


    Robin

    • Marked as answer by johncondron Tuesday, August 21, 2012 3:30 PM
    Tuesday, August 21, 2012 2:46 PM

All replies

  • Yes, Javascript and JQuery will give you what you need. This is how I do it:

    On the EditForm, I make the list webpart have no toolbar - which gets rid of the default 'add new item' link (because I was never very successful in modifying it).
    I add an HTML Form Web Part that uses SPServices to get the ID from the query string and then create a link to the NewForm of the list with a new parameter of it's own (here I'm using ProjID). Don't use ID as a parm, it won't work correctly:

    <div id="xxAddTime"></div>
    <script src="/Javascript/JQuery/JQueryMin.js"></script>
    <script src="/Javascript/JQuery/jquery.SPServices.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    // get ID from query string
    var queryStringVals = $().SPServices.SPGetQueryString();
    var projID = queryStringVals["ID"];
    var linkToItTime = "https://servernames/Lists/Timesheet/NewForm.aspx?ProjID=" + projID ;
    var link = '<a href="#" onclick="displayRequest(\'' + STSHtmlEncode(linkToItTime) + '\', true); return false;">Add timesheet entry</a>';
    
    
    // modal display of NewForm
    
    $('#xxAddTime').empty();
    $('#xxAddTime').append(link );
    });
    
    // -------------------------------------------------------------------------------------------------------------------
    // General modal popup
    // -------------------------------------------------------------------------------------------------------------------
    function displayRequest(modalLink, refreshOption) {
    var options = SP.UI.$create_DialogOptions();
    options.url = modalLink;
    options.AllowMaximize = true;
    if(refreshOption) {
    options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
    }
     SP.UI.ModalDialog.showModalDialog(options);
        }
    // -------------------------------------------------------------------------------------------------------------------
    // Reload page
    // -------------------------------------------------------------------------------------------------------------------
     function CloseCallback(result, target) {
    	if (result === SP.UI.DialogResult.OK) {
            location.reload(true);
    	}
        }
    </script>	

    You don't have to use SPServices, you can do it all in Javascript.Make sure you have SPServices and JQuery stored somewhere where everyone has read access - you can see on mine it's up at the root of the site in a document library called Javascript.

    Then, on the NewForm of your list, you need javascript to pick up your query parameter and fill in your ParentID field. How that's done depends on if your ParentID is a lookup field or a straight text field. You can use SPServices again to pick up the query parm, then JQuery to find your ParentID field and set the value.


    Robin


    • Edited by Robin In OR Wednesday, August 15, 2012 4:03 PM
    • Marked as answer by johncondron Tuesday, August 21, 2012 3:30 PM
    Wednesday, August 15, 2012 4:02 PM
  • Hi Robin,

    Thanks for your answer here, but I have a wee issue.

    On the NewForm for the list, I'm getting an error saying "jQuery is undefined".  I'm not really sure why as it's in the same place as it is for the EditForm on the Document Library and that's fine.  I have it in Site Assets as opposed to a specific Javascript document library but that shouldn't be a problem should it?

    Also, I assume that I can use setFieldValue("MyField", myFieldVar) to populate the field?

    Thanks again for all your help, it's really appreciated.

    Cheers...

    John

    Tuesday, August 21, 2012 8:28 AM
  • Hi Again Robin,

    I managed to figure out I was being an idiot and had typed a lowercase character.

    I'm now having a problem with actually populating the field.  I tried setFieldValue("MyField", myFieldVar) as I said in my comment above, but that didn't seem to work.  If I do alert(myFieldVar) I get the value I'm looking for.

    Any help would be gratefully received.

    Cheers...

    John

    Tuesday, August 21, 2012 2:25 PM
  • I've never used setFieldValue, so I'm not sure that routine does - it would have to be something part of the standard SP javascript?

    I grabbed this from the web a while back - there's probably better code out there that uses JQuery, but this is what I use to set a lookup field. If the field you've got is a lookup, you have to take into consideration the differences between how it is rendered if it has less than 20 values or more than 20 values (fieldName would be the title):

    function setLookupFromFieldName(fieldName, value) {
          if (value == undefined) return;
          var theSelect = getTagFromIdentifierAndTitle("select","Lookup",fieldName);
     
        // if theSelect is null, it means that the target list has more than
        // 20 items, and the Lookup is being rendered with an input element
          if (theSelect == null) {
            var theInput = getTagFromIdentifierAndTitle("input","",fieldName);
            ShowDropdown(theInput.id); //this function is provided by SharePoint
            var opt=document.getElementById(theInput.opt);
            setSelectedOption(opt, value);
            OptLoseFocus(opt); //this function is provided by SharePoint
          } else {
            setSelectedOption(theSelect, value);
          }
        }
        
        function setSelectedOption(select, value) {
          var opts = select.options;
          var l = opts.length;
          if (select == null) return;
          for (var i=0; i < l; i++) {
            if (opts[i].value == value) {
              select.selectedIndex = i;
              return true;
            }
          }
          return false;
        }
        function getTagFromIdentifierAndTitle(tagName, identifier, title) {
          var len = identifier.length;
          var tags = document.getElementsByTagName(tagName);
          for (var i=0; i < tags.length; i++) {
            var tempString = tags[i].id;
            if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
              return tags[i];
            }
          }
          return null;
        }
    

    If it's not a lookup field but it's a standard input field, you should be able to do something like

    $('input[title="xxxx"]').val(myFieldVar);


    Robin

    • Marked as answer by johncondron Tuesday, August 21, 2012 3:30 PM
    Tuesday, August 21, 2012 2:46 PM
  • Ahh Robin, you are a wonderful person.

    Thank you so much for your help.

    John

    Tuesday, August 21, 2012 3:30 PM