Count the selections inside a people picker control

Dear Readers,

This is another of my people picker post where I will write how using jQuery you can count the number of entities/users you have provided inside your people editor control. For my previous posts on people editor refere to the links link1 and link2 .

Coming back to the scenario, at times you need to do client side validation to see how many entities you have entered inside the people editor control. You have an attribute MultiSelect="false" that you can set  on the SharePoint:PeopleEditor control to show an error message stating that only one value is allowed to be entered in the people editor control. Now if you want to do the same validation using jQuery then its really simple. Below is the code snippet for the same.

 
var noOfChildren = $("[id$='peopleEditorProductOwner_upLevelDiv']").children().length;

where 'peopleEditorProductOwner' is the id of the people editor control.

 

 

Hope that helps !

 

Cheers,

Geetanjali 

Validate People Picker Value is Resolved or not using jQuery

Dear Readers,

Recently I was working on a people picker control and using jQuery I have to validate whether the people editor field is resolved or not. I played with people picker control using the IE developer tool and finally came up with the solution using jQuery. Its a very simple jQuery implementation and hope it might help somebody. For greater understanding of the below snippet have a look at my previous post here

var htmlPeopleEditor = $("[id$='peopleEditorProductOwner_upLevelDiv']");
var isResolved = $("#divEntityData", htmlPeopleEditor).attr("isResolved");

if (isResolved == "False" || isResolved == "false") {

          alert("Not Resolved");

}


Now if you look at the above snippet, there is an isResolved attribute that gets set when you try to resolve a people picker field. With the help of this attribute you can ensure whether your people picker field is resolved or not.

Hope that helps !


Cheers,
Geetanjali

             

jQuery DatePicker and jQuery Multiselect Widget Scroll Issue

Recently I was using jquery ui datepicker control and jquery multiselect widget for a SharePoint project. I observed that whenever I scroll the page after opening these controls then these remained fixed on the screen. They should have either scrolled along with the control to which they were attached or should have closed.
But there they were on the screen without moving from their original position. Decided on fixing this issue I started exploring the respective API's and also how the close functionality is handled by the respective js files i.e. the jquery-ui.js and jquery.multiselect.js. I decided to collapse these opened datepicker calendar and the multiselect menu whenever web page scroll takes place as you are changing your focus to some other part of the page rather than these controls.
After drilling down through API for the jquery-ui.js datepicker and jquery.multiselect.js multiselect widget I came across the following methods.

jQuery DatePicker

hide() - Close previously opened datepicker

jQuery Multiselect Widget

close() - Closes the opened menu

So, now the task seemed quite simple. I had to simply call these methods on scroll so as to close.

Let me first show you how to do it for datepicker

$('#s4-workspace').scroll(function () {
               
   //Calling the blur method is important so that you can take the focus away  from the datepicker            
   $("#dpSelectedDate").blur();
   //The below method call will close the opened datepicker
   $("#dpSelectedDate").datepicker("hide");
});
In the above piece of code, I am using $('#s4-workspace').scroll() because in SharePoint context, when you scroll then this is the container that gets scrolled. Rest of the code is self explanatory.

Now, coming to jquery multiselect widget, the below code snippet will solve the issue
$('#s4-workspace').scroll(function () {
$("#selectControlID").multiselect("close");
});

Hope this might help you out at some point of time.

Cheers,
Geetanjali

Accessing People Editor control using jQuery in SharePoint

Dear Readers,

Recently I came across a requirement where I had multiple people editor controls on the page and I had to fetch the login name of the resolved user corresponding to each of these people picker controls. My requirement was to fetch all these login names using javascript or jquery. Now I tried all the old convention methods that used to work when we have only one people picker on the page. To my surprise, even if I provide the id corresponding to the respective people picker, the conventional javascript methods used to return the value of the first people editor only. So, in nutshell, none of the conventional methods worked for me.
So, I started exploring how does these people editor controls render on the page. Now, using IE developer tool, the html that came in front of me was very complex. Lot of spans and divs are rendered for just one single people editor control. But in its complexity was the simplicity of the solution that laid behind my eyes in that html code in front of me.

For my kind readers out here, I am pasting the html snippet for one of my people editors on the page.

So if you look at this code snippet, you see that a div with the id ending with 'peopleEditorProductOwner_upLevelDiv' gets generated for my people editor.

var htmlPeopleEditorControl = $("[id$='peopleEditorProductOwner_upLevelDiv']");

The html that gets returned based upon this element has a div with id "divEntityData" and an attribute "key" which holds the value for the account name.

So based upon this we can find the account name for all the people editor controls on the page.

Below is the sample jquery snippet to fetch the same for one control.

var accountName = $("#divEntityData", htmlPeopleEditorControl).attr("key");

where 'peopleEditorProductOwner' is the people editor id of my control.

Similarly for all other people editor controls on the page, you can fetch the login name.

Hope this piece of information might be helpful.

Cheers,
Geetanjali

JQuery to identify "Potrait" or "Landscape" mode for device

Hello Kind Readers,

Recently while enabling Device Channel for SharePoint 2013, I came across a requirement to identify whether the device is in Potrait Mode or Landscape Mode. Based on the mode of the device, different behaviour should happen. There is a simply jQuery event that helps you capture this device transition from Potrait to Landscape or vice versa.

You need to make use of jquery mobile which has an event as orientationchange that gets triggered whenever we make the transition.

Below code snippet will explain more on this.

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<script type="text/javascript">

$(window).on( "orientationchange", function(event ) {
  alert("This device is in " + event.orientation + " mode!" );
});

// You can also manually force this event to fire.
$(window).orientationchange();
</script>

In this way, using orientationchange event and fetching the value of event.orientation method, you can find the device mode.

Hope it Helps !