How to use fluent UI react persona control in SPFx?

How to use fluent UI react persona control in SPFx?

This article is contributed. See the original author and article here.

Introduction


 


A persona is a visual representation of a person across products, typically showcasing the image that person has chosen to upload themselves. This control includes an individual’s avatar (an uploaded image or a composition of the person’s initials on a background color), their name or identification, and so on. for more details refer to this.


 


Scenario 


 


We will create an SPFx web part in the way to fetch users from any specific group and render these users using a persona. so let’s see step-by-step implementation.


 


In the end, our output will be like this,


 


Output.png


 


Implementation  


 


Open a command prompt
Move to the path where you want to create a project
Create a project directory using:


 


md spfx-persona

 


Move to the above-created directory using:

 

cd spfx-persona

 


Now execute the below command to create an SPFx solution:

 

yo @microsoft/sharepoint 

 


It will ask some questions, as shown below,

 

Project Structure.png

 




Now we will install pnpjs as shown below:


 


npm install @pnp/sp –save

 


After a successful installation, we can open a project in any source code tool. Here, I am using the VS code, so I will execute the command:


 


code .


 

1. Move to the src/webparts/spfxpersona/components/ISpfxpersonaProps.ts and create a context property as below,

 

import { WebPartContext } from "@microsoft/sp-webpart-base";

export interface ISpfxpersonaProps {
  description: string;
  context: WebPartContext
}


 


2. Now move to the SpfxpersonaWebPart.ts file and here we initialize an SP context and pass it in the property.

 

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import * as strings from 'SpfxpersonaWebPartStrings';
import Spfxpersona from './components/Spfxpersona';
import { ISpfxpersonaProps } from './components/ISpfxpersonaProps';
import { sp } from "@pnp/sp/presets/all";

export interface ISpfxpersonaWebPartProps {
  description: string;
}

export default class SpfxpersonaWebPart extends BaseClientSideWebPart<ISpfxpersonaWebPartProps> {

  public onInit(): Promise<void> {
    return super.onInit().then(_ => {
      sp.setup({
        spfxContext: this.context
      });
    });
  }

  public render(): void {
    const element: React.ReactElement<ISpfxpersonaProps> = React.createElement(
      Spfxpersona,
      {
        description: this.properties.description,
        context: this.context,
      }
    );

    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}


 

3. Create a common component means folder called RenderProfilePicture inside src/webparts/spfxpersona/Common/Components. And inside this folder create a file RenderProfilePicture.tsx .

 

At here we will pass a property as an argument and render it and in the main component, we will call API to get items so they will be set through the property. 

 

import * as React from 'react';
import { Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona';
interface IProfilePicProps {
    loginName: string;
    displayName: string;
    getUserProfileUrl?: () => Promise<string>;
}

export function RenderProfilePicture(props: IProfilePicProps) {

    const [profileUrl, setProfileUrl] = React.useState<string>();
    let { displayName, getUserProfileUrl } = props;

    React.useEffect(() => {
        getUserProfileUrl().then(url => {
            setProfileUrl(url);
        });
    }, [props])

    return (
        <div>
            <Persona
                imageUrl={profileUrl}
                text={displayName}
                size={PersonaSize.size32}
                imageAlt={displayName}
                styles={{ primaryText: { fontSize: '14px' }, root: { margin: '10px' } }}
            />
        </div>);
}


 

4. Now move to the Spfxpersona.tsx our main component. here we will call APIs and render the child component here.

 

Create a state interface and initialize a user state.

At here we are getting the user from a particular group ID so first call API to get users from the group.

And then we will get user profile properties to get users’ profile picture so after calling the get users method we will call API to get user profile properties.

And then render the component.

 

import * as React from 'react';
import styles from './Spfxpersona.module.scss';
import { ISpfxpersonaProps } from './ISpfxpersonaProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { sp } from "@pnp/sp/presets/all";
import { RenderProfilePicture } from '../Common/Components/RenderProfilePicture/RenderProfilePicture'

export interface ISpfxpersonaWebPartState {
  users: any[]
}
export default class Spfxpersona extends React.Component<ISpfxpersonaProps, ISpfxpersonaWebPartState> {

  constructor(props: ISpfxpersonaProps) {
    super(props);
    this.state = {
      users: []
    }
  }

  private async getUserProfileUrl(loginName: string) {
    const userPictureUrl = await sp.profiles.getUserProfilePropertyFor(loginName, 'PictureURL');
    return userPictureUrl;
  }

  private async getSiteUsers() {
    const grpUsers = await sp.web.siteGroups.getById(3).users();
    this.setState({ users: grpUsers })
  }

  public componentDidMount() {
    this.getSiteUsers()
  }

  public render(): React.ReactElement<ISpfxpersonaProps> {
    return (
      <div className={styles.spfxpersona}>
        <span>USERS WITH PERSONA CARD</span>
        {this.state.users.map(m =>
          <RenderProfilePicture
            loginName={m.LoginName}
            displayName={m.Title}
            getUserProfileUrl={() => this.getUserProfileUrl(m.LoginName)}  ></RenderProfilePicture>
        )}
      </div>
    );
  }
}


 


Now serve the application using the below command,

 

gulp serve

 


Now test the webpart in SharePoint-SiteURL + /_layouts/15/workbench.aspx.

 

Output


 


Output.png


 


 


Find the full source code here.


 


 


Summary


 


In this article, we have seen the step-by-step implementation of how to use a persona card to show the users’ profile picture.

I hope this helps, if this helps you then share it with others.

Sharing is caring!




Microsoft 365 PnP Community – June 2021 update

Microsoft 365 PnP Community – June 2021 update

This article is contributed. See the original author and article here.

pnp-june-promo-summary.png

 

Microsoft 365 Patterns and Practices (PnP) Community June 2021 update is out with a summary of the latest guidance, samples, and solutions from Microsoft or from the community for the community. This article is a summary of all the different areas and topics around the community work we do around Microsoft 365 ecosystem during the past month. Thank you for being part of this success. Sharing is caring!

 

What is Microsoft 365 Community (PnP)

Microsoft 365 PnP is a nick-name for Microsoft 365 platform community activities coordinated by numerous teams inside of the Microsoft 365 engineering organizations. PnP is a community-driven open source initiative where Microsoft and external community members are sharing their learning’s around implementation practices for Microsoft 365.

 

Topics vary from Microsoft Viva, Microsoft Graph, Microsoft Teams, OneDrive and SharePoint. Active development and contributions happen in GitHub by providing contributions to the samples, reusable components, and documentation for different areas. PnP is owned and coordinated by Microsoft engineering, but this is work done by the community for the community.

 

 

The initiative is facilitated by Microsoft, but we have multiple community members as part of the PnP team (see team details in end of the article) and we are always looking to extend the PnP team with more community members. Notice that since this is open source community initiative, so there’s no SLAs for the support for the samples provided through GitHub. Obviously, all officially released components and libraries are under official support from Microsoft.

 

Some key statistics around Microsoft 365 PnP initiative from May 2021:

 

 

Most viewed videos in the Microsoft 365 Community (PnP) YouTube channel during May 2021:

 

  1. Introduction to Microsoft Teams Developer PortalKarthig Balendran (Microsoft) | 5,543
  2. Microsoft Teams Meeting Questionnaire App with SharePoint FrameworkNanddeep Nachan | 4,311
  3. Building a beautifully designed Intranet with SharePoint – latest design and branding capabilitiesCathy Dew (Microsoft) & Katie Swanson (Microsoft) | 3,631
  4. Microsoft Lists integration with Power BI | Mark Kashman (Microsoft) | 3,416
  5. Getting started with Site Designs in SharePoint OnlineLaura Kokkarinen (Sulava) | 2,985
  6. Working with Microsoft Lists (webinar) – Harini Saladi, Miceile Barrett, Chakkaradeep Chandran and Mark Kashman | 2,925
  7. Architecting Your Intranet | Melissa Torres (Microsoft) | 2,024
  8. SharePoint Framework Tutorial 1 – HelloWorld WebPart | 1,992
  9. Introducing: New Employee Onboarding – a Microsoft Teams app template | Nidhi Sharma (Microsoft) | 1,890
  10. Getting started on deploying Viva Connections for Microsoft Teams desktop | 1,751

 

Most viewed videos in the Microsoft 365 Developer YouTube channel during May 2021:

 

  1. Build the next generation of collaborative apps on the Microsoft Teams platform | 5,286
  2. Build Outlook Add-ins that integrate your solution seamlessly into your users’ Outlook experience​ | Juan Balmori, Hitesh Manwar – 1,332
  3. Authenticate and connect with Microsoft Graph – June 2019 | 1,317
  4. An introduction to Microsoft Graph for developers – Part I – Getting started – October 2019 | 1,106
  5. Office Scripts Tutorial: Introduction to the Code Editor | 1,014
  6. Microsoft Graph Explained | 944
  7. Demo: Getting started with Power Apps PortalsBrian Knight (Pragmatic Works) | 907
  8. Create interactive conversational bots for Microsoft Teams | 869
  9. Build and Office add-in using modern JavaScript tools and technologies | 823
  10. Getting Started with Microsoft Graph and Application Registration | 787

 

Main resources around Microsoft 365 Community:

 

 

Latest Dev Blog posts

Here are the latest blog posts and announcements around Microsoft 365 development topics from https://developer.microsoft.com/en-us/microsoft-365/blogs.

 

 

Latest community posts at https://aka.ms/m365pnp/community/blog

 

 

Community call recording blog posts:

 

 

PnP Weekly video blog / podcast shows:

 

 

We highly recommend also subscribing on the Microsoft 365 Developer Podcast show, which is a great show covering also latest development in the Microsoft 365 platform from developer and extensibility perspective.

 

Community Calls

There are numerous different community calls on different areas. All calls are being recorded and published either from Microsoft 365 Developer or Microsoft 365 Community (PnP) YouTube channels. Recordings are typically released within the following 24 hours after the call. You can find a detailed agenda and links to specific covered topics on blog post articles at the Microsoft 365 developer blog when the videos are published.

 

 

If you are interested in doing a live demo of your solution or sample in these calls, please do reach out to the PnP  Team members (contacts later in this post) and they are able to help with the right setup. These are great opportunities to gain visibility for example for existing MVPs, for community members who would like to be MVPs in the future or any community member who’d like to share some of their learnings.

 

Microsoft 365 Community (PnP) Ecosystem in GitHub

Most of the community driven repositories are in the PnP GitHub organization as samples are not product specifics as they can contain numerous different solutions or the solution works in multiple different applications.

 

  • PnPjs – PnPjs Framework repository
  • CLI Microsoft 365 – Cross-OS command line interface to manage Office 365 tenant settings
  • generator-spfx – Open-source Yeoman generator which extends the out-of-the-box Yeoman generator for SharePoint with additional capabilities
  • generator-teams – Open-source Microsoft Teams Yeoman generator – Bots, Messaging Extensions, Tabs, Connectors, Outgoing Web hooks and more
  • teams-dev-samples – Microsoft Teams targeted samples from community and Microsoft engineering
  • Sharing is Caring – Getting started on learning how to contribute and be active on the community from GitHub perspective.
  • pnpcore – The PnP Core SDK is an SDK designed to work against Microsoft 365 with Microsoft Graph API first approach
  • powershell –  PnP PowerShell module which is PowerShell Core module targeted for Microsoft 365
  • pnpframework – PnP Framework is a .Net Standard 2.0 library targeting Microsoft 365 containing the PnP Provisioning engine and a ton of other useful extensions
  • teams-dev-samples – Samples around the Microsoft Teams development models from Microsoft and from the community
  • sp-dev-fx-webparts – Client-side web part samples from community and Microsoft engineering
  • sp-dev-fx-extensions – Samples and tutorial code around SharePoint Framework Extensions
  • sp-dev-fx-library-components – Samples and tutorial code around the SharePoint Framework library components
  • sp-starter-kit – Starter kit solution for SharePoint modern experiences
  • sp-dev-fx-vs-extension – Open source Visual Studio IDE extension for creating SharePoint Framework solutions in the Visual Studio 2015 or 2017
  • sp-dev-build-extensions – Different build extensions like gulp tasks and gulp plugins from the community and engineering around SharePoint development
  • sp-dev-solutions – Repository for more polished and fine-tuned reusable solutions build with SharePoint Framework
  • sp-dev-samples – Repository for other samples related on the SharePoint development topics – WebHooks etc.
  • sp-dev-fx-controls-react – Reusable content controls for SharePoint Framework solutions build with React
  • sp-dev-fx-property-controls – Reusable property pane controls to be used in web parts
  • sp-dev-list-formatting – Open-source community-driven repository for the column and view formatting JSON definitions
  • sp-dev-site-scripts – Open-source community-driven repository for community Site Designs and Site Scripts
  • sp-dev-modernization – Tooling and guidance around modernizing SharePoint from classic to modern
  • sp-power-platform-solutions – Solution and sample code for SharePoint Power Platform solutions
  • powerfx-samples – Samples that demonstrate different usage patterns for the Power Fx low-code programming language
  • powerapps-samples – Samples that demonstrate different usage patterns for Power Apps
  • powerautomate-samples – Samples that demonstrate different usage patterns for Power Automate
  • powerva-samples – Samples that demonstrate different usage patterns for Power Virtual Agents

 

All SharePoint specific repositories or services supported directly by Microsoft are located in the SharePoint GitHub organization

 

PnP specific repositories – solution designs and tooling

 

  • PnP – Main repository for SP add-in, Microsoft Graph etc. samples
  • PnP-Sites-Core – Office Dev PnP Core component
  • PnP-PowerShell – Office Dev PnP PowerShell Cmdlets
  • PnP-Tools – Tools and scripts targeted more for IT Pro’s and for on-premises for SP2013 and SP2016
  • PnP-Provisioning-Schema – PnP Provisioning engine schema repository
  • PnP-IdentityModel – Open source replacement of Microsoft.IdentityModel.Extensions.dll

 

Repositories in the GitHub Microsoft Search organization controlled by the PnP initiative

 

 

Other related resources from GitHub

 

What’s supportability story around the community tooling and assets?

Following statements apply across all of the community lead and contributed samples and solutions, including samples, core component(s) and solutions, like SharePoint Starter Kit, yo teams or PnP PowerShell. All Microsoft released SDKs and tools are supported based on the specific tool policies.

 

  • PnP guidance and samples are created by Microsoft & by the Community
  • PnP guidance and samples are maintained by Microsoft & community
  • PnP uses supported and recommended techniques
  • PnP is an open-source initiative by the community – people who work on the initiative for the benefit of others, have their normal day job as well
  • PnP is NOT a product and therefore it’s not supported by Premier Support or other official support channels
  • PnP is supported in similar ways as other open source projects done by Microsoft with support from the community by the community
  • There are numerous partners that utilize PnP within their solutions for customers. Support for this is provided by the Partner. When PnP material is used in deployments, we recommend being clear with your customer/deployment owner on the support model

 

Please see the specifics on the supportability on the tool, SDK or  component repository or download page.

 

Microsoft 365 PnP team model

 

pnp-community-model.png

 

In April 2020 we announced our new Microsoft 365 PnP team model and grew the MVP team quite significantly. PnP model exists for having more efficient engagement between Microsoft engineering and community members. Let’s build things together. Your contributions and feedback is always welcome! During August, we also crew the team with 5 new members. PnP Team coordinates and leads the different open-source and community efforts we execute in the Microsoft 365 platform.

 

We welcome all community members to get involved on the community and open-source efforts. Your input do matter!

 

 

Got feedback, suggestions or ideas? – Please let us know. Everything we do in this program is for your benefit. Feedback and ideas are more than welcome so that we can adjust the process for benefitting you even more.

 

Area-specific updates

These are different areas which are closely involved on the community work across the PnP initiative. Some are lead and coordinated by engineering organizations, some are coordinated by the community and MVPs.

 

Microsoft Graph Toolkit

graph-toolkit.jpg

 

Microsoft Graph Toolkit is engineering lead initiative, which works closely with the community on the open-source areas. The Microsoft Graph Toolkit is a collection of reusable, framework-agnostic web components and helpers for accessing and working with Microsoft Graph. The components are fully functional right of out of the box, with built in providers that authenticate with and fetch data from Microsoft Graph.

 

 

All the latest updates on the Microsoft Graph Toolkit is being presented in our bi-weekly Microsoft 365 Generic Dev community call, including the latest community contributors.

 

Microsoft 365 Community docs

 

community-dcos.png

 

Community docs model was announced in the April 2020 and it’s great to see the interest for community to help each other by providing new guidance on the non-dev areas. See more on the announcement from the SharePoint blog – Announcing the Microsoft 365 Community Docs. We do welcome contributions from the community – our objective is to build a valuable location for articles from Microsoft and community together.

 

Have ideas for articles or want to contribute yourself? – Get involved! Here are also some additional resources explaining the model more detailed.

 

 

SharePoint Framework development samples

 

spfx-gallery.png

These are the updated SharePoint Framework samples which are available from the the different repositories.

 

  • New sample react-news-banner by João Mendes which shows news information as a Banner, this information come from a list defined in any site, this web part can be installed on 2019, and SharePoint Online.
  • New sample react-organization-chart by João Mendes which shows an organization chart based on specified user, and user can navigate to show company organization. This web part can be installed on SharePoint Server 2019, and SharePoint Online.
  • Updates to react-list-form by Ari Gunawan which provides a working example of implementing generic SharePoint list forms using the SharePoint Framework (SPFx) and the React and Office UI Fabric libraries.
  • Updates to react-calendar by Eli H. Schei which allows you to manage events in a calendar. Uses a list of existing calendars on any website.
  • Updates to react-onedrive-finder by André Lage which access drives from OneDrive and navigate between his content using Graph OneDrive and Site API and Microsoft Graph Toolkit react controls.
  • Updates to react-pagecontributors by Ari Gunawan which displays page contributors in reverse chronological order.
  • Updates to react-datatable by Chandani Prajapati which provides easy way to render SharePoint custom list in datatable view with all the necessary features.
  • Other adjustments to numerous SPFx web part and extension samples by our awesome community members!

 

How to find what’s relevant for you? Take advantage of our SharePoint Framework web part and extension sample galleries – includes also solutions which work in Microsoft Teams

 

 

Microsoft Teams community samples

 

teams-samples-promo.jpg

 

These are samples which have been contributed on the community samples since last summary. We do welcome all Microsoft Teams samples to this gallery. They can be implemented using in any technology.

 

  • New sample msgext-graph-action-config by Markus Moeller which is a action based messaging extension created using the Teams Yeoman Generator. It authenticates against Microsoft Graph via SSO and on-behalf flow from the frontend and recieves documents to be posted as adaptive card to the message compose box of a channel. 
  • New sample tab-context-viewer by Sébastien Levert (Microsoft) which is showcasing every Teams SDK context in every type of tab
  • New sample msgext-action-preview by Markus Moeller which is a small demo sample is a action based messaging extension created using the Teams Yeoman Generator. It posts a simple adaptive card to the Team’s news channel but ‘as a bot’ and with an action to update the same adaptive card again and again.

 

If you are interested on Microsoft Teams samples, we have just released also new Microsoft Teams sample gallery. Contributions to Microsoft Teams samples is also more than welcome. This gallery already surfaces all Microsoft samples, Microsoft Teams app templates and community samples.

 

Power Platform samples

 

power-platform-samples.png


These are the updated Power Platform samples which are available from the new Power Platform sample gallery.

 

  • New sample always-reply-to-request by Remy Blok (Prodware) providing a pattern for making sure that the Flow always provides a responds to a request in Power Automate.
  • New sample DeskReservation by April Dunnam (Microsoft) as a fully functional phone-based Canvas Power App template which provides functionality to manage and book desk reservations. 
  • New sample fluentui-custom-theme by Fabio Franzini implementing a custom theme (for tablet layout) to apply the style of the Fluent UI controls to the canvas controls with extensive modification of the “Default Theme” inside the theme.json file.
  • New sample custom-font-samples by Matthew Devaney (Hitachi Solutions) providing 177 custom font samples for Power App
  • New sample calendar-component by April Dunnam (Microsoft) providing a re-usable component that allows you to display events in a calendar.
  • New sample color-functions by P3N showing functions that calculate the contrast between two colors

 

How to find what’s relevant for you? Take advantage of our Power Platform sample gallery.

 

 

Microsoft 365 Script Samples

 

script-gallery.png


We also released new Microsoft 365 Script Sample gallery within past month. We welcome all scripts on Microsoft 365 automation to this centralized repository, targeted to help to manage and automate day-to-day operations.

 

If you have any existing scripts which you’d be willing to share with others – please submit a pull request or contact the PnP team members to get started on getting more closely involved on this initiative. 

 

 

Sharing is Caring initiative

 

sharing-is-caring-promo-1024x576.png

 

The “Sharing Is Caring” imitative is targeted for learning the basics around making changes in Microsoft Docs, in GitHub, submitting pull requests to the PnP repositories and in GitHub in general. Take advantage of this instructor lead training for learning how to contribute to docs or to open-source solutions. Everyone is welcome to learn how to get started on contributing to open-source docs or code!

 

  • See more from the guidance documentation – including all upcoming instructor lead sessions which you can participate!

 

Different Microsoft 365 related open-source initiatives build together with the community

See exact details on the latest updates from the specific open-source project release notes. You can also follow up on the project updates from our community calls. There are numerous active projects which are releasing new versions with the community even on weekly basis. Get involved!

 

  • Microsoft Look Book – Discover the modern experiences you can build with SharePoint in Microsoft 365. Look book provides design examples for SharePoint Online which can be automatically provisioned to any tenant in the world. See more from https://lookbook.microsoft.com. This service is also provided as open-source solution sample from GitHub.
  • yo teams – Open-source Yeoman generator for Microsoft Teams extensibility. Supports creation of bots, messaging extensions, tabs (with SSO), connectors and outgoing Webhooks. See more from https://aka.ms/yoteams.
  • PnP Framework – .NET Standard 2.0 SDK containing the classic PnP Sites Core features for SharePoint Online. More around this package from GitHub.
  • PnP Core SDK – The PnP Core SDK is an SDK designed to work for Microsoft 365 with Graph API first approach. It provides a unified object model for working with SharePoint Online and Teams which is agnostic to the underlying API’s being called. See more around the SDK from documentation.
  • PnP PowerShell – PnP PowerShell is a .NET Core 3.1 / .NET Framework 4.6.1 based PowerShell Module providing over 400 cmdlets that work with Microsoft 365 environments and more specifically SharePoint Online and Microsoft Teams. See more details from documentation.
  • Reusable SharePoint Framework controls – Reusable controls for SharePoint Framework web part and extension development. Separate projects for React content controls and Property Pane controls for web parts. These controls are using Office UI Fabric React controls under the covers and they are SharePoint aware to increase the productivity of developers.
  • Office 365 CLI – Using the Office 365 CLI, you can manage your Microsoft Office 365 tenant and SharePoint Framework projects on any platform. See release notes for the latest updates.
  • PnPJs – PnPJs encapsulates SharePoint REST APIs and provides a fluent and easily usable interface for querying data from SharePoint sites. It’s a replacement of already deprecated pnp-js-core library. See changelog for the latest updates.
  • PnP Provisioning Engine and PnP CSOM Core – PnP provisioning engine is part of the PnP CSOM extension. They encapsulate complex business driven operations behind easily usable API surface, which extends out-of-the-box CSOM NuGet packages. See changelog for the latest updates.
  • PnP PowerShell – PnP PowerShell cmdlets are open-source complement for the SharePoint Online cmdlets. There are more than 300 different cmdlets to use and you can use them to manage tenant settings or to manipulate actual SharePoint sites. They See changelog for the latest updates.
  • PnP Modern Search solution – The PnP ‘Modern Search’ solution is a set of SharePoint Online modern Web Parts allowing SharePoint super users, webmasters and developers to create highly flexible and personalized search based experiences in minutes. See more details on the different supported capabilities from https://aka.ms/pnp-search.
  • Modernization tooling – All tools and guidance on helping you to transform you SharePoint to modern experiences from http://aka.ms/sppnp-modernize.
  • SharePoint Starter Kit v2 – Building modern experiences with Microsoft Teams flavors for SharePoint Online and SharePoint 2019 – reference solution in GitHub.
  • List formatting definitions – Community contributed samples around the column and view formatting in GitHub.
  • Site Designs and Site Scripts – Community contributed samples around SharePoint Site Designs and Site Scripts in GitHub.
  • DevOps tooling and scripts – Community contributed scripts and tooling automation around DevOps topics (CI/CD) in GitHub.
  • Teams provisioning solution – Set of open-source Azure Functions for Microsoft Teams provisioning. See more details from GitHub.

 

Documentation updates

Please see all the Microsoft 365 development documentation updates from the related documentation sets and repositories as listed below:

 

 

Microsoft 365 Developer and Microsoft 365 Community YouTube video channels

You can find all Microsoft 365 related videos on our YouTube Channel at http://aka.ms/m365pnp-videos or at Microsoft 365 Dev. These channels contains already a significant amount of detailed training material, demo videos, and community call recordings.

 

Here are the new Microsoft demo or guidance videos released since the last monthly summary:

 

 

New playlist – Create interactive conversational bots for Microsoft Teams

 

 

New playlist – Create embedded web experiences with tabs for Microsoft Teams

 

 

Community demos as following:

 

 

PnP Weekly sessions – Community visitors and latest articles from Microsoft and community on Microsoft 365 topics.

 

 

Key contributors to the June 2021 update

Here’s the list of active contributors (in alphabetical order) since last release details in GitHub repositories or community channels. PnP is really about building tooling and knowledge together with the community for the community, so your contributions are highly valued across the Microsoft 365 customers, partners and obviously also at Microsoft.

 

Thank you for your assistance and contributions on behalf of the community. You are truly making a difference! If we missed someone, please let us know.

 

 

Companies: Here’s the companies, which provided support the community initiative for this month by allowing their employees working for the benefit of others in the community. There were also people who contributed from other companies during last month, but we did not get their logos and approval to show them in time for these communications. If you still want your logo for this month’s release, please let us know and share the logo with us. Thx.

 

may-2021-compaies.png

 

Microsoft people: Here’s the list of Microsoft people who have been closely involved with the PnP work during last month.

 

 

PnP Team

PnP Team manages the PnP community work in the GitHub and also coordinates different open-source projects around Microsoft 365 topics. PnP Team members have a significant impact on driving adoption of Microsoft 365  topics. They have shown their commitment to the open-source and community-driven work by constantly contributing to the benefit of the others in the community.

 

Thank you for all that you do!

 

 

Here are the Microsoft Internal PnP Core team members:

 

Next steps

See all of the available community calls, tools, components and other assets from https://aka.ms/m365pnp. Get involved!

 

Got ideas or feedback on the topics to cover, additional partnerships, product feature capabilities? – let us know. Your input is important for us, so that we can support your journey in Microsoft 365.

 

“Sharing is caring”

 


Microsoft 365 Community (PnP) – June 7th 2021

 

 

Google Releases Security Updates for Chrome

This article is contributed. See the original author and article here.

Google has released Chrome version 91.0.4472.101 for Windows, Mac, and Linux. This version addresses vulnerabilities that an attacker could exploit to take control of an affected system. One of these vulnerabilities—CVE-2021-30551—has been detected in exploits in the wild.

CISA encourages users and administrators to review the Chrome Release Note and apply the necessary updates.

What kind of apps can you build on Microsoft 365?

What kind of apps can you build on Microsoft 365?

This article is contributed. See the original author and article here.

teams-hero


 


Microsoft 365 is a rich platform for building applications. Here are the types of apps you can build on Microsoft 365.


 


Why should you build applications on Microsoft 365


Microsoft 365, previously known as Office 365, is Microsoft’s productivity cloud, that organizations use for communication and collaboration. 250 million users work with Microsoft 365 creating files, sending emails, meeting, reading information stored in Microsoft 365, and more.


Microsoft 365 is also a highly extensible development platform. All the information about its users as well as the content they create is stored in Microsoft 365 and, bearing the necessary permissions, available for you to interact with in your applications.


 


What kind of apps can you build on Microsoft 365?


Thinking about building apps on Microsoft 365, you can distinguish between two types of apps: standalone apps and apps that extend Microsoft 365.


 


Types of apps that you can build on Microsoft 365 grouped into extensions and custom apps


 


Custom apps: build your experience


First of all, you can build custom apps. These can be mobile apps, web apps, desktop apps, device-native apps, workflow automation, or scheduled processes. You can build these apps using any programming language and run them on any platform you want. You choose how you distribute and operate them. In short: you own the technology stack and the full user experience.


Users start their journey in your app. Because your app is connected to Microsoft 365, you can show relevant information from Microsoft 365 along your app’s functionality. And because you can present the data in your app seamlessly, users might not even realize that they’re looking at data coming from Microsoft 365.


 


To get the most out of integrating your custom app with Microsoft 365, you need to allow users to sign in to your app with their Microsoft 365 account. That way, you will be able to retrieve the relevant information on their behalf from Microsoft 365.


 


Extend Microsoft 365 experiences


Microsoft 365 offers many extension points to bring your app where your users are. By exposing your app inside Microsoft 365, you make your app a part of people’s work. Because your app is available right where they are, they can focus on their work and interact with your app without having to switch the context.


 


Extend conversations


Microsoft Teams host conversations on Microsoft 365. You can bring your app as a part of a conversation in several ways.


 


First of all, you can build conversational bots. Bots help people complete tasks through conversations. They’re a great way to expose relevant features of your app and guide users through the scenario like a personal assistant.


Custom bot integrated in Microsoft Teams


 


Another way to expose your app in a Teams conversation is through messaging extensions. Messaging extensions help people complete tasks in a visually-compelling way. They’re similar to bots but are more visually oriented and ideal for showing rich data


Custom messaging extension integrated in Microsoft Teams


 


Finally, you can send notifications from your app to conversations via webhooks. By using adaptive cards, you can show the data in a rich and actionable way.


 


Extend portals


Many organizations that use Microsoft 365 use portals to facilitate communication and manage knowledge. Using rich pages, they publish content and build interactive dashboards. These pages consist of reusable building blocks – web parts, that end-users put together.


Custom SharePoint portal on Microsoft 365


 


You can extend portals on Microsoft 365 in two ways. First, you can build widgets, called web parts. Users, who create pages, can put your web parts on pages to enrich the content. Your web parts can show data from Microsoft 365 as well as any other API.


 


Another way to extend portals is by building extensions. SharePoint Framework extensions allow you to execute a piece of code on every page or change how list fields are rendered. Just like with web parts, you can load data from Microsoft 365 or any other API in your extensions.


 


Extend documents


When creating documents on Microsoft 365, users can enrich them with interactive elements, like maps or charts. These elements can be connected to APIs and make documents interactive and present data that is always up-to-date.


 


Conceptual image showing a content add-in for Microsoft Office


 


You can also build task pane extensions for Microsoft Office applications that help users work with their documents. A task pane could help people lookup their customer information when writing contracts or order information when creating invoices.


 


Conceptual image showing a task pane add-in for Microsoft Office


 


Connect your application to Microsoft 365


There are several types of applications that you can build on Microsoft 365. No matter if you want to develop a custom application or extend Microsoft 365, you can connect your app to Microsoft 365. To get information and insights stored in Microsoft 365, you would connect to Microsoft Graph – the web API for Microsoft 365. To help you communicate with Microsoft Graph, Microsoft offers SDKs for the most popular platforms.


 


Over to you


Building apps for Microsoft 365 offers a great opportunity to reach millions of users and help them work more effectively. If you want to have a quick look at what kind of data you can retrieve from Microsoft 365, I’d suggest you look at the interactive Graph Explorer. If you’re considering building a web app, I would also recommend that you take a look at Microsoft Graph Toolkit – a set of web components that make it very easy to show data from Microsoft 365 in your app. When you’re ready to start building your app, sign up for the Microsoft 365 developer program to get a dev environment.


 


Looking forward to hearing what you’re going to build. And don’t hesitate to reach out if you have any questions!

Log Analytics workspace overview status property is live.

Log Analytics workspace overview status property is live.

This article is contributed. See the original author and article here.

We are releasing two new and important additions to the Log Analytics workspace overview page, that surface underlying operational issues with your workspace. Such operation issues could be, for example, reaching a workspace limit, or encountering data ingestion issues, configuration or agent operation issues.


For that, we added two new signifiers (Fig 1)


“Workspace state” field: this field will indicate how many issues in state of “Warning”, “Error” and “Critical” need your attention.


 


To investigate the issue, you can click the “Investigate” button or the linkable message under “Workspace state”, this will route you to the “Workspace insights” blade, and “Health” tab under it.


You can read more here.


Under the “Health” tab, you will see listed the “Operation errors and warnings” (Fig 2), we have some of the possible errorswarnings listed in this article, including what can be done to mitigate the issue. 


Also in the article, we provide suggestions on how to setup alerts on-top of this table, setting such alerts is the best way to get notifications and assist you in monitoring your workspace.


To review what issues can surface, you can check this article.


 


(Fig 1)


shemers_0-1622564691171.png


 


(Fig 2)


 


shemers_1-1622564696181.png


 


 

Use PnP Powershell to add a document library webpart to a page (and only show a specific folder)

Use PnP Powershell to add a document library webpart to a page (and only show a specific folder)

This article is contributed. See the original author and article here.

As a non-developer (please read this as a disclaimer) I still try to make my life as easy as possible (yes, I am that lazy). PnP Powershell is a big component of that goal. A customer had the requirement to create a page for each of their 86 folders in a document library so they could add more information on those topics. That meant creating 86 pages, each with a document library webpart on it that showed a specific folder. No chance I was going to do that manually!


Creating the page wasn’t really difficult. Showing the document library and just the items in the folder was the hard part that I couldn’t find any examples of. The idea of this blog post is to help future people like me to just copy/paste the code.


 


 


The goal


We started with a document library containing 86 folders, each having a few documents. The goal was to create 86 pages, with each page showing a block of text on the left and the document library webpart showing only the files from that folder.


How to do this in the user interface


Using the user interface, following steps were required:



  • Create a new page (with the same name as the folder)

  • Add a section to the page with 2 columns

  • Add a text webpart to the left column

  • Add a document library webpart to the right column

  • As a subrequirement, only show the files from the necessary folder. This can be set up from the web part properties




 

MS-list.png


Document library UI properties



That would definitely be a lot of work to do manually, so I decided that PnP PowerShell needed to come to the rescue.


The code


Lets dig in to the code. I imagine that you have already dabbled with PnP Powershell and I will not explain how to install and configure it to run.



Connect-PnPOnline -Url https://yourtenant.sharepoint.com/sites/thesite/ -UseWebLogin



First we need to connect to the site. Replace the url with the correct url of your site. I am using -UseWebLogin in this example because I am using 2factor authentication.


Create the page


First thing to do is to create the page, using the Add-PnPClientSidePage command. I am using the $name variable here to give it a name.



Add-PnPClientSidePage -Name $name
  -LayoutType Article
  -HeaderLayoutType NoImage
  -CommentsEnabled:$false



 


Disabling the comments section on a modern SharePoint Page
I couldn’t figure out how to disable the comments section on the modern client page. I tried setting it to false, or 0, but that didn’t work.


The correct way to do is to use:


-CommentsEnabled:$false


Adding sections to the page


To add a new section to the page, I am using the Add-PnPClientSidePageSection command. I can just add a TwoColumn section on the page.



Add-PnPClientSidePageSection -Page $name -SectionTemplate TwoColumn -Order 1



Adding a text editor webpart


Adding a text editor is super easy, just use the Add-PnPClientSideText command. Don’t forget to add some text or it will fail.



Add-PnPClientSideText -Page $name -Section 1 -Column 1 -Text " "



The hard part: adding an existing document library as a webpart to the page


This was the easy bit, in my opinion. Adding a document library to a page is surprisingly hard in PnP Powershell (unless I am missing something big.. in that case please call me out on this!)


What you need to do, is to use the Add-PnPClientSideWebPart command. With this command you can add all kinds of webparts to the page. Document library isn’t one of them.


You need to add a List webparttype, and in the WebpartProperties you need to mention that it is a document library AND what the ID is.



Add-PnPClientSideWebPart -Page $name
  -DefaultWebPartType List -Section 1 -Column 2
  -WebPartProperties @{isDocumentLibrary="true";
                       selectedListId="1fa1fb45-e53b-4ea1-9325-ddca7afe986e";}



Where can I find the SharePoint document library Id ?


I didn’t have a clue how to get this Id via code, so I resorted to the UI: If you go to the library settings, the document library Id is shown in the url:




 

documentlibrary-id.png


 


SharePoint document library ID in the url of the library settings page



Just cut out the %7B in the front, and the %7D on the back.
In this example, the document library Id is 4683b239-caf6-40a3-96c4-a02dedfa3418.


Bonus: Only show a specific folder from the document library


I couldn’t figure out how to show only documents from a specific folder. Doing this in the UI is supereasy. But there wasn’t any example code out there. So here it is:


In the WebPartProperties, add selectedFolderPath=”/yourfoldername”;



Add-PnPClientSideWebPart -Page $name
  -DefaultWebPartType List -Section 1 -Column 2
  -WebPartProperties @{isDocumentLibrary="true";
                       selectedListId="1fa1fb45-e53b-4ea1-9325-ddca7afe986e";
                       selectedFolderPath="/$name";}



Bonus 2: hide the command bar on the SharePoint Document Library Webpart


In the UI, there is a way to simply hide the command bar. Because we are showing this information in a nice looking page, there is no need for all that extra fluff of “new”, “upload” and so on.


In the same way as showing just files from a specific folder, you can use the hideCommandBar=”false”; in the WebPartProperties:



Add-PnPClientSideWebPart -Page $name
  -DefaultWebPartType List -Section 1 -Column 2
  -WebPartProperties @{isDocumentLibrary="true";
                       selectedListId="1fa1fb45-e53b-4ea1-9325-ddca7afe986e";
                       selectedFolderPath="/$name";
                       hideCommandBar="false"}



Publishing the page


All the parts we need are now on the page. The only thing now is to publish the page so it is visible to all visitors. For that, we need to grab the page again and publish it.



$page = Get-PnPClientSidePage -Identity $name
$page.Publish()



Looping the code for all folders


The last part of the code was to make this repeatable, for all 86 folders. There is probably a really nice way to , in code, get all folders from the doclib and loop through them, but as stated a gazillion times.. I am not a developer.:smile: 


 


So I exported the document library to Excel and copied the foldernames. I added some quotes and a comma (in an Excel formula using =CHAR(34) &  A2 & CHAR(34) &”,”) and added an array to store these.


The full code is:



Connect-PnPOnline -Url https://yourtenant.sharepoint.com/sites/Yoursite/ -UseWebLogin
$ray = "folder1",
"folder2",
"folder3"
foreach ($name in $ray) {

#create page
Add-PnPClientSidePage -Name $name -LayoutType Article -HeaderLayoutType NoImage -CommentsEnabled:$false

#add sections
Add-PnPClientSidePageSection -Page $name -SectionTemplate TwoColumn -Order 1

#add text webpart
Add-PnPClientSideText -Page $name -Section 1 -Column 1 -Text " "

#add doclib
Add-PnPClientSideWebPart -Page $name -DefaultWebPartType List -Section 1 -Column 2 -WebPartProperties @{isDocumentLibrary="true";selectedListId="1fa1fb45-e53b-4ea1-9325-ddca7afe986e";selectedFolderPath="/$name";hideCommandBar="false"}
$page = Get-PnPClientSidePage -Identity $name
$page.Publish()
}


[Customer Story] Imperial College London using Azure Virtual Desktop and Azure Lab Services

This article is contributed. See the original author and article here.

Here is an example of mixed usage for Azure Virtual Desktop and Azure Lab Services.


 


https://customers.microsoft.com/en-us/story/1373865514221253184-imperial-college-london-higher-education-azure-virtual-desktop


 


A few relevant quotes from the article:


 


Students and instructors began using the solution right away, following online instructions to get started. “Azure Virtual Desktop is pretty self-explanatory to use,” says Neil Hanham. “After running it, you’re in Windows, so there really wasn’t any training needed. With Lab Services, I onboarded the instructors, who onboarded their students.


 


“One Earth Sciences professor uses Lab Services to deliver specific Linux environments remotely. Because Lab Services delivers computing power to students’ devices, it doesn’t matter if they have specialized computers with extra graphics processing units (GPUs) or other enhancements. And instead of making appointments to help each student, instructors make their own reusable templates for each environment, saving significant configuration time with this self-service capability.”

STIGing Made Easy – Microsoft Endpoint Manager

STIGing Made Easy – Microsoft Endpoint Manager

This article is contributed. See the original author and article here.

Introduction


 


This is John Barbare and I am a Sr Customer Engineer at Microsoft focusing on all things in the Cybersecurity space. With my large customer base in the Microsoft Federal space and having to comply with internal security baselines and moving to a cloud-centric platform to manage devices, it is important to know if the baselines/settings will carry over. In this article, I will explain and show how to import an on-premises baseline Group Policy Objects (GPO) into Microsoft Endpoint Manager (MEM) and see the settings that directly carry over and how to create a policy for the ones that are not MDM compliant. With that said, let’s import several baselines and see the correlation from on-premises to MEM mapping and see how we can make the move to the cloud that much easier.


What is Microsoft Security Baselines and/or STIGs?


Security baselines are a group of Microsoft-recommended configuration settings which explain their security impact. These settings are based on feedback from Microsoft security engineering teams, product groups, partners, and customers. Certain Federal agencies and other Department of Defense (DoD) entities have created their own internal and also publicly available baselines or better known as Security Technical Implementation Guides (STIGs). At the end of this article, I will reference several publicly available Federal baselines/STIGs to download and implement in your organization if you are not already using a stringent baseline as of today. If you are a State/Federal/DoD agency and use MEM, feel free to follow along with your tenant as this demo was performed in IL5 before writing this article below in my private Microsoft tenant.


Importing STIGs in Microsoft Endpoint Manager


This article assumes you have enrolled or are going to enroll devices in MEM and we want to check to make sure your tenant status is green on the home page before continuing. Navigate to Microsoft Endpoint Manager and log in with your credentials. Once logged in you will arrive at the home page.


Select “Devices” and then “Group Policy analytics” to land on the policy page to perform the import of the STIGs we are going to analyze. This feature will allow you or your enterprise to analyze your on-premises GPOs and determine the level of MEM support.


 


Group Policy AnalyticsGroup Policy Analytics


 


I have already downloaded the most current STIGs (Apr 2021) as seen below from the public page of the Department of Defense (DoD) Cyber Exchange hosted by the Defense Information Systems Agency (DISA).


 


DISA STIGsDISA STIGs


 


Next, I will go into the DoD Windows 10 V2R2 folder and locate and confirm the gpreport.xml file is present as we will be using this file for the import. Two GPOs exist in this folder and we will be importing both (User and Computer). I will also go into the DoD Microsoft Edge V1R1 folder and locate and confirm the gpreport.xml file is present as I will also use this file for the import in addition to the other STIGs.


 


If your enterprise has its own internal STIGs, you would just open GPMC.msc, right-click on the STIGed GPO, and then do a “save report” and name “gpreport” and then selecting “XML” as the output and not HTML. DISA is nice enough to provide the STIGed gpreport.xml file for what we want to accomplish in each folder, so it makes it that much easier.


 


Selecting the gpreport.xmlSelecting the gpreport.xml


 


Next, we will import the three STIGs in the next several steps.


 


(Step 1) I will go back to the Group Policy Analytics page in MEM and (step 2) select the import icon at the top. (Step 3) This will bring out the flyout card and I will select the folder icon to import each gpreport.xml. (Step 4) I will locate and select each gpreport.xml in the three folders and (Step 5) select open each time.


 


Importing the STIGsImporting the STIGs


 


Note: Check the sizes of any GPO XML files that you import (STIGs or any baseline XML file). A single GPO cannot be larger than 750 kB. If the GPO is larger than 750 kB, the import process will fail. Any XML files without the appropriate Unicode ending will also fail the process. See below for failure errors.


 


ErrorsErrors


 


When all three STIGs from the respective GPO folders I targeted are successfully imported, it will list the following information:


 



  1. Group Policy name: This name is automatically generated using the information inside the GPO.

  2. Active Directory Target: The target is automatically generated using the organizational unit (OU) target information in inside the GPO.

  3. MDM Support: Displays the percentage of group policy settings in the GPO that has the same setting in MEM.

  4. Targeted in AD: Yes, means the GPO is linked to an OU in on-premises group policy. No means the GPO is not linked to an on-premises OU.

  5. Last imported: Shows the date/time stamp of the last import.

  6. Delete: Three dots on the end to delete the imported GPO (RBAC dependent).


 


After Importing the STOGsAfter Importing the STOGs


 


As one can see, all three STIGs were successfully imported in MEM Group Policy analytics showing the percentage of MDM support. Next, we will have to see what STIG settings do not have MDM support and then add them in.


 


We will select the second STIG, DoD Windows 10 STIG Computer v2r2, by clicking on the blue 87% under MDM Support. This will show which STIGs are mapped and which are not and more detail about each GPO. The details will display the following:


 



  1. Setting Name: The name is automatically generated using the information in the GPO setting.

  2. Group Policy Setting Category: This shows the setting category for ADMX settings, such as Internet Explorer and Microsoft Edge. Not all settings have a setting category.

  3. ADMX SupportYes, means there is an ADMX template for this setting. No means there is not an ADMX template for the specific setting.

  4. MDM SupportYes, means there is a matching setting available in Endpoint Manager. You can configure this setting in a device configuration profile. Settings in device configuration profiles are mapped to Windows CSPs. No means there is not a matching setting available to MDM providers, including Intune.

  5. Value: This shows the value imported from the GPO. It shows different values, true, false, enabled, disabled, etc.

  6. Scope: This shows if the imported GPO targets users or targets devices.

  7. Min OS Version: This shows the minimum Windows OS version build numbers that the GPO setting applies. It may show 18362 (1903), 17130 (1803), and other Windows 10 versions. For example, if a policy setting shows 18362, then the setting supports build 18362 and newer builds.

  8. CSP Name: A Configuration Service Provider (CSP) exposes device configuration settings in Windows 10. This column shows the CSP that includes the setting. For example, you may see Policy, BitLocker, PassportforWork, etc.

  9. CSP Mapping: This shows the OMA-URI path for the on-premises policy. You can relate this to the MDM version of GPOs.


 


STIGs and MDM SupportSTIGs and MDM Support


 


Under the MDM support column, we can see several that are not mapped in MEM/no MDM support. To add these into MEM, we need to create a custom configuration profile.


Creating a Custom Configuration Profile for Non-Mapped STIGed GPOs


 


After you have created the direct mapping of all the STIGed GPOs in a Configuration policy, you will need to create a custom policy for the ones that did not match or either do not have MDM support.


Select Configuration profiles, Create a profile, and for Platform select Windows 10 and later. For profile type, we will select Templates and choose Custom from the list and select create.


 


Creating a Custom ProfileCreating a Custom Profile


 


This will bring us to the custom policy page to create the policy so we can map the STIG to MEM/MDM. Go ahead create a name for the policy and select next. For Configuration settings, select Add, and then we will need to fill in the appropriate information for the policy. The name and description should be the policy you are creating. Next, we need to find the correct OMA-URI path and data type as this must match perfectly or it will not map.


 


Selecting the Data TypeSelecting the Data Type


 


To find the OMA-URI path to map, you will need to use the Policy configuration service provider page from Microsoft Docs to find the setting for the path. Since this a Windows 10 policy, it will start with ./Device/Vendor/MSFT/Policy/Config/ but we will need the path after the Config/. After we go to the link, we search for the setting for “Windows Defender SmartScreen” and we can find the rest of the path as seen below. The full value for the OMA-URI path will be:


./Device/Vendor/MSFT/Policy/Config/SmartScreen/EnableSmartScreenInShell


Down at the bottom, we have values of 0 and 1 and this tells me this will be an integer value for the Data Type drop-down menu and we use 1 as the value.


 


Finding the path on Microsoft DocsFinding the path on Microsoft Docs


 


With these pieces of information, we can apply these values found from the docs page into the correct settings as seen below.


 


Confirming the RowsConfirming the Rows


 


Go ahead and select save and then continue to add more for the ones that are not MDM compliant by selecting add again. When finished, it will display a list after you have added the ones needed and also to confirm. Go ahead and select next.


 


John_Barbare_11-1623076370845.jpeg


 


Select the groups you want the policy to apply to and select next.


 


Selecting the Assignments for the PolicySelecting the Assignments for the Policy


 


Select any custom Applicability Rules to apply the policy and select next. Review and then create the policy to apply.


 


Selecting any Applicability RulesSelecting any Applicability Rules


 


What About Conflicting Settings in MEM from STIGed GPOs? Who Wins?


 


If anyone has applied multiple STIGs on top of other GPOs or other baselines (I have a customer that uses three STIGs), the big question I always get is “who wins?” Is it the first baseline policy I created or the strongest GPO setting that will win once everything is synced? Let’s go ahead a make sure that does not happen and create a policy that is called “ControlPolicyConflict policies” or “ControlPolicyConflict/MDMWinsOverGP.” This feature was added in Windows 10, version 1803 and allows the IT admin to control which policy will be used whenever both the MDM policy and its equivalent GPO are set on the device. MDMWinsOverGP only applies to policies in Policy CSP. MDM policies win over Group Policies where applicable; not all Group Policies are available via MDM or CSP. It does not apply to other MDM settings with equivalent Group Policy settings that are defined in other CSPs. This policy is used to ensure that MDM policy wins over Group Policy when the policy is configured on the MDM channel. The default value is 0. The MDM policies in Policy CSP will behave as described if this policy value is set 1. This policy does not support the Delete command and does not support setting the value to 0 again after it was previously set to 1. In Windows 10 version 1809 it will support using the Delete command to set the value to 0 again if it was previously set to 1.


 


You would perform the same steps as above to create a custom configuration profile as seen below. Select Configuration profiles, Create a profile, and for Platform select Windows 10 and later. For profile type, we will select Templates and choose Custom from the list and select create.


 


For the configuration settings, use the below values:


Name: MDMWinsOverGP


Description: Ensure that MDM policy wins over GP 


OMA-URI:  ./Device/Vendor/MSFT/Policy/Config/ControlPolicyConflict/MDMWinsOverGP


Data Type: Integer


Value: 1


 


MDMWinsOverGPMDMWinsOverGP


 


And for a close-up view:


 


John_Barbare_15-1623076370911.jpeg


 


STIGed GPO Migration Report for MEM


 


With importing all the STIGs and seeing what we can migrate from on-premises, every IT Manager needs a report that will determine the status of the policies for your journey to the cloud. Select reports and then Group policy analytics.


 


STIGed GPO Migration Report for MEMSTIGed GPO Migration Report for MEM


 


Select the reports tab next to the summary to see a more detailed report about the readiness of your Group Policy for modern management. Export out the results for planning purposes or to send to a certain IT Team.


 


Export the ReportExport the Report


Conclusion


Thanks for taking the time to read this article and I hope you better understand the new Group Policy analytics in MEM as you use this function in your enterprise or in any Government IL5 tenant. Using the new Group Policy analytics will further show the value for any IT Manager the value of seeing what STIGs can be brought over, the mapping, and then create custom policies for the ones that are not MDM. Then finally, seeing how MEM battles the age-old question of which STIG/GPO wins for the finale! Hope to see you in the next blog and always protect your endpoints! STIG away!


 


Thanks for reading and have a great Cybersecurity day!


Follow my Microsoft Security Blogs: http://aka.ms/JohnBarbare  and also on LinkedIn.


References


CIS Microsoft Windows Desktop Benchmarks – Center for Internet Security (CIS)


 


Defense Information Systems Agency Security Technical Implementation Guide 


 


Group Policy Objects – DoD Cyber Exchange


 


NSA_Cyber – Windows-Secure-Host-Baseline: Configuration guidance for implementing the Windows 10 DoD Secure Host Baseline settings


 


Policy CSP – ControlPolicyConflict – Windows Client Management | Microsoft Docs

What’s new with .NET on Azure Functions – June 2021

This article is contributed. See the original author and article here.

In March, we announced the general availability of .NET 5.0 support on Azure Functions with the new .NET isolated process worker. Today, we’re happy to share more exciting news for .NET on Azure Functions! Visual Studio 2019 v16.10 now includes full support for .NET 5.0 isolated function apps. In addition, we’re announcing an early preview of Azure Functions running on .NET 6.0 in both the isolated process and in-process programming models.


 


Visual Studio support for .NET 5.0 isolated function apps


 


Visual Studio 2019 v16.10, released in May, includes full support for creating, local debugging, and deploying .NET 5.0 isolated process Azure Functions apps. Update your Visual Studio now and try the new tutorial.


 


Sneak peek: .NET 6.0 on Azure Functions


 


The Azure Functions team is committed to providing full support for .NET 6.0 as soon as .NET 6.0 is generally available in November 2021. Azure Functions supports two programming models for .NET—isolated process and in-process (learn more). Today, we’re providing early previews of .NET 6.0 for both programming models.


 


To run .NET 6.0, you need Azure Functions V4. Local tooling support for creating, running, and deploying .NET 6.0 function apps is currently limited to a preview release of Azure Functions Core Tools V4. You can still use Visual Studio or Visual Studio Code to write your functions.


 


A few important points to keep in mind for this preview:




  • Use the latest release of Azure Functions Core Tools V4 preview.




  • At this time, you can only deploy .NET 6.0 function apps to Azure Functions V4 preview on Windows hosting plans.




  • Currently, there are no optimizations enabled for .NET 6.0 apps in Azure. You may notice increased cold-start times.




  • While other language workers are included in the current Core Tools V4 preview, they are unsupported at this time. Continue to use Azure Functions V3 and Core Tools V3 for other languages and production workloads.




 


Note that .NET 6.0 on Azure Functions is currently offered as an early preview and there is no official support. Try it out and let us know what you think using GitHub Issues. Watch for a public preview announcement later this year.


 


Run isolated process functions on .NET 6.0


 


.NET functions using the isolated model run in a separate process from the Azure Functions host. This decoupling allows you to install dependencies without worrying about conflicts with host dependencies. Its programming model also provides greater flexibility in how you configure your app’s startup.


 


.NET 5.0 is the first .NET version supported by the isolated model. Today, you can also run isolated process functions on .NET 6.0 Preview 4!


 


See the following wiki article to learn more and build your first .NET 6 Azure Functions app.


Quickstarts: Azure Functions v4 (.NET 6) early preview


 


The isolated process model for .NET is new and there are some differences compared to the in-process model. Many will be addressed as the programming model continues to evolve. If you need access to features that are currently missing, such as Durable Functions, use the in-process model.


 


Run .NET 6.0 in-process functions with Azure Functions V4 preview


 


Starting today, you can also run in-process .NET 6.0 functions with an early preview of Azure Functions V4. You have access to the same features and capabilities as V3—including support for rich binding types and Durable Functions.


 


See the following wiki article to learn more and build your first .NET 6 Azure Functions app.


Quickstarts: Azure Functions v4 (.NET 6) early preview


 


What’s next for .NET on Azure Functions


 


Thanks for checking out our announcements and we’re excited for you to try them out. And in case you missed it, Azure App Service also announced early access for .NET 6.0 Preview today. 


 


There’s a lot more planned for Azure Functions in the coming months. We’re bringing .NET 6.0 Azure Functions support to tools like Visual Studio and Visual Studio Code and to all hosting plans in Azure. Expect a public preview of Azure Functions V4 in the third quarter of this year and general availability in November. Follow our twitter account for the latest updates: @AzureFunctions.

Troubleshoot HTTPS 502 error when Application Gateway in front of API management self-hosted gateway

Troubleshoot HTTPS 502 error when Application Gateway in front of API management self-hosted gateway

This article is contributed. See the original author and article here.

We will go through the below topics in the blog:



  1. Introduction on APIM self-hosted gateway and how do we configure custom domain for it.

  2. Case Study: 502 error returned by V1 Application gateway when using HTTPS protocol.

  3. V2 Application gateway’s difference between V1 when verify server cert.


 


*In this blog, AG = Application Gateway. SH-gateway = self-hosted gateway.


 


If you are not familiar with AG and APIM integration, here are two well composed blogs that let us know how to work with AGv1, AGv2 and Managed APIM.


 


APIM with Application Gateway v1 – Microsoft Tech Community


Integrating API Management with App Gateway V2 – Microsoft Tech Community


 


Introduction on APIM self-hosted gateway and how do we configure custom domain for it.


 


To describe in brief, self-hosted gateway is APIM packaged in a Linux Docker image and can be deploy to any VM or on-prem machines.


More information here: Self-hosted gateway overview | Microsoft Docs


The blog will not include deploying the self-hosted gateway as the thesis is to explain some common issues that we will get when an App gateway is in front of it.


One easy way to find out if your self-hosted gateway is pulling API configurations from Azure is to check this ‘Status’.


 


Yixuan_Wang_0-1623209739153.png


 


A green light means the heartbeat connectivity is successfully established.


Configure the custom domain here at the ‘Hostname’ blade.


 


Yixuan_Wang_1-1623209739174.png


 


We will need to upload the pfx format first to the ‘Certificate’ blade of the APIM. So we can list it out here.


 


Yixuan_Wang_2-1623209739199.png


 


Yixuan_Wang_3-1623209739211.png


 


 


Once we made the hostname change, if we are following the docker container log for the self-hosted gateway, we can see an event being created. That means the hostname has taken effect.


 


Yixuan_Wang_4-1623209739233.png


 


Case Study: 502 errors returned by V1 Application gateway when using HTTPS


 


Background:


 


My V1 AG’s backend setting is targeting my SH-gateway’s hosting VM’s public IP.


Yixuan_Wang_5-1623209739237.png


 


I used a self-signed certificate for my SH-gateway’s domain. And have uploaded the cer format of this certificate to the AG.


 


Yixuan_Wang_6-1623209739239.png


 


Yixuan_Wang_7-1623209739241.png


 


 


I have over-written the hostname in http setting and custom probe.


 


Yixuan_Wang_8-1623209739248.png


 


 


Yixuan_Wang_9-1623209739258.png


 


 


Test HTTPS with postman, got 502 error.


 


Yixuan_Wang_10-1623209739279.png


 


 


HTTP however is working as expected, so I am suspecting the issue could be with the certificate. However, I have already uploaded the cer format to AG.


Yixuan_Wang_11-1623209739288.png


 


 


To narrow down and test HTTPS connectivity, I bypassed the AG and accessed the SH-gateway directly with IP:port. The IP is the docker container hosting VM’s public IP.


openssl s_client -connect XX.XX.XX.XX:443 -showcerts


 


Yixuan_Wang_12-1623209739309.png


 


 


As in the screenshot, the certificate that the server returned is not the custom domain certificate I configured for the SH-gateway. It is returning test.apim.net, the default self-signed cert.


I realized that when we access the APIM with IP, there is no SNI header in the request. Based on the APIM documentation:


 


Yixuan_Wang_13-1623209739321.png


 


 


In other words, for Managed APIM, we need to choose a default custom certificate for APIM to return, and the catch here is that SH-gateway will not let us choose defaultSslBinding. So, if there is no SNI header in the requests, SH-gateway always return the default test.apim.net cert.


 


But I was expecting the AG overwrites the hostname header and the SNI supposed to be set. After some research, I found the answer in AG’s documentation.


 


Yixuan_Wang_14-1623209739337.png


 


In conclusion, V1 AG set requests’ SNI uses backend pool setting, which means the hostname overwrites does not modify the SNI header, hence if we put IP as a backend pool target, SH-gateway’s server cert always mismatches with the cert we uploaded to the AG.


 


There are two solution options for this issue with AGv1:



  • Use FQDN as a backend target. Don’t use IP.

  • Use IP as a backend target, and download the test.apim.net cert, upload it to AG’s http setting. We need to give up custom domain with this solution.


 


For the solution No.2, I navigated to SH-gateway by IP with browser and downloaded the certificate from the browser.


 


Yixuan_Wang_17-1623209963825.png


 


V2 AG’s difference when verify server certificate


 


Since the AG will verify server cert’s root cert, and the test.apim.net does not have a root cert. The HTTPS requests will get 502 even if we uploaded this cert to APIM.


Yixuan_Wang_16-1623209739346.png


 


Therefore, if we configure custom domain for SH-gateway and use V2 AG in front of it,


1)The custom domain cert needs to be issued with well-known CA


2)Or it can be self-signed with a root cert, with the root cert uploaded to AG.


 


Hope this blog will help you identify the reason we get 502 when configure AG with APIM SH-gateway.


 


Appendix:


 


Enabling end to end TLS on Azure Application Gateway | Microsoft Docs


What is SNI? How TLS server name indication works | Cloudflare