Loading...

Getting a single item back from a list…

Getting a single item back from a list…

  • This topic is empty.
Viewing 2 reply threads
  • Author
    Posts
    • #5003
      Anonymous
      Anonymous
      Participant

      For some reason the code was removed… here it is:

      $(document).ready(function() {

        $().SPServices({

          operation: "GetListItems",

          listName: "User Information List",

          CAMLViewFields: "<ViewFields><FieldRef Name='Picture' /><FieldRef Name='ID' /></ViewFields>",

          CAMLQuery: "<Query><Where><Eq><FieldRef Name='Title' /><Value Type='Text'><%Created By%></Value></Eq></Where><OrderBy>Created</OrderBy></Query>",

          completefunc: function (xData, Status) {

            $(xData.responseXML).find("z\\:row, row").each(function() {

              var photo1 = "<a href='../_layouts/userdisp.aspx?ID=" + $(this).attr("ows_ID") + "' target='_blank'><img width='110' height='145' class='postedby_photo' src='" + $(this).attr("ows_Picture").split(', ')[0] + "'/></a>";

              $("#photo").append(photo1);

            });

          }

        });

      });

      </script>

      <span id='photo'></span>

    • #4097
      Anonymous
      Anonymous
      Participant

      Working with SPServices within the Quest SharePoint web parts… which are incredibly powerful, but don’t offer quite enough flexibility. In particular I’m using their qListView, which as the name suggests pulls back all entries from any number of lists and libraries. So I’m using their queries to pull back content in a specific list and library. On the front end, I’m trying to pull back the picture of the user who created the item… from the UIL, which is easy enough to do in a basic table, but when pulling back as a custom field it includes the URL to the picture, a couple of times. I have a javascript snippet to parse that and it works fine.

      My problem is when combining the two technologies, Quest and SPServices, it seems neither sort works. I have a feeling it’s in how my jQuery is constructed combined with the looping mechanism of the qListView. So I was wondering, is there a simple way to pass the “Created By” variable to the UIL to pull back the appropriate picture? I’m looping through all the items right now to find it. Like this:

      $(document).ready(function() {

        $().SPServices({

          operation: “GetListItems”,

          listName: “User Information List”,

          CAMLViewFields: “<ViewFields><FieldRef Name=’Picture’ /><FieldRef Name=’ID’ /></ViewFields>”,

          CAMLQuery: “<Query><Where><Eq><FieldRef Name=’Title’ /><Value Type=’Text’><%Created By%></Value></Eq></Where><OrderBy>Created</OrderBy></Query>”,

          completefunc: function (xData, Status) {

            $(xData.responseXML).find(“z\\:row, row”).each(function() {

              var photo1 = “<a href=’../_layouts/userdisp.aspx?ID=” + $(this).attr(“ows_ID”) + “‘ target=’_blank’><img width=’110′ height=’145′ class=’postedby_photo’ src='” + $(this).attr(“ows_Picture”).split(‘, ‘)[0] + “‘/></a>”;

              $(“#photo”).append(photo1);

            });

          }

        });

      });

      </script>

      <span id=‘photo’></span>

      The <%Created By%> field you see is the reference to the Quest fields. Am I overcomplicating things? Is there anyway to call this as a function from within the SPAN, like via an onload?

      Thanks!

    • #6512
      Anonymous
      Anonymous
      Participant

      Hi Stephen

      I hope that I understand your requirement correctly that you need to use qListView to render a list of items, and for the "CreatedBy"' field, instead of the default behavior that renders the user name, you want to render the picture URL associated with that user's profile.

      One of QWP users had similar requirement and we were able to pull a solution for them in SP2007. The same solution can be used for SP2010 but I have not tried to use SP2010 client object model for the part that retrieves the user profile info. You may investigate further along that route (I will explain how QWP work regarding Custom Field invoking JavaScript that can cause complication with SP2010 client object model async invokation).

      We have many examples of using JavaScript to format the column, i.e. DateTime string formatting, coloring text formatting, this one can be achieved using JavaScript as well but involves a bit more. If working with MOSS 2007/WSS 3.0, we can use 3rd party jQuery and plugins to call SharePoint Web services to obtain user information for a given user ID. With SharePoint 2010, we can using SharePoint 2010 Client Object Model to retrieve the picture URL from a user or use this JavaScript library.

      The followings outline the steps involved to achieve the requirement:

      • Configure qListView to connect to the Custom List, including the User/Group field. By default, the User/Group name will be displayed but we will change that to render user picture with tooltip for user's title.
      • Go to List Settings for the underlying Custom List, modify the User/Group field and change the last part Show field: which is a dropdown list to select ID instead of default Name (with Presence). This will ensure this field when rendered in qListView will display only the User ID.
      • Create a Document Library and name it JavaScript, which will become the place holder for 3rd party JavaScript libraries that we are going to use. If you are using SP2007, download Interaction.js, StringBuffer.js from codeplex SharePoint Scripts, download jQuery-1.7.1-min.js from jQuery. Then upload all 3 files to the JavaScript Document Library we just created. (See attachment also for these files); If you are using SP2010, download spjs-utility.js from this JavaScript library
      • Configure qListView's Display Fields property and create a Custom Field, specify the Custom Field's Calculated Value property with the following value: <script>FormatCustomField('<%Assigned To%>');</script>
      • Add a Form Web Part on the Web Part page just above the qListView Web Part. Modify its content by replacing with the following code snippet. 

             

         1:  // include necessary 3rd party jQuery libraries for SP2007 or 

         2:  // different library for SP2010 or nothing if using SP2010 Client Object

         3:  <script type="text/javascript" src="/Javascript/jquery-1.7.1.min.js"></script>
         4:  <script type="text/javascript" src="/Javascript/interaction.js"></script>
         5:  <script type="text/javascript" src="/Javascript/stringBuffer.js"></script>
         6:   
         7:  <script language="javascript">
         8:  // called from Custom Field's Calculated Value 
         9:  function FormatCustomField(userId) {
        10:    if (userId.length == 0) return '';
        11:   
        12:    var user = getUserInfo(userId);
        13:    var picture = '/_layouts/images/person.gif';
        14:    if (user.Picture!=''){
        15:      picture = user.Picture.split(', ')[0];

        16:    }   
        17: 
        18:    return "<img alt='"+user.Title+"' src='"+picture+"' width='110' height='45'/>";

        19:  }

        20:  

        21:  function getUserInfo(userId){

        22:    wsBaseUrl = '/_vti_bin/';

        23:    var uiObj = {};

        24:  

        25:    if(typeof(userId)=="undefined" || userId=='') userId = _spUserId;
        26:    var arrOfFields = ['ID', 'Name', 'Title', 'EMail', 'Department',
        27:    'JobTitle', 'Notes', 'Picture', 'IsSiteAdmin', 'Created', 'Author', 
        28:    'Modified', 'Editor', 'SipAddress', 'Deleted'];  

        29:    // see interaction.js for method getItemById(xx)  
        30:    var item = getItemById('UserInfo', userId, arrOfFields);
        31:    if(item != null){
        32:      for(i=0;i<arrOfFields.length;i++){
        33:        if(item[arrOfFields[i]]!=null){
        34:          uiObj[arrOfFields[i]] = item[arrOfFields[i]];
        35:        }else{
        36:          uiObj[arrOfFields[i]] = '';
        37:        }
        38:      }
        39:      return uiObj;
        40:    } else {
        41:      for(i=0;i<arrOfFields.length;i++){
        42:        uiObj[arrOfFields[i]] = "User with id " + userId + " not found.";
        43:      }

        44:           

        45:      return uiObj;
        46:    }
        47:  }
        48:  </script>

      The key function is the call to GetUserInfo(Id) and can be implemented differently based on the library you use but its main function is to retrieve from User Information List the profile info associated with the given user ID.

      The CalculatedValue property of Display Field in qListView can interprete field expression, but in this case, involves a JavaScript call. QWP will replace the HTML element for that cell with the outcome of the JavaScript call, i.e. FormatCustomField, so whatever is returned from this function, it is used as cell display innerHTML.

Viewing 2 reply threads

You must be logged in to reply to this topic.