SharePoint Online : An Introduction to Office Delve

Microsoft has been talking about “codename Oslo” and Office Graph since the SharePoint conference in March 2014. Office Delve (previously codenamed “Oslo”) was launched recently by Microsoft on September 8.  For all those who are not aware as to what Office Delve is, let us briefly discuss about what the Office Delve is and after that we will dive into fetching data from Office Graph Using Graph Query Language.

To read the complete post click on the link here

Step by Step Guide to Configure Environment for Creating your first SharePoint Hosted App

One of the new features of SharePoint 2013 is the SharePoint App Model. Similar to the windows phone marketplace, we now have a SharePoint Store available where we can simply search for apps and download them on our SharePoint site.  In SharePoint 2013, everything is an app, be it lists or libraries.

In this article we will talk about how to configure development environment for an on-premise implementation of a SharePoint Hosted App. We will also create our first basic SharePoint Hosted Apps and talk about few possible errors usually encountered by developers while implementing their very first app. There are huge amount of reference available over MSDN to create and configure the apps but the purpose of this article is to help developers not only configure the environment but also pose before them the common challenges that they might face during their very first implementation and help them resolve those errors.

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

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

SharePoint Online : Export User Profile Properties Using CSOM

With SharePoint 2013, Microsoft has provided the ability to fetch User Profile information client side using CSOM API’s. User Profiles and user profile properties provide information about the SharePoint Users.

The scope of this article is to talk about how we can make use of CSOM API to fetch the user profile information on Office 365 and export profile properties to a csv file.

To read this entire blog post visit the link here.

Perform Basic Admin Operations using CSOM in SharePoint Online

This post will focus on how to make use of SharePointOnlineCredentials class to authenticate to SharePoint Online from your host machine using a console application. In this article I will give you a walk through of some of the basic administration stuff that can now be achieved using CSOM. Previously this was possible only using Powershell and SharePoint Online (SPO) commandlets but now we have CSOM as an option available as well.

Though we can use CSOM from an app but in the below scenarios I will be implementing the same using Console Application to keep things simple.

To read the entire post visit the link here.

Cheers,
Geetanjali

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

Restrict html tags in textbox

At times you might encounter situations where the customer wants to restrict certain characters from being entered into a textbox. A common scenario is to restrict users from entering the html tags like < and > symbol from being entered into the textbox.
Using javascript you can achieve this very easily. What you need to understand here are the different events that gets fired when we press any key on the keyboard.

1. KeyDown - A key is pressed down.
2. KeyPress - A character key is pressed
3. KeyUp - A key is released.

Now although KeyDown and KeyPress may seem to be the same but they are not. Keydown is triggered on any key press. KeyPress triggers after KeyDown event but it is only guaranteed for character keys.

So, after having this basic understanding, we can move ahead with the requirement and that is to restrict users from entering the "<" and ">" characters.

function RestrictTags(sender, event) {
        var key = event.which ? event.which : event.keyCode;
        var shiftKey = event.shiftKey;
        if ((shiftKey == true) && ((key == 188) || (key == 190))) {
            return false;
        }
        return true;
    }


The above code snippet shows how you can restrict "<" and ">" tags from being entered. Let me briefly explain you what the above piece of code does.

event.which - It returns the numeric keyCode of the key pressed or the character code (charCode) of the alphanumeric key pressed.
event.shiftKey - It is a boolean attribute that helps in identifying if a shift key is pressed or not.

So, if you look at the keyboard, in order to press the "<" or ">" key, you need to press the Shift key and then the "<" and ">" key.

188 is the keyCode for both , and <
190 is the keyCode for both . and >

So, in order to differentiate whether 188 is coming because of comma or less than symbol key press and 190 is coming because of period key or greater than key pressed, you make use of event.shiftKey.
So if you have the event.shiftKey attribute set to true and the keyCode is 188 that means you have pressed > . Similarly if you have event.shiftKey to true and the keyCode is 190 that means you have pressed <.

So that explains the if condition above. Rest is self explanatory. Calling the above method on the keydown event, you can restrict the user from entering the > and < characters.

You can call the event like below

<input id="txtName" type="text" onkeydown="return RestrictTags(this,event);"/>

Hope that helps !!!

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