SharePoint Online : Working with People Search and User Profiles

People Search and User Profiles are amongst the popular topics that everyone use in their projects every now and then. With SharePoint 2013, a lot of functionality has been included in the Client API's by Microsoft. If you consider user profiles itself, in SharePoint 2010 you cannot fetch user profiles using client side object model. However, with SharePoint 2013, you have a wide variety of methods that you can use to fetch the user profile information using client object model. The search API is also expanded greatly.

Content Search WebPart is one of the important additions in SharePoint 2013. Using this webpart you can display content that was crawled and added to search index.

To have a complete look at this post refer to the link over here. 

Cheers,

Geetanjali

Unexpected response from server. The status code of response is '0'. The status text of response is ''

Recently while working with ECMASCRIPT I came across an issue that stated "Unexpected response from server. The status code of response is '0'. The status text of response is ''. Now, I got this error in the error logger list which is a custom list that we created to log any exceptions that arise.
To my utter surprise, I was not able to reproduce the issue at my local environment as well as production site and no complaints of any broken functionality also came from the client. But randomly this error was getting logged in the logger list. This made me think as to what could be the cause of the issue. I tried various ways to reproduce this error and voila, I was able to get to this error when I navigated to some other page before the asynchronous call that my ecmascript code was making had completed. I tried this a couple of times and everytime I navigated to the other page before the call had completed, I got this error logged in the logger. This way I could understand as to why this happened.
After some more analysis, I found out that status code 0 comes when you make an ajax call and refresh the page or navigate to some different page without getting the ajax response. So for all my dear friends out there, if you ever come across this random weird error, then probably it is because your asynchronous call was cancelled before getting the response. Hope it gives some pointer.

Firing events inside a modal dialog in SharePoint 2010

Lately I came across a requirement where I had to fetch user input and based on that perform some validations on the click event. All of this was supposed to happen inside a modal dialog inside SharePoint 2010. Initially it seemed quite simple but when I started to do it I really had to struggle to get the click event functional inside the modal popup.

Before diving more into the issue let me brief you about the Modal dialog in SharePoint 2010. It is a new dialog framework that is provided using javascript client object model. You must have seen a dialog box that opens up on editing a list item or adding a new item with some lightbox effect. That is what I am talking about here. :)

Diving into some more details here, the javascript client object model has a class SP.UI.ModalDialog that has quite a number of useful methods that help us interact with the dialog framework. One such useful method is the showModalDialog() that accepts a parameter of an object named options.
This options is the heart of this method.

var options ={
url: 'some url',
title:'SharePoint 2010 Modal Dialog',
width:100,
height:150,
dialogReturnValueCallback: closeDialog
};

Now if you have a look at above code snippet, it is quite simple and clear.

url : url of the page that appears in the dialog
title: title of the dialog box
width: width of the dialog box
height: height of the dialog box
dialogReturnValueCallback: It is the return callback function.

To show the dialog box you need to do the following

SP.UI.ModalDialog.showModalDialog(options);

Now , if you can recall, above I mentioned that url is the url of the page that gets displayed in the modal dialog. But there is one more option available here. We have an option called html as well where we can specify the html of that we want to show in the dialog box.

There are many more options that are available OOB that you can refer from msdn.

Coming back to my requirement, I had to take an input from the user and on the click event perform some validations inside the modal dialog. Also in my dialog I was using the html attribute of the options rather than showing some page. Now the problem with this was how to bind the script that will perform my onclick event inside the html markup. The html string is simply not a string but the DOM element that we will be showing in the dialog.

Now, the way it works is that we need to do document.createElement to create the DOM elements in memory. I did the document.createElement for my parent div container and added rest all child elements inside it as a template. But my on click event was not working. So I realised that I need to do document.createElement for script as well.

It made me think that if we are going to do document.createElement for every element then it will be really painful. So I did some R&D and came across an interesting blog where the approach suggested was to put the markup in the script tag with attribute set as "text/html". After that create the DOM in the memory using Jquery with the help of the markup specified in the script tag.

Here interesting thing is using type as "text/html" . If we put unsupported types in the type attribute for the script then the content of the script is ignored. This is normally used to render data that is not loaded to the page. This type of script is treated by browse as a div with style= display:none.

So, enough talking and lets have some practical implementation

function CheckValidations() {

//Logic to check the validations

}

function openDialog() {
    var options = SP.UI.$create_DialogOptions();
    options.title = "Save Image";
    options.width = 400;
    options.height = 250;
    options.html = createHtml();
               
    SP.UI.ModalDialog.showModalDialog(options);
 }

 function  createHtml () {

     var htmlDiv= jQuery(jQuery('#parentDiv').html());
      htmlDiv .find('#btnOk').on('click', function () {
           CheckValidations();

     });

     return  htmlDiv .get(0);
 }


//The markup will be something like below

<script type="text/html" id="parentDiv">
    <div>
        <label for="PictureName">Picture Name :</label>
        <input type="text" id="txtPictureName"/>
        <input type="button" id="btnOk" value="Ok"/>
        <div id="errorDiv" ></div>
    </div>
</script>

Now from your code wherever you want to open this dialog, on the click event simply call the openDialog() method and you are good to go.

Modifying the list view using ECMASCRIPT

​Lately I came across a requirement where I was supposed to modify the list view using javascript client object model. The requirement was that I had to fetch a view of a list from sharepoint which had certain fields in it which were not there in the existing view of the list. Now the problem was that how much hard I tried to update the view and set the view query for the view fields of my interest it was not getting updated. When I tried to debug my javascript in the browser my query was actually updating the view fields but the view was not getting updated.

Below is what I was trying



var query = "<View><ViewFields><FieldRef Name='Field1'/><FieldRef Name='Field2'/><FieldRef Name='Field3'/></ViewFields></View>";

var views = list.get_views();

var view = views.getByTitle("All Items");

view.set_viewQuery(query);

view.update();

So after some playing around with javascript, I came up to an approach that was able to update the view as per my desired view fields.

var views = list.get_views();

var view = views.getByTitle("All Items");

view.get_viewFields().removeAll();
view.get_viewFields().add("Field1");

view.get_viewFields().add("Field2");

view.get_viewFields().add("Field3");

view.update();



Doing this will add the desired fields to the view and fetch them. There is one flaw with this approach however. It will modify the existing view on the list. In case you donot want that to happen then you can try creating a custom view based on the existing view. I have not tried that its a thought.

It was something that I struggled for a few hours so making a note of it through this post. :)



-Geetanjali

Fetching the list view using ECMASCRIPT

Hi Kind Readers,

This is the first blog from me on OFFICE 365. So maybe what I am trying to tell here is quite simple who everybody working on sandbox solutions know but since I am new to this domain everything seems to me worth sharing. :)

Lately I had a requirement where I had to create a custom webpart which will show the data from the list and will be able to perform various list operations.

I thought of various options like creating a custom webpart that will have the entire html dynamically generated or can think in terms of having something like a list view webpart. Now in sandbox ListViewWebpart class is not available. So, I thought of giving the second approach a try and see how to work with SP.View and fetch this generated view and bind it as html in the webpart.

function getMyList() {

        var ctx = SP.ClientContext.get_current();

        var web = ctx.get_web();

        var list = web.get_lists().getByTitle("ListName");

        var views = list.get_views();

        var view = views.getByTitle("All Items");

        view.update();

        ctx.load(view);

        myview = view.renderAsHtml();

        ctx.executeQueryAsync(OnSuccess, OnFailure);

 }

function OnSuccess() {

        myview = myview.get_value().toString();

        jQuery("div id").append(myview);

 }

function OnFailure() {

 }

In the above code snippet , I am fetching the OOB All Items view and then rendering it as HTML and then finally binding the generated html to the div in the webpart. This will help us creating a custom webpart similar to a list view webpart using Client Object Model. :)



Cheers,

Geetanjali