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.

Access managed properties in Control template

Those who have worked with display templates would have worked with accessing managed properties in the item template of the Content Search Web Part (CSWP). There might be a requirement when you want to access the values of the managed properties of each result item in the control template of your CSWP rather than your item template.

The below code does exactly that:

clip_image001

a. $.each() is the jQuery loop function that is used to loop through each result returned

b. ctx.ListData.ResultTables[0].ResultRows retrieves the “RelevantResults” results from the 4 result tables available in the CSWP as shown below:

clip_image002

c. function (key, val) is the function that is going to process each search result.

d. val.EmailDate.toString(): Here only we are accessing the managed property called “EmailDate” from the variable “val” which would hold the values of all managed properties of the result item.

Debug SharePoint display templates in Google Chrome

In spite of being a Microsoft .NET and SharePoint developer I have no regards for Internet Explorer no matter whatsoever. Google chrome is the best browser in the history of browsers.

You may also like to have a look at the below blog posts regarding Content Search Web Parts:

Let me you explain a small tip on how to debug the display templates of your Content Search Web Parts in SharePoint in Google Chrome.

There will always going to be 2 files created for your display template. One is the .HTML file in which you would be working and the other is the .JS file which gets automatically created and used by SharePoint once you upload your .HTML file.

a. Open the page in which you have your CSWP.

b. Press Ctrl+Shift+J. This will open your developer dashboard.

c. Click on “Sources” from the tabs as shown below:

clip_image002[6]

d. Expand _catalogs/masterpage and then Display Templates/Content Web Parts

clip_image003[4]

e. You should be seeing the .JS file of your display template. Click on the .JS file to open it in the workspace.

f. Put a breakpoint anywhere and refresh the page and the page load would pause when the break point is hit in the display template as shown below:

clip_image004[4]

g. From now you can debug like how you do in Visual Studio using F10 and F11.

jQCalendarBlog – Mini SharePoint calendar web part for SharePoint blog posts

Introduction:

This is my 2nd SharePoint client side web part application that I have developed using JavaScript\jQuery.  You can find the first application that I had created over here. This application is to integrate the published dates of the approved posts in a SharePoint Blog site with the jQuery calendar control.

Description:

This is a JavaScript application developed using jQuery. The JS code when added to a Content editor web part in a SharePoint page, it would display a jQuery calendar control synchronized with the SharePoint blog posts dates. Below are the lists of features:

  1. The calender control highlights the dates during which approved blog posts were published in the SharePoint blog site.
  2. The dates when hovered would display a small pop-up listing down link to the corresponding date’s blog posts that were published.
  3. The links when clicked would take you to the respective blog post’s page.
  4. You can also navigate to the previous and next month in the calendar to see the corresponding month’s data in a similar way as explained above.

Look at the below image for a better understanding:

As you can see in the above image, cells 1, 6, and 31 are highlighted with a blue color border to show that these are the dates in the current month having blog posts published. Also when you hover over date ‘6’ in the calendar you can see that a pop-up is being shown displaying the links to the posts published on that particular date.

Code:

I have used the jQuery DatePicker  control and SharePoint list web service 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.

Deployment Process:

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 CEWP before. I have explained the deployment process through the below steps:

  1. Download the  jQCalendarBlog.zip file from here.
  2. Unzip the jQCalendarBlog.zip file
  3. Copy the unzipped jQCalendarBlog folder in to the layouts folder of SharePoint server.
  4. Create a Content Editor Web Part anywhere in your SharePoint Blog site where you want to display this web part.
  5. Open the jQCalendarBlog.min.js file from the jQCalendarBlog folder and copy the content in to the CEWP created above.
  6. Save the page to see the web part showing a jQuery calendar control synchronized with the blog posts in your blog site.