Getting all values from a lookup field in SharePoint using ECMAScript client object model

I recently had a requirement wherein I had to retrieve all the values of a lookup column of a list and bind it to a dropdown using ECMAScript client object model. The tricky part is that the lookup list and column name are not known and thus are to be retrieved dynamically.

I see that there are articles describing to do the same with a choice field but none for a lookup field. So I tried to figure out a way to it for a lookup field.

First in order to accomplish this we need to find the name or GUID of the list and the column which is being used as a lookup column. The below code is used in order to do that:

var context = SP.ClientContext.get_current();
var list = context.get_web().get_lists().getByTitle(listName);
var field = list.get_fields().getByInternalNameOrTitle(fieldName);

//Cast the above column as a lookup column
var lookUpField = context.castTo(field, SP.FieldLookup);

//Load the above castes lookup field
context.load(field);

//Call executeQueryAsync and pass in success and failure anonymous functions
context.executeQueryAsync(function () {

   //lookUpField.get_lookupList() gives the GUID of the lookedup list
   var lookUpListId = lookUpField.get_lookupList();

   //lookUpField.get_lookupField() gives the title of the lookedup field
   var lookUpFieldName = lookUpField.get_lookupField();

   //The onFieldLoaded function is called where we process the lookedup list and field to retrieve the values
   onFieldLoaded(lookUpListId, lookUpFieldName);
},
function (sender, args) {
   console.log(args);
});

Now that you have got the GUID of the lookedup list and the name of the lookedup field, we go ahead and write the code for retrieving all the values of the lookedup field in the OnFieldLoaded() function.

function onFieldLoaded(listID, FieldName) {
  var list = context.get_web().get_lists().getById(listID);
  var query = new SP.CamlQuery();
  query.set_viewXml('<View/>');

  var listItems = list.getItems(query);
  context.load(listItems,'Include('+FieldName+')');
  context.executeQueryAsync(
  function () {
    for (i = 0; i < listItems.get_count() ; i++){
    console.log(listItems.itemAt(i).get_item(FieldName));
    }
  },
  function (request, error) {
    console.log(error);
  });
}
Advertisements

Failed to instantiate the file. Specified list does not exist.

If you have created a module for deploying ASPX pages to the Pages library in your SharePoint site, you may get the below error while trying to manually activate the feature that contains the module.

clip_image001

“Failed to instantiate file “abcd.aspx” from module “Pages”: The specified list does not exist.

This error mostly occurs in the non-English language sites. The reason could be that the URL of the “Pages” library would contain the language specific names like “Pagine”, “Paginas”, and etc. based on the respective language. This happens in spite of retrieving the URL value from the resource files in your module as shown below:

clip_image003

This could be a SharePoint bug.

The solution is to deploy through VS or activate the feature through PowerShell command:

Enable-SPFeature -identity “Feature folder name” -URL SiteURL

Hope this has helped you.

SharePoint Caveat – BeforeProperties in SharePoint workflow

I had to develop an application to track the status of delivery of an order whose details would be stored in a list. To accomplish this I had to choose either an event receiver or a workflow. I chose workflows since workflows would give me a better development environment with visual representation of the flow of process using which I can do the changes so easily which is not possible with event receivers.

Of course I chose to go ahead with Visual Studio workflow rather than SharePoint designer workflow due to the recursive process involved in the requirement.

I started my development and was so happy with the way it was progressing until I faced with a hurdle which led me to stop developing the workflow and instead start with an event receiver from scratch. I was really disappointed with that.

The requirement was to compare the values of a certain field before and after the list item has been updated. This can be achieved by creating 2 workflow properties to store the after properties and before properties of the list item.

The problem was when I found that BeforeProperties was always null in the ItemUpdated event activity and only the AfterProperties had values in it. I wondered why it is null always. When I tried the same workflow for a document library instead, I found that both BeforeProperties and AfterProperties to be holding values and were not null.

After googling I found that workflows for lists have the same limitation as that of event receivers for lists. And that is finding null value in the BeforeProperties for a list item in an ItemUpdated event receiver in a list. This limitation is present in both event receiver and workflow when attached to a SharePoint list. But you can overcome this limitation in an event receiver by replacing Item Updated event receiver with an Item Updating event receiver. In an Item updating event receiver you can find values in the BeforeProperties of the item that is getting updated. You can more about it over here. But in a workflow attached to a list there is no work around which means workflow is not going to be of much use for a list in this case.

Auto Suggestion/Auto Complete for SharePoint 2010 Search sites

Introduction:

It will be very useful for the users to have the search being suggested based on the past searches while they are typing in the search text box in a SharePoint search site. Yes I’m talking about the same concept that you find in the Google search but with a limited functionality.

This feature is available as an OOTB feature in SharePoint 2013 enterprise search. Look at this link to know more about this cool feature. The process is completely different though.

Description:

This is a simple JavaScript application which when added to a Content editor web part in home page and in the search results page of your SharePoint search site would display suggestions for the users as they type their search query in the search text box. The suggestion keywords are stored and retrieved from a SharePoint custom list called “Search Keywords”. Look at the below screenshot for a better understanding:

As you can see in the above image, as I type “I love s”, I get “I love SharePoint” and “I love Silverlight” as suggestions. These 2 are retrieved from a SharePoint list called “Search Keywords”.

So how and when are these suggestion keywords stored in the “Search Keywords” list? When a user is searching in the search site and the results page finished loading, the JS code added in the CEWP in the results page would add the search query in the “Search Keywords” list as new list item. Thus the matching suggestion keywords are retrieved from the list as the user is typing in the search text box later.

Limitations:

Since the suggestion keywords are added to a SharePoint list as a new list item every time a user searches, the performance may reduce when 1000’s of items get stored in the list. So it is advised to manually delete few keywords often from the list.

Code:

The code is developed using JavaScript, jQuery, Autocomplete jQuery ui widget, and SharePoint Client object model. There are 2 different JavaScript codes. One is for the search home page and the other is for the search results page.

I have explained the code in two parts in the below blog posts:

Part 1: How to give the Auto suggestion/complete functionality to the Search box with search terms retrieved from a SharePoint list.

Part 2: How to store the users’ searched queries to a SharePoint list dynamically and then show them as suggestions in the search box while searching.

Since it is purely a client side application, we can simply deploy it by just moving the files. I assume that you have worked with Content editor web part before. You need to create 2 CEWPs, one for search home page and the other for the search results page. I have explained the deployment process through the below steps:

Deployment process:

  1. Download the SPAutosuggestion.zip file and unzip it.
  2.  Create a folder called SPAutosuggestion under the layouts folder of your SharePoint server.
  3. Copy the files jquery-1.7.js, jquery.ui.autocomplete.js, jquery.ui.core.js, jquery.ui.complete.js, jquery.ui.widget.js, and jquery-ui.CSS from the unzipped folder in to the above create folder.
  4. Go to your SharePoint search site and create a list called “Search Keywords”
  5. Go the search home page and edit the page.
  6. Add a Content editor web part in to the page.
  7. Click on “Click here to add new content” as shown in the below image:  
  8. Now in the ribbon control click on HTML -> Edit HTML Source as shown below:  
  9. In the HTML source editor window copy the content of the AutoSuggectionLandPage.js which would be present in the folder unzipped in step 1.
  10. Click on “Save & Close” under the page tab in the top ribbon.
  11. Go to the search results page of you SharePoint site and edit it.
  12. Repeat step 6 to 10. But instead of copying the content of AutoSuggectionLandPage.js, copy the content of AutoSuggestionResultsPage.js.
  13. Search with different queries twice or thrice to see them getting suggested as you type in the search text box.

jQCalendarPart – Mini SharePoint calendar web part

Introduction: This application is to integrate the jQuery Calendar control with the events added in a SharePoint Calendar list. This would work in both SharePoint 2010 and SharePoint 2013. This is a JavaScript application developed using jQuery. The JS code when added to Content editor web part in a SharePoint page, would display a jQuery calendar control synchronized with the SharePoint calendar list. Below are the lists of features:

  • The calendar control highlights the dates of all the events of the current month present in the Calendar list of the site.
  • The dates when hovered over with the mouse, would display a small pop-up showing the respective date’s events.
  • The links when clicked would open the respective event’s view form page.
  • You can also navigate to previous and next and months to view the respective months’ events.

Look at the below image for a better understanding: jQCalendarPart As you can see in the above image, cells 8, 9, 12, 13, and 14 are highlighted with a blue color border to show that these are the dates in the current month having events registered in the Calendar list. Also when you hover over date “13” in the calendar you can see that a pop-up is being shown displaying the events of that particular date. Deployment:

  1. Go to your SharePoint site and create a document library called “jQCalendarPart”.
  2. Download the jQCalendarPart.zip file from here and unzip it.
  3. Copy the files and folders from the unzipped jQCalendarPart folder in to the above created library.
  4. Create a Content Editor Web Part in your SharePoint site where you want to display this web part.
  5. Edit the CEWP and link it to the JS file called jQCalendarPart.js that was uploaded in the jQCalendarPart document
  6. Save the page to see the web part showing a jQuery calendar control synchronized with the SharePoint calendar events from the Calendar list in your site.

if you do not see the calendar control or the calendar control is not showing any events from the  calendar list, please read the caveat points mentioned in the below section. Caveats:

  1. The code has been written to retrieve events only from a calendar type list whose title is “Calendar”. If you want to retrieve from a different calendar list, please change the value of the variable “listName” from the code.
  2. All the external JS files that are used are referred using their relative URL, so if your site URL comes after “/sites”, please change the reference URLs for all the JS files that are present in the top of the code.

Code: I have used the jQuery DatePicker  control and SPServices to get this application done. I have tested this in an Office 365 SharePoint 2013 preview site and it works fine too. But I wanted to develop it as an app and publish it in the app store for SharePoint 2013. So please wait until I get a SharePoint 2013 development environment. Kindly mail me at s.c.vinod@gmail.com if you have any doubts or issues or you can also post a comment in my blog.