European Sharepoint 2013 Hosting Blog

SharePoint 2013 Hosting – HostForLIFE.eu :: Working With SharePoint And ChartJS

Aug 31st

Posted by Peter in European SharePoint 2013 Hosting

In this post, we will see how we can represent SharePoint data in graphical form. Now, Create a custom SharePoint list ‘TaskDetails’ with the below details.

Column Name Type
Title Single line
status Choice

Add list items into ‘TaskDetails’.

Then add the below HTML elements on the page. <div>

        <canvas id="AssetStatus" width="500" height="500"></canvas>          
    </div>  
    <div id="chartjs-legend" class="noselect" ></div>

</div>

Add reference for jQuery and ChartJS plugin.

    <script type="text/javascript" src="jquery-1.7.2.min.js"> </script>  
    <script type="text/javascript" src="Chart.js"></script>

1 2	<script type="text/javascript" src="jquery-1.7.2.min.js"> </script> <script type="text/javascript" src="Chart.js"></script>

Code for getting SharePoint ‘TaskDetails’ list data using Rest API.

   $.ajax({  
        url: "<Add SharePoint Site Url>/_api/Web/Lists/GetByTitle('TaskDetails')/items",  
        type: "Get",  
        headers: {  
            "accept": "application/json;odata=verbose",  
        },  
        success: function (data) {  
            LoadChart(data);  
        },  
        error: function (err) {  
            //show error  
        }  
    });

$.ajax({

url: "<Add SharePoint Site Url>/_api/Web/Lists/GetByTitle('TaskDetails')/items",

type: "Get",

headers: {

"accept": "application/json;odata=verbose",

success: function (data) {

LoadChart(data);

error: function (err) {

//show error

}

});

Convert data into chartJS dataset and load the chart.

    var LoadChart = function (data) {  
                var items = [];  
                var statuses = [];  
                var chartData = [];  
                var temp = "";  
      
                //Loop through items to find unique statuses  
                for (var i = 0; i < data.d.results.length; i++) {  
                    items.push(data.d.results[i]);  
                    if (statuses.filter(findStatus(data.d.results[i].status)).length > 0) {  
                        continue;  
                    }  
                    temp = data.d.results[i].status;  
                    statuses.push(temp);  
                }  
      
                function findStatus(arg) {  
                    return function (items) {  
                        return items.indexOf(arg) > -1;  
                    }  
                }  
                var clrs = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"];  
                for (var i = 0; i < statuses.length; i++) {  
                    var tempCount = items.filter(findStatusInData(statuses[i])).length;  
                    var object = {  
      
                        value: tempCount,  
                        color: clrs[i],  
                        label: statuses[i]  
                    }  
                    chartData.push(object);  
                }  
      
                function findStatusInData(arg) {  
                    return function (items) {  
                        return items.status.indexOf(arg) > -1;  
                    }  
                }  
      
                var ctx = document.getElementById('AssetStatus').getContext("2d");  
                var chart = new Chart(ctx).Doughnut(chartData, {});  
      
                document.getElementById("chartjs-legend").innerHTML = chart.generateLegend();  
      
            }

var LoadChart = function (data) {

var items = [];

var statuses = [];

var chartData = [];

var temp = "";

//Loop through items to find unique statuses

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

items.push(data.d.results[i]);

if (statuses.filter(findStatus(data.d.results[i].status)).length > 0) {

continue;

}

temp = data.d.results[i].status;

statuses.push(temp);

}

function findStatus(arg) {

return function (items) {

return items.indexOf(arg) > -1;

}

var clrs = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"];

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

var tempCount = items.filter(findStatusInData(statuses[i])).length;

var object = {

value: tempCount,

color: clrs[i],

label: statuses[i]

}

chartData.push(object);

}

function findStatusInData(arg) {

return function (items) {

return items.status.indexOf(arg) > -1;

}

var ctx = document.getElementById('AssetStatus').getContext("2d");

var chart = new Chart(ctx).Doughnut(chartData, {});

document.getElementById("chartjs-legend").innerHTML = chart.generateLegend();

}

And this is the output:

The integrated code will be as below.

 <!DOCTYPE html>  
      
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <script type="text/javascript" src="jquery-1.7.2.min.js"> </script>  
        <script type="text/javascript" src="Chart.js"></script>  
        <script type="text/javascript" >  
      
            $.ajax({  
                url: "<Add SharePoint Site Url>/_api/Web/Lists/GetByTitle('TaskDetails')/items",  
                type: "Get",  
                headers: {  
                    "accept": "application/json;odata=verbose",  
                },  
                success: function (data) {  
                    LoadChart(data);  
                },  
                error: function (err) {  
                    //show error  
                }  
            });  
      
            var LoadChart = function (data) {  
                var items = [];  
                var statuses = [];  
                var chartData = [];  
                var temp = "";  
      
                //Loop through items to find unique statuses  
                for (var i = 0; i < data.d.results.length; i++) {  
                    items.push(data.d.results[i]);  
                    if (statuses.filter(findStatus(data.d.results[i].status)).length > 0) {  
                        continue;  
                    }  
                    temp = data.d.results[i].status;  
                    statuses.push(temp);  
                }  
      
                function findStatus(arg) {  
                    return function (items) {  
                        return items.indexOf(arg) > -1;  
                    }  
                }  
                var clrs = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"];  
                for (var i = 0; i < statuses.length; i++) {  
                    var tempCount = items.filter(findStatusInData(statuses[i])).length;  
                    var object = {  
      
                        value: tempCount,  
                        color: clrs[i],  
                        label: statuses[i]  
                    }  
                    chartData.push(object);  
                }  
      
                function findStatusInData(arg) {  
                    return function (items) {  
                        return items.status.indexOf(arg) > -1;  
                    }  
                }  
      
                var ctx = document.getElementById('AssetStatus').getContext("2d");  
                var chart = new Chart(ctx).Doughnut(chartData, {});  
      
                document.getElementById("chartjs-legend").innerHTML = chart.generateLegend();  
      
            }  
      
        </script>  
         <style type="text/css">  
           ol,  
           ul {  
               list-style: none;  
               margin: 0;  
               padding: 0;  
               text-align: center;  
           }  
      
           li {  
               display: inline-table;  
           }  
           .noselect {  
               -webkit-touch-callout: none;  
               -webkit-user-select: none;  
               -khtml-user-select: none;  
               -moz-user-select: none;  
               -ms-user-select: none;  
               user-select: none;  
           }  
           #chartjs-legend {  
               position: absolute;  
               width: 100%;  
               bottom: 10%;  
           }  
      
               #chartjs-legend li {  
                   cursor: pointer;  
                   margin: 10px 4px;  
               }  
      
                   #chartjs-legend li span {  
                       position: relative;  
                       padding: 6px 20px;  
                       border-radius: 13px;  
                       color: white;  
                       z-index: 2;  
                   }  
       </style>  
        <meta charset="utf-8" />  
        <title></title>  
    </head>  
    <body>  
        <div>  
            <canvas id="AssetStatus" width="500" height="500"></canvas>          
        </div>  
        <div id="chartjs-legend" class="noselect" ></div>  
    </body>  
    </html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<!DOCTYPE html>

<head>

$.ajax({

url: "<Add SharePoint Site Url>/_api/Web/Lists/GetByTitle('TaskDetails')/items",

type: "Get",

headers: {

"accept": "application/json;odata=verbose",

success: function (data) {

LoadChart(data);

error: function (err) {

//show error

}

});

var LoadChart = function (data) {

var items = [];

var statuses = [];

var chartData = [];

var temp = "";

//Loop through items to find unique statuses

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

items.push(data.d.results[i]);

if (statuses.filter(findStatus(data.d.results[i].status)).length > 0) {

continue;

}

temp = data.d.results[i].status;

statuses.push(temp);

}

function findStatus(arg) {

return function (items) {

return items.indexOf(arg) > -1;

}

var clrs = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"];

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

var tempCount = items.filter(findStatusInData(statuses[i])).length;

var object = {

value: tempCount,

color: clrs[i],

label: statuses[i]

}

chartData.push(object);

}

function findStatusInData(arg) {

return function (items) {

return items.status.indexOf(arg) > -1;

}

var ctx = document.getElementById('AssetStatus').getContext("2d");

var chart = new Chart(ctx).Doughnut(chartData, {});

document.getElementById("chartjs-legend").innerHTML = chart.generateLegend();

}

</script>

ol,

ul {

list-style: none;

margin: 0;

padding: 0;

text-align: center;

}

li {

display: inline-table;

}

.noselect {

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

#chartjs-legend {

position: absolute;

width: 100%;

bottom: 10%;

}

#chartjs-legend li {

cursor: pointer;

margin: 10px 4px;

}

#chartjs-legend li span {

position: relative;

padding: 6px 20px;

border-radius: 13px;

color: white;

z-index: 2;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

Refer to the attached resources for more.

SharePoint 2013 Hosting – HostForLIFE.eu :: How To Create InfoPath Form As Default Display Form Of List?

Aug 24th

Posted by Peter in European SharePoint 2013 Hosting

The blog covers how we can change the default display form of List using InfoPath Designer. Follow the steps to create your first InfoPath Form using InfoPath Designer. To use InfoPath Designer, you must use Internet Explorer as a browser because these features are not supported in Chrome or any other browsers.

Step 1

Create a List named “Student Registration” and add the following columns.
Column             Name Type
Title                  Single line of text
Email                Single line of text
Phone Number Single line of text
Address            Multiple lines of text
Birth Date    Date and Time

Step 2

In the top ribbon, click List > Customize in InfoPath.

A pop up will appear asking for permissions to allow InfoPath form. Please use Internet Explorer to use this feature.

Check the below layout.

The right side shows all the columns from the list which we have already created.
Middle portion shows InfoPath Form design layout in which one can design pages.
In order to create a Form, choose “Layout” and drag the appropriate fields.
Publish Form.
Check List in SharePoint Online.
Click New Item > It will open our custom design form.

SharePoint 2013 Hosting – HostForLIFE.eu :: How to Connect SharePoint Online Using PowerShell?

Aug 10th

Posted by Peter in European SharePoint 2013 Hosting

PowerShell is a powerful Command Line Shell Script mainly used by the administrators, and manages anything in Microsoft products. Each Microsoft product, be it Excel, SQL, Office applications, or SharePoint, has its own set of cmdlets [commands used to run any operation that can be performed using GUI and more than it].

Check the cmdlets that can be used in the SharePoint on-premises in my previous article.

But working with SharePoint online is a bit different. The prerequisites are –

PowerShell v3
.NET Framework
SharePoint Module – which can be downloaded from http://www.microsoft.com/en-us/download/details.aspx?id=35588

Once the module is downloaded, open SharePoint Online Management Shell and run the cmdlet to import the SharePoint online module cmdlets.

Import-Module Microsoft.Online.SharePoint.PowerShell -DisableNameChecking;

Or the SharePoint Online Management Shell can be installed directly using the link – https://www.microsoft.com/en-in/download/details.aspx?id=35588

Connect-SPOService -Url https://xyz.sharepoint.com -Credential peter@hostforlife.eu

Note
The connecting site should be a tenant administrator site and the user should have tenant administrator access. The session will be active as an internal variable.

To clear out the service, run Disconnect-SPOService cmdlet which will clear the connected session.

For code reusability, it is better to create a function to connect with SharePoint Online adminstrator site.

function ConnectSPOnlineSite() {  
    param (  
        $admin = "peter@hostforlife.eu",  
        $adminSite = "https://xyz.sharepoint.com"  
    )  
    if ((Get-Module Microsoft.Online.SharePoint.PowerShell).Count -eq 0) {  
        Import-Module Microsoft.Online.SharePoint.PowerShell -DisableNameChecking  
    }  
    $cred = Get-Credential $admin  
    Connect-SPOService -Url $adminSite -Credential $cred  
}

function ConnectSPOnlineSite() {

param (

$admin = "peter@hostforlife.eu",

$adminSite = "https://xyz.sharepoint.com"

)

if ((Get-Module Microsoft.Online.SharePoint.PowerShell).Count -eq 0) {

Import-Module Microsoft.Online.SharePoint.PowerShell -DisableNameChecking

}

$cred = Get-Credential $admin

Connect-SPOService -Url $adminSite -Credential $cred

}

There is a small change in the cmdlets of SharePoint On-premises and SharePoint Online. In “noun-verb” part of PowerShell cmdlets, the verb has prefixed Get-SPO****.

Example
Get-SPOSite- gets the site collection of particular URL/identity,
Get-SPOSiteGroup- returns all site groups of one or more site collection,
Get-SPOTenant – gets SharePoint online organization properties.

Most of the cmdlets are available till site collection level not till the site level [SPweb level as compared to SharePoint on premises ].

SharePoint 2013 Hosting – HostForLIFE.eu :: REST Calls With SPHttpClient Class In SPFx Webparts

Aug 2nd

Posted by Peter in European SharePoint 2013 Hosting

Let us look at the usage of sphttpclient in SPFx solutions for making REST calls. To access the required information on SharePoint sites, traditional REST API calls are made previously with JavaScript or jQuery. In the SharePoint Framework solutions, there is an option of making calls using predefined classes. These are the base communication layer used in the SPFx solutions for accessing SharePoint data.
SPHttpClient Class

HttpClient is the class which has basic features to perform REST calls. It can be used to perform REST calls for non-SharePoint services.

SPHttpClient is a subclass which inherits the functionalities from HttpClient, and is used to perform REST calls for SharePoint specific services. This will have default headers and digest information required for get or post calls.

SPHttpClient has the methods and properties. The methods are beginBatch, fetch, get, post, and getWebUrlFromRequestUrl.

Let us focus on retrieving the SharePoint list information using SPHttpClient class. Make sure the latest web part generator packages are available on the environment, before you start creating the SPFx project.

For getting the information, get method is used. This indirectly calls the fetch method. The fetch method will have the same functionalities same as get method. The required parameters are,

URL (string)
Configurations (SPHttpClientConfiguration) – Used to set the default headers and version numbers. There is only one value available at this stage (v1).
Options (ISPHttpClientOptions) – optional parameter, for setting the web URL explicitly.

The get method is triggered using the context with the help of SPHttpClient. URL and configurations are passed as parameters. The URL can be constructed with the help of context available on the component.

The response will be in the type SPHttpClientResponse. JSON data will then be extracted from the response using the methods available.
The required packages to be imported on the webpart file.

    import { SPHttpClient, SPHttpClientResponse, SPHttpClientConfiguration } from '@microsoft/sp-http';

1	import { SPHttpClient, SPHttpClientResponse, SPHttpClientConfiguration } from '@microsoft/sp-http';

The below code snippet shows retrieval of SharePoint list items.

this.context.spHttpClient.get(`${this.context.pageContext.web.absoluteUrl}/_api/lists/GetByTitle('TestList')/items`,  
          SPHttpClient.configurations.v1)  
          .then((response: SPHttpClientResponse) => {  
            response.json().then((responseJSON: any) => {  
              console.log(responseJSON);  
            });  
          });

this.context.spHttpClient.get(`${this.context.pageContext.web.absoluteUrl}/_api/lists/GetByTitle('TestList')/items`,

SPHttpClient.configurations.v1)

.then((response: SPHttpClientResponse) => {

response.json().then((responseJSON: any) => {

console.log(responseJSON);

});

Note
“this.context” is used to get the context on the web part TypeScript file. Alternatively, this can be changed in other framework component files.

SharePoint 2013 Hosting – HostForLIFE.eu :: How to Create Result Source In SharePoint 2013 Search Using PowerShell?

Jul 27th

Posted by Peter in Other Related Post

This blog post describes how to create a search result source using PowerShell in SharePoint 2013. I have a requirement to add additional search rules which will be used with the keywords entered by the user in the search box, then you will need to create custom search result source. The query will be,

{searchTerms} Author={User.Name} FileType=pdf FileType=docx

1	{searchTerms} Author={User.Name} FileType=pdf FileType=docx

Source Code

    Add-PSSnapin Microsoft.SharePoint.PowerShell  
        
    $SearchServiceApp = Get-SPEnterpriseSearchServiceApplication  
    $fedmanager = New-Object Microsoft.Office.Server.Search.Administration.Query.FederationManager($SearchServiceApp)  
        
    $searchOwner = Get-SPEnterpriseSearchOwner -Level Ssa    
        
    $resultSourceName = "Search"  
    $urlTemplate = "http://yoursharepointsitename/search?q={searchTerms}&format=rss&Market=en-Us"  
    $qT = "{searchTerms}"  
    $ResultSource = $fedmanager.GetSourceByName($resultSourceName, $searchOwner)  
    if(!$ResultSource){  
        Write-Host "Result source does not exist. Creating."  
        $ResultSource = $fedmanager.CreateSource($searchOwner)  
    }  
    else { Write-Host "Using existing result source." }  
        
    $ResultSource.Name =$resultSourceName  
    $ResultSource.ProviderId = $fedmanager.ListProviders()['OpenSearch Provider'].Id  
    $ResultSource.ConnectionUrlTemplate = $urlTemplate  
    $ResultSource.CreateQueryTransform($queryProperties,$qT)  
    $ResultSource.Commit()

Add-PSSnapin Microsoft.SharePoint.PowerShell

$SearchServiceApp = Get-SPEnterpriseSearchServiceApplication

$fedmanager = New-Object Microsoft.Office.Server.Search.Administration.Query.FederationManager($SearchServiceApp)

$searchOwner = Get-SPEnterpriseSearchOwner -Level Ssa

$resultSourceName = "Search"

$urlTemplate = "http://yoursharepointsitename/search?q={searchTerms}&format=rss&Market=en-Us"

$qT = "{searchTerms}"

$ResultSource = $fedmanager.GetSourceByName($resultSourceName, $searchOwner)

if(!$ResultSource){

Write-Host "Result source does not exist. Creating."

$ResultSource = $fedmanager.CreateSource($searchOwner)

}

else { Write-Host "Using existing result source." }

$ResultSource.Name =$resultSourceName

$ResultSource.ProviderId = $fedmanager.ListProviders()['OpenSearch Provider'].Id

$ResultSource.ConnectionUrlTemplate = $urlTemplate

$ResultSource.CreateQueryTransform($queryProperties,$qT)

$ResultSource.Commit()

SharePoint 2013 Italy Hosting – HostForLIFE.eu :: Setting Up the Development Environment For SharePoint Framework

Jul 20th

Posted by Peter in European SharePoint 2013 Hosting

SharePoint Framework (SPFx) is a page and Web part model, which provides full support for client-side SharePoint development, easy integration with SharePoint data and support for open source tooling. With SharePoint Framework, you can use modern Web technologies and tools in your preferred development environment to build productive experiences and apps, which are responsive and mobile-ready from day one. SharePoint Framework works for SharePoint On-Premises and SharePoint Online. For more details, refer Overview of the SharePoint Framework.

Install Dev Tools

Node.js

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model, which makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

NPM
Node Package Manager (npm) is used to install the packages, which you want to use and provide a useful interface to work with them.

Install Node.js and NPM

Visual Studio Code

Install VS Code

Install Yeoman and Gulp

Yeoman helps you to kick start new projects, prescribing best practices and tools to help you stay productive.

Use the console command given below to install Yeoman and Gulp.

npm i -g yo gulp

Install Yeoman SharePoint Generator

Yeoman SharePoint Web Part generator allows you to quickly create a SharePoint client-side solution projects with the right tool chain and the project structure.

Use the console command given below to install SharePoint generator:

npm i -g @microsoft/generator-sharepoint@latest

1	npm i -g @microsoft/generator-sharepoint@latest

SharePoint 2013 Hosting – HostForLIFE.eu :: Working With SharePoint And ChartJS

SharePoint 2013 Hosting – HostForLIFE.eu :: How To Create InfoPath Form As Default Display Form Of List?

SharePoint 2013 Hosting – HostForLIFE.eu :: How to Connect SharePoint Online Using PowerShell?

SharePoint 2013 Hosting – HostForLIFE.eu :: REST Calls With SPHttpClient Class In SPFx Webparts

SharePoint 2013 Hosting – HostForLIFE.eu :: How to Create Result Source In SharePoint 2013 Search Using PowerShell?

SharePoint 2013 Italy Hosting – HostForLIFE.eu :: Setting Up the Development Environment For SharePoint Framework

BLOGROLL

Featured On

European Sharepoint 2013 Hosting Blog

SharePoint 2013 Hosting – HostForLIFE.eu :: Working With SharePoint And ChartJS

SharePoint 2013 Hosting – HostForLIFE.eu :: How To Create InfoPath Form As Default Display Form Of List?

SharePoint 2013 Hosting – HostForLIFE.eu :: How to Connect SharePoint Online Using PowerShell?

SharePoint 2013 Hosting – HostForLIFE.eu :: REST Calls With SPHttpClient Class In SPFx Webparts

SharePoint 2013 Hosting – HostForLIFE.eu :: How to Create Result Source In SharePoint 2013 Search Using PowerShell?

SharePoint 2013 Italy Hosting – HostForLIFE.eu :: Setting Up the Development Environment For SharePoint Framework

BLOGROLL

Featured On

Tags