Skip to main content

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 with other components in the tenant?" - Yes

Note: By mistake if you press No, in config file later we can again change it to yes. 

In package-solution.json -> isDomainIsolated: true ( because we press Yes for the second prompt)

----------------------------------------------------------------

Choose no-javascript 

Install graph types:

npm install @microsoft/microsoft-graph-types --save-dev

then import in main.ts file below

import {MSGraphClient} from '@microsoft/sp-http';
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

Now in the render method, use this sample code to fetch the user information from graph api.
  public render(): void {
    this.context.msGraphClientFactory.getClient()
      .then((graphclient: MSGraphClient):void => {
        graphclient
          .api('/me')
          .get((error,user:MicrosoftGraph.User, rawResponse?:any)=>{

            this.domElement.innerHTML = `
            <div>

              <p class="${ styles.description }">Display Name: ${user.displayName}</p>
              <p class="${ styles.description }">givenName Name: ${user.givenName}</p>
              <p class="${ styles.description }">mail: ${user.mail}</p>
              <p class="${ styles.description }">surname Name: ${user.surname}</p>
              <p class="${ styles.description }">userPrincipalName Name: ${user.userPrincipalName}</p>

            </div>`;
         
          });
      });
  }

Now, we need to permissions to the graph API.
Go to package-solution.json
{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "isolatedwebpart-client-side-solution",
    "id": "50963e34-400b-4491-bf05-03f0f6668641",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "isDomainIsolated": true,
    "webApiPermissionRequests":[{
      "resource": "Microsoft Graph",
      "scope": "User.ReadBasic.All"
    }],
    "developer": {
      "name": "",
      "websiteUrl": "",
      "privacyUrl": "",
      "termsOfUseUrl": "",
      "mpnId": ""
    }
  },
  "paths": {
    "zippedPackage": "solution/isolatedwebpart.sppkg"
  }
}
Now, budle and package the solution.
Now, Upload the sppkg file to App catalog.
After upload the sppkg file, you observe the below prompt popup.

This client side solution will get content from the following domains:

SharePoint Online

Please go to the API Management Page to approve pending permissions. These are the permissions that need to be reviewed: Microsoft Graph, User.ReadBasic.All

---------------------

Now we need to grant the permissions.

Go to sharepoint admin center

https://mercedessaga-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx

Click on Advanced->Select the webpart and approve.

--------------------

Here we have to notice that, If we are creating Isolated webpart, then it always asks to approve/reject in the advance->API access section, shown under Isolated webpart category.

If admin has approved, then webpart is available to access it in pages.

--------------------

Now go to aad.portal.azure.com

Go to Azure Active Directory 

click on App registrations

under all applications category

you can observe your webpart name resides overthere.

--------------------

Click on the webpart link

You will find, application ID(client ID)

When you test your webpart in the page, it asks application ID, this ID is used overthere.

Now try add your webpart in page.

Click on Add an App

lets wait for provision


You can see the webpart running fine.





Comments

Popular posts from this blog

Powerapps overcome 2000 item limit from any datasource

First go through delegation concept https://tejasadventure.blogspot.com/2020/05/power-apps-understanding.html In powerapps, we observe by default 500 item limit has set with in the app level for any data source. In order to overcome, we have option to set the limit of 2000 item limit maximum in the app. Now using code, MaximoFacility is my data source name contains 3000 items. ColFacilityDropdown is the collection storing the count of items from data source. We expect to see more than 2000 items. Based on StartWith function filtering the data with respective to the charectors and numbers as mentioned below. Code: Place the below code in a button on select property. Add label with code CountRows(ColFacilityDropdown) ClearCollect(ColFacilityDropdown,Filter(Filter(MaximoFacility, Status = "ACTIVE"), StartsWith( Title, "A" ))); Collect(ColFacilityDropdown,Filter(Filter(MaximoFacility, Status = "ACTIVE"), StartsWith( Title, "B" ))); Collect(ColFacilit...

Power Apps Understanding

https://tejasadventure.blogspot.com/2019/10/power-apps-we-have-1.html https://tejasadventure.blogspot.com/2019/11/power-apps-how-to-configure-using-blank.html   https://tejasadventure.blogspot.com/2019/11/power-apps-field-controls.html Report We can use people picker fields, look up fields  file attachment back next save cancel download the report and this report can be used in other system of powerapp. Add new report button - asks add from existing report Report all item view can design in the way like sharepoint list views for example. we can group it Group AND or Group OR by apply filters Canvas apps: Arrange user experience and interface design allow creativity and business use case guide how the way app wants to look like. Sources can be around 200+ ways. Majorly SharePOint, Power BI From data, From Sample From CDS From blank canvas via appSource Model driven apps: Model driven apps uses power of CDS rapidly to configure your for...

PowerApps multiselect cascading dropdown and save an item to SharePoint List

 I have one scenario as below List 1: Division List has title field List 2: District List has Title and Division Field(LookUp from Division List) List 3: Facility List has Title, District Field(LookUp field from District List) List 4: County List has Title, Facility Field(LookUp field from Facility List) Main List: Spill Report is the main list  Division Field( Look up from Division List) District Field(Look up field from District List) Facility Field(Look up field from Facility List) County Field(Look up field from County List) List Screenshots provided below can be refered for clarification. ----------------------------------------------------------------------------------------------------- PowerApps Canvas Apps In Power Apps Canvas App, We need to first design the app with the 4 respective fields Since those fields are multiselect, then it is to combo box. Generally power apps are not supported for multiselect cascasding dropdown. Refere microsoft documentation, Know Limit...