RLV Blog

How to get “order” and “level” for pages in OneNote Graph API

Posted on June 25, 2025 by Dan

Quick tip: To include the order and level properties when getting pages with the Graph OneNote API, you need to add ?pagelevel=true to your request. This is not mentioned in the documentation.

Posted in Development, Tips | Tagged microsoft graph, onenote | Leave a comment

Moving Term Sets Accross Site Collection Maintaining Term ID:s

Posted on May 28, 2025 by Dan

In SharePoint we have the Term Store for managing reusable terms. Besides tenant level term groups, which are available to all site collections, each site can have their own group. There are situations when you need to move term sets between different site collections or to/from the tenant level. If the terms you are moving are in use by site fields it is important to maintain the term IDs. Luckily, when creating new terms with code you can specify the ID. But all terms are stored in the same database, so you can’t pick an ID that is already in use somewhere else. Here is how to manage such a move.

In this example I’m moving a local term group to the tenant level using PnP PowerShell:

Extract the terms: Export-PnPTermGroupToXml -Out "C:\Temp\terms.xml" -Identity "Site Collection - contoso.sharepoint.com-sites-MySiteCollection"
Open terms.xml
- I recommend to verify that all terms are included
- On the second line, edit the TermGroup attributes:
  - Set SiteCollectionTermGroup to "false"
  - Change the Name to something more suitable
- Do a find and replace to change SourceTermId into ID:
  - Find ID="00000000-0000-0000-0000-000000000000" and remove all instances
  - Find all SourceTermId and replace with ID
- Save the file
Now delete the original term set in SharePoint(!)
Apply the template to re-create the term group in the new location: Import-PnPTermGroupFromXml -Path "C:\Temp\terms.xml"

Finally, on the original site, edit all site fields that were using the affected term sets. They will have lost their connection to the original term sets, so you need to set it again, pointing on the new one!

Posted in Development, Tips | Tagged pnp powershell, sharepoint, term store | Leave a comment

New-MgOauth2PermissionGrant : Missing property: clientId

Posted on May 5, 2025 by Dan

I was trying to add some permissions to the (new) SPFx app. This is done using the New-MgOauth2PermissionGrant cmdlet. All examples shows using it with -BodyParameter :

$params = @{
"clientId" = $sPFxSP.id
"ConsentType" = "AllPrincipals"
"ResourceId" = $resourceSP.id
"scope" = $scope
}
New-MgOauth2PermissionGrant -BodyParameter $params

$params = @{

"clientId" = $sPFxSP.id

"ConsentType" = "AllPrincipals"

"ResourceId" = $resourceSP.id

"scope" = $scope

}

New-MgOauth2PermissionGrant -BodyParameter $params

But this did not work for me. All I got back was an error

New-MgOauth2PermissionGrant : Missing property: clientId

I got it working by passing each property by itself instead:

New-MgOauth2PermissionGrant -ClientId $spfx.id -ConsentType "AllPrincipals" -ResourceId $resource.id -Scope $scope

1	New-MgOauth2PermissionGrant -ClientId $spfx.id -ConsentType "AllPrincipals" -ResourceId $resource.id -Scope $scope

Posted in Development, Tips | Tagged azure app registration, microsoft graph, powershell, spfx | Leave a comment

Azure Functions suddenly returning 403 when called from SPFx

Posted on April 4, 2025 by Dan

Microsoft has recently made a change to SharePoint Framework that might break existing solutions that use an Azure backend (e.g. a Function App) that is secured to only allow requests from SPFx apps. For us, our Azure Functions suddenly started returning 403 Forbidden.

Previously you would secure your Azure apps to only allow requests from SharePoint Online Client Extensibility Web Application Principal. With the change, you need to change it to allow SharePoint Online Web Client Extensibility instead. Unlike the old app, the new app is global and has the Client ID 08e18876-6177-487e-b8b5-cf950c1e598c. Allowing this ID fixed our problems!

Posted in Development, Tips | Tagged authentication, azure ad, azure functions, entra id, sharepoint online, spfx | Leave a comment

Securing an Azure Function with Entra ID and calling it from SPFx

Posted on February 7, 2025 by Dan

This post outlines how to limit access to an Azure Functions App so that only tenant users can access it, and how to then consume this function from an SPFx app in SharePoint.

Updated: Use SharePoint Online Web Client Extensibility instead of SharePoint Online Client Extensibility Web Application Principal

Preparations

Your functions should use AuthorizationLevel.Anonymous since the underlying App Service will be taking care of authentication.
Enable CORS on the Function App in Azure and allow the SharePoint domain.
~~On the App Registrations blade in Azure Entra ID, find SharePoint Online Client Extensibility Web Application Principal and copy the “Application (Client) ID”.~~
On Enterprise Applications blade in Azure Entra ID, find SharePoint Online Web Client Extensibility and copy the (Client) ID (should be: 08e18876-6177-487e-b8b5-cf950c1e598c).

Secure the Functions App in Azure

On the Authentication blade, select Add Identity Provider.
Choose Microsoft.
Under Client application requirement, select Allow requests from specific client applications and add the Client ID for the SharePoint app you copied above.
Other settings can be left pretty much as is.
When you click Add a new Entra ID App is created.
Copy the App (Client) ID and App Display Name of the app.

Optional: Azure created some settings that we will not use. These can be removed to avoid confusion:

On the Environment settings blade in the Function App, remove the MICROSOFT_PROVIDER_AUTHENTICATION_SECRET entry.
In Entra ID, go to App Registrations and find the newly created app. On the Authentication blade, remove the “Web” platform. On the Certificates & Secrets blade, remove the “Client Secret”.

Setup SPFx Permissions

Open package-solution.json in your SPFx solution. Add the following to the solution section:

"webApiPermissionRequests": [
  {
    "resource": "Windows Azure Active Directory",
    "scope": "User.Read"
  },
  {
    "resource": "[DISPLAY NAME OF THE ENTRA ID APP]",
    "scope": "user_impersonation"
  }
]

"webApiPermissionRequests": [

{

"resource": "Windows Azure Active Directory",

"scope": "User.Read"

{

"resource": "[DISPLAY NAME OF THE ENTRA ID APP]",

"scope": "user_impersonation"

}

]

Build your solution ( gulp clean && gulp bundle --ship && gulp package-solution --ship ). A SharePoint package (.sppkg) file is created in the SharePoint/solution folder.
Open your tenant app catalog and upload and upload the package. Enable it when asked.
When done, click Go to API access page. Find your app and Approve it.

Note: At this point you can remove your app from the app catalog while you continue developing it locally.

Call the function

Finally, to call the function from your SPFx code, use AadHttpClient :

import { AadHttpClient, HttpClientResponse } from '@microsoft/sp-http';

...

this.context.aadHttpClientFactory
  .getClient('api://[CLIENT ID OF YOUR ENTRA ID APP]')
  .then((client: AadHttpClient): void => {
    client.get('https://[FUNCION-APP-NAME].azurewebsites.net/api/[FUNCTION NAME]', AadHttpClient.configurations.v1)
  .then((response: HttpClientResponse): Promise<any> => {
    return response.json();
  })
  .then((result: any): void => {
    console.log("✅", result);
  }, (err: any): void => {
    console.log("❌", err)
  });
});

import { AadHttpClient, HttpClientResponse } from '@microsoft/sp-http';

...

this.context.aadHttpClientFactory

.getClient('api://[CLIENT ID OF YOUR ENTRA ID APP]')

.then((client: AadHttpClient): void => {

client.get('https://[FUNCION-APP-NAME].azurewebsites.net/api/[FUNCTION NAME]', AadHttpClient.configurations.v1)

.then((response: HttpClientResponse): Promise<any> => {

return response.json();

})

.then((result: any): void => {

console.log("✅", result);

}, (err: any): void => {

console.log("❌", err)

});

Learnings

The normal authentication flow is to redirect the user to a login prompt. If each SPFx web parts used this flow it would not be a good user experience. Instead, SharePoint has a special app, the “SharePoint Online Web Client Extensibility”. This app is pre-authenticated and we can use it to make secure. So when implementing authentication in our own APIs we need to allow the SharePoint app instead of our own.

Posted in Development, Tutorials | Tagged authentication, azure ad, azure functions, entra id, sharepoint, spfx | 2 Comments

Using emojis for easier JavaScript debugging

Posted on October 1, 2024 by Dan

I normally don’t care much for emojis, but lately I’ve found them to be helpful when working with JavaScript. The JavaScript console may not be the most elegant way to debug, but it’s the quickest and sometimes only reasonable way to figure out what is happening in your code when async actions fly by. But it can quickly get quite crowded in the console. Here I found that emojis can help. Simply prefixing your logs with symbols of different color and shape is an easy way to make them stand out and give some context!

Tip: In Windows, press Win + . to open the Emoji insert dialog in any text input field.

Posted in Development, Tips | Tagged debugging, emoji, javascript, logging | Leave a comment

Attaching a context menu to DetailsList column headers in Fluent UI

Posted on September 5, 2024 by Dan

I wanted to show a menu when clicking the column headers of a DetailsList, similar to how SharePoint does it. Fluent UI 8 does not have any built in support for this, so I had to figure out a way to do it myself.

Here is a sample project showing my solution. When clicking the column headers you get a menu allowing you to sort the list based on that column. Not very existing, but it shows how to dynamically build and position the context menu, and how to handle when the user selects a menu option depending on the column.

Get the full project code on GitHub

Most of the files are just generated boilerplace code. The interesting part is App.tsx:

import React, { useEffect } from 'react';
import './App.css';
import { ContextualMenu, DetailsList, DirectionalHint, IColumn, IContextualMenuItem } from '@fluentui/react';

interface IFruit {
  [key:string]: string;
  name: string;
  color: string;
}

export const App: React.FunctionComponent = () => {

  const [menuDomTarget, setMenuDomTarget] = React.useState<HTMLElement | undefined>(undefined);
  const [menuItems, setMenuItems] = React.useState<IContextualMenuItem[]>([]);
  const [clickedColumn, setClickedColumn] = React.useState<IColumn | undefined>(undefined);

  const [listItems, setListItems] = React.useState<IFruit[]>([
      { name: "Strawberry", color: "Red" },
      { name: "Pear", color: "Green" },
      { name: "Apple", color: "Red" },
      { name: "Banana", color: "Yellow" },
      { name: "Grapes", color: "Green" },
      { name: "Pineapple", color: "Yellow" },
      { name: "Watermelon", color: "Green" },
  ]);

  const onColumnClick = (ev?: React.MouseEvent<HTMLElement>, column?: IColumn): void => {
    setMenuDomTarget(ev?.currentTarget);
    setClickedColumn(column);  
  };

  const [columns, setColumns] = React.useState<IColumn[]>([
    { key: 'name', name: "Name", fieldName: 'name', minWidth: 100, isRowHeader: true },
    { key: 'color', name: "Color", fieldName: 'color', minWidth: 100, }
  ]);

  const sortItems = (columnKey: string, sortDescending: boolean): void => {

    // Update columns to show sort order icon
    const newColumns: IColumn[] = columns.slice();
    const currColumn: IColumn = newColumns.filter(currCol => columnKey === currCol.key)[0];
    newColumns.forEach((newCol: IColumn) => {
      if (newCol === currColumn) {
        currColumn.isSortedDescending = sortDescending;
        currColumn.isSorted = true;
      } else {
        newCol.isSorted = false;
        newCol.isSortedDescending = true;
      }
    });
    setColumns(newColumns);

    // Sort the items accordingly
    const newItems = [...listItems];
    newItems.sort((a: IFruit, b: IFruit) => {
      if(sortDescending)
        return b[columnKey].localeCompare(a[columnKey])
      else
        return a[columnKey].localeCompare(b[columnKey])
    });
    setListItems(newItems);
  };

  useEffect(() => {
    if(clickedColumn) {
      // Dynamically generate the menu items based on the clicked column.
      const items: IContextualMenuItem[] = [
        {
          key: "sortAsc",
          text: "A to Z",
          iconProps: { iconName: "Ascending"},
          onClick: () => {sortItems(clickedColumn.key, false)},
        },
        {
          key: "sortDesc",
          text: "Z to A",
          iconProps: { iconName: "Descending"},
          onClick: () => {sortItems(clickedColumn.key, true)},
        }
      ];
      setMenuItems(items);
    }
  }, [clickedColumn, sortItems]);

  return (
    <div className="container">
      <DetailsList
        items={listItems}
        columns={columns}
        isHeaderVisible={true}
        onColumnHeaderClick={onColumnClick}
        className="details-list"
      />

      {menuDomTarget !== undefined && 
        <ContextualMenu
          items={menuItems}
          hidden={menuDomTarget === undefined}
          target={menuDomTarget}
          onItemClick={() => setMenuDomTarget(undefined)}
          onDismiss={() => setMenuDomTarget(undefined)}
          directionalHint={DirectionalHint.bottomLeftEdge}
          />
      }
    </div>
  );
};

100

101

102

103

104

105

106

107

import React, { useEffect } from 'react';

import './App.css';

import { ContextualMenu, DetailsList, DirectionalHint, IColumn, IContextualMenuItem } from '@fluentui/react';

interface IFruit {

[key:string]: string;

name: string;

color: string;

}

export const App: React.FunctionComponent = () => {

const [menuDomTarget, setMenuDomTarget] = React.useState<HTMLElement | undefined>(undefined);

const [menuItems, setMenuItems] = React.useState<IContextualMenuItem[]>([]);

const [clickedColumn, setClickedColumn] = React.useState<IColumn | undefined>(undefined);

const [listItems, setListItems] = React.useState<IFruit[]>([

{ name: "Strawberry", color: "Red" },

{ name: "Pear", color: "Green" },

{ name: "Apple", color: "Red" },

{ name: "Banana", color: "Yellow" },

{ name: "Grapes", color: "Green" },

{ name: "Pineapple", color: "Yellow" },

{ name: "Watermelon", color: "Green" },

]);

const onColumnClick = (ev?: React.MouseEvent<HTMLElement>, column?: IColumn): void => {

setMenuDomTarget(ev?.currentTarget);

setClickedColumn(column);

};

const [columns, setColumns] = React.useState<IColumn[]>([

{ key: 'name', name: "Name", fieldName: 'name', minWidth: 100, isRowHeader: true },

{ key: 'color', name: "Color", fieldName: 'color', minWidth: 100, }

]);

const sortItems = (columnKey: string, sortDescending: boolean): void => {

// Update columns to show sort order icon

const newColumns: IColumn[] = columns.slice();

const currColumn: IColumn = newColumns.filter(currCol => columnKey === currCol.key)[0];

newColumns.forEach((newCol: IColumn) => {

if (newCol === currColumn) {

currColumn.isSortedDescending = sortDescending;

currColumn.isSorted = true;

} else {

newCol.isSorted = false;

newCol.isSortedDescending = true;

}

});

setColumns(newColumns);

// Sort the items accordingly

const newItems = [...listItems];

newItems.sort((a: IFruit, b: IFruit) => {

if(sortDescending)

return b[columnKey].localeCompare(a[columnKey])

else

return a[columnKey].localeCompare(b[columnKey])

});

setListItems(newItems);

};

useEffect(() => {

if(clickedColumn) {

// Dynamically generate the menu items based on the clicked column.

const items: IContextualMenuItem[] = [

{

key: "sortAsc",

text: "A to Z",

iconProps: { iconName: "Ascending"},

onClick: () => {sortItems(clickedColumn.key, false)},

{

key: "sortDesc",

text: "Z to A",

iconProps: { iconName: "Descending"},

onClick: () => {sortItems(clickedColumn.key, true)},

}

];

setMenuItems(items);

}

}, [clickedColumn, sortItems]);

return (

<DetailsList

items={listItems}

columns={columns}

isHeaderVisible={true}

onColumnHeaderClick={onColumnClick}

className="details-list"

{menuDomTarget !== undefined &&

<ContextualMenu

items={menuItems}

hidden={menuDomTarget === undefined}

target={menuDomTarget}

onItemClick={() => setMenuDomTarget(undefined)}

onDismiss={() => setMenuDomTarget(undefined)}

directionalHint={DirectionalHint.bottomLeftEdge}

}

</div>

);

};

Posted in Development | Tagged contextualmenu, detailslist, fluent ui, react, typescript | 1 Comment

Better cache management in ASP.Net Core (LazyCache/FusionCache)

Posted on June 17, 2024 by Dan

LazyCache and the newer FusionCache are two great libraries that simplifies working with caching in ASP.Net Core. Something I’ve often been missing though is the ability to dispose of the entire cache, not just single items. (My understanding is that this limitation stems from them being built on top of the distributed cache in ASP.Net Core.) You could solve it by keeping track of all cached items, but that seems overkill. Let see how we can solve it in a simple way with some clever code!

Here is a typical way to use fetch an item from the database:

var product = await _cache.GetOrAddAsync($"product-{id}", async () =>
{
    return await _db.getProductById(id);
}, TimeSpan.FromHours(1));

var product = await _cache.GetOrAddAsync($"product-{id}", async () =>

{

return await _db.getProductById(id);

}, TimeSpan.FromHours(1));

Notice $"product-{id}" which is the key by which the cache framework looks up data from the cache. Let’s add a helper class and move the key there instead:

public static class CacheHelper
{
    public static string ProductKey = $"product-{DateTime.Now}";

    public static void BustCache()
    {
        ProductKey = $"product-{DateTime.Now}";
    }
}

public static class CacheHelper

{

public static string ProductKey = $"product-{DateTime.Now}";

public static void BustCache()

{

ProductKey = $"product-{DateTime.Now}";

}

Now we can use CacheHelper.ProductKey instead of the hard coded key:

var product = await _cache.GetOrAddAsync($"{CacheHelper.ProductKey}-{id}", async () =>
{
    return await _db.getProductById(id);
}, TimeSpan.FromHours(1));

var product = await _cache.GetOrAddAsync($"{CacheHelper.ProductKey}-{id}", async () =>

{

return await _db.getProductById(id);

}, TimeSpan.FromHours(1));

Now if we want to clear the cache we can simply call CacheHelper.BustCache() ! We’re not actually clearing the cache, just changing the identifiers and thus forcing the cache to repopulate. The old cache items will go stale and eventually be flushed by the API.

Let’s improve the code a bit more. It’s usually a good idea to put logic and business rules in one place. Composing the cache key manually ( $"{CacheHelper.ProductKey}-{id}" ) and setting the duration every time we want to get a product item sounds like an accident waiting to happen, so we’ll move everything to the CacheHelper class:

public static class CacheHelper
{
    public static string GetProductKey(int id) {
        return $"Product-{id}-{ProductCacheDate}".ToLower();
    }

    public static void BustCache()
    {
	    ProductCacheDate = DateTime.Now.ToString();
    }

    private static string ProductCacheDate = DateTime.Now.ToString();
}

public static class CacheDurations
{
    public static TimeSpan Product = TimeSpan.FromHours(1);
}

public static class CacheHelper

{

public static string GetProductKey(int id) {

return $"Product-{id}-{ProductCacheDate}".ToLower();

}

public static void BustCache()

{

ProductCacheDate = DateTime.Now.ToString();

}

private static string ProductCacheDate = DateTime.Now.ToString();

}

public static class CacheDurations

{

public static TimeSpan Product = TimeSpan.FromHours(1);

}

Then to use it:

var product = await _cache.GetOrAddAsync(CacheHelper.GetProductKey(id), async () =>
{
    return await _db.getProductById(id);
}, CacheDurations.Product);

var product = await _cache.GetOrAddAsync(CacheHelper.GetProductKey(id), async () =>

{

return await _db.getProductById(id);

}, CacheDurations.Product);

CacheHelper.GetProductKey(id) makes it easy to get the correctly formatted key whenever we need it. For more advanced keys we can even add multiple parameters to the method. And when someone asks how long items are cached you can quickly look it up! This could also be a good place to add some comments on cache logic implemented elsewhere.

With just a few changes we’ve made cache management easier and more robust. Of course the code can be improved in many ways, but hopefully it gives some ideas on how to go about!

Posted in Development, Tips | Tagged asp.net core, c#, caching, coding, tricks | Leave a comment

Modifying SharePoint list permissions with PnP Core

Posted on May 20, 2024 by Dan

Working with SharePoint permissions is not always straight forward. This code snippet is an exercise using PnP Core to modify permissions on lists with unique (broken) permissions. All assigned permissions are changed to read only, except for owners group of the site. The code is hopefully a good starting point for similar tasks, and should be easy to adapt to list items if needed.

var siteGroups = new Dictionary<int, string>();
await context.Web.SiteGroups.LoadAsync(p => p.Title, p => p.Id);
await foreach (var group in context.Web.SiteGroups)
{
    siteGroups.Add(group.Id, group.Title);
}

await context.Web.LoadAsync(p => p.Title, 
                            p => p.AssociatedMemberGroup, 
                            p => p.AssociatedOwnerGroup, 
                            p => p.AssociatedVisitorGroup,
                            p => p.RoleDefinitions,
                            p => p.Lists.QueryProperties(p => p.Id,
                                                         p => p.TemplateType,
                                                         p => p.Title,
                                                         p => p.HasUniqueRoleAssignments,
                                                         p => p.RoleAssignments,
                                                         p => p.DocumentTemplate));

int ReadRoleDefinitionId = 1073741826;
var readerRoleDefinition = context.Web.RoleDefinitions.FirstOrDefault(p => p.Id == ReadRoleDefinitionId);
if(readerRoleDefinition == null)
{
    throw new Exception("Reader role not found");
}

foreach (var list in context.Web.Lists.AsRequested().Where(p => p.TemplateType == PnP.Core.Model.SharePoint.ListTemplateType.DocumentLibrary))
{
    Console.WriteLine("Processing List: " + list.Title);

    if (list.HasUniqueRoleAssignments == true)
    {
        var roleAssignments = (await list.GetAsync(p => p.All, p => p.RoleAssignments.QueryProperties(p => p.All))).RoleAssignments;

        foreach (var roleAssignment in roleAssignments)
        {
            if(siteGroups.ContainsKey(roleAssignment.PrincipalId))
            {
                Console.WriteLine($"  Group: {siteGroups[roleAssignment.PrincipalId]} ({roleAssignment.PrincipalId})");
            }
            else
            {
                var user = await context.Web.GetUserByIdAsync(roleAssignment.PrincipalId);
                Console.WriteLine($"   User: {user.Title} ({roleAssignment.PrincipalId})");
            }

            if (roleAssignment.PrincipalId != context.Web.AssociatedOwnerGroup.Id)
            {
                var changeRole = false;
                var roleDefs = await list.GetRoleDefinitionsAsync(roleAssignment.PrincipalId);
                foreach (var def in roleDefs.AsRequested())
                {
                    Console.WriteLine("       : Current role definition: " + def.Name + " (" + def.Id + ")");
                    if(def.Id != ReadRoleDefinitionId)
                    {
                        changeRole = true;
                        Console.WriteLine("       : Remove role...");
                        await list.RemoveRoleDefinitionAsync(roleAssignment.PrincipalId, def);
                    }
                }
                if (changeRole)
                {
                    Console.WriteLine("       : Assign as reader...");
                    await list.AddRoleDefinitionAsync(roleAssignment.PrincipalId, readerRoleDefinition);
                }
            }
        }
    }
}

var siteGroups = new Dictionary<int, string>();

await context.Web.SiteGroups.LoadAsync(p => p.Title, p => p.Id);

await foreach (var group in context.Web.SiteGroups)

{

siteGroups.Add(group.Id, group.Title);

}

await context.Web.LoadAsync(p => p.Title,

p => p.AssociatedMemberGroup,

p => p.AssociatedOwnerGroup,

p => p.AssociatedVisitorGroup,

p => p.RoleDefinitions,

p => p.Lists.QueryProperties(p => p.Id,

p => p.TemplateType,

p => p.Title,

p => p.HasUniqueRoleAssignments,

p => p.RoleAssignments,

p => p.DocumentTemplate));

int ReadRoleDefinitionId = 1073741826;

var readerRoleDefinition = context.Web.RoleDefinitions.FirstOrDefault(p => p.Id == ReadRoleDefinitionId);

if(readerRoleDefinition == null)

{

throw new Exception("Reader role not found");

}

foreach (var list in context.Web.Lists.AsRequested().Where(p => p.TemplateType == PnP.Core.Model.SharePoint.ListTemplateType.DocumentLibrary))

{

Console.WriteLine("Processing List: " + list.Title);

if (list.HasUniqueRoleAssignments == true)

{

var roleAssignments = (await list.GetAsync(p => p.All, p => p.RoleAssignments.QueryProperties(p => p.All))).RoleAssignments;

foreach (var roleAssignment in roleAssignments)

{

if(siteGroups.ContainsKey(roleAssignment.PrincipalId))

{

Console.WriteLine($" Group: {siteGroups[roleAssignment.PrincipalId]} ({roleAssignment.PrincipalId})");

}

else

{

var user = await context.Web.GetUserByIdAsync(roleAssignment.PrincipalId);

Console.WriteLine($" User: {user.Title} ({roleAssignment.PrincipalId})");

}

if (roleAssignment.PrincipalId != context.Web.AssociatedOwnerGroup.Id)

{

var changeRole = false;

var roleDefs = await list.GetRoleDefinitionsAsync(roleAssignment.PrincipalId);

foreach (var def in roleDefs.AsRequested())

{

Console.WriteLine(" : Current role definition: " + def.Name + " (" + def.Id + ")");

if(def.Id != ReadRoleDefinitionId)

{

changeRole = true;

Console.WriteLine(" : Remove role...");

await list.RemoveRoleDefinitionAsync(roleAssignment.PrincipalId, def);

}

if (changeRole)

{

Console.WriteLine(" : Assign as reader...");

await list.AddRoleDefinitionAsync(roleAssignment.PrincipalId, readerRoleDefinition);

}

Posted in Development | Tagged c#, permissions, pnp, pnpcore, sharepoint | Leave a comment

Show React dialogs fluently with hooks and promises

Posted on May 9, 2023 by Dan

Suppose you have a React component that displays a modal dialog and returns the result:

<Dialog message="Are you sure?" onClose={onCloseDialog}>

1	<Dialog message="Are you sure?" onClose={onCloseDialog}>

The typical way to use it would be to have a state variable controlling if it should be displayed or not, and a function for handling the return value. Something like this:

function MyComponent() {
  const [showDialog, setShowDialog] = useState(false);

  function onClickButton() {
    setShowDialog(true);
  }

  function onCloseDialog(result) {
    setShowDialog(false);
    console.log("Dialog Result: ", result)
  }

  return (
    <>
      <button onClick={onClickButton}>Open Dialog</button>
      {showDialog &&
         <Dialog message="Are you sure?" onClose={onCloseDialog} />        
      }
    </>
  )
}

function MyComponent() {

const [showDialog, setShowDialog] = useState(false);

function onClickButton() {

setShowDialog(true);

}

function onCloseDialog(result) {

setShowDialog(false);

console.log("Dialog Result: ", result)

}

return (

<button onClick={onClickButton}>Open Dialog</button>

{showDialog &&

}

</>

)

}

Nothing special, but I don’t like how the logic is located in different functions instead of a continuous flow. And what if we wanted to have multiple dialogs? We would typically repeat everything for each dialog…

What if we could open the dialog in a more fluent way, similar to JavaScript confirm:

if(confirm("Are you sure?") === true) {
    // do something...
}

if(confirm("Are you sure?") === true) {

// do something...

}

Let’s implement a hook that wraps the dialog component in a promise!

export function useDialog() {

  const promiseRef = useRef<{
    resolve: (value: boolean) => void;
    reject: (value: boolean) => void;
  }>();

  const [dialogJSX, setDialogJSX] = useState<JSX.Element>(<></>);

  function show(props: { message: string }) {
    setDialogJSX(<Dialog {...props} onDialogClose={onClose} />);
    return new Promise<boolean>((resolve, reject) => {
      promiseRef.current = { resolve, reject };
    });
  };

  function onClose(result: IDialogResult) {
    setDialogJSX(<></>);
    promiseRef.current!.resolve(result);  // We could also reject the promise if result is negative, but then you must catch the rejection instead of just checking the "result".
  }

  return {
    Show: show,
    JSX: dialogJSX
  }
}

export function useDialog() {

const promiseRef = useRef<{

resolve: (value: boolean) => void;

reject: (value: boolean) => void;

}>();

const [dialogJSX, setDialogJSX] = useState<JSX.Element>(<></>);

function show(props: { message: string }) {

setDialogJSX(<Dialog {...props} onDialogClose={onClose} />);

return new Promise<boolean>((resolve, reject) => {

promiseRef.current = { resolve, reject };

});

};

function onClose(result: IDialogResult) {

setDialogJSX(<></>);

promiseRef.current!.resolve(result); // We could also reject the promise if result is negative, but then you must catch the rejection instead of just checking the "result".

}

return {

Show: show,

JSX: dialogJSX

}

Now we can open the dialog and handle the return value in a single flow, even with nested dialogs:

function MyComponent() {
  const dialog = useDialog();

  function onClickButton() {
    dialog.Show({ message: "Are you sure?"}).then(result => {
		if(result === true) {
			dialog.Show({ message: "Are you REALLY sure?"}).then(result => {
				if(result === true) DoSomething();
			});
		}
    });
  }

  return (
    <>
      <button onClick={onClickButton}>Open Dialog</button>
      {dialog.JSX}
    </>
  )
}

function MyComponent() {

const dialog = useDialog();

function onClickButton() {

dialog.Show({ message: "Are you sure?"}).then(result => {

if(result === true) {

dialog.Show({ message: "Are you REALLY sure?"}).then(result => {

if(result === true) DoSomething();

});

}

});

}

return (

<button onClick={onClickButton}>Open Dialog</button>

{dialog.JSX}

</>

)

}

Pretty neat! :-)

Posted in Development, Tutorials | Tagged components, development, dialog, hooks, javascript, modals, promises, react, typescript | Leave a comment

How to get “order” and “level” for pages in OneNote Graph API

Moving Term Sets Accross Site Collection Maintaining Term ID:s

New-MgOauth2PermissionGrant : Missing property: clientId

Azure Functions suddenly returning 403 when called from SPFx

Securing an Azure Function with Entra ID and calling it from SPFx

Preparations

Secure the Functions App in Azure

Setup SPFx Permissions

Call the function

Learnings

Using emojis for easier JavaScript debugging

Attaching a context menu to DetailsList column headers in Fluent UI

Better cache management in ASP.Net Core (LazyCache/FusionCache)

Modifying SharePoint list permissions with PnP Core

Show React dialogs fluently with hooks and promises

About RLV Blog

Recent Posts

Categories

Popular Posts

Archives

Meta

Preparations

Secure the Functions App in Azure

Setup SPFx Permissions

Call the function

Learnings

About RLV Blog

Recent Posts

Categories

Tags

Popular Posts

Archives

Meta