Modern Business Solutions: SharePoint & Dynamics 365

Tuesday, 4 February 2020

how to pass data between react component in spfx

how to pass data from parent to child and child to parent component

Tuesday, 21 January 2020

npm and gulp commands in spfx

SPFX(gulp) and NPM basic commands

yo @microsoft/sharepoint

gulp build

gulp serve

gulp serve --nobrowser

gulp bundle

gulp bundle --ship

gulp package-solution

gulp package-solution --ship

gulp clean

To check the list of globally installed compiler in npm

npm ls -g --depth=0

Result:

E:\SharePointFrameWorkDEV\ReactSPFXSolution>npm ls -g --depth=0

C:\Users\m.muqtdeer\AppData\Roaming\npm

+-- @angular/cli@8.3.22

+-- @microsoft/generator-sharepoint@1.10.0

+-- gulp@4.0.2

+-- npm@6.13.6

+-- typescript@3.7.5

`-- yo@3.1.1

To check the version of current package and new version when upgrading the current solution

npm outdated

Result:

E:\SharePointFrameWorkDEV\ReactSPFXSolution>npm outdated

Package Current Wanted Latest Location

@microsoft/rush-stack-compiler-2.9 0.7.16 0.7.16 0.10.1 student-details

@microsoft/rush-stack-compiler-3.3 0.3.5 0.3.5 0.5.1 student-details

@pnp/common 1.3.9 1.3.9 2.0.0 student-details

@pnp/graph 1.3.9 1.3.9 2.0.0 student-details

@pnp/logging 1.3.9 1.3.9 2.0.0 student-details

@pnp/odata 1.3.9 1.3.9 2.0.0 student-details

@pnp/sp 1.3.9 1.3.9 2.0.0 student-details

@types/chai 3.4.34 3.4.34 4.2.7 student-details

@types/es6-promise 0.0.33 0.0.33 3.3.0 student-details

@types/mocha 2.2.38 2.2.38 5.2.7 student-details

@types/react 16.8.8 16.8.8 16.9.18 student-details

@types/react-dom 16.8.3 16.8.3 16.9.5 student-details

@types/webpack-env 1.13.1 1.13.1 1.15.0 student-details

ajv 5.2.5 5.2.5 6.11.0 student-details

gulp 3.9.1 3.9.1 4.0.2 student-details

office-ui-fabric-react 6.189.2 6.189.2 7.83.2 student-details

react 16.8.5 16.8.5 16.12.0 student-details

react-dom 16.8.5 16.8.5 16.12.0 student-details

styled-components 4.4.1 4.4.1 5.0.0 student-details

To check globally installed package

npm outdated -g

E:\SharePointFrameWorkDEV\ReactSPFXSolution>npm outdated -g

Package Current Wanted Latest Location

@angular/cli 8.3.22 8.3.23 8.3.23 global

Thursday, 9 January 2020

read row data in html table using jQuery

15555	2	3	4	5
row2	2	3	4	888
1	2	3	4	99
1	2	3	4	666
1	2	3	4	77

$(document).ready(function(){

$('#dtTable tbody').on('click', 'td.details-control', function () {

var tr = $(this).closest('tr');

var row = ReadRowData(tr);

alert(row);

});

function ReadRowData(tr)

{

var rowData=[];

$('td', tr).each(function ()

{

rowData.push($(this).html());

});

return rowData;

}

</script>

<tbody>

</tbody>

</table>

Sunday, 5 January 2020

To Show google chart in SPFX below are steps to follow

1. open the config.json file and add below enetry in external section

"externals": {
"google": {
"path": "https://www.gstatic.com/charts/loader.js",
"globalName": "google"
}
}
2. add below div tag in your html
<div id="pie-chart"></div>
3. create a google.d.ts file under the webpart folder inside src folder.
4. add below code in google.d.ts as a module

declare module "google" {
interface IGoogle {
charts: any;
visualization: any;
}
var google: IGoogle;
export = google;
}

5. now import the google module in webpart where you want to add graph

import * as google from 'google';

6. add below code on OnInt method

public onInit(): Promise<void>
{
google.charts.load("current", { packages: ["corechart"] });
return super.onInit();
}

7. create a fucntion to LoadGoogleChart a chart

private LoadGoogleChart(arrayDataTable) {

// to add legend and first row in array
arrayDataTable.splice(0, 0, ['TaskList', 'Hours',{ role: 'annotation'}]);

let data =google.visualization.arrayToDataTable(arrayDataTable);

const options = {
title: 'My Daily Work',
pieHole: 0.4,
};

const chart = new google.visualization.PieChart(document.getElementById('pie-chart'));
chart.draw(data, options);
}

8. finally call your fucntion on button click or page load and pass the data in LoadGoogleChart() method as array

private GraphData()
{
let graphDataArray=[];
graphDataArray.push(['Work', 11]);
graphDataArray.push(['Eat', 2]);
graphDataArray.push(['Commute', 2]);
graphDataArray.push(['Watch TV', 2]);
graphDataArray.push(['Sleep', 7]);
google.charts.setOnLoadCallback(webpart.LoadGoogleChart(graphDataArray));
}

Thursday, 19 December 2019

Azure AD Access Token using ADAL

1. Below is app settings to use the

2. Below method used to get the access token on behalf of registered Application clietnId and securekey

public async Task<string> Authentication()

{

string accessToken = string.Empty;

try

{

string authorityy = string.Format(CultureInfo.InvariantCulture, CommonService.AADInstance, CommonService.tenantId);

AuthenticationContext authContext = new AuthenticationContext(authorityy);

// //Pass the credential

var clientCredential = new ClientCredential(CommonService.clientId, CommonService.ClientSecureKey);

var result = authContext.AcquireTokenAsync(CommonService.RedirectUri, clientCredential).Result;

//Acquire the token

accessToken = result.AccessToken;

}

catch (Exception ex)

{

string errorString = "Error in UserAuthontication :" + ex.Message.ToString() + "\n" + ex.StackTrace;

Console.WriteLine(errorString);

CommonService.WriteLogg(errorString);

}

return accessToken;

}

Wednesday, 18 December 2019

Get SharePoint LisItem using pnp recursively

private async GetAllItemsRecursivly()

{

      // the query also works with select to choose certain fields and top 

      //to set the page size

    let items = await pnp.sp.web.lists.getByTitle("Navigation").items.

     filter("Title eq 'Department'").select("Title,Id").top(5).getPaged();

    // the results property will be an array of the items returned

    console.log("We got results!");

    for (let i = 0; i < items.results.length; i++)

    {

        // type checking works here if we specify the return type

        console.log(items.results[i].Id);

    }

    // the hasNext property is used with the getNext method to handle paging

    // hasNext will be true so long as there are additional results

    while(items.hasNext)

    {

        // this will carry over the type specified in the original query 

        //for the results array

        items = await items.getNext();

        for (let i = 0; i < items.results.length; i++)

        {

          // type checking works here if we specify the return type

          console.log(items.results[i].Id);

        }

    }

}

Tuesday, 20 August 2019

how to clear client people picker

How to clear a client people picker

ClearClientPeoplePicker("ClientPeoplePicker_TopSpan");

function ClearClientPeoplePicker(controlId)
{
//var fieldName = id + '_TopSpan';
var peoplePickerDiv = $("[id$='" + controlId + "']");

// Get the people picker object from the page.
var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];

var usersobject = peoplePicker.GetAllUserInfo();
usersobject.forEach(function (index) {
peoplePicker.DeleteProcessedUser(usersobject[index]);
});
}

Saturday, 10 August 2019

How to work on react component

How to use react component in spfx ?

1. Add React Webpart

2. Once your webpart is ready then open .tsx file from component folderand Import react component reference in your webpart

import {Label} from 'office-ui-fabric-react';

3. We will add a Label component in render method to show a message on webpart.

public render(): React.ReactElement<IReactDemoProps> {

return (

<div className={ styles.reactDemo }>

<div className={ styles.container }>

<div className={ styles.row }>

<div className={ styles.column }>

<Label className={styles.title}>Welcome to react component</Label>

</div>

);

}

4. Result :è

Saturday, 3 August 2019

jQuery datepicker in SPFX

npm install jquery@2 --save
npm install jqueryui --save

npm install @types/jquery@2 --save
npm install @types/jqueryui --save

import { SPComponentLoader } from '@microsoft/sp-loader';
import * as $ from 'jquery';
import 'jqueryui';

<input type="text" id="txtDate" >

public constructor() {
super();
SPComponentLoader.loadCss('//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css');
}

public BindDatePicker()
{
$("#txtDate").datepicker();
}

Friday, 26 July 2019

SharePoint Analytics Webpart using SPFX

1. Add External Reference in Config.json file

"externals": {"google": {

"path": "https://www.gstatic.com/charts/loader.js",

"globalName": "google"

}},

2. Create a file inside webpart google.d.ts
3. Add below code inside google.d.ts

declare module "google" {

interface IGoogle {

charts: any;

visualization: any;

}

var google: IGoogle;

export = google;

}

4. add below code in webpart ts file
import { Version } from '@microsoft/sp-core-library';

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import {

IPropertyPaneConfiguration,

PropertyPaneTextField

} from '@microsoft/sp-property-pane';

import { escape } from '@microsoft/sp-lodash-subset';

import { SPComponentLoader } from '@microsoft/sp-loader';

import styles from './SpfxSiteAnalyticsWebPart.module.scss';

import * as strings from 'SpfxSiteAnalyticsWebPartStrings';

import pnp, {  GraphHttpClient, SortDirection, Web } from 'sp-pnp-js';

export interface ISpfxSiteAnalyticsWebPartProps {

topHeadBG: string;

graphBG:string;

tableBG:string;

tableStyle:string;

tableHeader:string;

}

//declare var google:any;

import * as google from 'google';

import { PnPClientStorage } from 'sp-pnp-js';

import * as jQuery from 'jquery';

import 'jqueryui';

import * as bootstrap from 'bootstrap';

import 'jquery/dist/jquery.min.js';

import 'bootstrap/dist/css/bootstrap.css';

import 'bootstrap/dist/js/bootstrap.js';

let webUrlResult =[];

export default class SpfxSiteAnalyticsWebPart extends BaseClientSideWebPart<ISpfxSiteAnalyticsWebPartProps> {

public render(): void {

this.domElement.innerHTML = `

    <div class="${ styles.spfxSiteAnalytics }">

    <div class="${ styles.container }">

        <div class="${ styles.row }" style="background-color:${this.properties.topHeadBG}">

            <div class="row">

                <div class="col-lg-3">

                    <label class="${styles.label}">View</label>

                    <select id="ddlViews" class="form-control">

                        <option>ViewsRecent</option>

                        <option>ViewsLifeTime</option>

                        <option>ViewsLifeTimeUniqueUsers</option>

                    </select>

                </div>

                <div class="col-lg-3">

                    <label class="${styles.label}">Top</label>

                    <select id="ddlTop" class="form-control">

                        <option>10</option>

                        <option>20</option>

                        <option>30</option>

                        <option>50</option>

                        <option>60</option>

                        <option>100</option>

                    </select>

                </div>

                <div class="col-lg-3">

                    <label class="${styles.label}">Site URL</label>

                    <select id="ddlsitesUrl" class="form-control"></select>

                </div>

                <div class="col-lg-3">

                    <label class="${styles.label}"></label>

                </div>

            </div>

            <div class="row">

                <div class="col-lg-3">

                    <label class="${styles.label}">Refine Search</label>

                    <select id="ddlRefine" class="form-control">

                        <option>All</option>

                        <option>Custom</option>

                        <option>Select</option>

                    </select>

                </div>

                <div class="col-lg-3">

                    <label class="${styles.label}">Extension</label>

                    <select id="ddlExtension" class="form-control">

                        <option>All</option>

                        <option>ppt</option>

                        <option>pptx</option>

                        <option>doc</option>

                        <option>docx</option>

                        <option>aspx</option>

                        <option>msg</option>

                        <option>xlx</option>

                        <option>xlsx</option>

                        <option>png</option>

                        <option>jpg</option>

                        <option>jpeg</option>

                    </select>

                </div>

                <div class="col-lg-3">

                    <label class="${styles.label}">Custom Extension</label>

                    <input type="text" class="form-control" id="txtExtension">

                </div>

                <div class="col-lg-3">

                    <label class="${styles.label}"></label>

                    <input id="btnLoad" type="button" style="margin-top: 25px;" value="Load" class="${styles.button}">

                </div>

            </div>

            </div>

            <div class="${ styles.row }" style="background-color:${this.properties.graphBG}">

                <div class="${ styles.column }">

                    <div id="graphChart" style="width: 550px; height: 400px; margin: 0 auto"></div>

                </div>

            </div>

            <div class="${ styles.row }" style="background-color:${this.properties.tableBG}">

                <div class="${ styles.column }">

                    <div>

                        <table border="1" style="${this.properties.tableStyle}">

                            <thead style="${this.properties.tableHeader}">

                            <th>Id</th>

                            <th>Page URL</th>

                            <th>Views</th>

                            </thead>

                            <tbody id="HTMLtable"></tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>

    `;

this.PageLoad();

}

protected get dataVersion(): Version {

return Version.parse('1.0');

}

private PageLoad()

{

const webpart:SpfxSiteAnalyticsWebPart=this;

jQuery("#btnLoad").click(check=>

{

webpart.CheckSiteAudiance("path:"+jQuery("#ddlsitesUrl").val());

});

jQuery("#ddlRefine").change(chk=>{

let refineValue=jQuery("#ddlRefine").val();

if(refineValue=="All")

{

jQuery("#txtExtension").val('');

jQuery("#ddlExtension").val('All');

}

else if(refineValue=="Custom")

{

jQuery("#ddlExtension").val('All');

}

else if(refineValue=="Select")

{

jQuery("#txtExtension").val('');

}

});

jQuery("#ddlsitesUrl").append(jQuery("<option></option>").attr("value", "*").text("All"));

webpart.LoadAllSites(this.context.pageContext.web.absoluteUrl);

}

private LoadAllSites(webUrl:string)

{

const webpart:SpfxSiteAnalyticsWebPart=this;

let b = pnp.sp.createBatch();

jQuery("#ddlsitesUrl").append(jQuery("<option></option>").attr("value",this.context.pageContext.web.absoluteUrl).text("Current Site"));

// Get current site call recursive

pnp.sp.web.expand("Webs").get().then( w => {

if(w.Webs.length > 0)

{

w.Webs.forEach(subsite=> {

// Add subsites to array

webUrlResult.push({

title: subsite.Title,

url: subsite.Url

});

jQuery("#ddlsitesUrl").append(jQuery("<option></option>").attr("value", subsite.Url).text(subsite.Title));

});

}

});

}

public onInit(): Promise<void>

{

SPComponentLoader.loadCss("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css");

google.charts.load('current', {packages: ['corechart']});

return super.onInit();

}

private LoadGoogleChart(arrayDataTable:any)

{

arrayDataTable.splice(0, 0, ['Page', 'Page Count',{ role: 'annotation'}]);

let data =google.visualization.arrayToDataTable(arrayDataTable);

let options = {title: 'Top Pages',

hAxis: {

title: 'Page Number',

},

vAxis: {

title: 'Page Count'

}

};

let chart =new google.visualization.ColumnChart(document.getElementById('graphChart'));

chart.draw(data, options);

}

private CheckSiteAudiance(tragetSiteURL:string)

{

const webpart:SpfxSiteAnalyticsWebPart=this;

let ddlViews=jQuery("#ddlViews").val();

let ddlTop:number=Number(jQuery("#ddlTop").val());

let refineValue=jQuery("#ddlRefine").val();

let refineSearch:string;

if(refineValue=="All")

{

jQuery("#txtExtension").val('');

jQuery("#ddlExtension").val('All');

}

else if(refineValue=="Custom")

{

refineSearch=jQuery("#txtExtension").val().trim();

jQuery("#ddlExtension").val('All');

if(refineSearch.length==0)

{

alert("Please enter custom value");

return;

}

}

else if(refineValue=="Select")

{

refineSearch=jQuery("#ddlExtension").val();

jQuery("#txtExtension").val('');

if(refineSearch=="All")

{

alert("Please select any extension");

return;

}

}

let searchFilters = {

Querytext:tragetSiteURL,

RowLimit: ddlTop,

SelectProperties: ['Title','OriginalPath','ViewsLifeTime','ViewsRecent','ViewsLifeTimeUniqueUsers'],

TrimDuplicates: false,

SortList: [{Property:ddlViews,Direction:SortDirection.Descending}],

RefinementFilters : ["fileExtension:equals('"+refineSearch+"')"]

};

if(refineValue=="All")

{

delete searchFilters.RefinementFilters;

}

pnp.sp.search(searchFilters).then(result=>{

let items=result.PrimarySearchResults;

jQuery("#graphChart").html("");

jQuery("#HTMLtable").html("");

if(items.length>0)

{

let graphDataArray=[];

let serialNumber=1;

items.forEach(item=>

{

jQuery("#HTMLtable").append("<tr><td>"+serialNumber+"</td><td style='word-break: break-all;'>"+item.OriginalPath+"</td><td>"+Number(item[ddlViews])+"</td></tr>");

graphDataArray.push([String(serialNumber++),Number(item[ddlViews]),Number(item[ddlViews])]);

});

google.charts.setOnLoadCallback(webpart.LoadGoogleChart(graphDataArray));

}

}).catch(error=>{

console.log(error);

});

}

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

return {

pages: [

{

header: {

description: strings.PropertyPaneDescription

},

groups: [

{

groupName: strings.BasicGroupName,

groupFields: [

PropertyPaneTextField('topHeadBG', {

label: "Page Header Background"

}),

PropertyPaneTextField('graphBG', {

label: "Graph Area Background"

}),

PropertyPaneTextField('tableBG', {

label: "Table Area Background"

}),

PropertyPaneTextField('tableStyle', {

label: "Table Style",value:'border: 1px solid black;width:600px;color:black;background:white;'

}),

PropertyPaneTextField('tableHeader', {

label: "Table Header Style",value:'background: #005a9e; color: white; width: 600px;padding: 5px;;'

})

]

}

]

}

]

};

}

}

5. Run gulp bundle command
6. run gulp serve command
7. open workbench and add SPFXAnalyticWebpart on page
8. See the below result full customization report