Employee Directory with SPFX ReactJS Using SharePoint Search Rest Api – Modern Webpart


Employee directory is now become a tea spoon in SharePoint. By using Search with Rest Api and react we can easily integrate in our SharePoint Pages.  Another best advantage is we can re-use the react component as well as we can use it on the classic site template.

Screen shots are mentioned below and the Code is on the Git Hub.

This component can fetch the user profile and get the department of login user and query to Search People rest api.

 

blog_01

 

 

1. Open Powershell and write the command to Create a SharePoint Framework project. yo @microsoft/sharePoint.

SharePoint Framework - Npm Package Manager
SharePoint Framework – Npm Package Manager

2. Options and settings are in the screen shot. i.e. Choose webpart, name, framework as react to make reuseable component. It will take a while to complete all pre-requisit.

SharePoint Framework - Npm Package Manager
SharePoint Framework – Npm Package Manager

3. Install Jquery through npm install jquery –save command

4. Instal react-radio-group throug npm install react-radio-group –save command
5. Open the solution in the VS Code Editor by “code .”

6. Go to the src->components->EmployeeDirectory.tsx file add the code.
a. First we need to add more proerties in the IEmployeeDirectoryProps interface

b. Import Libraries for request, jquery, radio group to be available in the component

b. Import Libraries for request, jquery, radio group to be available in the component

c. Add Constructor

SPFX ES6 Constructor
SPFX ES6 Constructor

d. RequestSeach Method

e. Render Method

Render Methods
Render Methods

f. Adding CSS. Open src->components->EmployeeDirectory.module.css.ts and add the css.

–Happy Sharing………

Advertisements

SharePoint Online – Update – default document mode will soon be 11 (Edge mode)


Display a classic SharePoint Online site in Internet Explorer 10 document mode to 11 (Edge mode)

When users browse SharePoint Online sites in Internet Explorer 11, the default document mode will soon be 11 (Edge mode), regardless of whether the site uses the new lists and libraries experience. We’ll no longer force the legacy compatibility mode 10. This will improve the performance and reliability of most pages. However, some custom master pages or custom web parts may contain custom code that relies on the older Internet Explorer 10 document mode.

Check if a site works in Edge document mode

Follow these steps to determine if the customization on a site will work in Edge mode:

  1. Open the site in Internet Explorer 11 and press F12 to open the developer tools.
  2. Select the Emulation tab, and under Document mode, select 11.

Revert site collections to Internet Explorer 10 document mode

If you find that a site collection has a customization that doesn’t work in Edge document mode, you can revert the site collection to Internet Explorer 10 document mode. To do this, you need to use a Microsoft PowerShell script with a CSOM (Client-side object model) wrapper. You must be a global admin in Office 365 to perform this task.

  1. Review the PowerShell execution policies.
  2. Copy the following code and paste it in a text editor such as Notepad.
    ##The first two lines of the script load the CSOM model:
    Add-Type -Path "C:\Users\{username}\downloads\Microsoft.SharePointOnline.CSOM.16.1.5026.1200\lib\net45\Microsoft.SharePoint.Client.dll"
    Add-Type -Path "C:\Users\{username}\downloads\Microsoft.SharePointOnline.CSOM.16.1.5026.1200\lib\net45\Microsoft.SharePoint.Client.Runtime.dll"
    
    $webUrl = 'https://{domain}.sharepoint.com/[optional path to subweb]'
    
    $username = Read-Host -Prompt "Enter or paste the site collection administrator’s full O365 email, for example, name@domain.onmicrosoft.com" 
    $password = Read-Host -Prompt "Password for $username" -AsSecureString
    
    [Microsoft.SharePoint.Client.ClientContext]$clientContext = New-Object Microsoft.SharePoint.Client.ClientContext($webUrl)
    $clientContext.Credentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($username, $password)
    ##To apply script to a site collection:
    	$site = $clientContext.Web; 
    $featureguid = new-object System.Guid "80E47777-D21C-46E0-9139-7C7741EB4B54"site.Features.Add($featureguid, $true, [Microsoft.SharePoint.Client.FeatureDefinitionScope]::None);
  3. Remove the code comment lines (which begin with ##) and save the file as an ANSI-encoded text file with the extension .ps1. For this example, we name the script file “IEMode.ps1.”
  4. Change to the directory where you saved the file.
  5. At the PowerShell command prompt, type:
    ./IEMode.ps1

source : https://support.office.com/en-us/article/Display-a-classic-SharePoint-Online-site-in-Internet-Explorer-10-document-mode-4b4572b7-9223-45ec-8497-557a643da12a?ui=en-US&rs=en-US&ad=US

Summary : Honestly, It will really helpful for people if it was done before, currently most of them are encountered done with branding with their tenants with this tag in their design manger html page 🙂 happy sharing……

 

Office 365 New features: MyAnalytics – Trends and Your time investments


We office 365 with another intelligent feature with the name MyAnalytics which seems very impressive. It is free available with E5 subscription however for other we have to purchase.

MyAnalytics uses data from Office 365 to help people across your organization understand how they spend their time and discover opportunities to work smarter.

All data surfaced in MyAnalytics is private and available only to the end user.

The new “Trends” chart gives users a visual overview of how their work habits have changed over time. The “Your time investments” chart provides a network map that helps users visualize and prioritize their relationships.

 

Trends: find long-term trends in your work habits

Capture

Your time investments: visualize and strengthen your network

MyAnalytics now visualizes your network so that you can identify missing links, improve your relationships, and prioritize the time you spend with co-workers.

Capture.PNG

Additional Information – Portal Office

 

 

Office 365 navigation bar – New Feature -Pin apps to the navigation bar


With all improvements and enhancements, another best feature has started to roll out from today in office 365.

The app launcher enables you to navigate across your services and apps in Office 365. we can can also pin up to three apps in navigation bar .

This makes those apps available instantly, from any Office 365 page or app.It will be more beneficial for the admin users.

navigation bar short cut

 

Remove-PnPUserFromGroup -SharePoint Online (PnP Power Shell)


SharePoint/PnP-PowerShell has provide a great efforts to minimize code and increase productivity in SharePoint Online Development.

Recently we have to remove bulk amount of user from SharePoint Group. We decided to go with pnp power shell script to do it. As per the document Link – Remove User From Group below is the code.

Remove-PnPUserFromGroup -LoginName <String>
                        -Identity <GroupPipeBind>
                        [-Web <WebPipeBind>]
i.e.
PS:> Remove-PnPUserFromGroup -LoginName user@company.com -GroupName 'Marketing Site Members'



But above code didn't work. 

Actually we have to provide the -LoginName string like "i:0#.f|membership|user@contoso.com"
and its work.Below is the working script.
Remove-PnPUserFromGroup -LoginName "i:0#.f|membership|abdul.aziz@contoso.com" -GroupName 'Document'

 

 

Remove All Items in List using MS PnP Powershell – SharePoint Online


I am sharing the below power shell snippet to help my fellows to remove all items in a list in the SharePoint online. Often we need to delete items at once using power shell or through JS code. PNP Power shell make it more easier to complete our task. (hats off)

Copy and paste the below code, it will loop through to a list and remove the item. Change the List name as yours.

Connect-PnPOnline –Url https://*********************

$items =Get-PnPListItem -List “ListName” -PageSize 1000

foreach ($item in $items)
{
try
{
Remove-PnPListItem -List “ListName” -Identity $item.Id -Force
}
catch
{
Write-Host “error”
}

} #for each end

To install PNP Power shell check the PnP PowerShell overview.

#Sharing is caring