Sunday, 26 May 2019

Hide Site Content and other Layout pages using spfx

Hide Site Content using SPFX extension

1. Create a SharePoint group "HideApplicationPages" .
2. Deploy package in App catalog "hide-application-pages-with-site-content.sppkg".
3. Add App on SharePoint site where you  want to hide the site content.


Download package from here Click here


Wednesday, 15 May 2019

add external js reference on every page using spfx


 //define a property
 private _externalJsUrl: string = "https://extrenalSP.azurewebsites.net/scripts/SPFxGlobalScript.js";

 //add below code snippet on onInit() method
  @override
  public onInit(): Promise<void> {
    console.log(`IHideSiteContentApplicationCustomizerProperties.onInit(): Entered.`);
    let scriptTag: HTMLScriptElement = document.createElement("script");
    scriptTag.src = this._externalJsUrl;
    scriptTag.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(scriptTag);
    console.log(`IHideSiteContentApplicationCustomizerProperties.onInit(): Added script link.`);
    console.log(`IHideSiteContentApplicationCustomizerProperties.onInit(): Leaving.`);
    return Promise.resolve();
}

Monday, 6 May 2019

Classic People picker in Spfx



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


//Add below people picker html

<div id="peoplePickerUsers"></div>

// add the below function to OnInit methos

 public onInit(): Promise<void>
  {
  SPComponentLoader.loadCss("/_layouts/15/1033/styles/Themable/corev15.css");
   SPComponentLoader.loadScript('/_layouts/15/init.js', {
      globalExportsName: '$_global_init'
    }) .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/1033/strings.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/clienttemplates.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/MicrosoftAjax.js', {
        globalExportsName: 'Sys'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/SP.Runtime.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/SP.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/sp.core.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/clientforms.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/clientpeoplepicker.js', {
        globalExportsName: 'SP'
      });
    }).then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/autofill.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): void =>
    {
     //bind People picker control
     this.initializePeoplePicker("peoplePickerUsers");
    });

   // return Promise.resolve<void>();
return Promise.resolve();
  }

// declare three variable to intialize the control

declare var SP: any;
declare var SPClientPeoplePicker: any;
declare var SPClientPeoplePicker_InitStandaloneControlWrapper: any;

// Add function to intialize the people picker control

private initializePeoplePicker(peoplePickerElementId:string):void
{
    let schema = {};
    schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
    schema['SearchPrincipalSource'] = 15;
    schema['ResolvePrincipalSource'] = 15;
    schema['AllowMultipleValues'] = false;
    schema['MaximumEntitySuggestions'] = 50;
    schema['Width'] = '280px';

    SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
}


//To Get The People Picker Value
private getPeopleUserInfoGroups(pickerPickerControlId:string): void
{
this.peoplePickerLoginName="";
//var pickerDiv = $("[id^='" + pickerPickerControlId + "']");
let pickerDiv:any =document.querySelectorAll("[id^='" + pickerPickerControlId + "']");
var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv[1].id];
let users:any = peoplePicker.GetAllUserInfo();
if (users.length > 0)
{
for (let i:number = 0; i < users.length; i++)
{
console.log(users[i].Key);
this.peoplePickerLoginName=users[i].Key;
this.GetUserIdByLoginName(this.peoplePickerLoginName);
}
}
}
private async GetUserIdByLoginName(loginName:string)
{
let tempUserInformation:any;
tempUserInformation= await pnp.sp.web.siteUsers.getByLoginName(loginName).get();
return tempUserInformation;
}

// To set the people picker value

private setPeoplePickerValue(controlNameID:string, LoginNameOrEmail:string) {
//var fieldName = id + '_TopSpan';
let peoplePickerDiv:any =document.querySelectorAll("[id^='" + controlNameID + "']");
// Get the people picker object from the page.
let peoplePicker:any = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[1].id];
peoplePicker.AddUserKeys(LoginNameOrEmail, false);
}