Loading...

RE: Getting a single item back from a list…

RE: Getting a single item back from a list…

#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.