SharePoint & Power Apps Learning

How deploy spfx solutions in Office CDN or Azure CDN Local Hosting created a folder c:\A\SPFX\DeployOffice365CDNAzureCDN> create a subfolder DeployOffice365CDNAzureCDN\HostingThroughLocalServerDemo> in code, if you observe package-solution.json, includeClientSideAssets: true by default. It means, all our css,js files are part of the package that gets created as sppkg file. gulp build gulp bundle  using this we are bundling or minifying our javascript files. as soon as bundling happens, a new folder has created which named as temp. observe in folder structure. temp folder contains manifest ts file and json file. Next step is we are doing package the solution using gulp package-solution We should be getting a new folder called sharepoint. it contains solution folder, inside sppkg file. It contains one debug folder, which has all the raw files of sppkg file. In order to test our webpart, we have gulp serve. which is test the webpart in our local server. now we can observe the gu...

Deploy SPFx webpart in MS Teams as a Tab. First create webpart solution template choose Do you allow tenant admin as yes no-javascript framework install teams js as adding as dependency to our solution. npm install @microsoft/teams-js --save Under src - webparts folder In manifest.json file, you can find supportedHosts:["SharePointWebPart"] by default. you need to add "TeamsTab" "supportedHosts": ["SharePointWebPart","TeamsTab"], now go to webpart.ts main file. we have to import microsoftteam from microsoft teams-js. import * as microsoftTeams from '@microsoft/teams-js'; Follow step from this article: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab

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

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