Office Ui Fabric Pivot control Overflow issue in SPFx

Problem

office-ui-fabric-react is recommended to use with SharePoint Framework. 

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/use-fabric-react-components

With the Office UI Fabric React there is a overflow issue in Pivot. The overflow doesn't work as expected. 

Solution

• Install @fluentui/react-tabs 
• npm -i @fluentui/react-tabs
• Import the package to your React component 
• import { Pivot, PivotItem } from '@fluentui/react-tabs';
• Add overflow code to the Pivot 
• overflowBehavior="menu"

Conclusion 

SharePoint Framework (SPFx) starting points

 Introduction

In this blog post we will look at some basic SPFx ideas for a easy start on SPFx. These points can be changed according to the individual and I'm sharing these points based only on my own experience. 

• Its easy to use React framework for SPFx
• As UI framework its great to use office-ui-fabric-react
• npm install office-ui-fabric-react
• For the controls its better to use sp-dev-fx-controls-react from pnp
• Visit https://pnp.github.io/sp-dev-fx-controls-react/
• npm install @pnp/spfx-controls-react --save --save-exact
• Also better to user Reusable property pane controls for the SharePoint Framework solutions
• Visit https://pnp.github.io/sp-dev-fx-property-controls/
• npm install @pnp/spfx-property-controls --save --save-exact
• Use functional components which React
• You can use the below GitHub repository to start your project. 
• https://github.com/SuhailCloud/hello-spfx 
• Use PnPJS npm packages for CRUD Operations in SharePoint 
• https://pnp.github.io/pnpjs/packages/
• npm install @pnp/sp --save

gulp : File is not digitally signed. during gulp serve

Problem

I was trying to create SPFx solutions and when I try to debug the solution using gulp serve command I got the below error “gulp : File C:\Users\suhail\AppData\Roaming\npm\gulp.ps1 cannot be loaded. The file C:\Users\suhail\AppData\Roaming\npm\gulp.ps1 is not digitally signed.”

Solution

To fix the issue  we will have to run the below command.

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

This command sets the execution policy to bypass for only the current PowerShell session, when you open again you may need to run again.

Happy SPFx building

Display Lookup columns in Column Formatting in SharePoint Online lists

Problem

I was trying to display a column value through lookup field in column formatting. I want to display the lookup value of a custom field (Not the title or Id). 

I want to my Country column display as US - United States. Here are the attempts which didn't work. 

Solution

I got this sorted by using the CAML Designer.