Skip to main content

Posts

SPFx CRUD operations using React Framework code

props.ts: ICrudwithreactwebpart.ts import { WebPartContext } from "@microsoft/sp-webpart-base" ; export interface ICrudWithReactWebPartProps {   description : string ;   context : WebPartContext ;   siteUrl : string ; } ------------- main.ts CrudWithReactWebPart ,       {         description : this . properties . description ,         context : this . context ,         siteUrl : this . context . pageContext . web . absoluteUrl       } ---------------- State file: ICrudWithReactState.ts import { ISoftwareListItem } from "./ISoftwareListItem" ; export interface ICrudWithReactState {     status : string ;     SoftwareListItems : ISoftwareListItem [];     SoftwareListItem : ISoftwareListItem ; } ----------- interface: ISoftwareListItem.ts export interface ISoftwareListItem {     Id : number ;     Title : string ;   ...

SPFx Isolated Webparts

 Isolated webparts are availble for SPFx 1.8.0 or later versions. Why do we want to make our webparts as Isolated webparts? When your webpart is trying to access any back end API, using microsoft graph, In order to handle the security permissions this isolated webpart concept has come in SPFx. When you calling any methods in back end API, we are giving few permissions to run the script with in the page of the webpart. Here we have to give permissions only to the script/code as part of the webpart. Hence we use isolated webpart. When we package the solution, and add the webpart to the page, These isolated webparts are run on a unique domain and is hosted in an iFrame. A dedicated azure ad is gets created for this spfx solution, which handles the authentication. ----------------------------------------------------------- Create a new webpart solution. Make sure the prompt "Will the components in the solution require permissions to access web APIs that are unique and not shared w...

SPFX using Office UI Fabric to Show all the list items

We are going to create a UI as below. https://admin.microsoft.com/Adminportal/Home#/users Using MSGraph API fetch the users from Microsoft Admin page portal, and display on the page. Create react framework Install MS graph types dependency  npm install @microsoft/microsoft-graph-types --save-dev Go to props file in component folder, first we need webpart context. so import webpart context. import { WebPartContext } from '@microsoft/sp-webpart-base' ; then export interface IShowAllItemsOfficeUiFabricProps {   description : string ;   context : WebPartContext ; } now in main ts file, we need to pass value to the context, const element : React . ReactElement < IShowAllItemsOfficeUiFabricProps > = React . createElement (       ShowAllItemsOfficeUiFabric ,       {         description : this . properties . description ,         context : this . context       }     ); No...