/ #apps #napa 

Mavention Profilecompleteness

Last week I finally found some time to build my first real app. Now I have been playing around with the app model for a while now but somehow didn’t actually blog about it so far, but that’s going to change. It all started with one of Walkin Fridge days at Mavention where I decided to build a Profilecompleteness app. Walkin Fridge days are about using one day to build or research something and share that knowledge, so building an app seemed to be a nice ‘task’ to get familiar with Client Object Model.

So building apps for SharePoint is some sort of ‘new’ and why not go all the way and use the “Napa” Office 365 Development tools instead of using Visual Studio? Building an app using Napa is as easy as it can be, there is no need to ‘think’ about your project structure since everything gets created for you, so if you are new to building apps I would urge you to check it out. You can find some great information on MSDN on the Create apps for Office and SharePoint by using “Napa” Office 365 Development Tools. So I started out the easy way by creating a new project on Napa, and to determine the profile completeness I only had to retrieve the currents user profile, and then check if a property was containing info, or was left empty by the user.So the basics are fairly easy as you can see:

function getUserPropertiesFromProfile() {
    // Get the current client context and PeopleManager instance.
    var clientContext = new SP.ClientContext.get_current();
    var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);

    // Get user profile properties for the current user
    userProfileProperties = peopleManager.getMyProperties();

    // Load the UserProfilePropertiesForUser object and send the request.
    clientContext.executeQueryAsync(onProfileRequestSuccess, onProfileRequestFail);

function onProfileRequestSuccess() {
    propertyValue = userProfileProperties.get_userProfileProperties()["MyProperty"];

function onProfileRequestFail() {
    // Handle failure

If you would all wrap that up there are only a few more things you want to ‘build’. You want to make sure that the property exists, or at least handle the opportunity that a non existing property is not preventing you from reaching a 100% completeness. As it turned out, a profile propperty that you try to retrieve and is not existing will a null value instead of an empty string, so checking it can be done like this:

if (propertyValue === undefined) {
    // Property is not present in your User Profile Service Application
if (propertyValue === "") {
    // Property is empty

Then you also want to make sure you can configure the properties that are used, and somehow add a weight so that you can apply more meaning to different values. For instance your Profile Picture could be of more use then the profile description. However the first step, adding configuration properties to your app part can not be done using the Napa tools, so if you want to make these settings configurable from your app you will end up using Visual Studio. Yet until that part you can perfectly work in Napa and really fast prototype the stuff you would want to do.

Once opened in visual studio you can add properties to your app part by adding the following XML to the element.xml that is linked to your app part

        &uProps=_uProps_&wpId=_WPID_" />
    WebDisplayName="Profile properties and their weight.">

Finally you will have to write some code to read those settings from your JavaScript since they are passed using the QueryString, but besides that as you can see it is fairly easy to make a quick app part, now that would also be the point where you have to switch to Visual Studio. At this point in time NAPA does not support the configuration of App Part properties.

If you look at the structure that NAPA generates for you, you can do almost everything in the default files, the structure I ended up working with for this app only implemented an extra image as loader, while everything else has been stored in the default files.

NAPA development example

And ofcourse I did overwrite the AppIcon with something that suited my app.

Since it is a first version I decided not to post it in the store yet, that will be the next version. This version just makes it possible to configure the Profile Properties and their weight that are used to determine the progress. If you have requests for the next version just let me know, I will be checking out if I can provide different charts instead of just a progress bar.

You can download this first version from as it is attached to this blogpost: Mavention Profilecompleteness, but as stated v2 will be most likely posted to the store.

When you downloaded the Mavention Profilecompleteness app you can unzip it, and upload it to your app catalog. In case you are new to that you can checkout Technet for a nice article explaning you how to do so. If the app is present in your app catalog you should see an app part, that you can add to the page, and allows some configuration:

Mavention Profilecompleteness app and configuration screen

The configuration can be done by changing the Profile properties and their weight. This should be done using the Display names of the propperties, and in the following Format: PropertyName1=1|PropertyName2=1. The weight of the propperties will be relative.

If you would run into any trouble please let me know, and keep an eye out for the next version.