Building Charts using ecmascript, REST with Cross Domain Call in SharePoint Hosted App

Building Charts using ecmascript, REST with Cross Domain Call in SharePoint Hosted App
High Chart Site : http://www.highcharts.com/
First Create a SharePoint List called "Temperature" as shown below.

Open Visual Studio -> File -> New -> Project -> Installed -> Templates ->  Visual C# -> Office/SharePoint -> Apps -> Apps for Office

Go to SharePointApp6 -> pages -> Open 'Default.aspx' page.
Change 'Default.aspx' page code as shown below.
--------------------------------------------------------------------------------------------------------

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">

    <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>

    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>

    <script type="text/javascript" src="/_layouts/15/sp.js"></script>

    <meta name="WebPartPageExpansion" content="full" />

    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

    <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>

    <script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js">
</script>

    <script type="text/javascript" src="../Scripts/App.js"></script>

</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">

    Page Title

</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <table>

        <tr>

            <td>

                <div id="div1"></div>

            </td>

            <td>

                <div id="container"></div>

            </td>

        </tr>

    </table>

</asp:Content>

--------------------------------------------------------------------------------------------------------

Go to SharePointApp6 -> Scripts -> open 'App.js' JavaScript file.

Change  'App.js' JavaScript file code as shown below.
--------------------------------------------------------------------------------------------------------

Below Code using ecmascript

--------------------------------------------------------------------------------------------------------

var web;

var hostweburl;

var appweburl;

var arrayTemperatureListItems = [];

var arrayCity = [];

var arrarMonth = [];

var seriesData = [];

var tempArray = [];

var temCity;

$(document).ready(function () {

    hostweburl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));

    appweburl = decodeURIComponent(getQueryStringParameter('SPAppWebUrl'));

    var scriptbase = hostweburl + '/_layouts/15/';

    $.getScript(scriptbase + 'SP.RequestExecutor.js', printAllListItemsFromHostWeb);

});

function printAllListItemsFromHostWeb() {

    var context;

    var factory;

    var appContextSite;

    var collList;

    context = new SP.ClientContext(appweburl);

    factory = new SP.ProxyWebRequestExecutorFactory(appweburl);

    context.set_webRequestExecutorFactory(factory);

    appContextSite = new SP.AppContextSite(context, hostweburl);

    this.web = appContextSite.get_web();

    this.list = this.web.get_lists().getByTitle('Temperature');

    var camlQuery = new SP.CamlQuery();

    camlQuery.set_viewXml('<View><RowLimit>10</RowLimit></View>');

    this.listItems = this.list.getItems(camlQuery);

    context.load(this.listItems, 'Include(ID,City,Month,Temperature)');

    context.executeQueryAsync(Function.createDelegate(this, successHandler), Function.createDelegate(this, errorHandler));

    function successHandler() {

        var listInfo = '';

        var listEnumerator = this.listItems.getEnumerator();

        listInfo += "<table border='1'><tr><td>ID</td><td>City</td><td>Month</td><td>Temperature</td></tr>";

        while (listEnumerator.moveNext()) {

            var oList = listEnumerator.get_current();

            listInfo += '<tr><td>' + oList.get_item('ID') + "</td><td>" + oList.get_item('City') + "</td><td>" + oList.get_item('Month') + "</td><td>" + oList.get_item('Temperature') + '</td></tr>';

            arrayCity.push(oList.get_item('City'));

            arrarMonth.push(oList.get_item('Month'));

            arrayTemperatureListItems.push([oList.get_item('City'), oList.get_item('Month'), oList.get_item('Temperature')]);

        }

        listInfo += "</tr></table>";

        document.getElementById("div1").innerHTML = 'List Items found:<br/>' + listInfo;

        arrayCity = jQuery.unique(arrayCity);

        arrayCity.reverse();

        arrarMonth = jQuery.unique(arrarMonth);

        arrarMonth.reverse();

        for (var i = 0; i <arrayCity.length; i++) {

            for (var j = 0; j < arrarMonth.length; j++) {

                for (var k = 0; k < arrayTemperatureListItems.length; k++) {

                    if (arrayCity[i] == arrayTemperatureListItems[k][0] && arrarMonth[j] == arrayTemperatureListItems[k][1]) {

                        temCity = arrayCity[i];

                        tempArray.push(arrayTemperatureListItems[k][2]);

                    }

                }

            }

            seriesData.push({ name: temCity, data: tempArray });

            temCity = "";

            tempArray = [];

        }

        showChart();

    }

    function errorHandler(sender, args) {

        document.getElementById("div1").innerText = "Could not complete cross-domain call: " + args.get_message();

    }

}

function getQueryStringParameter(param) {

    var params = document.URL.split("?")[1].split("&");

    var strParams = "";

    for (var i = 0; i < params.length; i = i + 1) {

        var singleParam = params[i].split("=");

        if (singleParam[0] == param) {

            return singleParam[1];

        }

    }

}

function showChart() {

    $('#container').highcharts({

        title: {

            text: 'Monthly Average Temperature',

            x: -20 //center

        },

        subtitle: {

            text: 'Source: Temperature List',

            x: -20

        },

        xAxis: {

            categories: arrarMonth

        },

        yAxis: {

            title: {

                text: 'Temperature (°C)'

            },

            plotLines: [{

                value: 0,

                width: 1,

                color: '#808080'

            }]

        },

        tooltip: {

            valueSuffix: '°C'

        },

        legend: {

            layout: 'vertical',

            align: 'right',

            verticalAlign: 'middle',

            borderWidth: 0

        },

        series: seriesData     

    });

}

--------------------------------------------------------------------------------------------------------
Below Code using REST
--------------------------------------------------------------------------------------------------------

var web;

var hostweburl;

var appweburl;

var arrayTemperatureListItems = [];

var arrayCity = [];

var arrarMonth = [];

var seriesData = [];

var tempArray = [];

var temCity;

$(document).ready(function () {

    hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));

    appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));

    var scriptbase = hostweburl + '/_layouts/15/';

    $.getScript(scriptbase + 'SP.RequestExecutor.js', execCrossDomainRequest);

});

function execCrossDomainRequest() {

    var executor;

    executor = new SP.RequestExecutor(appweburl);

    executor.executeAsync(

        {

            url: appweburl + "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('Temperature')/Items?$select=ID,Month,Temperature,City&@target='" + hostweburl + "/" + "'",

            method: "GET",

            headers: { "Accept": "application/json; odata=verbose" },

            success: successHandler,

            error: errorHandler

        }

    );

}

function successHandler(data) {

    var jsonObject = JSON.parse(data.body);

    var listInfo = '';

    listInfo += "<table border='1'><tr><td>ID</td><td>City</td><td>Month</td><td>Temperature</td></tr>";

    for (var i = 0; i < jsonObject.d.results.length; i++) {

        listInfo += '<tr><td>' + jsonObject.d.results[i]['ID'] + "</td><td>" + jsonObject.d.results[i]['City'] + "</td><td>" + jsonObject.d.results[i]['Month'] + "</td><td>" + jsonObject.d.results[i]['Temperature'] + '</td></tr>';

        arrayCity.push(jsonObject.d.results[i]['City']);

        arrarMonth.push(jsonObject.d.results[i]['Month']);

        arrayTemperatureListItems.push([jsonObject.d.results[i]['City'], jsonObject.d.results[i]['Month'], jsonObject.d.results[i]['Temperature']]);

    }

    listInfo += "</tr></table>";

    document.getElementById("div1").innerHTML = 'List Items found:<br/>' + listInfo;

    arrayCity = jQuery.unique(arrayCity);

    arrayCity.reverse();

    arrarMonth = jQuery.unique(arrarMonth);

    arrarMonth.reverse();

    for (var i = 0; i < arrayCity.length; i++) {

        for (var j = 0; j < arrarMonth.length; j++) {

            for (var k = 0; k < arrayTemperatureListItems.length; k++) {

                if (arrayCity[i] == arrayTemperatureListItems[k][0] && arrarMonth[j] == arrayTemperatureListItems[k][1]) {

                    temCity = arrayCity[i];

                    tempArray.push(arrayTemperatureListItems[k][2]);

                }

            }

        }

        seriesData.push({ name: temCity, data: tempArray });

        temCity = "";

        tempArray = [];

    }

    showChart();

}

function errorHandler(data, errorCode, errorMessage) {

    var oli = document.createElement("li");

    oli.innerText = "Could not complete cross-domain call: " + errorMessage;

    document.getElementById("WebTitles").appendChild(oli);

}

function getQueryStringParameter(paramToRetrieve) {

    var params = document.URL.split("?")[1].split("&");

    var strParams = "";

    for (var i = 0; i < params.length; i = i + 1) {

        var singleParam = params[i].split("=");

        if (singleParam[0] == paramToRetrieve)

            return singleParam[1];

    }

}

function showChart() {

    $('#container').highcharts({

        title: {

            text: 'Monthly Average Temperature',

            x: -20 //center

        },

        subtitle: {

            text: 'Source: Temperature List',

            x: -20

        },

        xAxis: {

            categories: arrarMonth

        },

        yAxis: {

            title: {

                text: 'Temperature (°C)'

            },

            plotLines: [{

                value: 0,

                width: 1,

                color: '#808080'

            }]

        },

        tooltip: {

            valueSuffix: '°C'

        },

        legend: {

            layout: 'vertical',

            align: 'right',

            verticalAlign: 'middle',

            borderWidth: 0

        },

        series: seriesData

    });

}

--------------------------------------------------------------------------------------------------------

Go to SharePointApp6 -> AppManifest.xml -> Permission Tab and give "Full Control" for "Web" Scope as shown below.

For deploy Click "F5" and Click on "Trust it" to proceed.

Thank You.

Get and Set User Profile Properties using Console Application in SharePoint Online

Get and Set User Profile Properties using Console Application in SharePoint Online

File -> New -> Project -> Installed -> Templates -> Visual C# -> Windows -> Console Application ->Enter Name (UserProfilePropertySync)

Go to UserProfilePropertySync -> References -> Add Referece

Add below three dlls. Make sure add 16 version dlls.

using Microsoft.SharePoint.Client;

using Microsoft.SharePoint.Client.Runtime;

using Microsoft.SharePoint.Client.UserProfiles;

Make sure here we are adding 16th version dlls.

Go to UserProfilePropertySync -> Open Program.cs

add below code

-------------------------------------------------------------

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Security;

using System.Net;

using Microsoft.SharePoint.Client;

using Microsoft.SharePoint.Client.UserProfiles;

namespace UserProfilePropertySync

{

    class Program

    {

        static void Main(string[] args)

        {

            try

            {

                string tenantAdminUrl = GetString("Enter your tenant admin url (https://tenantname-admin.sharepoint.com): ");

                string tenantAdminUser = GetString("Enter your tenant admin user (user@tenantname.onmicrosoft.com): ");

                PersonProperties personProperties = null;

                SecureString tenantAdminPassword = GetPassword();

                string userToUpdate = "i:0#.f|membership|" + tenantAdminUser;

                using (ClientContext clientContext = new ClientContext(tenantAdminUrl))

                {

                    clientContext.Credentials = new SharePointOnlineCredentials(tenantAdminUser, tenantAdminPassword);

                    PeopleManager peopleManager = new PeopleManager(clientContext);

                    string userProfileProperty = "AboutMe";

                    personProperties = peopleManager.GetPropertiesFor(userToUpdate);

                    clientContext.Load(personProperties, p => p.UserProfileProperties);

                    clientContext.ExecuteQuery();

                    foreach (var property in personProperties.UserProfileProperties)

                    {

                        if (property.Key == userProfileProperty)

                            Console.WriteLine("Current value of the {0} property for user {1}:{2}", userProfileProperty, userToUpdate, property.Value.ToString());

                    }

                    string newAboutMeValue = GetString(String.Format("Enter a new value to be set for property {0}:", userProfileProperty));

                    Console.WriteLine("Setting new value...");

                    peopleManager.SetSingleValueProfileProperty(userToUpdate, userProfileProperty, newAboutMeValue);

                    personProperties = peopleManager.GetPropertiesFor(userToUpdate);

                    clientContext.Load(personProperties, p => p.UserProfileProperties);

                    clientContext.ExecuteQuery();

                    foreach (var property in personProperties.UserProfileProperties)

                    {

                        if (property.Key == userProfileProperty)

                        {

                            Console.WriteLine("Current value of the {0} property for user {1}:{2}", userProfileProperty, userToUpdate, property.Value.ToString());

                        }

                    }

                }

                Console.WriteLine("Press any key to continue.");

                Console.Read();

            }

            catch (Exception ex)

            {

                Console.ForegroundColor = ConsoleColor.Red;

                Console.WriteLine(string.Format("Exception!"), ex.ToString());

                Console.WriteLine("Press any key to continue.");

                Console.Read();

                throw;

            }

        }

        public static string GetString(string question)

        {

            string userInput = string.Empty;

            try

            {

                Console.Write(question);

                userInput = Console.ReadLine();

            }

            catch (Exception e)

            {

                Console.WriteLine(e.Message);

                userInput = string.Empty;

            }

            return userInput;

        }

        public static SecureString GetPassword()

        {

            SecureString sStrPwd = new SecureString();

            try

            {

                Console.Write("Enter the SharePoint Tenant Admin password: ");

                for (ConsoleKeyInfo keyInfo = Console.ReadKey(true); keyInfo.Key != ConsoleKey.Enter; keyInfo = Console.ReadKey(true))

                {

                    if (keyInfo.Key == ConsoleKey.Backspace)

                    {

                        if (sStrPwd.Length > 0)

                        {

                            sStrPwd.RemoveAt(sStrPwd.Length - 1);

                            Console.SetCursorPosition(Console.CursorLeft - 1, Console.CursorTop);

                            Console.Write(" ");

                            Console.SetCursorPosition(Console.CursorLeft - 1, Console.CursorTop);

                        }

                    }

                    else if (keyInfo.Key != ConsoleKey.Enter)

                    {

                        Console.Write("*");

                        sStrPwd.AppendChar(keyInfo.KeyChar);

                    }

                }

                Console.WriteLine("");

            }

            catch (Exception e)

            {

                sStrPwd = null;

                Console.WriteLine(e.Message);

            }

            return sStrPwd;

        } 

    }

}

-------------------------------------------------------------

Press F5 to run and enter required input.