SharePoint & Power Apps Learning

 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...

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...

component width: Max(App.Width, App.MinScreenWidth) Components: New component -> and created MenuComponents New custom property -> Items Input Type Data Type: Table Table({Item:"Home"}, {Item:"Admin"}, {Item:"About"}, {Item:"Help"}); We have to create an output property,  before that, I have added on vertical gallery in MenuComponents Gallery1 - with only text label Items:  MenuComponent.Items It will show list of Menu's Now create an output property: New custom property-> Selected Output Type Data Type: Text click on created Selected property, click on advanced - >  we observe Selected(Output) Gallery1.Selected.Item  Which means we are passing an output. In our MenuComponent, since we already added on gallery control Hence Gallery1.Selected.Item which ever is selected been an output from our output property named as selected. What is Scope in components? In MenuComponent which we create, right hand side there is an option called ...

First we are creating context from WebPartContext in props ts file. import { WebPartContext } from "@microsoft/sp-webpart-base" ; export interface INewCrudWithReactProps {   description : string ;   context : WebPartContext ;   siteUrl : string ; } Then go to main .ts file, supply values to context and siteUrl public render (): void {     const element : React . ReactElement < INewCrudWithReactProps > = React . createElement (       NewCrudWithReact ,       {         description : this . properties . description ,         context : this . context ,         siteUrl : this . context . pageContext . web . absoluteUrl       }     );     ReactDom . render ( element , this . domElement );   } Create ISoftwareCatalog ts file. export interface ISoftwareCatalog {     Id : number ;     Title : string ; ...