Restrict Permissions on Editing SharePoint SPFx Property Pane Configurations

Let us look, how the SPFx web part property configurations changes can be controlled by user permissions.

Let us assume a scenario, where administrators can only change the SPFx web part property values.

The following steps helps achieving the requirement.

• The permissions of logged in user details could be identified using the context/page context.
• While rendering the property pane configurations, the current user permissions could be checked.
• So the properties could be enabled based on the permissions, i.e., properties will be editable, if user has admin access to the site.

This could be achieved, using the WebpartContext property and SPPermission class.

The object is initialized, using the current user permission details, and then site permission is checked for user.
    let permission = new SPPermission(this.context.pageContext.web.permissions.value);
    let isAdmin = permission.hasPermission(SPPermission.manageWeb);

Using MS Graph API and Adaptive Cards for Search/Render User Details with SPFx solutions

In this article, we will learn how to develop SPFx webparts for Office 365 SharePoint site and Microsoft Team, that leverages Microsoft Graph to search users and adaptive cards for rendering the user data effectively.

The sample used here uses the adaptive card, which has a very minimal UI. The sample used, shows how effectively UI could be changed by users. But complex custom UI could be built using the adaptive cards.

Adaptive Cards:

Let us use the adaptive card on our SPFx component for displaying user details. The following provides you the basic understanding.

• Introduced recently, a new way for developers to render content in a consistent way, which is a open framework. 
• It is providing options for developers, to design the UI for the specific component, using schema or visually.
• https://adaptivecards.io/designer
• Primarily targeted for BOT frameworks, Teams, Cortona, and windows notifications.

The following snapshot showing the UI built for our sample. This snapshot has 2 container sets for displaying 2 user details. In the schema mentioned later in the article, the single container is used, which could iterated using for loops for building containers for the required user set.

Adaptive Card Visual Interface for building component with UI

Using Azure Devops & Github to Automate SPFx solution Packaging Processes for MS Teams and SharePoint

In this article, we will understand how SPFx solutions built for MS Teams and SharePoint portals, could be automatically packaged and uploaded into app catalog portals. This automation is achieved with the help of Azure Devops and Github version control systems. Using devops ensures us the continuous delivery of changes onto the target platforms.

  

Remember, we will be targeting the webparts of this solution for SharePoint and as tabs for Microsoft Teams. Let us use github repositories as a version control tool for storing the solution. You will understand, how github could be easily integrated with Azure Devops for automating the packaging processes in this article. 

Create the SPFx solution, that is compatible for SharePoint online portals. The SPFx solution (available on the github https://github.com/nakkeerann/globalspfxsoln) contains, the azure-pipeline configuration file template for setting up the build pipelines. The following snapshot shows the configurations for creating SPFx solution. 

Push the code into Github using the git commands. For example, below commands are used for my repository.

git initgit add .git commit -m "first commit"git remote add origin https://github.com/nakkeerann/globalspfxsoln.gitgit push -f origin master

Install the Azure Pipelines to your Github account https://github.com/marketplace/azure-pipelines . Select the repositories required to install pipelines. Authorize azure pipelines.