sptechnet

[sptechnet]

Accessing third party API without CORS error in SPFx using Azure Function

Accessing third party API without CORS error in SPFx using Azure Function

When we access third-party API in the SPFx web part, sometimes we will get a CORS error, we can fix this issue using a simple azure function. CORS Error Access to fetch at 'https://api.darksky.net/forecast/febb2871126cd24613f32a79c32d4158/1.222,2.333' from origin 'https://ravichandran.sharepoint.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the…

[sptechnet]

PnP Dynamic Form Control for SPFx

PnP Dynamic Form Control for SPFx

This control can dynamically generate a SharePoint list or SharePoint document library form and everything is controlled through the list setting. include a default value, mandatory and options. we can build the long-form by just using one line of code Importing Dynamic Form import { DynamicForm } from '@pnp/spfx-controls-react/lib/DynamicForm'; Control tag and the attributes <div…

[sptechnet]

PnP Location Picker Control for SPFx

PnP Location Picker Control for SPFx

This location picker control allows you to search and select the location, also allows enter a custom location. also it is easy to use we don’t have to configure for API permissions Importing location picker control import { LocationPicker, ILocationPickerItem } from "@pnp/spfx-controls-react/lib/LocationPicker"; Control tag and the…

[sptechnet]

Custom Quick Launch using Fluent UI Nav in SPFx

Custom Quick Launch using Fluent UI Nav in SPFx

This article provides steps to implement the Custom Quick Launch using Fluent UI Nav in the SharePoint Framework (SPFx) web part, generally, Fluent UI Navs (also called “left nav” or “navigation pane”) provide links to the main areas of an app or a site. In larger configurations, the Nav is always on-screen, usually on the left of the view. In smaller configurations, the Nav may collapse into a…

[sptechnet]

React Hooks in SPFx

React Hooks in SPFx

This article provides steps to use the react hooks in the SharePoint Framework (SPFx) projects, generally, Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes. here we walkthrough react state, props, event and async functions in the FunctionComponent for SPFx.  

Why…

[sptechnet]

Multi-Select Lookup Field Managed Using Fluent UI Dropdown in SPFx

Multi-Select Lookup Field Managed Using Fluent UI Dropdown in SPFx

These articles provide steps to implement the Multi-Select Lookup Field Managed Using Fluent UI Dropdown in the SharePoint Framework (SPFx) web part, generally Fluent UI Dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the…

[sptechnet]

PnP ListItem Attachments control in the SharePoint Framework (SPFx) web part

PnP ListItem Attachments control in the SharePoint Framework (SPFx) web part

These articles provide steps to implement the PnP ListItem Attachments control in the SharePoint Framework (SPFx) web part, generally List Item attachment control allows you to manage list item attachments, you can add or delete associated attachments. The attachments are listed in tile view.

Create a new web part project

Open power shell and run following comment to create a new web part…

[sptechnet]

Fluent UI Message bar in the SharePoint Framework (SPFx) web part

Fluent UI Message bar in the SharePoint Framework (SPFx) web part #SPFx #FluentUI

This article provides steps to implement the Fluent UI Message bar in the SharePoint Framework (SPFx) web part, generally a MessageBar is an area at the top of a primary view that displays relevant status information. You can use a MessageBar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.

Create a new…

[sptechnet]

PnP Taxonomy Picker in the SharePoint Framework (SPFx) web part

PnP Taxonomy Picker in the SharePoint Framework (SPFx) web part

This article provides steps to implement the PnP Taxonomy Picker in the SharePoint Framework (SPFx) web part, This control allows you to select one or more Terms from a TermSet via its name or TermSet ID. You can also configure the control to select the child terms from a specific term in the TermSet by setting the AnchorId. In this article we using PnP Taxonomy Picker to set and get the value…

[sptechnet]

QR Code Generator in the SharePoint Framework (SPFx) web part

QR Code Generator in the SharePoint Framework (SPFx) web part

This article provides steps to implement the QR Code Generator in the SharePoint Framework (SPFx) web part, generally, QR Code Generator is a simple and convenient tool that help you create QR Code image displayed on the screen. Several content types are supported, include Text, Url, Email, Phone number, Contact, Geolocation and SMS.

Create a new web part project

Open power shell and run…

[sptechnet]

Document Card Carousel in The SharePoint Framework (SPFx) web part

Document Card Carousel in The SharePoint Framework (SPFx) web part

This article provides steps to implement the Document Card Carousel in The SharePoint Framework (SPFx) web part, generally, A DocumentCard is a card representation of a file. This is usually richer than just seeing the file in a grid view, as the card can contain additional metadata or actions. In this article we using PnP Carousel control to roll the DocumentCard, files are retrieved from the…

[sptechnet]

Modern Page Provisioning in the SharePoint Framework (SPFx)

Modern Page Provisioning in the SharePoint Framework (SPFx)

This article provides steps to implement the mordern page provisioning using PnPjs in the SharePoint Framework (SPFx), generally PnPjs clientside pages module allows you to created, edit, and delete modern SharePoint pages. There are methods to update the page settings and add/remove client-side webparts.

Create a new web part project

Open power shell and run following comment to create a…

[sptechnet]

Fluent UI Toggle Switch Control in the SharePoint Framework (SPFx) Field Customizer Extension

Fluent UI Toggle Switch Control in the SharePoint Framework (SPFx) Field Customizer Extension #PnPjs #SPFx #FluentUI #ravichandran.blog

This article provides steps to implement the Fluent UI Toggle Switch Control in the SharePoint Framework (SPFx) Field Customizer Extension, generally, The toggle switch represents a physical switch that allows users to turn things on or off, like a light switch. Use toggle switch controls to present users with two mutually exclusive options (such as on/off), where choosing an option provides…

[sptechnet]

Tree view navigation using PnP Treeview control in the SharePoint Framework (SPFx) web part

Tree view navigation using PnP Treeview control in the SharePoint Framework (SPFx) web part #SPFx #PnPControls

This article provides steps to implement the Tree view navigation using PnP Treeview control in the SharePoint Framework (SPFx), generally, Treeview control allows to present a hierarchical view of information. Each tree item can have a number of subitems. This is often visualized by an indentation in a list. A tree item can be expanded to reveal subitems (if exist), and collapsed to hide…

[sptechnet]

PnP listview and contextual menu in the SharePoint Framework (SPFx) web part

PnP listview and contextual menu in the SharePoint Framework (SPFx) web part #SPFx #PnPControls

This article provide steps to implement the PnP Listview with contextual menu in the SharePoint Framework (SPFx), generally Listview control can be used to make fully custom list view for SharePoint List or Library and the contextual menu helps provide options to manages file or list item.

Create a new web part project

Open power shell and run following comment to create a new web part by…

[sptechnet]

PnP ListView in the SharePoint Framework (SPFx) webpart

PnP ListView in the SharePoint Framework (SPFx) webpart

This article provide steps to implement the PnP Listview in the SharePoint Framework (SPFx), generally Listview control can be used to make fully custom list view for SharePoint List or Library.

Create a new web part project

Open power shell and run following comment to create a new web part by running the Yeoman SharePoint Generator

yo @microsoft/sharepoint

When prompted:

Enter…

[sptechnet]

Hello World webpart in Teams using SPFx

Hello World webpart in Teams using SPFx #SPFx #Teams

Building Microsoft Teams app is possible if you using SharePoint Framework v1.8 or above. In this article we used v1.10. So basically web part has to hosted in the SharePoint and hosted web part can be accessed inside the Microsoft Teams, let we see the step by step instruction to building the Microsoft Teams app using SPFx,  

Create a new web part project

Open power shell and run the…