All blog posts in Microsoft 365 PnP

Microsoft 365 Developer Community Call recording – 27th of May, 2021

Vesa Juvonen — Fri, 28 May 2021 07:20:50 GMT

Recording of the Microsoft 365 – General M365 development Special Interest Group (SIG) community call from May 27, 2021.

Call Summary

Latest news from Microsoft 365 engineering and updates on open-source projects: PnP .NET libraries, PnP PowerShell, modernization tooling, on yo Teams, on Microsoft Graph Toolkit, and on Microsoft Teams Samples.

Join on the Viva Connections private preview! The Microsoft Teams Toolkit v2 is now available! Looking to get started with Microsoft Teams development? Don’t miss out our Teams samples gallery! Check out the Microsoft 365 Extensibility look book gallery, and register now for June trainings on Sharing-is-caring. Recent PnP project releases include - yo Teams generator-teams (apps generator) v3.1.0 GA, v3.2.0 Preview, yo teams-build-core (gulp tasks) v1.2.0 Preview, and Microsoft Graph Toolkit v2.2.0 GA along with insights into MGT vNext.

Open-source project status:

Project	Current Version	Release/Status
PnP .NET Libraries - PnP Framework	v1.4.0	Prepping for v1.5.0 release week of May 31
PnP .NET Libraries - PnP Core SDK	v1.1.0	Prepping for v1.2.0 release week of May 31
PnP PowerShell	v1.5.0 (just added Cmdlets for Viva Connections and Syntex)	Prepping for v1.6.0 (June)
Yo teams - generator-teams	Released v3.1.0 GA, v3.2.0 Preview	Preview with Viva Connections support
Yo teams - yoteams-build-core	v1.1.0, v1.2.0 Preview
Yo teams - msteams-react-base-component	v3.1.0
Microsoft Graph Toolkit (MGT)	v2.2.0 GA

Additionally, 2 new Teams samples were delivered in the last 2 weeks. The host of this call was David Warner II (Catapult Systems) | @DavidWarnerII. Q&A takes place in chat throughout the call.

Actions:

Join on the Viva Connections private preview! | aka.ms/viva/connections/preview/register
Feedback wanted: Regarding PnP PowerShell – “What if we did not return classic CSOM objects from the cmdlets?” Comments to: @erwinvanhunen.
Register for Sharing is Caring Events:
- First Time Contributor Session – June 29^th (EMEA, APAC & US friendly times available)
- Community Docs Session – May
- PnP – SPFx Developer Workstation Setup – June 17^th
- PnP SPFx Samples – Solving SPFx version differences using Node Version Manager – June 24^th
- AMA (Ask Me Anything) – Microsoft Graph & MGT – June 8^th
- AMA (Ask Me Anything) – Microsoft Teams Dev - June
- First Time Presenter – June 30^th
- More than Code with VSCode – May 27^th, June 16^th
- Maturity Model Practitioners – June 15^th
PnP Office Hours – 1:1 session - Register
PnP Buddy System - Request a Buddy
Download the recurrent invite for this call – http://aka.ms/m365-dev-sig
Call attention to your great work by using the #PnPWeekly on Twitter.

Microsoft Teams Development Samples: (https://aka.ms/TeamsSampleBrowser)

Action Preview - Markus Moeller |@Moeller2_0
Teams Context Viewer tab - Sébastien Levert |

Hello! it’s always great to see everyone on the call today. Thanks for participating.

Demos delivered in this session

Getting started with HTWOO UI – Fluent Design in HTML and CSS – an open-source community driven Fluent UI driven framework that’s just HTML, CSS and a bit of JS. Simple to use in the Microsoft 365 ecosystem, same branding as Fluent UI. Complete component library - tables, typography, avatars, icons, dialogs and more. Steps through HTWOO install – a npm package and 2 theme aware SPFx web parts. Complete documentation and samples.
Gain your users attention with the Microsoft Teams Activity Feed API – send activity notifications from both apps that live outside Teams and others (like static tabs) inside Teams, to Teams tabs, bots, chat. Uses the activity feed notification APIs in Microsoft Graph. Presenter review types of metadata on messages, requirements for sending defined activity type notifications, app registration, consent, manifest, notifications settings in Teams, etc. Then steps through the code for simple and advanced notifications.
Deep linking from List Formatting to Power Automate solution – Integrate lists, list formatting and Power Apps. Achieve similar look and feel using same SVG icons in lists and Power App. Call for list data from a Power App. Launch a Power App and send mail from within a list. Color SVG icons using fill properties in Inkscape SVG Editor. Showed using code from 2 samples in this demo.

Thank you for your work. Samples are often showcased in Demos.

Topics covered in this call

PnP .NET library updates - Bert Jansen (Microsoft) @O365bert - 5:50
PnP PowerShell updates - Erwin van Hunen (Valo Intranet) @erwinvanhunen - 8:21
yo Teams updates - David Warner II (Catapult Systems) @DavidWarnerII - 10:00
Microsoft Graph Toolkit updates - Nikola Metulev (Microsoft) | @metulev - 10:31
Microsoft Teams Samples - David Warner II (Catapult Systems) @DavidWarnerII - 13:38
Demo: Getting started with HTWOO UI – Fluent Design in HTML and CSS – Stefan Bauer (N8D) | @StfBauer - 15:31
Demo: Gain your users attention with the Microsoft Teams Activity Feed API – Thomas Gölles (Solvion) | @thomyg - 29:54
Demo: Deep linking from List Formatting to Power Automate solution – Chris Kent (DMI) | @theChrisKent - 44:55

Resources:

Additional resources around the covered topics and links from the slides.

Blog Post - HTWOO UI launched – Fluent Design in HTML and CSS
Documentation: ABOUT HTWOO UI
Repo: HTWOO UI framework
Samples: htwoo-samples
Documentation - Send activity feed notifications to users in Microsoft Teams
Video - Microsoft Teams – Use the teamwork Microsoft Graph endpoint
Documentation - Create deep links
Graphics - Fluent UI Icon Search
Sample - Person Mail To Link
Sample - Launch Power App Button
Blog post - Custom Icon Buttons in Power Apps with Hover Color
Editor - Inkscape - https://inkscape.org
PnP Weekly – Episode 128 with guest Katie Swanson (Microsoft) | @kswansondesign | video | podcast
Microsoft Teams Toolkit v2.2 | https://aka.ms/teams-toolkit
Microsoft 365 Extensibility look book gallery | aka.ms/m365/extensibility
Microsoft Teams Samples Gallery | aka.ms/teams-samples

General resources:

Microsoft 365 PnP Community hub | aka.ms/m365pnp/community
Microsoft Graph Toolkit in Microsoft Learn | http://aka.ms/learn-mgt
Viva Connections https://aka.ms/VivaConnections
SharePoint look book
Yo Teams video training package
.NET Standard 2.0 version of SharePoint Online CSOM API
Microsoft 365 community (PnP) videos | aka.ms/m365pnp-videos
Microsoft Teams Toolkit for Visual Studio Code
yo Teams | aka.ms/yoteams
Video - Getting started using yo Teams | Wictor Wilén (Avanade)| @wictor
Build a crisis management site to connect people and information
Developer documentation | https://aka.ms/spdev-docs
PnP Power Shell
SharePoint Modernization Partner Guidance - Feedback welcome
Solution - Building a modern search experiences with SharePoint Framework web parts
Page transformation guidance
Page transformation videos
Modernization scanner
Microsoft 365 developer program site - Need to become a Tenant Admin to test look book capabilities? Get a Microsoft 365 E5 developer subscription (free tenant for 90 days)
SharePoint Provisioning Service - Easily provision look book designs to any tenant in the world
SharePoint Provisioning templates on Github
PnP Provisioning Tenant Templates documentation
SharePoint Page Transformation webcast series
PnP Power Shell
SharePoint Modernization Tools

Upcoming Calls | Recurrent Invites:

Microsoft Graph call – June 1^st at 8:00 am PDT | https://aka.ms/microsoftgraphcall
SharePoint Framework call – June 3^rdat 7:00 am PDT | https://aka.ms/spdev-spfx-call
SharePoint monthly call – June 8^th at 8:00am PDT | https://aka.ms/sp-call
Office add-in monthly call – June 9^th at 8:00 am PDT | https://aka.ms/officeaddinscall
Adaptive Cards monthly call – June 10^th at 9:00 am PDT | https://aka.ms/adaptivecardscommunitycall
M365 General Dev call – June 10^th at 7:00 am PDT | https://aka.ms/m365-dev-sig
Microsoft Teams monthly call – June 15^th at 8:00 am PDT | https://aka.ms/microsoftteamscommunitycall
Power Apps monthly call – June 16^th at 8:00 am PDT | https://aka.ms/PowerAppsMonthlyCall
Microsoft Identity Platform – June 17th at 9:00 am PDT | https://aka.ms/IDDevCommunityCalendar

General Microsoft 365 Dev Special Interest Group bi-weekly calls are targeted at anyone who's interested in the general Microsoft 365 development topics. This includes Microsoft Teams, Bots, Microsoft Graph, CSOM, REST, site provisioning, PnP PowerShell, PnP Sites Core, Site Designs, Microsoft Flow, PowerApps, Column Formatting, list formatting, etc. topics. More details on the Microsoft 365 community from http://aka.ms/m365pnp. We also welcome community demos, if you are interested in doing a live demo in these calls!

You can download recurrent invite from http://aka.ms/m365-dev-sig. Welcome and join in the discussion. If you have any questions, comments, or feedback, feel free to provide your input as comments to this post as well. More details on the Microsoft 365 community and options to get involved are available from http://aka.ms/m365pnp.

“Sharing is caring”

Microsoft 365 PnP team, Microsoft - 28th of May 2021

Re: How to invite external users to a SharePoint site or Microsoft Team using Power Automate & G

Alex Thomas — Fri, 28 May 2021 00:23:28 GMT

This is a very useful blog post and a good piece of knowledge sharing, but let's keep in mind the big picture here.

You need to do all of this complicated stuff, simply to enable the completely predictable and foreseeable outcome described in the first couple of words in the headline.

Re: SPFx webpart form validation using React Formik

ChandaniPrajapati — Thu, 27 May 2021 18:07:12 GMT

Thanks,

Re: SPFx webpart form validation using React Formik

Dipen Shah — Thu, 27 May 2021 15:07:46 GMT

Hi ,

It is amazing article.

How to invite external users to a SharePoint site or Microsoft Team using Power Automate & Graph API

AshiqFaleel — Wed, 26 May 2021 15:25:16 GMT

SharePoint and Microsoft teams services in Microsoft 365 makes it easier to share content and collaborate with external users who is outside your organization. A guest or external user is someone who do not have a school or work account with your organization, they can be your partner, vendor, customer etc. In this article let us see how to build a self-registration experience for external users with the help of Microsoft Forms & Power Automate to onboard them to a

SharePoint online site
Microsoft Team

Microsoft Form to collect details from External User:

To start building this experience, create a Microsoft form with the setting Anyone can respond and with fields (Name, Email address etc) to collect information from the external user to send invitation.

Azure Active Directory Application registration:

The next step after creating the form is to register an application in Azure AD with Microsoft graph API permission to send invitation to external user. After the app is registered obtain the client id, client secret & tenant id to be used in the Power Automate flow further down this article to generate the JSON webtoken to access Microsoft Graph API for sending invitation. Find below screenshot with the permission User.Invite.All added to the app. Keep in mind the permission requires Admin consent.

There is also delegated permission available for User.Invite.All.

Onboard External users to a SharePoint online site:

Once the Microsoft form is ready, we can start building the Power Automate flow which can send the email invitation to the external user and for granting access to the SharePoint site. The external sharing features of SharePoint Online enables users in your organization share content with people outside the organization. There is no limit to the number of guests you can invite to SharePoint sites as per this SharePoint online limits documentation. Find below steps to create the Power Automate flow with a custom approval on a Microsoft Team

Power Automate Flow:

Create an Automated flow with the trigger When a new response is submitted with the above form name selected on the dropdown and then add the action Get response details with the Response Id selected from the dynamic content for the trigger to get the form details submitted in the Microsoft form by the external user. Find screenshot below

Adaptive card for Teams Approval:

For the Approval in Microsoft Teams, I have used a custom card created from the Adaptive card designer with elements ColumnSet, TextBlock to display information submitted in the form & action button Approve and Reject to take further action by a Microsoft teams user to proceed with Invitation for the Guest account creation. Find screenshot below from the adaptive card designer

After the card is designed, copy the card payload from the designer and go to the flow and then add the action Post adaptive card and wait for a response and make appropriate selection on the available fields as shown below
- Post as: Flow bot
- Post in: Channel
- Message: Payload copied from designer. Replace the fields for usrName & userEmail selected from the dynamic content from the outputs of the action Get response details. The created on textBlock element has the flow expression formatDateTime(utcNow(),'g') to display the current datetime information on the card.

Update Message: Custom message which appear after an action taken in Microsoft Teams
Team: Select the Team where you would like to post the card
Channel: Select the channel from the Microsoft Team where you would like to have the approval adaptive card posted

Card payload:

{ "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "weight": "Bolder", "text": "Approval for adding the External User", "wrap": true }, { "type": "TextBlock", "spacing": "None", "text": "Created Add flow expression to get current date", "isSubtle": true, "wrap": true }, { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "text": "Name:", "wrap": true, "size": "Medium", "weight": "Bolder" }, { "type": "TextBlock", "text": "Email:", "wrap": true, "weight": "Bolder", "size": "Medium" } ], "width": "stretch" }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "usrName-Replace it from Microsoft Form", "wrap": true }, { "type": "TextBlock", "text": "userEmail-Replace it from Microsoft Form ", "wrap": true } ] } ] } ], "actions": [ { "type": "Action.Submit", "title": "Approve", "id": "btnApprove" }, { "type": "Action.Submit", "title": "Reject", "id": "btnReject" } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.0" }

The above adaptive card is used to get approval from the Organization teams user based on the information submitted by the external user in the Microsoft form to proceed with the next steps for sending the guest account invite. Now we will have to identify if the user has clicked the button Approve or Reject. This information can be easily obtained from the Outputs of the action.

Note: Adaptive card can also be sent using a Microsoft Graph API with the card payload in Attachments field

https://docs.microsoft.com/en-us/graph/api/channel-post-messages?view=graph-rest-beta&tabs=http

Adaptive card for Teams - Dynamic content Missing:

As of the time I am writing this article there is an issue in getting the output as dynamic content for the Post adaptive card and wait for a response action if there is dynamic content added on the JSON Payload (Name, Email from Forms). The fix is to run the flow till the post adaptive card action and take an action on Microsoft teams by clicking either Approve or Reject and then go to the Flow run from the history as shown below

From the above screenshot, we can see if the user has clicked the Approve or Reject button from the field submitActionId. To get this value in Flow, use the expression

outputs('Post_adaptive_card_and_wait_for_a_response').body.submitActionId

@outputs('Post_adaptive_card_and_wait_for_a_response')?['body/submitActionId']

Spaces in the name of the action is replaced with underscore.

To get the userPrincipalName, the expression is

outputs('Post_adaptive_card_and_wait_for_a_response').body.responder.userPrincipalName

@outputs('Post_adaptive_card_and_wait_for_a_response')?['body/responder/userPrincipalName']

To get the submitActionId, enter the expression outputs('Post_adaptive_card_and_wait_for_a_response').body.submitActionId in the compose action, then add a condition control to decide action based on users approval

I have observed this issue occurs in other team’s adaptive card actions as well, the above fix should work. Now we can implement the logic to send the Guest Invitation using Microsoft Graph API. To send the invite, we will use the Azure AD application registered above.

Generate JSON Web token to Access Graph API:

Be ready with the ClientId, Client Secret and Tenant Id collected from the AD app registration you have done initially. The only authentication flow to generate a access token for application permissions is Client credentials.

To generate a token

Store the Client Secret on a String variable or a compose action
Make a HTTP request using the HTTP connector with the following details. Make sure to replace the string for tenantId, azureAdAppclientId and azureAdAppclientSecret

Add a HTTP connector action to the flow for making a POST request per the following information

HTTP Method: POST

URI: https://login.microsoftonline.com/yourtenantId/oauth2/v2.0/token

Headers:

Key: Content-Type

Value: application/x-www-form-urlencoded

Body:

tenant=yourtenantId&client_id=azureAdAppclientId&client_secret=@{decodeUriComponent(variables('azureAdAppclientSecret'))}&grant_type=client_credentials&scope=https://graph.microsoft.com/.default

For the client secret make sure to URL encode using the expression encodeUriComponent(variables(‘clientSecret’)) else the request will fail due to the presence of special characters.

In the above screen, I have added a compose action to store the SharePoint site address to be used for granting the external user access to. To extract the token from the above request, add the parse JSON action with Content from the HTTP request body and the following schema

{ "type": "object", "properties": { "token_type": { "type": "string" }, "scope": { "type": "string" }, "expires_in": { "type": "integer" }, "ext_expires_in": { "type": "integer" }, "access_token": { "type": "string" }, "refresh_token": { "type": "string" } } }

Include the access token when calling the Microsoft Graph API on the Headers section or raw as shown in the next section.

Send Invitation using Microsoft Graph API:

Before sending the invitation, validate if the user already exists in your organization AD tenant by using the email address of the external user with the help of the action Search for users as shown below

If there is null response for the action Search for users, then the user does not exist. This can be calculated using the expression length and by passing the value as a parameter, if it is equals zero then the external user does not exist. If the user already exists, we can directly proceed to granting the external user access to SharePoint.

Graph API to check if a guest user already exists:

https://graph.microsoft.com/v1.0/users?$filter=UserType eq 'Guest'&$filter=mail eq exteruseremailaddress@domain.com'

https://graph.microsoft.com/v1.0/users?$filter=startswith(mail,'exteruseremailaddress@domain.com')

Find below the Graph API endpoint http request details to invite the external user

Method: POST

URL: https://graph.microsoft.com/v1.0/invitations

Request Body:

{ "invitedUserDisplayName": "External User Name", "invitedUserEmailAddress": "External User Email Address", "sendInvitationMessage": true, "inviteRedirectUrl": "SharePoint site URL or any URL", "invitedUserMessageInfo": { "messageLanguage": "en-US", "customizedMessageBody": "Welcome to the M365PAL SharePoint site! Click the link below and sign in." } }

In HTTP request body, use the dynamic content of the form to populate the fields invitedUserDisplayName & Emailaddress. The invite redirectUri is the output of the compose action which has the SharePoint site url. I have added a delay of one minute before granting access to SharePoint site for the external user, this step is to make sure there is an entry in Azure AD for the external user/guest account.

Custom connector can be used for calling the Graph API for sending invitations instead of using HTTP connector, you can refer to the post Call Microsoft Graph API in Power Apps and Power Automate using a Custom connector for detailed instructions.

Grant Access to SharePoint site for the external user:

As soon as the guest account invite is sent from the above Microsoft graph API request HTTP action, it is time to grant access to the SharePoint site for the external user. There is a SharePoint REST API endpoint to add a user to a SharePoint group (Owners, Member, Visitors), find below the request details

Request URL: https://tenantname.sharepoint.com/sites/siteName/ _api/web/sitegroups/GetById(groupId)/users

For the groupId to the corresponding SharePoint group, refer to the following table

SharePoint Group	GroupId
Owners	3
Members	5
Visitors	4

Headers:

Key: accept value: application/json;odata.metadata=none

Key: content-type value: application/json

Body:

{'LoginName':'i:0#.f|membership|userPrinipalNameorEmailaddressofExternalUser'}

For the external user, the email address used to send the invite works.

Go back to the flow and add the action Send an HTTP request to SharePoint to call the above REST api. Find below the screenshot of the action

The above action uses delegated permission, the user of the connection should have access to the SharePoint site. As of now, there is no Graph API for adding the user to a SharePoint group but you can register an app in Active directory and add permission for SharePoint to call the above REST API. Refer to the documentation Granting access via Azure AD App-Only for calling the REST API using the registered AD app.

Testing the flow:

The whole flow can now be tested by submitting the form which sends the adaptive card on Teams first as shown below

After the card is approved, the invite is sent to the external user. After the external user accepts the invite, the user should be automatically redirected to the SharePoint site with the appropriate access. The access to the SharePoint site for the external user can be validated by the checking the membership of the SharePoint group in the site even before the user accepts the invitation. The site members can also be validated by accessing the URL for All users list:

https://tenantName.sharepoint.com/sites/siteName/_layouts/15/people.aspx?MembershipGroupId=0

This approach of granting access to SharePoint site for external user can be applied to internal users by turning off the access requests.

Limit External Sharing by domain:

The external sharing on SharePoint can be restricted based on domain of the external user. To enable the setting login into the SharePoint admin center > Policies > Sharing > Enable the checkbox Limit external sharing by domain > Add domain

Onboard External users to a Microsoft Team:

To onboard the external user to a Microsoft Team, the only change to the above flow is, instead of adding the user to the SharePoint group the user must be added as a Member to the Microsoft 365 group connected to the Microsoft Teams. The graph API to add a member to a Microsoft Team is

Request Type: POST

Request URL: https://graph.microsoft.com/v1.0/teams/{team-id}/members

The team-id is the Microsoft 365 group object Id, as there is always a Microsoft 365 group connected to a Microsoft Team.

Body:

{ "@odata.type": "#microsoft.graph.aadUserConversationMember", "roles": ["owner"], "user@odata.bind": "https://graph.microsoft.com/v1.0/users(userObjectIdofGuest')" }

The expression to get the user object Id of the external user as per the below screenshot is

outputs('HTTP-SendGuestInvitation').body.invitedUser.Id

The expression can be used in a compose action to get the Object Id of the external user which can be used in the Graph API request to add the member to a Team. HTTP-SendGuestInvitation is the name of the HTTP Action.

Permission for the Azure AD App to add a member to a Microsoft Team:

The application permission Group.ReadWrite.All has to be added on the Azure AD app, if you are going to be using the same JSON webtoken generated above. There is delegated permission as well for adding members.

https://graph.microsoft.com/Group.ReadWrite.All

I recommend you read the following documentation from Microsoft for External sharing

https://docs.microsoft.com/en-us/microsoftteams/manage-external-access

https://docs.microsoft.com/en-us/microsoftteams/guest-access

https://docs.microsoft.com/en-us/microsoftteams/communicate-with-users-from-other-organizations

Summary:

With this, the Power Automate flow should send the invitation as shown below to the external user.

If it is for a Microsoft Team, the external user should be licensed for teams service to open it on their teams client. The same flow can be also configured for Microsoft 365 group.

This post was originally published in ashiqf.com

SPFx webpart form validation using React Formik

ChandaniPrajapati — Wed, 26 May 2021 12:56:03 GMT

Introduction

Formik is the world's most popular open-source form library for React and React Native. We can also use this library in our SPFx web part as well to manage form validations. Using this library we don't have to write custom validations. so let's start step-by-step implementation.

What is formik?

Formik is a small library that helps us with the these parts: Getting values in and out of form state. Validation and error messages. Handling form submission.

Formik is designed to manage forms with complex validation with ease.

Formik supports synchronous and asynchronous form-level and field-level validation.

Furthermore, it comes with baked-in support for schema-based form-level validation through Yup.

For more details about Fromik refer to the below articles,

Formik official documentation

Manage Forms In React With Formik

Formik validation Schema

SharePoint List Structure

Create a list called Tasks with below fields,

Field Name(Internal name)	Field Type
Title (default)	Single line of text
StartDate	Date and Time (Date only)
EndDate	Date and Time (Date only)
ProjectName	Single line of text
TaskDetails	Multiple lines of text

After the creation of the list, we will start to create the SPFx web part.

Formik implementation with SPFx

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

md react-formik

Move to the above-created directory using:

cd react-formik

Now execute the below command to create an SPFx solution:

 yo @microsoft/sharepoint

It will ask some questions, as shown below,

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 .

Now we will install the following packages:

npm i formik
npm i yup
npm i @pnp/spfx-controls-react
npm i @microsoft/sp-dialog

In the end, our output will be like this,

After the successful installation, we will start our form implementation.

1. Create below files

I{webpartname}State.ts inside src/webparts/reactFormik/components

SPService.ts file inside src/webparts/shared/service

In the end, our structure will be looks like this,

2. Create a state interface as below inside IReactFormikState.ts.

export interface IReactFormikState { projectName?: string; startDate?: any; endDate?: any; }

3. Create a method to create a task inside SPService.ts.

import "@pnp/sp/webs"; import "@pnp/sp/lists"; import "@pnp/sp/items"; import "@pnp/sp/webs"; import "@pnp/sp/site-users/web"; import { Web } from "@pnp/sp/webs"; export class SPService { private web; constructor(url: string) { this.web = Web(url); } public async createTask(listName: string, body: any) { try { let createdItem = await this.web.lists .getByTitle(listName) .items .add(body); return createdItem; } catch (err) { Promise.reject(err); } } }

4. Move to the ReactFormikWebPart.ts. In this, we will pass the current SP context and read site URL from user.

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 'ReactFormikWebPartStrings'; import ReactFormik from './components/ReactFormik'; import { IReactFormikProps } from './components/IReactFormikProps'; import { sp } from "@pnp/sp/presets/all"; export interface IReactFormikWebPartProps { description: string; siteUrl: string; } export default class ReactFormikWebPart extends BaseClientSideWebPart<IReactFormikWebPartProps> { protected onInit(): Promise<void> { return super.onInit().then(_ => { sp.setup({ spfxContext: this.context }); }); } public render(): void { const element: React.ReactElement<IReactFormikProps> = React.createElement( ReactFormik, { description: this.properties.description, context: this.context, siteUrl: this.properties.siteUrl ? this.properties.siteUrl : this.context.pageContext.web.absoluteUrl } ); 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 }), PropertyPaneTextField('siteUrl', { label: strings.SiteUrlFieldLabel }) ] } ] } ] }; } }

5. Move to the ReactFormik.tsx file to render form and validations

yup syntaxs:

1. For string: yup.string().required('Required')

2. For date: yup.date().required('Required').nullable()

Related to Formik

1. Fromik has its own handleReset and handleSubmit method so we don not have to manage manually

2. We have to set state value and error message from control so for that I have created a common method

1. In the constructor, we will set the current SP context, bind the service and required methods and initialize the states.

2. Create createRecord() to create task list item using SPService.

3. In the render(), first we will add all the controls like date picker, text field, people picker, and dropdown, etc inside <Formik>.

then We will set properties as below,

initialValues - This is one type o state at here we will set empty or null or undefined as an initial level.

validationSchema - At here we will do validations using yup. so for this, I am creating one const and wills et this constant in this prop.

onSubmit - At here we will call the method to create a record in the SharePoint list

import * as React from 'react'; import styles from './ReactFormik.module.scss'; import { IReactFormikProps } from './IReactFormikProps'; import { IReactFormikState } from './IReactFormikState'; import { SPService } from '../../shared/service/SPService'; import { TextField } from '@fluentui/react/lib/TextField'; import { Stack, } from '@fluentui/react/lib/Stack'; import { Formik, FormikProps } from 'formik'; import { Label } from 'office-ui-fabric-react/lib/Label'; import * as yup from 'yup'; import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker"; import { DatePicker, Dropdown, mergeStyleSets, PrimaryButton, IIconProps } from 'office-ui-fabric-react'; import { sp } from '@pnp/sp'; import { Dialog } from '@microsoft/sp-dialog'; const controlClass = mergeStyleSets({ control: { margin: '0 0 15px 0', maxWidth: '300px', }, }); export default class ReactFormik extends React.Component<IReactFormikProps, IReactFormikState> { private cancelIcon: IIconProps = { iconName: 'Cancel' }; private saveIcon: IIconProps = { iconName: 'Save' }; private _services: SPService = null; constructor(props: Readonly<IReactFormikProps>) { super(props); this.state = { startDate: null, endDate: null } sp.setup({ spfxContext: this.props.context }); this._services = new SPService(this.props.siteUrl); this.createRecord = this.createRecord.bind(this); } /** set field value and error message for all the fields */ private getFieldProps = (formik: FormikProps<any>, field: string) => { return { ...formik.getFieldProps(field), errorMessage: formik.errors[field] as string } } /** create record in sharepoint list */ public async createRecord(record: any) { let item = await this._services.createTask("Tasks", { Title: record.name, TaskDetails: record.details, StartDate: record.startDate, EndDate: new Date(record.endDate), ProjectName: record.projectName, }).then((data) => { Dialog.alert("Record inseterd successfully !!!"); return data; }).catch((err) => { console.error(err); throw err; }); } public render(): React.ReactElement<IReactFormikProps> { /** validations */ const validate = yup.object().shape({ name: yup.string().required('Task name is required'), details: yup.string() .min('15', 'Minimum required 15 characters') .required('Task detail is required'), projectName: yup.string().required('Please select a project'), startDate: yup.date().required('Please select a start date').nullable(), endDate: yup.date().required('Please select a end date').nullable() }) return ( <Formik initialValues={{ name: '', details: '', projectName: '', startDate: null, endDate: null }} validationSchema={validate} onSubmit={(values, helpers) => { console.log('SUCCESS!! :-)\n\n' + JSON.stringify(values, null, 4)); this.createRecord(values).then(response => { helpers.resetForm() }); }}> { formik => ( <div className={styles.reactFormik}> <Stack> <Label className={styles.lblForm}>Current User</Label> <PeoplePicker context={this.props.context as any} personSelectionLimit={1} showtooltip={true} showHiddenInUI={false} principalTypes={[PrincipalType.User]} ensureUser={true} disabled={true} defaultSelectedUsers={[this.props.context.pageContext.user.email as any]} /> <Label className={styles.lblForm}>Task Name</Label> <TextField {...this.getFieldProps(formik, 'name')} /> <Label className={styles.lblForm}>Project Name</Label> <Dropdown options={ [ { key: 'Project1', text: 'Project1' }, { key: 'Project2', text: 'Project2' }, { key: 'Project3', text: 'Project3' }, ] } {...this.getFieldProps(formik, 'projectName')} onChange={(event, option) => { formik.setFieldValue('projectName', option.key.toString()) }} /> <Label className={styles.lblForm}>Start Date</Label> <DatePicker className={controlClass.control} id="startDate" value={formik.values.startDate} textField={{ ...this.getFieldProps(formik, 'startDate') }} onSelectDate={(date) => formik.setFieldValue('startDate', date)} /> <Label className={styles.lblForm}>End Date</Label> <DatePicker className={controlClass.control} id="endDate" value={formik.values.endDate} textField={{ ...this.getFieldProps(formik, 'endDate') }} onSelectDate={(date) => formik.setFieldValue('endDate', date)} /> <Label className={styles.lblForm}>Task Details</Label> <TextField multiline rows={6} {...this.getFieldProps(formik, 'details')} /> </Stack> <PrimaryButton type="submit" text="Save" iconProps={this.saveIcon} className={styles.btnsForm} onClick={formik.handleSubmit as any} /> <PrimaryButton text="Cancel" iconProps={this.cancelIcon} className={styles.btnsForm} onClick={formik.handleReset} /> </div> ) } </Formik > ); } }

6. Move to the ReactFormik.module.scss file to add some relaetd CSS.

@import '~office-ui-fabric-react/dist/sass/References.scss'; .reactFormik{ .btnsForm { background-color: "[theme:themePrimary, default:#0078d7]"; border-color: "[theme: themePrimary, default: #0078d7]"; color: "[theme:white, default:white]" ; margin-left: 10px; margin-top: 10px; } .customErrorMeesage{ color: var(--red-color); font-size: 10px; font-family: 'Light'; padding: 2px; } .lblForm{ font-size: 15px; margin: 5px 0px 5px 0px; } }

Now serve the application using the below command,

gulp serve

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

Output

Find the full source code here.

Summary

In this article, we have seen how to implement react formik library in SPFx.

I hope this helps.

Sharing is caring!!

Microsoft Identity Platform community call – May 2021

Vesa Juvonen — Wed, 26 May 2021 13:49:58 GMT

Call Summary:

This month’s in-depth topic: Using Conditional Access Auth Context in your app for step-up authentication. Use the Azure AD Conditional access engine’s new Auth Context feature to trigger a demand for step-up authentication from within your application and services. Developers have often wondered if they were to only, selectively demand enhanced stronger authentication like MFA from their end users from within their applications. This capability helps developers build low friction user experiences for some parts of their application, while keeping access to more secure operations and data behind stronger authentication controls. Learn how to enable these scenarios in this session. Microsoft Program Manager presenters – Caleb Baker and Kalyan Krishna. This session was delivered and recorded on May 20, 2021. Live and in chat Q&A throughout call.

Resources:

Deck for this call
Tech Community - Granular Conditional Access for sensitive data and actions
Sample - Use the Conditional Access auth context to perform step-up authentication for high-privilege operations in a Web API
Documentation - Developers’ guide to Conditional Access authentication context
Documentation - MS Graph - authenticationContextClassReference resource type
Documentation - Claims challenges, claims requests, and client capabilities
Documentation - Microsoft identity platform documentation
Documentation - Microsoft Authentication Libraries (MSAL)
Documentation - Microsoft identity platform code samples
Documentation - Building Zero Trust ready apps with the Microsoft identity platform
Documentation - Introduction to Conditional Access
Documentation - Create a Conditional access Policy
Documentation - Continuous Access Evaluation

Actions:

Submit your feedback and topic suggestions - https://aka.ms/IDDevCommunityCallSurvey
Mark your calendar. The next Identity Platform Community Call is on June 17th

Stay connected:

Twitter https://twitter.com/microsoft365dev and @azuread
YouTube https://aka.ms/M365DevYouTube
Blog https://aka.ms/m365pnp/community/blog
Recurrent Invite https://aka.ms/IDDevCommunityCalendar

Microsoft 365 PnP Weekly - Episode 128

Vesa Juvonen — Tue, 25 May 2021 09:35:30 GMT

In this installment of the weekly discussion revolving around the latest news and topics on Microsoft 365, hosts – Vesa Juvonen (Microsoft) | @vesajuvonen, Waldek Mastykarz (Microsoft) | @waldekm are joined by US-based, Microsoft Senior Product Designer on the SharePoint Team, Katie Swanson (Microsoft) | @kswansondesign. Topics discussed in this session include: The art of the possible, the design process and baking in customer feedback, accessibility testing, evolution of and possible future updates to SharePoint look book, diversity and inclusion in the PnP community and in IT generally. Microsoft and the Community delivered 16 articles in the last week!

Please remember to keep on providing us feedback on how we can help on this journey. We always welcome feedback on making the community more inclusive and diverse.

This episode was recorded on Monday, May 24, 2021.

Video at Microsoft 365 Community YouTube channel.
Podcast format at https://pnpweekly.podbean.com.

These videos and podcasts are published each week and are intended to be roughly 45 - 60 minutes in length. Please do give us feedback on this video and podcast series and also do let us know if you have done something cool/useful so that we can cover that in the next weekly summary! The easiest way to let us know is to share your work on Twitter and add the hashtag #PnPWeekly. We are always on the lookout for refreshingly new content. “Sharing is caring!”

Here are all the links and people mentioned in this recording. Thanks, everyone for your contributions to the community!

Events:

May 25-27, 2021- Microsoft Build 2021
June 1-2, 2021 - European SharePoint Conference 2021 - Online
August 9-11, 2021 - North American Collaboration Summit
- Register with coupon code "PnP" for 25% off from the prize at https://nacs.ticketspice.com/nacs2021

Microsoft articles:

Rebrand apps to your own organization's branding with App customization in Teams - Vaibhav Agarwal (Microsoft)
Best practices for using global navigation in the SharePoint app bar - Melissa Torres (Microsoft) | @Meltorac
Publish your apps to the Microsoft Teams store - Microsoft
Announcing new file components, MSAL 2 Provider, and SharePoint Framework library in Microsoft Graph Toolkit - Microsoft

Community articles:

Microsoft 365 PnP Community Spotlight: Garry Trinder - Garry Trinder (CPS) | & Luise Freese | @LuiseFreese
Do you need ngrok to develop Microsoft Teams apps? - Bob German (Microsoft) | @Bob1German
HTWOO UI launched – Fluent Design in HTML and CSS - Stefan Bauer (N8D) | @StfBauer
Find Power Automate Flows that are connected to your site or list - Albert-Jan Schot (Portiva) | @appieschot
Power Apps Validation and JSON Parsing with Regex - April Dunnam (Microsoft) | @aprildunnam
Power Automate SharePoint Get Column Changes - April Dunnam (Microsoft) | @aprildunnam
Problems Restricting SharePoint People Column to a Specific Group - Cameron Dwyer (OnePlace Solutions) | @CameronDwyer
Preconsent multiple scopes with Microsoft Graph Toolkit - Waldek Mastykarz (Microsoft) | @waldekm
The right way to publish SharePoint Framework library packages - Waldek Mastykarz (Microsoft) | @waldekm
Episode #155 - Microsoft Graph Toolkit Agenda Component - Paolo Pialorsi (PiaSys) | @PaoloPia
Pro tips: What to do when you don’t feel heard at work - Sarah Haase | @sarahhaase, Antonio Maio | @AntonioMaio2 and Mike Maadarani | @mikemaadarani
Microsoft 365 Fiscal Year Retention - Joanne C Klein | @JoanneCKlein

Additional resources:

Power Platform Sample Gallery - for finding easily samples from the GitHub - contributions from the community are welcome!
PnP Sharing is Caring initiative - Getting started guidance and training for using GitHub and contributing to the community
Want to ask a question or in general engage with the community - Add a note in the Microsoft 365 PnP Community hub at https://aka.ms/m365pnp/community
Check out all the great community calls, SDKs, and tooling for Microsoft 365 from https://aka.ms/m365pnp

If you’d like to hear from a specific community member in an upcoming recording and/or have specific questions for Microsoft 365 engineering or visitors – please let us know. We will do our best to address your requests or questions.

"Sharing is caring!"

Microsoft 365 PnP Community Spotlight: Garry Trinder

Luise Freese — Sat, 22 May 2021 11:54:37 GMT

Which community project do you maintain?

CLI for Microsoft 365

How does it help people?

CLI for Microsoft 365 is a cross platform, command line interface that helps developers and administrators manage their Microsoft 365 tenants and SharePoint Framework projects, using any operating system and any command line shell.

What have you been working on lately?

I have recently been working on making the CLI more accessible to new users and new contributors to the project.

We recently released our public Docker images, Docker enables us to bundle a pre-configured version of CLI for Microsoft 365 together with all its required dependencies into a publicly downloadable image, which you can then use to create an isolated environment on your local machine, called a container, where you can use the CLI for Microsoft 365 without cluttering your machine with dependencies, and all performed by executing just a single command.

One of the difficulties of getting started with a new project is setting up the development environment, installing dependencies and hoping that you've followed all the instructions correctly. We know that this can be time consuming but also put off potential contributors to the project, so we've looked at ways in which we can make contributor onboarding as simple as possible, so we have provided a definition for creating an instant development environment that contains all the dependencies needed to contribute to CLI for Microsoft 365, whether that is making code changes or making an update to the documentation, we have you covered. We also automate the initial configuration steps for you when the development environment is being created, so we run npm install to install the necessary packages from npm, npm run build to build the CLI source and create a symbolic link by running npm link to ensure that when you execute m365 it uses the code in the src directory. You can use our development environment in the cloud using GitHub Codespaces or locally using Visual Studio Code Remote Development Containers.

What do you do at work?

At work I am a Solutions Architect and Development Team lead for CPS, a Microsoft Gold Partner. I work primarily with Microsoft 365 and Microsoft Azure, in recent years I have been mainly focused on integration and automation.

Why are you a part of the M365 community?

I believe that by sharing our own knowledge and experiences, we can improve the quality of the solutions created by the community. I have been privileged to have been part of the community for many years and I have directly benefited from others sharing their knowledge with me, it is this that drives me to contribute to the community so that others can benefit in the way that I have.

What was you first community contribution?

I submitted a pull request to add a new command to CLI for Microsoft 365 which enables users to delete a Microsoft Teams channel.

One tip for someone who’d like to start contributing

Don't be afraid to ask questions, the Microsoft 365 community is incredibly welcoming and everyone wants to help each other, there are no stupid questions.

Re: Improving the Page Properties web part

Karl-Gerd Schneider — Fri, 21 May 2021 14:49:27 GMT

Do you think it would be possible to integrate SharePoint Multiline Text Fields to your extented Page Property WebPart?

The Standard Page Property Webparts does not allow to display Multiline Text Columns...

SharePoint Framework Community Call – 20th of May, 2021

Vesa Juvonen — Fri, 21 May 2021 09:44:47 GMT

SharePoint Framework Special Interest Group (SIG) bi-weekly community call recording from May 20th is now available from the Microsoft 365 Community YouTube channel at http://aka.ms/m365pnp-videos. You can use SharePoint Framework for building solutions for Microsoft Teams and for SharePoint Online.

Call summary:

Preview the new Microsoft 365 Extensibility look book gallery co-developed by Microsoft Teams and Sharepoint engineering. Register now for May/June trainings on Sharing-is-caring. View the Microsoft Build sessions guide (Modern Work Digital Brochure) – Keynotes, breakouts, on-demand, roundtables and 1:1 consultations. PnPjs Client-Side Libraries v2.5.0 GA and CLI for Microsoft 365 v3.10.0 preview were released this month. Also latest updates on SPFx roadmap (v1.13.0 Preview in summer) and Viva Connections extensibility shared.

Four new/updated PnP SPFx web part samples delivered in last 2 weeks. Great work!

Latest project updates include: (Bold indicates update from previous report 2 weeks ago)

PnP Project	Current version	Release/Status
SharePoint Framework (SPFx)	v1.12.1	v1.13.0 Preview in summer
PnPjs Client-Side Libraries	v2.5.0	v3.0.0 developments underway
CLI for Microsoft 365	v3.9.0	v3.10.0 preview released
Reusable SPFx React Controls	v2.7.0, v3.1.0	v2.7.0 (SPFx v1.11), v3.1.0 (SPFx v1.12.1)
Reusable SPFx React Property Controls	v2.6.0, v3.1.0	v2.6.0 (SPFx v1.11), v3.1.0 (SPFx v1.12.1)
PnP SPFx Generator	v1.16.0	Angular 11 support
PnP Modern Search	v3.19 and v4.1.0	April and March 20th

The host of this call is Patrick Rodgers (Microsoft) @mediocrebowler. Q&A takes place in chat throughout the call.

Thanks everybody for being part of the Community and helping making things happen. You are absolutely awesome!

Actions:

Register for Sharing is Caring Events:
- First Time Contributor Session – May 24^th (EMEA, APAC & US friendly times available)
- Community Docs Session – May
- PnP – SPFx Developer Workstation Setup – June
- PnP SPFx Samples – Solving SPFx version differences using Node Version Manager – May 20^th
- AMA (Ask Me Anything) – Microsoft Graph & MGT – June 8^th
- AMA (Ask Me Anything) – Microsoft Teams Dev - June
- First Time Presenter – May 25^th
- More than Code with VSCode – May 27^th
- Maturity Model Practitioners – May 18^th
- PnP Office Hours – 1:1 session - Register
Download the recurrent invite for this call – https://aka.ms/spdev-spfx-call

Demos:

Using Microsoft Graph Toolkit to easily access files in Sites and in OneDrive – a.k.a. OneDrive finder - find and explore OneDrives, folders and files using Microsoft Graph Toolkit. Use Graph queries to get hostname, Sites on hostname, OneDrive item-id, and Sites Root item-id. Use 2 beta controls from MGT for search – Mgt-File-List and MGT-File. Refine search results by file extension, items on page, etc. Display style – light/dark mode. Recommendations on managing file list cache and permissions.
Building Microsoft Teams user bulk membership update tool with SPFx and Microsoft Graph – a.k.a. the Teams Membership Updater tool – a web part for Teams’ site owners that pulls member updates from a selected CSV file. Upon load, the web part calls Graph to pull the list of Teams you are a member/owner. Uses Graph batch functions to remove orphaned members and then to add new members. Uses SPFx Reusable controls and react-papaparse.
Building Microsoft Graph get client web part with latest Graph Client SDK – use Microsoft Graph Toolkit SharePoint provider to access and leverage new functionality of Graph JS SDK in SPFx. Web part sample developed using React Framework that showcases how to use the latest microsoft-graph-client in SPFx. The client enables throttling management (no 429s), Chaos management, uses latest types, getting RAW responses from API, Content-Type is already set for PUT, and a lot more!

SPFx extension samples: (https://aka.ms/spfx-extensions)

SPFx web part samples: (https://aka.ms/spfx-webparts)

List Items Menu (SP2019 Version) - João Mendes |
News Banner - João Mendes |
List Form - Ari Gunawan | AriGunawan
Calendar - Eli H. Schei | @acupof_dev

NEW Issue Templates!

Thank you for your great work. Samples are often showcased in Demos.

Agenda items:

Latest updates on SharePoint Framework - Vesa Juvonen (Microsoft) | @vesajuvonen – 5:38
PnPjs Client-Side Libraries - Julie Turner (Sympraxis Consulting) | @jfj1997 – 9:27
CLI for Microsoft 365 - Patrick Rodgers (Microsoft) | @mediocrebowler – 11:29
PnP SPFx Controls - Patrick Rodgers (Microsoft) | @mediocrebowler – 12:28
PnP Modern Search - Patrick Rodgers (Microsoft) | @mediocrebowler – 13:24
PnP SPFx Samples - Hugo Bernier (Tahoe Ninjas) | @bernierh – 14:30

Demos:

Demo: Using Microsoft Graph Toolkit to easily access files in Sites and in OneDrive – André Lage (Datalynx AG) | @aaclage – 18:27

Demo: Building Microsoft Teams user bulk membership update tool with SPFx and Microsoft Graph – Nick Brown (Cardiff University) | @techienickb – 34:06

Demo: Building Microsoft Graph get client web part with latest Graph Client SDK – Sébastien Levert (Microsoft) | @sebastienlevert – 47:30

Resources:

Additional resources around the covered topics and links from the slides.

The presentation used for this community call
Article - Navigate OneDrive data with Microsoft Graph and Mgt-File-List Beta version
Sample – OneDrive finder
Sample - Teams Membership Updater
Documentation - Combine multiple requests in one HTTP call using JSON batching
Article - Using the latest microsoft-graph-client in SPFx
Library - Microsoft Graph JavaScript Client Library
Sample - Graph MGT Client
Gallery - Microsoft 365 Extensibility look book gallery
PnP Weekly – Episode 127 with MVP guest Rick Van Rousselt (Advantive) | @RickVanRousselt | video | podcast
Microsoft Build sessions guide (Modern Work Digital Brochure) - aka.ms/modernworkbuildsessions

General Resources:

Viva Connections https://aka.ms/VivaConnections
SharePoint Framework - v1.12.1 npm install –g @microsoft/generator-sharepoint@next
CLI for Microsoft 365 v3
CodeTour
Sharing is Caring | aka.ms/sharing-is-caring
Tools - PnP Modern Search v4 | https://aka.ms/pnp-search
M365 PnP site | aka.ms/m365pnp
SharePoint Starter Kit v2
Blog: "A Lap Around Microsoft Graph Toolkit" blog series
New Microsoft 365 Patterns and Practices (PnP) team model with new community leads
Microsoft 365 Community Content (non-Dev docs)
PnP SPFx web part samples
PnP SPFx extension samples
GitHub PnPjs
Tutorials - Getting started with SharePoint Framework v1.10 Tutorials (12 videos)
Tutorials - Getting started with SharePoint Framework v1.10 Extensions (6 videos)
Docs - Tutorials and training material for SharePoint Development
SPFX Training Package
SPFx Web Parts
SPFx Extensions
SPFx Library Components
Documentation - PnPjs v2 documentation
Link - Microsoft 365 developer training
Link - Office 365 Developer Program
Latest documentation on SharePoint Framework
Found an issue with SharePoint Dev? - please let us know at http://aka.ms/spdev-issues
Reusable web part property controls
Reusable react controls for SharePoint Framework solutions
Reusable controls webcast
Office 365 CLI
PnP SPFx Yeoman Generator - Extends the out-of-the-box experience with open-source community capabilities
SharePoint Dev UserVoice - for new feature requests

Other mentioned topics:

Upcoming calls | Recurrent invites:

M365 General Dev call – May 27^th at 7:00 am PDT | https://aka.ms/m365-dev-sig
Microsoft Graph call – June 1^st at 8:00 am PDT | https://aka.ms/microsoftgraphcall
SharePoint Framework call – June 3^rdat 7:00 am PDT | https://aka.ms/spdev-spfx-call
SharePoint monthly call – June 8^th at 8:00am PDT | https://aka.ms/sp-call
Office add-in monthly call – June 9^th at 8:00 am PDT | https://aka.ms/officeaddinscall
Adaptive Cards monthly call – June 10^th at 9:00 am PDT | https://aka.ms/adaptivecardscommunitycall
Microsoft Teams monthly call – June 15^th at 8:00 am PDT | https://aka.ms/microsoftteamscommunitycall
Power Apps monthly call – June 16^th at 8:00 am PDT | https://aka.ms/PowerAppsMonthlyCall
Microsoft Identity Platform – June 17th at 9:00 am PDT |https://aka.ms/IDDevCommunityCalendar

PnP SharePoint Framework Special Interest Group bi-weekly calls are targeted at anyone who is interested in the JavaScript-based development towards Microsoft Teams, SharePoint Online, and also on-premises. SIG calls are used for the following objectives.

SharePoint Framework engineering update from Microsoft
Talk about PnP JavaScript Core libraries
Office 365 CLI Updates
SPFx reusable controls
PnP SPFx Yeoman generator
Share code samples and best practices
Possible engineering asks for the field - input, feedback, and suggestions
Cover any open questions on the client-side development
Demonstrate SharePoint Framework in practice in Microsoft Teams or SharePoint context
You can download a recurrent invite from https://aka.ms/spdev-spfx-call. Welcome and join the discussion!

“Sharing is caring”

Microsoft 365 PnP team, Microsoft - 21st of May 2021

Do you need ngrok to develop Microsoft Teams apps?

Bob German — Thu, 20 May 2021 17:41:50 GMT

If you've started down the path of developing applications for Microsoft Teams, you may have seen a tool called ngrok as a prerequisite in various tutorials and lab exercises. It's also integrated with a number of tools such as the Microsoft Teams Toolkit and the yo teams generator; even the Bot Framework Emulator has an ngrok option.

This article will explain what ngrok is, why it's useful, and what to do instead if you or your company are uncomfortable using it. Also, please check out the companion video for this article, which includes live demos of Teams development with and without ngrok.

Grokking ngrok

First the shocking truth: Microsoft Teams applications don't run in Teams. OK maybe it's not shocking, but it's true. Teams applications are made up of regular web pages and web services that you can host anywhere on the Internet. Teams tabs and task modules (dialog boxes) are just embedded web pages; bots and messaging extensions are web services. This allows developers to use their choice of web development stack, and to reuse code and skills.

Web developers typically host a small web server on the same computer where they edit their code to run and debug their applications. For Microsoft Teams developers in particular, ngrok is very handy in this situation. Here's why:

ngrok provides the encryption needed for https, which is required for Teams applications. It's set up using a trusted TLS certificate so it just works immediately in any web browser.
ngrok provides a tunnel from the Internet to your local computer which can accept incoming requests that are normally blocked by an Internet firewall. The requests in this case are HTTP POSTs that come from the Azure Bot Service. Though tunneling is not required per se, there has to be some way for the Azure Bot Service to send requests to the application.
ngrok provides name resolution with a DNS names ending in ngrok.io, so it's easy to find the public side of the Internet tunnel.
ngrok makes mobile device testing easier since any Internet-connected phone or tablet can reach your app via the tunnel. There's no need to mess with the the phone's network connections; it just works.

These conveniences have made ngrok the darling of many Microsoft Teams developers. It lets them compile, run, and debug software locally without worrying about any of these details.

The tunneling part, however, lacks the guard rails expected by many IT professionals, especially if they're managing a traditional corporate network that relies on a shared firewall or proxy server for security. While ngrok only provides access to the local computer where it's run, an insider "bad actor" could launch attacks from such a machine. For that reason, some IT departments block all access to ngrok.

Many colleagues have suggested other tunneling applications such as Azure Relay or localtunnel. While they may do the job, they still open a tunnel from the public Internet to your development computer, and thus the same security concerns usually arise. This article will only consider approaches that don't involve tunneling from the Internet.

Tunneling explained

Most computers that are connected to the Internet aren't connected directly. Network traffic passes through some kind of firewall or NAT router to reach the actual Internet. The firewall allows outgoing requests to servers on the Internet but blocks all incoming requests. This is largely a security measure, but it has other advantages as well.

A typical web developer runs some kind of web server on their local computer. They can access that web server using the hostname localhost, which routes messages through a "loopback" service instead of sending them out on the network. As you can see in the picture, these messages don't go through the Internet at all.

But what if, in order to test the application, it needs to get requests from the Internet? Bots are an example of this; the requests come from the Azure Bot service in the cloud, not from a local web browser or other client program. Another place this comes up is when implementing webhooks such as Microsoft Graph change notifications; the notifications are HTTP(s) requests that come from the Internet.

The problem is these incoming requests are normally blocked by the firewall. If you've ever opened a port on your home router to allow a gadget to receive incoming connections, this is the same situation.

With ngrok running, the incoming requests go through the ngrok service and into your locally running copy of the ngrok application. The ngrok application calls the local server, allowing the developer to run and debug the web server locally.

In the case of Teams development, tabs and task modules only require a local loopback connection, whereas bots and messaging extensions have to handle incoming requests from the Internet. Each is explained in more detail later in this article.

Using ngrok

ngrok is a command line program that works on Windows, Mac OS, Linux and FreeBSD.

Suppose your local web server is at http://localhost:3978 (the default for bots). Then run this ngrok command line:

ngrok http 3978

You will then see a screen like this:

The "Forwarding" lines show what's happening. Requests arriving at http://(something).ngrok.io or https://(something).ngrok.io will be forwarded to http://localhost:3978 where your bot code is running. At this point you would put the "something.ngrok.io" address into your Azure bot configuration, Teams app manifest etc. as the location, and leave the command running while you debug your application.

ngrok url

The external ngrok url will always look like this:

https://(something).ngrok.io

With the free ngrok service, the value of (something) is different every time you run ngrok, and you're limited to an 8-hour session. Every time you get a new hostname you need to update your configuration; depending on what you're doing and how many places you had to enter the hostname, this can be a chore. The paid plans allow you to reserve names that will persist, so you can just start ngrok and and you're ready to go.

Hint: If you're doing a tutorial using the free version of ngrok, make a note of every place you use the ngrok URL. That way you can easily remember where to update it when it changes.

The example above assumes that your local server is running http on the specified port. If your local server is running https you need a different command or it won't connect:

ngrok http https://localhost:3978

Host header rewriting

The HTTP(s) protocol includes a header called Host, which should contain the host (domain) name and port of the web server. This is used for routing requests to the right server, and for allowing a single web server to serve multiple web sites and services.

If your debug server ignores the host header, you can ignore this section. But some servers will require the header to match the host name, such as localhost:3978. The challenge is that if the request was sent to 12345.ngrok.io, the originator will probably put that in the host header when the server is expecting localhost:3978. To handle this, ngrok provides a command line argument that replaces the host headers with the local host name. Simply add the -host-header command switch to enable this.

For example,

ngrok http -host-header=localhost:3978 3978

If you see the messages go through to your local web server but it doesn't respond, it may be expecting a specific host header.

All the command options are detailed in the ngrok documentation.

Network tracing

You might notice that the ngrok screen shows a trace of requests that went through the tunnel; in this case they're HTTP POST requests from the Azure Bot Service, and the local server returned a 200 (OK) response. This is handy because you can see a 500 error from your server code by just glancing at the ngrok screen.

You might also notice the "Web interface" url on the ngrok screen. It provides a full network trace of what went through the tunnel, which can be very helpful in debugging.

Developing Tabs and Web-Page based Teams features

Some Teams application features are based on web pages provided by your application:

Tabs and Tab Configuration Pages
Task Modules (dialog boxes)
Connector Configuration Pages

These features are backed by ordinary web pages that are displayed in an IFrame within the Microsoft Teams user interface. Tabs using the Azure Active Directory Single Sign-On (SSO) option also need to implement a web service to do a token exchange. Accessing these via localhost is no problem; no tunnel is required.

However Teams does require the web server to use a trusted https connection or it won't display. ngrok translates trusted https requests into local http requests, so it just works. But if you'd rather not have a tunnel to the Internet as part of your setup, you can do this all locally. It's just more work.

Setting up a trusted https server

On a NodeJS server, you can usually enable https by editing the .env file and setting the HTTPS property to true. For .NET projects in Visual Studio, under project properties on the "Debug" tab, check the "Enable SSL" box to enable https.

But alas, just turning on the https protocol is generally not enough to satisfy this requirement; the connection must be trusted. Trust is established by a digital certificate; if the certificate comes from a trusted authority, is up-to-date, and matches the hostname in the URL, the little padlock in your web browser lights up and all is well. If not, you get errors that you can bypass in most web browsers, but not in Microsoft Teams.

The people over at ngrok acquired their certificate from a trusted authority, and it's set to match hostnames ending in ngrok.io, so it just works without any fuss. The local web server, on the other hand, will most likely have a self-signed, untrusted certificate. So the trick is to get your browser and/or Microsoft Teams to trust it.

An option that often works is to browse to the local server from a regular web browser, click the security error, and tell the browser to trust the certificate. You can then run Teams in the same browser and bypass the issue. If the Teams client shares the same certificate store as your browser, it will also work. However these default certificates generally expire after a month or so, and the process will need to be repeated.

A better option is to generate your own certificate and tell your computer to trust it. That way you can control the expiration date and reuse the certificate on multiple projects, so you only need to do the setup once. This is explained in the article, Setting up SSL for tabs in the Teams Toolkit for Visual Studio Code. The instructions are for a Create React App application using the Teams Toolkit but they shouldn't be too difficult to adapt to other tool chains since the certificate creation and trust parts are the same regardless.

Mobile device testing

It's prudent to test Teams applications using the mobile versions of Teams (iOS and Android) to make sure everything looks good and works properly. ngrok makes this a breeze; since your local service is exposed on the public Internet, you can test using any device with an Internet connection, no special setup required.

If you'd prefer not to expose your local server to the Internet, you can always connect your phone locally using wifi and leave the Internet out of it. This picture shows two phones; phone 1 is connected via ngrok and phone 2 is connected locally.

To set up local access you'll need a server name other than localhost, and you'll need to open a path on the local network from your phone to your local web server. Here are the high-level steps; the details vary depending on your phone OS, development computer OS, and network configuration.

Connect your mobile device via wifi to the same network as your development computer.
Open an incoming port on your development computer's built-in firewall (port 3000, 3978, 8080, or whatever your local web server is using).
Determine the local IP address of your development computer; ideally reserve it so it doesn't change. This can be accomplished in the DHCP section of most home routers or by using a fixed IP address.
Set up a hosts entry (phones have them too!) or local DNS name to point to your development computer. Again, many home routers have the ability to register a local DNS name so you don't have to configure it in each device.
Make sure the https certificate is for this same hostname and not just localhost, and install it as a trusted certificate on your phone.

While this might not seem easy, it is possible! And it's a one-time setup that you can use over and over. But you can see that ngrok makes it a whole lot easier.

Developing Bots and Messaging Extensions with and without ngrok

Several features of Teams applications are based on a web service within your application that is called from the cloud. These are:

Bots (called by Azure Bot Service)
Messaging Extensions (called by Azure Bot Service)
Microsoft Graph change notifications
Outgoing webhooks

All of these are implemented as REST services and could be built with any tool chain, but the requests will come from the cloud, so you need to have a port listening on the Internet to receive those requests.

For this reason there's currently no local debugging option in Microsoft Teams that doesn't involve opening a port on the Internet or using some sort of tunnel, ngrok or otherwise. The same is true for outgoing webhooks, which are outgoing from Teams to your app).

If ngrok isn't on your road map, don't worry, there are still options available!

Option 1. Use the Bot Framework Emulator

If you're building a bot, consider using the Bot Framework Emulator, which allows you to run bots locally without using the Azure Bot Service. Instead of running your bot in Teams, you run it in the emulator. The drawback is that the emulator doesn't currently understand some Teams-specific features such as messaging extensions or other Invoke activities. However it does a great job running conversational bots! Adaptive cards work as well, though Invoke card actions do not.

If your bot isn't too Teams-specific, consider using the Bot Framework Emulator for most debugging and just do final integration testing in Teams, perhaps when the bot deployed in a staging environment which is set up for handling incoming requests.

Option 2. Don't debug locally

Another approach is to move away from the strategy of local debugging entirely. For example, you could publish your app to Microsoft Azure app service and use the remote debugger. Here are the instructions for Visual Studio Code (NodeJS) and Visual Studio 2019 (.NET).

You could even set up a development virtual machine (VM) in Azure or your cloud service of choice and open an incoming port for the Azure Bot Service. Or just run ngrok in the VM, away from the concerns of a corporate network.

How many services do you have?

Teams applications generated by the yo teams generator have a single web server, so if your app has a combination of features - say, tabs and a bot - you can use one ngrok tunnel or one for all your application features.

Teams applications generated by the Microsoft Teams Toolkit generate multiple web servers (one for tabs, another for bots, and a third for the SSO web service if you use it). If you want to use ngrok, you'll need a tunnel for each one. This requires the paid service and you'll have to start up multiple copies each time you begin debugging. Another option is to use a single ngrok tunnel for your bot, potentially with the free service, and then use local connections for the tab and SSO web service.

Of course you don't have to use either of these tools; they're really just a convenience! You can use any tools you wish and create the Teams application package in App Studio or by editing your own manifest.json file and zipping it up with a couple icons.

Summary

While ngrok isn't a requirement for Teams development, it does make it a lot easier. However if you can't or don't want to open up a tunnel from the Internet, there are other strategies. Many of these, such as local https servers with self-signed certificates, have been around for a long time and may already be familiar.

There is nothing magic about Teams development! It was designed to use standard web tooling, and you can use the same tools that you'd use for any web development project. Trust your knowledge of web development to come up with a configuration that works for you. Just be aware of which services will be called from the Internet and plan accordingly.

References

Power Apps Community Call – May 2021

Todd Baginski — Sun, 23 May 2021 18:10:45 GMT

Call Summary:

Topics covered in this month’s community call include - Building multilingual Power Apps, Using Environment Variables in Canvas Apps, Using Environment Variables in Flows, Recent Power Apps News and Community Contributions and Latest on PnP Power Platform Samples Contributions. Demo Extravaganza 2021. Entries accepted now, Finalist voting starts – June 1^st, Finalist voting ends – June 30^th, Finals / Winner(s) to be Announced – July 21, 2021 at 08:00 PT. This session included Q&A in chat. The call was hosted by Todd Baginski (Canviz). Demo presenters included Haniel Croitoru (Protiviti), Charles Sterling (Microsoft), and Reza Dorrani (Catapult). This call was recorded on May 19, 2021. Thank for attending the call or viewing it on demand.

Demos:

Building multilingual Power Apps - a high-level architecture for multilingual forms supported by one or more SharePoint lists (containing language terminology) in back-end. Multiple apps/forms can pull from same lists. Leverages native SharePoint functionality – lookups to pull data. Picks up chosen language from computer Office 365 settings, so renders on all device platforms. Uses basic SharePoint and Office 365 connectors in Power apps. Easy to update, ensures consistency across apps.
Using Environment Variables in Canvas Apps - in this demo, Charles creates a new environment variable and a Power App to query Environment Variable values then demonstrates how environment variables may be used at runtime.
Using Environment Variables in Power Automate Flows - create Environment Variables (to connect to SharePoint sites/data) and add them to Power Apps Solutions. Within your Canvas Apps, Flows, and Bots, select to incorporate your Environment Variables. Environment variables simplify moves from Dev to Test to Prod environments by handling environment configuration updates to Flows, Bots, and Apps. See how Environment Variables are created, added to an App and a Flow.

Recent News & Cool Stuff:

Power Apps Demo Extravaganza 2021- aka.ms/PowerAppsDemoExtravaganza
Importing & Exporting Power Apps With Datasource Environment Variables -aka.ms/PAvariableswalkthrough
New Robotic Process Automation training - aka.ms/RPAinaDayPackage
Adoption Maturity Model: Repeatable patterns for successful Power Platform adoption - aka.ms/PACATAdoption

Actions:

Enter now for Demo Extravaganza 2021 | https://aka.ms/PowerAppsDemoExtravaganza
Spanish Bizz Summit – June 4 – 5, https://bizzsummit.es/ Contact: Eickhel Mendoza
Join us for our next call: June 16, 2021 at 08:00am PDT | https://aka.ms/powerappscommunitycall
Join us for our next call: May 19, 2021 at 08:00am PDT | https://aka.ms/powerappscommunitycall

Call Agenda:

Building multilingual Power Apps - Haniel Croitoru (Protiviti) | @HCroitoru – 3:04
Using Environment Variables in Canvas Apps - Charles Sterling (Microsoft) | @chass – 21:10
Using Environment Variables in Flows - Reza Dorrani (Catapult) | – 28:52
Recent Power Apps News and Community Contributions - Charles Sterling (Microsoft) | @chass – 46:28
Latest PnP Power Platform Samples – April Dunnam (Microsoft) | @aprildunnam – 49:05

Referenced in this session:

Learn more:

See the full blog post for this call on the Tech Community Blog - https://aka.ms/m365pnp/community/blog
Microsoft’s Power Platform website
Power Apps Responsive Design - https://bit.ly/responsivepowerapps
Power Apps Training Resources - https://aka.ms/PowerAppsTraining
Power Apps Community - https://Community.PowerApps.com
Power Apps Community Samples - https://aka.ms/PowerAppsCommunitySamples
Power Apps Community Videos - https://aka.ms/PowerAppsCommunityVideos
Power Addicts Hangout - https://wearepoweraddicts.com
#LessCodeMorePower Video Series - https://www.youtube.com/playlist?list=PL8IYfXypsj2Cr4DUqMKYkGM-Wejfim2QX
Share more - draw attention to your great work - #PowerAppsCC

Stay connected:

Twitter: https://twitter.com/MSPowerPlat
Twitter - https://twitter.com/microsoft365dev
YouTube - https://aka.ms/M365DevYouTube
Blogs - https://aka.ms/m365pnp/community/blog
Recurrent Invite - https://aka.ms/powerappscommunitycall

Microsoft Identity Platform community call - April 2021

ViewPorter — Thu, 20 May 2021 14:02:12 GMT

Call Summary:

This month’s in-depth topic: Get Change notifications delivered via Azure Event Hubs. Brief introduction to Graph change notification (webhooks) and Change notifications delivered via Azure Event hubs. Microsoft Program Manager presenters - George Juma and Kalyan Krishna. This session was delivered and recorded on April 15, 2021. Live and in chat Q&A throughout call.

In-depth topic:

Get Change notifications delivered via Azure Event Hubs

A new Microsoft Graph platform capability gives developers using change notification features in Microsoft Graph the option to get change notifications delivered to their applications more quickly and at scale using Azure Event hub. With Microsoft Graph, changes (in data in Microsoft Graph) are tracked with webhooks, a.k.a., change notifications. Presently you get change notifications via a API REST end-point exposed on the internet.

Azure Event Hub is a real-time events ingestion and distribution service built for scale. Ideal for high throughput (no dropped notifications due to timeouts), no public URL (security), no missed notifications if temporally off-line. Operationally, Microsoft Graph Change Tracking places notifications in Event Hub and your app retrieves messages from Event Hub rather than from publicly exposed end points on the internet. You need not poll for changes, change notifications are pushed to your app. You need only subscribe to notifications.

In the end-to-end demo, the presenter steps through app registration, provisioning of an Azure Event Hub, an Azure Storage and a container, add a Shared Access Policy, create an Azure Key Vault (secure connection strings), add subscription connection string and IDs of resources to the app.

Resources:

Actions:

Submit your feedback and topic suggestions - https://aka.ms/IDDevCommunityCallSurvey
Mark your calendar. The next Identity Platform Community Call is on May 20th

Stay connected:

Twitter https://twitter.com/microsoft365dev and @azuread
YouTube https://aka.ms/M365DevYouTube
Blogs https://aka.ms/M365DevBlog and https://aka.ms/m365pnp/community/blog
Recurrent Invite https://aka.ms/IDDevCommunityCalendar

Microsoft Graph community call – May 2021

BrianTJackett — Thu, 20 May 2021 14:03:15 GMT

This month's community call features presentations on Application Consent Deep Dive (demystifying permissions and consent when accessing Microsoft Graph) and on Considerations for Creating Online Meetings (Integration into Outlook or into other 3^rd party experiences). Q&A in this call after demos, at end and in chat. The call was hosted by Brian T. Jackett (Microsoft) | . Microsoft Presenters were Philippe Signoret and Fabian Williams. Recorded on May 4, 2021.

Topics:

App Consent Deep Dive - demystifying permissions and consent when accessing Microsoft Graph. Most Graph permissions allow access to lots of data. Learn how apps and services access Microsoft Graph resources - application permissions and delegated permissions, requesting permissions, granting permissions, and restricting data access scope. General concepts – direct access, access on behalf of user, app and user authorizations, permission types, service principals, consents and more.

Considerations for creating Online Meetings - Based on specific meeting requirements, create an Online Meeting through the Calendar Events API or through the Cloud Communications API (Teams). Step through 7 questions to ask yourself to decide when to use what method. The decision is largely based on the need for a rich integrated Microsoft client (Outlook/Teams) experience vs 3^rd party application integration including Microsoft chat integration.

Actions:

Interested in Presenting during this call? Contact Brian.Jackett@microsoft.com or Jeremy.Thake@microsoft.com
Register for Microsoft Build Digital Event - May 25 – 27, 2021. https://mybuild.microsoft.com/
Mark your calendar – next Microsoft Graph community call is on June 1 at 08:00am PDT - https://aka.ms/microsoftgraphcall

Resources:

From demos:

Documentation - Calendar API
Documentation - Cloud Communications API
Documentation - Choose an API in Microsoft Graph to create and join online meetings
Documentation - Microsoft Graph throttling guidance
Documentation - Exchange Online limits
Documentation - Cloud Communications service limits

From Q&A

Documentation – place resource type
Documentation - Get free/busy schedule of users and resources
Documentation - calendar: getSchedule
Documentation - user: findMeetingTimes

General Resources:

Suggestions – https://aka.ms/M365Dev-Suggestions
Graph TAP Program - https://aka.ms/GraphTAPForm
Microsoft 365 Developer Podcast http://www.m365devpodcast.com/
Microsoft Graph Mailbag - http://aka.ms/MSGraphMailbag
Microsoft Q & A – Graph - https://aka.ms/askgraph/
Learn Module - Get started with Microsoft Graph Toolkit | https://aka.ms/mgt-learn
Repo - Microsoft Graph Toolkit v2.1 | https://aka.ms/mgt
Documentation – Microsoft Graph Toolkit Overview | https://aka.ms/mgt-docs
Playground – Microsoft Graph Toolkit Playground | https://mgt.dev

Stay Connected:

See the full blog post for this call at - https://aka.ms/m365pnp/community/blog
Twitter - https://twitter.com/microsoft365dev @Microsoft365Dev
YouTube - https://aka.ms/M365DevYouTube
Blogs - https://aka.ms/m365pnp/community/blog
Recurrent Invite to this community call - https://aka.ms/microsoftgraphcall
All Microsoft 365 developer community calls – https://aka.ms/M365DevCalls

Re: Excel Scripts and Cloud Flows - Data Manipulation

MrAnalytics — Wed, 19 May 2021 23:24:43 GMT

Very useful! Power automate is extremely powerful. With Office Scripts, too, it makes it an invincible combination!!

Office Add-ins community call – May 2021

David Chesnut — Thu, 20 May 2021 09:16:05 GMT

Agenda:

May’s call, hosted by David Chesnut, featured the following presenters and topics:

Abid Rahman announced the GA of keyboard shortcuts and shared plans for the feature going forward. – 00:59
Sohail Zafar announced the GA of contextual tabs and updates about the feature and plans going forward. – 11:03
Special guest presenter Damien Bird (DamoBird365) demonstrated how to use Office Scripts with Power Automate to generate and fill in an invoice with data from SharePoint, and then save to a PDF. – 19:57
Juan Balmori shared Outlook updates on event-based activation and announced new preview events. – 35:09

Q&A (Question & Answers)

Unfortunately, we had some issues with the chat during the call. We apologize to folks who were not able to ask a question. If you have a question, you can reach out to us by using our short survey form. We’ll address any questions in the form during the next call.

Is it possible to see a demonstration of debugging Outlook add-ins in the Outlook application on mobile devices? Ideally for a local developer instance of an add-in server rather than one publicly accessible (since a hurdle is getting the mobile device to communicate successfully with lab instance of add-in server). We've encountered issues on Android with certificates running lab instances of add-ins so would like to see a demonstration of recommended approach to testing on mobile devices.

Thanks for this request! We're working to schedule this demo this on a future call.

When the Outlook REST API is decommissioned in November 2022, what API should add-ins deployed to customer hosted Exchange Servers (2016/2019) use for mobile support? Will the Outlook REST API remain active for Exchange Server and just be decommissioned for O365 accounts?

We're still working through details on this, and we plan to share more guidance in the future.

Is there any movement on supporting reading values, such as AppDomains and custom properties, from the add-in manifest at runtime through Office.js? The request has come up over the years on forums and been raised on UserVoice. We would prefer to write a key and value to the manifest, instead of passing values to URL endpoints, as this opens the door to people injecting their own values outside of the manifest to those endpoints.

This feature is not on our backlog. We migrated UserVoice requests that had over 100 votes to our new Microsoft 365 Developer Platform Ideas Forum. We'd ask that you Submit an Idea on this page and recreate your request. If there’s enough interest from the community we'll definitely consider it. Thanks!

What is the roadmap for Office.js for PowerPoint? When will it achieve feature parity with VSTO APIs?

VSTO is a huge API surface, which is why we approach building out the Office JS API based on prioritized scenarios. It’s tremendously helpful to understand the scenarios you are trying to unlock and what API’s you need. That helps us prioritize. Please let us know which scenarios you need enabled on our Ideas page and use the “Office Add-ins development” label. We’re planning to deliver increased API surface area for PowerPoint going forward.

In Excel on the web, when you close an Office Add-In, it creates a bar on the left side of Excel and puts an icon for the add-in on that bar, allowing the user to quickly show or hide add-ins from there. Will this be available in Excel on the desktop?

Thanks for this feature request! Can you let us know more about this on our ideas page and provide a screen shot to help us understand better?

Will you support Excel.Range.Interior characters and the ability to apply formatting at the character level?

Thanks for this request! We’re looking into supporting this. Can you please create a request for this on our ideas page?

Resources:

Keyboard shortcuts

Custom contextual tabs

Office Scripts demo by Damien Bird

Excel demo: https://damobird365.birdhoose.co.uk/exceldemo
DamoBird365 - YouTube

Outlook event-based activation

Office Add-ins community call

Recurring, monthly community call calendar invite
Community call topic requests and questions
Community call recordings on the YouTube Office Dev channel

Office Add-ins feedback

Technical questions – Microsoft Q&A (office-js-dev), (office-addins-dev)
Issues – GitHub
Recommendations and suggestions – Microsoft 365 Developer Platform ideas

The next Office Add-ins community call is on Wednesday, June 9, 2021 at 8:00AM PDT. Get the calendar invite at https://aka.ms/officeaddinscommunitycall.

Microsoft Teams Community Call - May 2021

Vesa Juvonen — Wed, 19 May 2021 07:52:01 GMT

Recording of the Microsoft Teams monthly community call from May 18, 2021.

Call Summary

Latest news from Microsoft engineering on Microsoft Teams updates and community assets.

Register for Microsoft Build. Sign up for May trainings on Sharing-is-caring. Visit the Microsoft Teams samples gallery to get started with Microsoft Teams development. See the new Microsoft 365 Extensibility look book gallery co-developed by Microsoft Teams and Sharepoint engineering. Get the Microsoft Teams Toolkit (Controls) – “Designing your Microsoft Teams app” with layout guidance and reusable assets. Three great demos delivered during this session. The host of this call was Vesa Juvonen (Microsoft) | @vesajuvonen. Q&A takes place in chat throughout the call.

Actions:

Register for Microsoft Build, May 25 – 27, 2021 - https://build.microsoft.com
Register for Sharing is Caring Events:
- First Time Contributor Session – May 24^th (EMEA, APAC & US friendly times available)
- Community Docs Session – May
- PnP – SPFx Developer Workstation Setup – June
- PnP SPFx Samples – Solving SPFx version differences using Node Version Manager – May 20^th
- AMA (Ask Me Anything) – Microsoft Graph & MGT – June 8
- AMA (Ask Me Anything) – Teams Dev – June
- First Time Presenter – May 25^th
- More than Code with VSCode – May 27^th
- PnP Office Hours – 1:1 session - Register
Download the recurrent invite for this call – https://aka.ms/microsoftteamscommunitycall
Call attention to your great work by using the #PnPWeekly on Twitter.

Microsoft Teams Development Samples: (https://aka.ms/teams-samples)

Your community is looking for Samples! Please share your good work

Always a highlight to see you here. Enjoy Microsoft Build. Looking forward to seeing you in person at an event one day.

Demos delivered in this session

Introduction to Microsoft Teams Developer Portal - Meet the new and improved app management console for developers. Access the tools portal from a browser and from within Microsoft Teams client. This is the place to add - register and configure your Teams apps. New safeguards to prevent apps from having same app IDs. Key areas differentiating portal from App Studio called out. Access App Source from portal.
Elevate user experiences with Universal Actions on Teams and Outlook - deck, demo and documentation about consistent message (action) handling across apps (Teams, Outlook and more) using Adaptive Cards with the new Action.Execute action type. User takes action on either Teams or Outlook and action is reflected on the other platform. Vacation approval scenario shows contextual views and sequential workflows on Teams. Excellent documentation, quick start guide and code samples.
Getting started on building Microsoft Teams meeting apps – step through meeting extensions - pre-meeting (tab – a poll), in-meeting (side panel tab, pop-up, extension, and bot) and post-meeting (tab). Understand needed manifest updates. Microsoft Forms is a great meeting extension. Demo - create a meeting, add the Forms app to it and observe how Forms does configuration. Meeting extensions are built on top of tabs, bots and messaging extensions.

Thank you for your work. Samples are often showcased in Demos.

Topics covered in this call

News and updates - Vesa Juvonen (Microsoft) | @vesajuvonen - 3:35
Demo: Introduction to Microsoft Teams Developer Portal – Karthig Balendran (Microsoft) | @KarthigBalendr1 - 10:20

Demo: Elevate user experiences with Universal Actions on Teams and Outlook – Shiladitya Saha (Microsoft) - 23:30

Demo: Getting started on building Microsoft Teams meeting apps – Rick van Rousselt (Advantive) | @RickVanRousselt - 36:54

Resources:

Additional resources around the covered topics and links from the slides.

Slides used in this community call
Site – Developer Portal for Microsoft Teams
Documentation - Universal Actions for Adaptive Cards
Quick Start Guide - Work with Universal Actions for Adaptive Cards
Blog - Rick's blog
PnP Weekly – Episode 127 with guest MVP Rick van Rousselt (Advantive) | @RickVanRousselt | video | podcast
Microsoft 365 Extensibility look book gallery | aka.ms/m365/extensibility
Controls - Designing your Microsoft Teams app | https://aka.ms/teams/ui/design
Microsoft Teams Samples Gallery | aka.ms/teams-samples

General resources:

Viva Connections https://aka.ms/VivaConnections
Microsoft Learn - Microsoft Teams development Learning Paths
Microsoft Teams Toolkit for Visual Studio Code
Microsoft Teams app templates
Yo Teams video training package
Microsoft 365 Developer videos | aka.ms/m365devyoutube
Microsoft 365 community (PnP) videos | aka.ms/m365pnp/videos
yo Teams | aka.ms/yoteams
Video - Getting started using yo Teams | Wictor Wilén (Avanade)| @wictor

Upcoming Calls | Recurrent Invites:

Power Apps monthly call – May 19^th at 8:00 am PDT | https://aka.ms/PowerAppsMonthlyCall
SharePoint Framework call – May 20^th at 7:00 am PDT | https://aka.ms/spdev-spfx-call
Microsoft Identity Platform – May 20^t^h at 9:00 am PDT | https://aka.ms/IDDevCommunityCalendar
M365 General Dev call – May 27^th at 7:00 am PDT | https://aka.ms/m365-dev-sig
Microsoft Graph call – June 1^st at 8:00 am PDT | https://aka.ms/microsoftgraphcall
SharePoint monthly call – June 8^th at 8:00am PDT | https://aka.ms/sp-call
Office add-in monthly call – June 9^th at 8:00 am PDT | https://aka.ms/officeaddinscall
Adaptive Cards monthly call – June 10^th at 9:00 am PDT | https://aka.ms/adaptivecardscommunitycall
Microsoft Teams monthly call – June 15^th at 8:00 am PDT | https://aka.ms/microsoftteamscommunitycall

Microsoft Teams monthly community calls are targeted at anyone who's interested in Microsoft Teams development topics. This includes Microsoft Teams, Bots, App templates, Samples, and more. Details on the Microsoft 365 community from http://aka.ms/m365pnp. We also welcome community demos, if you are interested in doing a live demo in these calls!

You can download recurrent invite from https://aka.ms/microsoftteamscommunitycall. Welcome and join in the discussion. If you have any questions, comments, or feedback, feel free to provide your input as comments to this post as well. More details on the Microsoft 365 community and options to get involved are available from http://aka.ms/m365pnp.

“Sharing is caring”

Microsoft 365 PnP team, Microsoft - 19th of May 2021

Microsoft 365 PnP Weekly - Episode 127 - Rick Van Rousselt

Vesa Juvonen — Tue, 18 May 2021 11:34:22 GMT

In this installment of the weekly discussion revolving around the latest news and topics on Microsoft 365, hosts – Vesa Juvonen (Microsoft) | @vesajuvonen, Waldek Mastykarz (Microsoft) | @waldekm are joined by Belgium-based, MVP, author, Microsoft Teams developer, and CTO with Advantive, Rick Van Rousselt | @RickVanRousselt. Topics discussed in this session can be summarized with one word. Change! The leap from Teams tab (iFrame) to Extension (Bot Framework) development, or transition from Skype to Teams, in the customer’s mind. Many customers are now circling back to Microsoft partners for guidance on optimizing Microsoft 365 and Microsoft Teams, yet interestingly at differing rates Worldwide. Clearly in part, adoption is cultural. As well, the partner business has changed from having a development to a consultative focus, from selling and executing long term to short term projects, and the staff from specialists to generalists. The pace of change is fast, challenging and rewarding. Case in point on the pace of change - Microsoft and the PnP Community delivered a box busting 29 articles in this last week! This session was recorded on Monday, May 17, 2021.

Please remember to keep on providing us feedback on how we can help on this journey. We always welcome feedback on making the community more inclusive and diverse.

This episode was recorded on Monday, May 17, 2021.

Video at Microsoft 365 Community YouTube channel.
Podcast format at https://pnpweekly.podbean.com.

Here are all the links and people mentioned in this recording. Thanks, everyone for your contributions to the community!

Events:

May 25-27, 2021- Microsoft Build 2021
June 1-2, 2021 - European SharePoint Conference 2021 - Online
August 9-11, 2021 - North American Collaboration Summit
- Register with coupon code "PnP" for 25% off from the prize at https://nacs.ticketspice.com/nacs2021

Microsoft articles:

Behind the scenes on Microsoft Viva with Microsoft Mechanics - Seth Patton (Microsoft) | @SethPat
Microsoft 365 admin center network connectivity is now generally available - Paul Andrew (Microsoft) | @pndrw
Customer Key support for Microsoft Teams now Generally Available! - Microsoft
Experience the magic of ESPC21 Online training – free and paid options - Mark Kashman (Microsoft) | @mkashman
“Viva Topics is the on-hovercraft of knowledge” :studio_microphone: – The Intrazone podcast - Mark Kashman (Microsoft) | @mkashman, Chris McNulty (Microsoft) | @cmcnulty2000 & CJ Tan (Microsoft)
Microsoft Graph .NET SDK v4 adds enhanced features – now in preview - Microsoft
New renewal offering for your app’s Publisher Attestation and Microsoft 365 Certification - Microsoft
Microsoft Graph Mailbag – Azure AD applications and users for testing - Brian T. Jackett (Microsoft) |
Five new features enhancing Adaptive Cards in Microsoft Teams - Ojasvi Choudhary (Microsoft) | @Ojasvi

Community articles:

Excel Scripts and Cloud Flows - Data Manipulation - Damien Bird (Aberdeen City Council) |
Microsoft 365 PnP Community Spotlight: Arjun Menon - Arjun Menon (Tata Consultancy Services) | @arjunumenon & Luise Freese | @LuiseFreese
React Groups and Teams Filters - Alison Collins
Getting Started with Azure Shell and PnP PowerShell with Certificates - Paul Bullock (Capa Creative) | @pkbullock
Setting up https for Teams Tabs projects - without ngrok - Bob German (Microsoft) | @Bob1German
Power Automate: skip the Parse JSON action to reference data - Django Lohn (InSpark) |
Community Sample: News Ticker app (SPFx Extensions) - Ari Gunawan (DevStack) | @AriGunawan
Resubmit your failed Power Automate flow runs automatically using M365 CLI and REST API - Mohamed Ashiq Faleel (Tata Consultancy Services) |
SPFx People Search web part, v2.5.0 - Yannick Reekmans (Qubix) | @yannickreekmans
Configure Teams Applications with Azure App Configuration (nodeJS) - Markus Möller (Avanade) | @Moeller2_0
SharePoint Online CSS Classes - Denis Molodtsov (Point Alliance) | @Zerg00s
Teams + Power Apps: Building context/theme aware apps - Michel Mendes (Storm Technology Ltd) |
Teams Activity Notifications using Azure Services - Aakash Bhardwaj (Microsoft) | @aakash_316
PnPjs 2.5 change log - Julie Turner (Sympraxis Consulting) | @jfj1997
spfx-fast-serve 3.0: it's all about simplicity - Sergei Sergeev (Mastaq) | @sergeev_srg
Find who deleted files in SharePoint Online using PowerShell PnP (from the recycle bin) - Veronique Lengelle (CPS) | @veronicageek
Episode #154 - Introducing the Microsoft Graph Toolkit - Paolo Pialorsi (PiaSys) | @PaoloPia
Power Automate SharePoint Get Column Changes - April Dunnam (Microsoft) | @aprildunnam
Flow Approval Dashboard in Power Apps for SharePoint - Reza Dorrani (Catapult Systems) |
Lesson 1: The attitude of a decision maker can impact the entire platform experience - Megan Strant (Strant Consulting) |

Additional resources:

Power Platform Sample Gallery - for finding easily samples from the GitHub - contributions from the community are welcome!
PnP Sharing is Caring initiative - Getting started guidance and training for using GitHub and contributing to the community
Want to ask a question or in general engage with the community - Add a note in the Microsoft 365 PnP Community hub at https://aka.ms/m365pnp/community
Check out all the great community calls, SDKs, and tooling for Microsoft 365 from https://aka.ms/m365pnp

"Sharing is caring!"

Excel Scripts and Cloud Flows - Data Manipulation

DamoBird365 — Mon, 17 May 2021 07:50:54 GMT

Have you discovered that the existing Power Automate actions for Excel are limited to Excel Tables? Are you looking to take your cloud flow interactions with Excel to the next level? Maybe it's time to start looking at Excel Scripts which are currently accessible to Power Automate as a Preview Feature.

What are Excel Scripts? Using either the built in recording tool or TypeScript programming language you can create a script to update cells, rows or ranges of data or indeed insert formulas into cells. You can even use Excel to perform some of the features missing to Power Automate like sorting an array.

I have prepared a two part video series demo'ing how you can use Power Automate and Excel Scripts to both send data to a plain excel file and populate cells, rows and ranges but also in return, again using Excel Scripts, how you can create a table in an Excel file and return the available data either as a results array for your next action in your Cloud Flow OR by using the list all rows action based on the newly created table.

First Video on Populating Excel from Cloud Flows is available here:

The below Cloud Flow is relatively straight forward for this first part demo. We have an array of Rows for our Excel Worksheet and this demonstrates one of many ways to pass data to Excel via the Script Action. The real benefit of creating a bespoke function in Excel Scripts is that the Script Action is dynamic. It will return the fields you have defined in the action window and ensure the datatype provided is correct, i.e. string or number.

In the sample Typescript Excel Script built below, you can try this for yourself. The script will populate unique cells, columns and rows with data based on the 4 variable types defined, examplevar1-4 as strings, numbers, multivariables and arrays.

Second video on retrieving data back from Excel files without a table. Identify the active cells, define and create a table via the script and return the data to your cloud flow as either a result to the script action or via the traditional list rows actions.

The Cloud flow on this occasion does not require any data input as its purpose is to return data back to the flow. Whilst the data could be fully repurposed in Excel, as a Power Automate enthusiast, I have used a select action to reformat the Array and rename the keys. Both the Select Action and the List Rows Action demonstrate the two methods for retrieving data from Excel where no table was present previously.

Again, in the sample Typescript Excel Script built below, you can quickly test out the functionality of creating a table and returning data to your cloud flow. The code is commented to help you understand how the solution is built. Please note I am not a coder but with the available resources online, I was quickly able to understand how to put this together. The recording tool is also useful for getting an understanding of some of the functions available.

Where do you find Excel Scripts Functionality? It's an Excel Online feature. Load up Excel and click on the Automate Tab. Here you can view all scripts, record some actions and edit new or existing scripts that have been built.

Wondering where they live? Jump onto OneDrive and take a look at Documents/Office Scripts where you can export/import and share.

Want to see a proof of concept ? Take a look at my Invoicing Demo here where I show you how you could autocompete an excel invoice template using scripts. I recently covered this in a live demo with the Monthly (12th May) Microsoft Office Scripts Dev Team and included a bonus feature, converting the excel files to PDF using the same flow without premium actions. Look out for this video on here soon.

Please let me know if you found this useful and what you might use Excel Scripts for next.

Microsoft 365 PnP Community Spotlight: Arjun Menon

Luise Freese — Sat, 15 May 2021 11:08:47 GMT

Which community project do you maintain?

CLI for Microsoft 365

How does it help people?

It is a cross platform tool which is used by Developers and IT Pros with which you can configure Microsoft 365, manage SharePoint Framework projects and build automation scripts.

What have you been working on lately?

Script for notifying the tenant status for IT Pros

What do you do at work?

I am a consultant for Microsoft 365 services. Apart from that I am also part of a team who primarily develops the Digital workplace Apps related to Microsoft Teams.

Why are you a part of the M365 community?

Because of the Awesome work the Microsoft 365 community is doing selflessly. More than that the inclusiveness which the community provides for all the contributors irrespective of who you are and where you are from. I have seen lot of my peers and colleagues who have got benefited from the work of the community and nothing is better than being part of the community owing to their awesome work across the Microsoft 365 areas.

What was you first community contribution?

First active contribution was back in July 2020 (17 July 2020 to be precise). From then on, there was no looking back for me.

One tip for someone who’d like to start contributing

Do not underestimate your contribution. You may think your contribution is so simple and it will not be beneficial to anyone (Let me confess, I also thought the same initially). With that you are underestimating the power of simplicity. It will be beneficial and may save a lot of time for someone who might be on the other side of the globe and can save his / her / theirs time. Be kind to people who contribute and support and be compassionate. Remember, people who are part of their community is doing this just out of sheer passion and ensure that you show gratitude and empathy.
Remember community is there to help you and to support. I got that during my initial days and I am sure any contributor also will get similar treatment which I have received during my starting days.

React Groups and Teams Filters

Alison_Collins — Sat, 15 May 2021 11:02:17 GMT

In this article I’ll go over both of the filters you can find in my React Groups and Teams Filters webpart. The webpart is useful for site managers, admins, and users to find their sites and it’s information. The first filter switches the All Groups in my Organization to My Groups and the second filters the visibility of the groups ( Public/Private/All )

In the screenshot below you can see the code for the buttons.

Visibility Filters

The first three buttons are the visibility filters. They filter the MyGroupResultsFiltered to be the button text you clicked. For example, if you click the ‘Public’ button MyGroupResultsFiltered will be filtered to include only groups with the visibility set as ‘Public’.

Let’s dive deeper into what’s happening. On click of, for instance, Private, the button calls the SwitchGroupList2 function (line 69) and passes through ‘Private’ as a parameter.

That parameter ‘Private’ is now called ‘Switch’ and next we check if that equals ‘All’.

If it does and you clicked the button titled ‘All’, we want to set the state of AllGroupsresults to the state holding all of the items. We do this because if I were to filter the AllGroupsresults to private and then switch to public and filter that, we’re just filtering a filtered list and you won’t get back any results. AllGroupsresults hold all of the results for Groups in my Organization and AllGroupsresultsFiltered is the filtered version of that list. In other words, when we get back the Groups ( both Groups in my Org and My Groups ) we make a copy of this list that we can filter however we would like and we can call on that list and filter it and assign it to the AllGroupsresultsFiltered value.

If the selected filter is anything other than ‘All’ we go ahead and create a constant that is assigned the filtered list. What this filter does is it maps through AllGroupsresults and checks if every group has the visibility that you selected, keeps the groups that has the visibility, and assigns the value to SwitchedALL. Same thing for MyGroupResults; It maps through MyGroupResults and filters the groups to be the ones that match the visibility you selected. Next, we set the state of AllGroupsresultsFiltered and MyGroupResultsFiltered to be SwitchedALL and SwitchedMY, respectively. In our case, we selected the button with the text ‘Private’ so AllGroupsresultsFiltered and MyGroupResultsFiltered will reflect this change and only show the groups with the visibility ‘Private’.

The last part is, after the if/else statement, we want to set the state ‘mode’ to be the selected filter. We’re doing this so that the button we clicked will have the ‘SelectedFilter’ styling. How we do this is by inputting a ternary operator in the code so that, depending on if the mode equals ‘Private’, we change the styling. If you selected the Private button the SwitchGroupList2 function will set the mode to be ‘Private’ and, consequently, rendering the button with the class ‘Selected Filter’.

Option Filter

On the bottom right of the heading before the groups you will either see a button titled ‘My Groups’ or ‘Groups In My Organization’.

This button allows you to toggle between either displaying groups you are a member of or groups in your organization. On click of this button you call the SwitchGroupList function. ( Not the SwitchGroupList2 function mentioned earlier )

In this function we check if the title in state is ‘Groups In My Organization’. The title is what is displayed, meaning that if the button text is ‘View My Groups’ the title is ‘Groups In My Organization’.

If the title is ‘Groups In My Organization’ we change it to be ‘My Groups’. The opposite also applies- if the title is ‘My Groups’ we go ahead and change it to be ‘Groups In My Organization’.

Why is this part of the code? For two reasons: the first is because we want to toggle the button text and header text between ‘Groups In My Organization’ and ‘My Groups’ and also so that we can display the right information.

In the render there is a ternary operator that checks if the current selected option is ‘My Groups’.

If this is true it maps through MyGroupResultsFiltered and displays the groups. If not, it renders All of the groups in your organization.

I hope you liked this article and it helped you out with your filters!

You can view the code here: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-groups-teams

Getting Started with Azure Shell and PnP PowerShell with Certificates

Paul Bullock — Fri, 14 May 2021 10:48:18 GMT

I recently encountered a scenario recently where I was looking to do a quick technical check on some advice I was giving to another member of the community regarding PowerShell – especially capturing the output of PnP PowerShell commands and store in a text file. When I responded to the tweet, I was away from my computer, but I did have my iPad (with keyboard) with me and wanted to see if I could use PnP PowerShell with Azure Shell – you may have guessed the result by – YES you can.

I was not using best security practice at the time to log in (username/password), which would not work if I had MFA on the account (which I should have ☹). I will include better practice configuration to include certificates and an Azure AD App in this article.

What you will need

So, let's get started; you will need a few things to get going,

Azure Subscription - this is necessary for a storage account that preserves your files between sessions and is mandatory for Azure cloud shell to work.
Azure Resource Group – the grouping of resources in Azure
Azure KeyVault - to store a certificate for a secure connection to M365 services.
PnP PowerShell - the newest PnP power shell module, this article uses v1.5.0
Permissions to consent an app as this uses an Azure AD app for the authentication.
Windows Machine – for creating the app and certificate.
If setting up services locally by PowerShell, then install the Az module.

Setting Up

There are a few tasks we are going to do to set up working with Azure Shell, Azure AD App and Certificates.

Activate Azure Shell

First, let's go ahead and activate the Azure Shell; we will use this to set up the required resources as well:

Navigate to https://shell.azure.com or click on the icon in the Azure Portal.

Then run through the first setup of the Azure Shell:

Welcome screen Azure Shell

Select PowerShell. Then run through the first setup of the Azure Shell:

Simple setup screen for storage

If you choose "Create storage" at this point, then this will set up the storage account and resource group for you, using Azure's naming standards and region. If you want to specify:

Subscription
Region
Resource Group
Storage account
File share name

Azure Shell Advanced Setup

Then select Advanced settings. I like to name resources myself in a standard manner. For this article, I am going to use the advanced options and specify:

Region: "North Europe"
Resource Group Name: "azure-cloud-shell"
Storage Account: “pkbtenantcloudshell”
File Share: "pkbtenantcloudshellfiles"

Note: the naming of some of these resources is very strict, e.g., 3 -24 characters, no spaces, lowercase.

Click "Create Storage"

Azure Shell - Setup Complete

Now the Azure Shell is ready to use.

Installing PnP-PowerShell

Next, we need to install the PnP PowerShell module in Azure Cloud shell, enter:

Install-Module -Name PnP.PowerShell

The great thing about Azure Cloud Shell is the installation is persistent between sessions, so you will only have to do this once. However, you will need to upgrade the module periodically.

Azure Shell - Install PnP PowerShell

For information on installing PnP-PowerShell, check out the documentation site for more details: https://pnp.github.io/powershell/

Create a KeyVault

Next, we want somewhere secure to store a certificate – Azure KeyVault.

A KeyVault is a secure method of storing keys, secrets and certificates. We intend to keep the certificate used for this setup in the vault. Another benefit of using this method, in larger organisations, where other teams manage apps or the security aspect of the tenant, they can set up this vault and retain control over the certificate and app creation.

You can, if you prefer, navigate to the Azure Portal and use the marketplace to create a new KeyVault resource; check out this quick start guide.

OR set this up in Azure Cloud Shell run the following commands:

Firstly, to check that the service is available in your preferred region, run the following:

New-AzKeyVault -VaultName 'pkbtenant-keyvault' -ResourceGroupName 'azure-cloud-shell' -Location 'North Europe'

Then, provision a new KeyVault (if you have one already, then skip this step) and give yourself access to Secrets and Certificates.

Set-AzKeyVaultAccessPolicy -VaultName 'pkbtenant-keyvault' -UserPrincipalName 'paul.bullock@tenant.co.uk' -PermissionsToCertificates All -PermissionsToSecrets All

Azure Shell - Create KeyVault

Please refer to the documentation if you want to be more specific around the KeyVault – Azure Portal | PowerShell.

We will be importing a certificate in a later section.

Create Azure AD App with Register-PnPAzureApp

There are a few options when setting up the authentication to connect with PnP PowerShell:

Azure AD App – using your app (recommended), which will use the APPLICATION permissions, meaning the connection will use the permissions the app does.
PnP Management Shell – the multi-tenant app PnP provides – this uses DELEGATE permissions meaning the connection will need to log in as the user and will only have access to services THE user has access to.

If you need clarification on the difference between the types of permissions, I highly recommend checking out an awesome community call demo from Philippe Signoret, Program Manager of the Microsoft Identity team: https://youtu.be/_BfI4L7j1Po

So why are use an Azure AD app? Using the Azure Shell restricts some authentication options when connecting to services with PnP PowerShell, such as interactive login, because it cannot display a pop-up window.

Azure Shell - doesn't support interactive login

The "-PnPManagementShell" parameter is an option; this uses the device login method BUT will require you to navigate to another site/page to authenticate, including going back to grab the code – then enter your login credentials further steps if MFA is enabled. IMHO feels a bit cumbersome to do this each time I want to do a task in the Shell, especially on an iPad/phone.

Create an Azure AD App

To set up the app quickly with PnP PowerShell, you need to use a Windows machine to run the cmdlet "Register-PnPAzureApp" which generates the certificate, creates the Azure AD app, sets API permissions, will pop up to consent to the app permissions.

Note: you may have to install the PnP PowerShell locally if you do not already have it.

To set up the app, run the following command using the PnP PowerShell cmdlet:

$result = Register-PnPAzureADApp -ApplicationName "PnP PowerShell Azure Shell Access" -Tenant yourtenant.co.uk -OutPath .\ -DeviceLogin -ValidYears 2 -CertificatePassword (ConvertTo-SecureString -String "yourpassword" -AsPlainText -Force) $result #output the result – Specifically grab the AzureAppId/ClientId – you will need this later

PowerShell - Registering Azure App

During this operation, two windows will pop-up to authenticate with the device login method and consent to the app permissions.

If you want to check the app in Azure AD, navigate to: https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps and find the app called "PnP PowerShell Azure Shell Access"

Note: This app uses the minimum API permissions (APPLICATION) as the default; if you want to perform operations with groups or flow as an example, you will need to add these permissions to the app.

Azure App - API permissions

For more details on generating the app, check out the authentication section of the documentation.

Adding Certificate to KeyVault

Now that we have the app setup, we need to upload the certificate to the KeyVault.

Navigate to the KeyVault in the portal

Azure KeyVault - Navigating to Certificates

Select "Import"
Enter a name "azureshell-pnpps-connection"
Select the generated certificate "PnP PowerShell Azure Shell Access.pfx"
Enter the certificate password

Click Create

Azure Key Vault - Upload Certificate

This is ready to use in a later section.

Reducing the time to get going on new sessions

When I start the Azure Shell, I want to minimize the number of lines, to connect to the services securely and get going quickly.

Parameter Splatting

Parameter splatting is a method to pass a collection of parameters for a PowerShell command into a variable and apply this to the cmdlet you intend to run. Example:

Get-NiceMessage -Param1 "good" -Param2 "morning" -Param3 "community" # Splatting alternative $MyParams = @{ Param1 = "good", Param2 = "morning", Param3 = "community" } Get-NiceMessage @MyParams

This will save time if you repeatedly apply the same parameters on the cmdlets, reducing the time to write the command and your scripts cleaner to read. To read more about this PowerShell feature, check out the documentation.

PowerShell Profiles

Interestingly, I did not know about this feature until the MOTD message appeared on the Azure Shell. I wanted to understand this further so dug deeper and I have managed to find a way to create a startup script that will make it easier to connect to Office 365.

With profiles, we can setup a script to run when the Azure Shell is started, so this is an awesome opportunity to add all of the connection information when the Shell starts including retrieval, of the certificates from the KeyVault.

To create a profile that is used across sessions but for your user account use:

# Create Profile mkdir (Split-Path $profile.CurrentUserAllHosts) New-Item -ItemType File -Path $PROFILE.CurrentUserAllHosts -Force

Azure Shell - Setup Profiles

Once created, you can open an editor in the path above to the new profile script location.

Then using the following example, using a combination of parameter splatting and profiles, you can setup everything you need to connect to the service:

# Connect to KeyVault Data try{ $vaultName = "pkbtenant-keyvault" # Replace with your KeyVault name $appName = "PnP PowerShell Azure Shell Access" $appId = (Get-AzADApplication -DisplayName $appName).ApplicationId $tenantId = (Get-AzContext).Tenant.Id $certName = "azureshell-pnpps-connection" $baseSite = "https://tenant.sharepoint.com" # Replace with your tenant $base64Cert = Get-AzKeyVaultSecret -VaultName $vaultName -Name $certName -AsPlainText # Use of parameter splatting $ConnectInfo = @{ ClientId = $appId CertificateBase64Encoded = $base64Cert Tenant = $tenantId } Write-Host "Ready to connect to M365/SharePoint" -ForegroundColor Green }catch{ Write-Host "Failed to get the KeyVault data" -ForegroundColor Yellow }

Editor – Ctrl-S (Save) then Ctrl-Q (Quit)

Restart Shell

After setting up the profile, reboot your Shell and you should see a prompt to indicate the prerequisites are ready to use for a connection (green text).

To learn more about profiles check out the documentation for profiles.

Connecting to the service

Once you have all these elements setup, you can connect with PnP PowerShell with one short line:

Connect-PnPOnline @ConnectInfo https://tenant.sharepoint.com # -OR- Connect-PnPOnline @ConnectInfo $baseSite

Azure Shell - connecting with PnP PowerShell

The settings are persistent across sessions/devices (like an Azure app on iPad), so once setup, you can open Azure Shell and reconnect to the service and make the changes in the Shell quickly.

Btw, at the beginning I mentioned about capturing the output to the text file, this is particularly useful if you are grabbing a lot of info in your session or need to show the changes you made, here is how to do it:

Start-Transcript "log.txt" Get-PnPWeb Stop-Transcript

This will save the file to the current location in the Azure Shell. Use Export-File to download it, or the UI button.

Enjoy!

Microsoft 365 Developer Community Call recording – 13th of May, 2021

Vesa Juvonen — Fri, 14 May 2021 15:36:35 GMT

Recording of the Microsoft 365 – General M365 development Special Interest Group (SIG) community call from May 13, 2021.

Call Summary

Check out the new Microsoft 365 Extensibility look book gallery, visit the Microsoft Teams samples gallery to get started with Microsoft Teams development, and register now for May trainings on Sharing-is-caring. Open-source project activity is focused on prepping for May releases in Microsoft Build time frame.

Open-source project status:

Project	Current Version	Release/Status
PnP .NET Libraries - PnP Framework	v1.4.0	Bug fixes, Prepping for v1.5.0 (May)
PnP .NET Libraries - PnP Core SDK	v1.1.0	Bug fixes, Prepping for v1.2.0 (May)
PnP PowerShell	v1.5.0 (just added Cmdlets for Viva Connections and Syntex)	Prepping for v1.6.0 (May)
Yo teams - generator-teams	v3.0.3 GA, v3.1.0 Preview	Preview with Viva Connections support
Yo teams - yoteams-build-core	v1.1.0
Yo teams - msteams-react-base-component	v3.1.0
Microsoft Graph Toolkit (MGT)	v2.1.0 GA, v2.2.0 Preview	v2.2.0 planned Build release

Additionally, one new Teams sample delivered. The host of this call was David Warner II (Catapult Systems) | @DavidWarnerII. Q&A takes place in chat throughout the call.

Actions:

Register for Sharing is Caring Events:
- First Time Contributor Session – May 24^th (EMEA, APAC & US friendly times available)
- Community Docs Session – May
- PnP – SPFx Developer Workstation Setup – June
- PnP SPFx Samples – Solving SPFx version differences using Node Version Manager – May 20^th
- AMA (Ask Me Anything) – Microsoft Graph & MGT – June
- AMA (Ask Me Anything) – Microsoft Teams Dev - June
- First Time Presenter – May 25^th
- More than Code with VSCode – May 27^th
- Maturity Model Practitioners – May 18^th
- PnP Office Hours – 1:1 session - Register
Download the recurrent invite for this call – http://aka.ms/m365-dev-sig
Call attention to your great work by using the #PnPWeekly on Twitter.

Microsoft Teams Development Samples: (https://aka.ms/TeamsSampleBrowser)

Kudos App (Teams Activity Feed API) - Sébastien Levert (Microsoft) |

Great to see all the faces in the community. Hopefully soon we will get to see each other in person.

Demos delivered in this session

Inspire, inform and prepare employees transition to the new hybrid Workplace transformation site - learn about the customizable SharePoint Hybrid Workplace site template (in look book) and new end user training (available on support.microsoft.com and in Microsoft 365 Learning Pathways playlists) to help customers and colleagues’ transition to a new way of working. Article insights based on customer conversations and research by Microsoft. Training categories (playlists) – meetings & collaboration, wellness and productivity, security & data protection.
Querying and Paging data with PnP Core SDK – after downloading the PnPCoreAuth package, installing and configuring the needed services, obtain the PnPContext from PnPContextFactory and start using the library. There are multiple options for querying data. PnP Core SDK Query Model options – Load*, Get*, LINQ, and Nested/hierarchical queries. PnP Core SDK Paging Model options - Implicit asynchronous paging*, Full load of data/synchronous implicit paging, and Manual paging with Take/Skip. *Preferred.
Advanced tricks for form formatting and customization – some items in a list should not show up on a form. You can delete, hide or conditionally show values (based on entries in other fields) on a form. Column and Form formatting are vastly different. Learn ways to detect what values are in the list vs what values are on the form and also how to create read only sections on a form.

Thank you for your work. Samples are often showcased in Demos.

Topics covered in this call

PnP .NET library updates - Paolo Pialorsi (PiaSys.com) @paolopia - 4:45
PnP PowerShell updates - Paolo Pialorsi (PiaSys.com) @paolopia - 6:35
yo Teams updates - Paolo Pialorsi (PiaSys.com) @paolopia - 7:24
Microsoft Graph Toolkit updates - Beth Pan (Microsoft) | @beth_panx - 8:34
Microsoft Teams Samples - Bob German (Microsoft) @Bob1German - 9:46
Demo: Inspire, inform and prepare employees transition to the new hybrid Workplace transformation site – Holland Kaviani (Microsoft) & Matt Wolodarsky (Microsoft) | @mwolodarsky - 12:34
Demo: Querying and Paging data with PnP Core SDK – Paolo Pialorsi (PiaSys) | @PaoloPia - 25:21
Demo: Advanced tricks for form formatting and customization – Chris Kent (DMI) | @theChrisKent - 43:22

Resources:

Additional resources around the covered topics and links from the slides.

Slides used in this community call
Blog post - Help employees transition to hybrid work using a new SharePoint site template and end-user training
Look book (website template) - WORKPLACE TRANSFORMATION SITE
Article - The future of work—the good, the challenging & the unknown
Support site – Hybrid workplace guides
Documentation - PnP Core SDK – Get Data
Documentation - PnP Core SDK – Using paging
SDK - PnP Core SDK
Code sample - PnP Core SDK Query Model sample
PnP Weekly – Episode 126 with MVP guest D'arce Hess (TrnDigital) | @ DarceHess| video | podcast
Microsoft 365 Extensibility look book gallery | aka.ms/m365/extensibility
Microsoft Teams Samples Gallery | aka.ms/teams-samples

General resources:

Microsoft 365 PnP Community hub | aka.ms/m365pnp/community
Microsoft Graph Toolkit in Microsoft Learn | http://aka.ms/learn-mgt
Viva Connections https://aka.ms/VivaConnections
SharePoint look book
Yo Teams video training package
.NET Standard 2.0 version of SharePoint Online CSOM API
Microsoft 365 community (PnP) videos | aka.ms/m365pnp-videos
Microsoft Teams Toolkit for Visual Studio Code
yo Teams | aka.ms/yoteams
Video - Getting started using yo Teams | Wictor Wilén (Avanade)| @wictor
Build a crisis management site to connect people and information
Developer documentation | https://aka.ms/spdev-docs
PnP Power Shell
SharePoint Modernization Partner Guidance - Feedback welcome
Solution - Building a modern search experiences with SharePoint Framework web parts
Page transformation guidance
Page transformation videos
Modernization scanner
Microsoft 365 developer program site - Need to become a Tenant Admin to test look book capabilities? Get a Microsoft 365 E5 developer subscription (free tenant for 90 days)
SharePoint Provisioning Service - Easily provision look book designs to any tenant in the world
SharePoint Provisioning templates on Github
PnP Provisioning Tenant Templates documentation
SharePoint Page Transformation webcast series
PnP Power Shell
SharePoint Modernization Tools

Upcoming Calls | Recurrent Invites:

Microsoft Teams monthly call – May 18^th at 8:00 am PDT | https://aka.ms/microsoftteamscommunitycall
Power Apps monthly call – May 19^th at 8:00 am PDT | https://aka.ms/PowerAppsMonthlyCall
SharePoint Framework call – May 20^th at 7:00 am PDT | https://aka.ms/spdev-spfx-call
Microsoft Identity Platform – May 20^th at 9:00 am PDT | https://aka.ms/IDDevCommunityCalendar
M365 General Dev call – May 27^th at 7:00 am PDT | https://aka.ms/m365-dev-sig
Microsoft Graph call – June 1^st at 8:00 am PDT | https://aka.ms/microsoftgraphcall
SharePoint monthly call – June 8^th at 8:00am PDT | https://aka.ms/sp-call
Office add-in monthly call – June 9^th at 8:00 am PDT | https://aka.ms/officeaddinscall
Adaptive Cards monthly call – June 10^th at 9:00 am PDT | https://aka.ms/adaptivecardscommunitycall

“Sharing is caring”

Microsoft 365 PnP team, Microsoft - 14th of May 2021

Setting up https for Teams Tabs projects - without ngrok

Bob German — Thu, 13 May 2021 14:58:24 GMT

I’ve started using the new Microsoft Teams toolkit, which is a Visual Studio Code extension and generator for Teams applications. One thing I noticed is a little challenge when creating tabs, and that’s due to the requirement to use SSL. The documentation is fine and explains how to trust your local project, but I found it a little painful since the certificates only last 1 month and there’s a different one for each project, so I need repeat the process frequently. Your teammates will need to do that as well.

Here is an alternative approach in which you create your own certificate authority and build certs from that so you can install just one root certificate across all your projects! Each teammate can have their own certs, so you can collaborate as much as you wish and nobody has to go installing certs.

NOTE: Did you know that the Teams Toolkit uses Create React App (CRA) for tabs? Create React App is a toolchain from Facebook (who created React in the first place) it’s very popular and well supported! If you need help, search on “Create React App” and you can find a plethora of helpful articles; this one helped me figure this out!

Step 1: Create and trust a certificate authority (CA)

This step only needs to be done once for as many projects as you wish. It assumes you already have Node.js installed, as required by the Teams Toolkit.

a. Create a safe/private folder somewhere and go there in your favorite command-line tool, and run these commands:

npm install -g mkcert
mkcert create-ca --organization "MyOrg" --validity 3650
mkcert create-cert --ca-key "ca.key" --ca-cert "ca.crt" --validity 3650

NOTE: 3650 is the number of days your certs will be valid; feel free to change it. You can use --help on mkcert to reveal other options, such as setting an organization name and location (the default org is “Test CA”) and customizing the domain names for your certificate (the default is “localhost,127.0.0.1”).

This will create a new Certificate Authority and a certificate that was issued from it. You should see 4 files:

FILE	DESCRIPTION
ca.crt	Certificate for your new CA
ca.key	Private key for your new CA
cert.crt	Certificate for use in projects
cert.key	Private key for use in projects

b. Now you need to trust the certificate for your new CA; by doing that any cert you create will be trusted with no additional action on your part.

On Windows

Double click on the ca.crt file and click “Install Certificate”.
Choose Local Machine and click next.
Select “Place all certificates in the following store” and then click the “Browse” button. Choose “Trusted Root Certification Authorities” click “OK” to close the dialog box, and then click “Next”.
Restart all instances of your browser to force it to re-read its trusted roots. If in doubt, reboot your computer.

On Mac

Double click on the ca.crt file, which should be found under /Users/[your-name]/. It will launch Keychain Access app.
Enter your password or use Touch ID when prompted.
The new certificate (in this case, “MyOrg”) should be added. Double-click it.
In a new window, expand the Trust section of the certificate details. Select “Always Trust” for every option.
Close the window. Enter your password or use Touch ID again if you are asked. Now the certificate is trusted.
Restart all instances of your browser to force it to re-read its trusted roots. If in doubt, reboot your computer.

On Linux

There are more steps on Linux as most browsers don’t use the operating system’s certificate store, and a tool called certutil is needed to modify the browsers’ cert?.db files. This article explains how to install your new root certificate on Linux.

Step 2 – Add the certs to your project

This is what you need to do for each project.

a. Create a new folder in your project folder (the same level as the package.json file) called .cert. Copy the cert.crt and cert.key files into this folder.

b. Modify your .env file to tell the local web server to use your cert:

HTTPS=true

SSL_CRT_FILE=./.cert/cert.crt

SSL_KEY_FILE=./.cert/cert.key

c. Prevent saving the certs to your git repository by adding a line to the .gitignore file.

.cert

Azure Active Directory SSO Tabs

Tabs that implement Azure Active Directory Single Sign-On need to implement more than just a web page; they need to implement a web service to exchange the SSO token for an access token that the app can use to call downstream services such as the Microsoft Graph. This is explained in this blog article, or this one, more clearly than in the documentation.

When yo teams generates an SSO tab, this web service is hosted using the same web server as the page itself.

When the Teams Toolkit generates one, however, it creates a separate web service for the web service so there really are two endpoints that need to be SSL enabled. The web service is in a folder called api-server. To enable SSL here, follow these steps:

Add these lines to the api-server\.env file.

HTTPS=true SSL_CRT_FILE=../.cert/cert.crt SSL_KEY_FILE=../.cert/cert.key CORS_ORIGIN=https://devappsforteams.local:3000

2. Immediately above the line app.get('/getGraphAccessToken') in server.ts or server.js, add these lines to allow the cross-origin call from the web page (port 3000) to the web service (port 5000):

const cors = require('cors'); app.use(cors({ origin: process.env.CORS_ORIGIN }));

3. Near the bottom of the same file, replace the line

app.listen(port);

with this code:

const fs = require('fs'); const https = require('https'); var privateKey = fs.readFileSync(process.env.SSL_KEY_FILE ); var certificate = fs.readFileSync(process.env.SSL_CRT_FILE); https.createServer({ key: privateKey, cert: certificate }, app).listen(port);

Working in a team

Each team member needs to do Step 1 on their computer just once. When a developer starts working on a project they can simply copy their .cert folder into their project and go to work.

Many thanks to my colleague Tomomi Imura for documenting the Mac instructions and providing screen shots.

Do you have ideas on how to do this better, especially in a project team? Please chime in using the comments; thanks!

SharePoint community call - May 11th, 2021

Vesa Juvonen — Wed, 12 May 2021 06:59:20 GMT

The SharePoint community monthly call is our general monthly review of the latest SharePoint news (news, tools, extensions, features, capabilities, content and training), engineering priorities and community recognition for Developers, IT Pros and Makers. This monthly community call happens on the second Tuesday of each month. You can download recurrent invite from https://aka.ms/sp-call.

Call Summary:

SPFx v1.12.1 with Node v14 and Gulp4 support is generally available. Don’t miss the SharePoint sample gallery. Preview the new Microsoft 365 Extensibility look book gallery. Visit the new Microsoft 365 PnP Community hub at Microsoft Tech Communities! Sign up and attend one of a growing list of Sharing is Caring events. The Microsoft 365 Update - Community (PnP) | May 2021 is now available. In this call, quickly addressed developer and non-developer entries in UserVoice. We are in the process of moving from UserVoice to a 1^st party solution for customer feedback/ feature requests.

A huge thank you to the record number of contributors and organizations actively participating in this PnP Community during April. Month over month, you continue to amaze. The host of this call was Vesa Juvonen (Microsoft) @vesajuvonen. Q&A took place in the chat throughout the call.

Featured Topic:

SharePoint Syntex: Product overview and latest feature updates – SharePoint Syntex - a new add on that builds on the content services capabilities already provided in SharePoint with an infusion of AI to automate and augment the classification of content – understanding, processing, compliance. Demos on building and publishing a document understanding model using UI and on downloading a sample model, publishing and processing content using PowerShell Commandlets or APIs.

Actions:

Register for Sharing is Caring Events:
- First Time Contributor Session – May 24^th (EMEA, APAC & US friendly times available)
- Community Docs Session – May
- PnP – SPFx Developer Workstation Setup – May 13^th
- PnP SPFx Samples – Solving SPFx version differences using Node Version Manager – May 20^th
- AMA (Ask Me Anything) – Microsoft Graph & MGT - June
- First Time Presenter – May 25^th
- More than Code with VSCode – May 27^th
- Maturity Model Practitioners – May 18^th
- PnP Office Hours – 1:1 session - Register
Download the recurrent invite for this call – https://aka.ms/sp-call.

You can check the latest updates in the monthly summary and at aka.ms/spdev-blog.

This call was delivered on Tuesday, May 11, 2021. The call agenda is reflected below with direct links to specific sections. You can jump directly to a specific topic by clicking on the topic's timestamp which will redirect your browser to that topic in the recording published on the Microsoft 365 Community YouTube Channel.

Call Agenda:

UserVoice status for non-dev focused SharePoint entries – 8:04
UserVoice status for dev focused SharePoint Framework entries – 9:04
SharePoint community update with latest news and roadmap – 10:35
Community contributors and companies which have been involved in the past month – 11:56
Topic: SharePoint Syntex: Product overview and latest feature updates - Sean Squires (Microsoft) | @iamseansquires – 15:28
- Demo: How to build and publish a document understanding model - James Eccles (Microsoft) | @jimdeccles – 24:52
- Demo: SharePoint Syntex integration and automation options - Bert Jansen (Microsoft) | @o365bert – 39:36

The full recording of this session is available from Microsoft 365 & SharePoint Community YouTube channel - http://aka.ms/m365pnp-videos.

Presentation slides used in this community call are found at OneDrive.

Resources:

Additional resources on covered topics and discussions.

Web - SharePoint Syntex | aka.ms/SharePointSyntex
Blog – Syntex blog | aka.ms/SharePointSyntex/blog
(Soon) Community – Yammer Syntex Community | aka.ms/SharePointSyntex/community
Roadmap – Syntex Roadmap | aka.ms/SharePointSyntex/roadmap
Documentation - Introduction to Microsoft SharePoint Syntex | aka.ms/SharePointSyntex/documentation
Documentation – Scenario: Manage contracts using a Microsoft 365 solution
SDK - Working with SharePoint Syntex
(Soon) Samples - GitHub: https://github.com/pnp/syntex-samples
Learning – Virtual Hub
PnP Weekly – Episode 126 with MVP guest D'arce Hess (TrnDigital) | @ DarceHess| video | podcast
Microsoft 365 PnP Community hub | aka.ms/m365pnp/community
Microsoft 365 Extensibility look book gallery | aka.ms/m365/extensibility
Microsoft 365 Developer Podcast | m365devpodcast.com
SharePoint sample gallery | aka.ms/spfx-webparts
Microsoft Teams Samples Gallery | aka.ms/teams-samples
Viva Connections https://aka.ms/VivaConnections

Additional Resources:

PnP Weekly - Videos
PnP Weekly - Podcasts
M365 Community Documentation - (non-dev)
SharePoint Documentation and Guidance - (technical)
SharePoint Framework v1.11
SharePoint Framework v1.11 release notes
Exploring how to get started on open-source and community work?
SharePoint Starter Kit
Recurrent invite to SharePoint Development monthly calls - http://aka.ms/spdev-call
SharePoint Developer documentation - http://aka.ms/spdev-docs
SharePoint Development Issues - http://aka.ms/spdev-issues
SharePoint GitHub organization - http://github.com/SharePoint
SharePoint Development UserVoice - new feature requests - http://aka.ms/spdev-uservoice

Upcoming calls | Recurrent invites:

Office add-in monthly call – May 12^th at 8:00 am PDT | https://aka.ms/officeaddinscall
M365 General Dev call – May 13^th at 7:00 am PDT | https://aka.ms/m365-dev-sig
Adaptive Cards monthly call – May 13^th at 9:00 am PDT | https://aka.ms/adaptivecardscommunitycall
Microsoft Teams monthly call – May 18^th at 8:00 am PDT | https://aka.ms/microsoftteamscommunitycall
Power Apps monthly call – May 19^th at 8:00 am PDT | https://aka.ms/PowerAppsMonthlyCall
SharePoint Framework call – May 20^th at 7:00 am PDT | https://aka.ms/spdev-spfx-call
Microsoft Identity Platform – May 20^th at 9:00 am PDT | https://aka.ms/IDDevCommunityCalendar
Microsoft Graph call – June 1^st at 8:00 am PDT | https://aka.ms/microsoftgraphcall
SharePoint monthly call – June 8^th at 8:00am PDT | https://aka.ms/sp-call

"Too many links, can't remember" - not a problem... just one URL is enough for all Microsoft 365 community topics - http://aka.ms/m365pnp.

“Sharing is caring”

SharePoint Team, Microsoft - 12th of May 2021

Microsoft 365 PnP Weekly - Episode 126 - D'arce Hess

Vesa Juvonen — Tue, 11 May 2021 11:40:49 GMT

In this installment of the weekly discussion revolving around the latest news and topics on Microsoft 365, hosts – Vesa Juvonen (Microsoft) | @vesajuvonen, Waldek Mastykarz (Microsoft) | @waldekm are joined by Rhode Island, US-based, MVP, professional archer, blogger and presenter specializing in UI/UX, information architecture and user adoption at TrnDigital, D'arce Hess | @ DarceHess. Topics discussed in this session include: The path to IT and on becoming an MVP, reflections on UX/UI changes over the years and designing custom experiences that addresses business processes. In post pandemic times, organizations will be circling back to optimize Microsoft Teams experiences while vendors will continue efforts to land the right extensibility stories. Microsoft Viva – with great power comes great responsibility and ideas about prepping for Viva. Finally, thoughts on women in IT and on using what we learn in school in the field. Microsoft and the Community delivered 18 articles in this last week. This session was recorded on Monday, May 10, 2021.

Please remember to keep on providing us feedback on how we can help on this journey. We always welcome feedback on making the community more inclusive and diverse.

This episode was recorded on Monday, May 10, 2021.

Video at Microsoft 365 Community YouTube channel.
Podcast format at https://pnpweekly.podbean.com.

Here are all the links and people mentioned in this recording. Thanks, everyone for your contributions to the community!

Events:

May 25-27, 2021- Microsoft Build 2021
August 9-11, 2021 - North American Collaboration Summit
- Register with coupon code "PnP" for 25% off from the prize at https://nacs.ticketspice.com/nacs2021

Microsoft articles:

Use SharePoint's new site templates today! - Nicole Woon (Microsoft) | @NovelNicole and Holland Kaviani (Microsoft)
New ways to use Microsoft Whiteboard for Education - Ian Mikutel (Microsoft) | @ianmikutel
Understanding the Office Add-ins runtime - Microsoft
Application permissions support for assignments API in Microsoft Graph now available - Microsoft
SharePoint Syntex Updates - April 2021 - Chris McNulty (Microsoft) | @cmcnulty2000

Community articles:

SharePoint App Catalog Development Tips - Julie Turner (Sympraxis Consulting) | @jfj1997
Upgrade your SharePoint Framework (SPFx) projects to v1.12.1 with CLI for Microsoft 365 - Yves Habersaat (Sword Group) |
Adding custom formatting to all list views - Don Kirkham (GM Financial) |
Get Started with the New SharePoint App Bar - Matt Jimison (DMI) | @mjimison
How to update an AdaptiveCard with a Teams Messaging Extension - Markus Möller (Avanade) | @Moeller2_0
React Groups and Teams - Alison Collins
spfx-fast-serve 2.0: new architecture, better extensibility, support of the latest SPFx - Sergei Sergeev (Mastaq) | @sergeev_srg
Restrict SharePoint list item attachments by file type using a custom form - Michel Mendes (Storm Technology) |
Organization Chart web part - João Mendes (Storm Technology) |
Episode #153 - Batching with Microsoft Graph SDK for .NET - Paolo Pialorsi (PiaSys) | @PaoloPia
SharePoint Framework What's New 1.12.1 [Teams - Web Part APIs] - Giuliano De Luca |
Save Microsoft Forms Attachments to SharePoint with Power Automate - April Dunnam (Microsoft) | @aprildunnam
Access files offline in Teams mobile - Daniel Glenn (InfoWorks Inc) | @DanielGlenn & Darrel Webster (WM Reply) | @DarrellaaS

Additional resources:

Power Platform Sample Gallery - for finding easily samples from the GitHub - contributions from the community are welcome!
PnP Sharing is Caring initiative - Getting started guidance and training for using GitHub and contributing to the community
Want to ask a question or in general engage with the community - Add a note in the Microsoft 365 PnP Community hub at https://aka.ms/m365pnp/community
Check out all the great community calls, SDKs, and tooling for Microsoft 365 from https://aka.ms/m365pnp

"Sharing is caring!"

Microsoft 365 PnP Community – May 2021 update

Vesa Juvonen — Wed, 12 May 2021 17:57:18 GMT

Microsoft 365 Patterns and Practices (PnP) Community April 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.

See more details from New Microsoft 365 Patterns and Practices (PnP) team model with new community leads

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 April 2021:

Unique visitors during the past 2 weeks in PnP, OneDrive, Microsoft-Search, OfficeDev and SharePoint GitHub organization repositories - 63,769
Overall unique contributors in the PnP, OneDrive, Microsoft-Search, OfficeDev and SharePoint GitHub organizations - 1,824
Microsoft 365 Community (PnP) YouTube channel had 101,785 views with 6,332 hours of watch time and 22,304 subscribers
Microsoft 365 Developer YouTube channel had 44,064 views with 3,297 hours of watch time and 13,633 subscribers

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

Getting started on deploying Viva Connections for Microsoft Teams desktop | 10,040
Microsoft Teams community call - April 2021 | 6,917
Building a beautifully designed Intranet with SharePoint - latest design and branding capabilities | Cathy Dew (Microsoft) & Katie Swanson (Microsoft) | 3,235
Getting started with Site Designs in SharePoint Online - Laura Kokkarinen (Sulava) | 3,085
Working with Microsoft Lists (webinar) - Harini Saladi, Miceile Barrett, Chakkaradeep Chandran and Mark Kashman | 2,930
Your intranet is now in Microsoft Teams with Microsoft Viva Connections | 2,195
Introducing: New Employee Onboarding - a Microsoft Teams app template | Nidhi Sharma (Microsoft) | 2,109
Architecting Your Intranet | Melissa Torres (Microsoft) | 2,104
SharePoint Framework Tutorial 1 - HelloWorld WebPart | 1,856
Microsoft Teams Meeting Questionnaire App with SharePoint Framework | Nanddeep Nachan | 1,717

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

Authenticate and connect with Microsoft Graph - June 2019 | 1,316
Build Outlook Add-ins that integrate your solution seamlessly into your users’ Outlook experience | Juan Balmori, Hitesh Manwar - 1,197
An introduction to Microsoft Graph for developers - Part I - Getting started - October 2019 | 1,175
Demo: Getting started with Power Apps Portals | Brian Knight (Pragmatic Works) | 929
Getting Started with Microsoft Graph and Application Registration | 926
Build and Office add-in using modern JavaScript tools and technologies | 839
Getting Started with Microsoft Graph | 817
Create interactive conversational bots for Microsoft Teams | 803
Accessing Files with Microsoft Graph | 754
Develop multi-tenant applications with Microsoft Identity Platform - April 2020 | 725

Main resources around Microsoft 365 Community:

Microsoft 365 Community - http://aka.ms/m365pnp - One location for all the resources and news around PnP
Microsoft 365 community blog - http://aka.ms/m365pnp/community/blog
Microsoft 365 development blog - http://aka.ms/m365pnp-blog
Microsoft 365 Community Channel on YouTube - http://aka.ms/m365pnp-videos
Microsoft 365 Developer YouTube channel - https://aka.ms/M365DevYouTube

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.

5th of May - Understanding the Office Add-ins runtime
5th of May - Application permissions support for assignments API in Microsoft Graph now available
28th of April - Announcing SharePoint Framework 1.12.1 – Extending more of Microsoft Teams
28th of April - Learn how to develop apps with the Microsoft Graph Toolkit
27th of April - Microsoft Graph Mailbag – Create engaging apps with the Microsoft Teams Activity Feed API
21st of April - Build quality Microsoft Teams apps with these best practices: Part 3
20th of April - Utilize change notification APIs for Microsoft Teams messages
20th of April - Breaking changes to the Microsoft Graph assignments API (beta)
19th of April - Leverage new Microsoft Teams chat APIs to enable new scenarios
15th of April - Migrate messages from other chat platforms to Microsoft Teams with Microsoft Graph APIs
14th of April - Enhance app engagement with the Microsoft Teams Activity Feed API
14th of April - Build quality Microsoft Teams apps with these best practices: Part 2
13th of April - Announcing public preview of SharePoint Framework 1.12.1
13th of April - Microsoft Graph Mailbag – Copy/Move Files and Folders in SharePoint Online
12th of April - Enable compliance scenarios with hosted content and delta message APIs in Microsoft Teams
12th of April - Explore Microsoft Graph scenarios for JavaScript development now on Microsoft Learn
9th of April - New feature request experience for Microsoft Graph and Office Platform
8th of April - Jedox explains batching Excel Custom Functions API calls
6th of April - Build quality Microsoft Teams apps with these best practices: Part 1
1st of April - Get Microsoft Graph change notifications delivered through Azure Event Hubs

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

10th of May - Ari Gunawan (DevStack) - Community Sample: News Ticker app (SPFx Extensions)
10th of May - Django Lohn (InSpark) - Power Apps: source code editing for Canvas Apps
7th of May - Vesa Juvonen (Microsoft) - New Microsoft 365 Patterns and Practices (PnP) team members – May 2021
7th of May - Luise Freese - Microsoft 365 PnP Community Spotlight: Stefan Bauer
7th of May - Michael Roth (IT-P Information Technology-Partner GmbH) - Let’s build a timer app for Teams meetings
6th of May - André Lage (Datalynx AG) - Navigate OneDrive data with Microsoft Graph and Mgt-File-List Beta version
6th of May - Mohamed Derhalli (BDO Canada) - Introducing React Video Banner Web Part
6th of May - Carl Cookson (Avanade) - Using Power Automate And Graph API To Manage External Access To Teams
6th of May - Hubert Lam (NSW Department of Education) - Simple reminders for any Teams Channel or Chat message
5th of May - Chandani Prajapati - How to to get all site collections with their sub webs using PnP PowerShell?
5th of May - Luis Mañez (ClearPeople) - Community sample: Engage your users with SharePoint stories/reels
4th of May - Bob German (Microsoft) - What's up with Markdown?
1st of May - Ari Gunawan (DevStack) - How to Set Up Tailwind CSS in a SPFx Project
29th of April - Damien Bird (Aberdeen City Council) - Power Platform MS Forms Quiz with dynamic Leader Board created using Power Automate and HTTP Trigger
29th of April - Luise Freese - How to get Source Code files for Power Apps Canvas apps
29th of April - Garry Trinder (CPS) - CLI for Microsoft 365 v3.9
29th of April - Vesa Nopanen (Sulava) - Power Virtual Agents bot setting the Out Of Office
29th of April - David Chesnut (Microsoft) - Office Add-in Developer Community (PnP) – March 2021 update
26th of April - Damien Bird (Aberdeen City Council) - Teams - an adoption idea? Transfer your group chat emails to Teams with Power Automate
25th of April - Luise Freese - Microsoft 365 PnP Community Spotlight: Wictor Wilén
25th of April - Michael Roth (IT-P Information Technology-Partner GmbH) - What I (as a non dev) learned as I created my first Power App
25th of April - Michael Roth (IT-P Information Technology-Partner GmbH) - Learn to debug your Power Apps
23rd of April - Yves Habersaat (Sword Group) - Export Power Apps and Power Automate user licenses
21st of April - Luise Freese - How to beautify your Power Apps
17th of April - Luise Freese - Microsoft 365 PnP Community Spotlight: Mikael Svenson
15th of April - Will Holland (ThreeWill) - Use Power Automate to automatically create SharePoint News Links from an RSS feed
15th of April - Luise Freese - LearnTogether: Build Apps with Microsoft Graph 🦒
14th of April - Sam Collins (Coupled Technology) - FAQ's in a Document Card
12th of April - Lee Ford (Symity Ltd) - Introduction to tokens
12th of April - Chandani Prajapati - How to get any site collection users with their roles using PnP PowerShell?
11th of April - Chandani Prajapati - How to show profile picture in Person column in SharePoint list/library?
9th of April - Luise Freese - Microsoft 365 PnP Community Spotlight: Albert-Jan Schot
7th of April - Luise Freese - Microsoft Graph Fundamentals learning path – Module 3
7th of April - Luise Freese - PnP WatchParty for Microsoft's 'LearnTogether Building apps with Microsoft Graph' event
7th of April - Django Lohn (InSpark) - Power Apps: source code editing for Canvas Apps
7th of April - Yannick Reekmans (Qubix) - Change your own profile picture as a Guest in Microsoft Teams
6th of April - Mike Homol (ThreeWill) - Improving the Page Properties web part
5th of April - Luise Freese - Microsoft Graph Fundamentals learning path – Module 2
1st of April - Luise Freese - Microsoft Graph Fundamentals learning path – Module 1
1st of April - Will Holland (ThreeWill) - Copy a list - with list items - to another site

Community call recording blog posts:

7th of May - SharePoint Framework Community Call Recording – 6th of May, 2021
3rd of May - Office Add-ins community call – April 14, 2021
30th of April - Microsoft 365 Developer Community Call recording – 29th of April, 2021
28th of April - Power Apps Community Call – April 2021
23rd of April - SharePoint Framework Community Call Recording – 22nd of April, 2021
22nd of April - Microsoft Teams Community Call - April 2021
16th of April - Microsoft 365 Developer Community Call recording – 15th of April, 2021
14th of April - SharePoint community call - April 13th, 2021
9th of April - SharePoint Framework Community Call Recording – 8th of April, 2021
8th of April - Microsoft Graph community call - April 6th, 2021
2nd of April - Microsoft 365 Developer Community Call recording – 1st of April, 2021

PnP Weekly video blog / podcast shows:

3rd of May - Microsoft 365 PnP Weekly - Episode 125 - Sandy Ussia (Lightning Tools)
27th of April - Microsoft 365 PnP Weekly - Episode 124 - Emily Mancini (Sympraxis Consulting)
20th of April - Microsoft 365 PnP Weekly - Episode 123 - April Dunnam (Microsoft)
13th of April - Microsoft 365 PnP Weekly - Episode 122 - Mark Rackley (PAIT Group)
4th of April - Microsoft 365 PnP Weekly – Episode 121 - Nik Charlebois (Microsoft)

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.

Adaptive Cards https://aka.ms/adaptivecardscommunitycall - Updates and news around Adaptive Cards with live demos
Microsoft Graph https://aka.ms/microsoftgraphcall - Updates and news from Microsoft Graph with live demos
Microsoft identity platform https://aka.ms/IDDevCommunityCalendar - Latest on the identity side
Microsoft Teams https://aka.ms/microsoftteamscommunitycall - Microsoft Teams monthly update with live demos
Office Add-ins https://aka.ms/officeaddinscommunitycall - News and community work around Office add-ins with live demos
PowerApps https://aka.ms/PowerAppsMonthlyCall - Monthly summary on PowerApps community with live demos
SharePoint https://aka.ms/spdev-call - Consists of the latest news, providing credits for all community contributors and live demos typically by SharePoint engineering.
M365 General Dev SIG https://aka.ms/spdev-sig-call - Bi-weekly - General topics on Microsoft 365 Dev from various aspects - Microsoft Teams, Microsoft Graph Toolkit, Provisioning, Automation, Scripting, Power Automate, Solution design
SharePoint Framework SIG https://aka.ms/spdev-spfx-call - Bi-weekly - Consists of topics around SharePoint Framework and JavaScript-based development in the Microsoft Teams and in SharePoint platform.

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
https://github.com/pnp/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

sp-dev-docs - Source for new SharePoint dev center documentation exposed from http://docs.microsoft.com/en-us/sharepoint/dev
sp-dev-provisioning-templates - Open-source templates used by the SharePoint Look Book site
sp-provisioning-service - Source code of the SharePoint look book site

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

pnp-modern-search - Home of PnP Modern Search solutions, see more from the documentation

Other related resources from GitHub

Microsoft Graph Toolkit in GitHub - Community contributions welcome!
Office add-in Patterns and Practices in GitHub - Community contributions welcome!
Microsoft Graph GitHub organization
OfficeDev GitHub organization - Includes all Microsoft Teams samples from Microsoft

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

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!

New Microsoft 365 Patterns and Practices (PnP) team members - May 2021 - Gautam Sheth (Valo) and Patrick Lamber (Experts Inside AG)
New Microsoft 365 Patterns and Practices (PnP) team members - February 2021 - April Dunnam (Microsoft), Emily Mancini (Sympraxis Consulting) and Veronique Lengelle (CPS)
New Microsoft 365 Patterns and Practices (PnP) team members - December 2020 - Luise Freese and Sébastien Levert
New Microsoft 365 Patterns and Practices (PnP) team members - August 2020 - Albert-Jan Schot (Portiva), Koen Zomers (Microsoft), Paul Bullock (CaPa Creative), Rabia Williams (Microsoft) and Yannick Plenevaux (PVX Solutions)

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

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.

Latest version currently is 2.1. See the v2.1 announcement blog post for more details - Microsoft Graph Toolkit adds a new Electron Provider plus enhanced capabilities
mgt.dev - Microsoft Graph Toolkit Playground
Getting started with Microsoft Graph Toolkit guidance video from developer community call by Beth Pan (Microsoft)
Latest code and preview versions from https://aka.ms/mgt

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

Latest updates on this area as follows:

New article by Michael Roth - Accessibility by Design
New article by Emily Mancini (Sympraxis Consulting) - Microsoft 3565 Maturity Model - Elevating Collaboration
Updated article by Ralph Rivas (Sogeti) - Understanding Power Platform Licensing
Updated article by Marc D Anderson (Sympraxis Consulting) - How Do Site Columns Become Managed Properties - Thus Available for Search
Updated article by Marc D Anderson (Sympraxis Consulting) - Glossary

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

YouTube - Introducing Microsoft 365 Community Docs
GitHub issue list with articles ideas

SharePoint Framework development samples

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

New sample react-teams-membership-updater by Nick Brown which can be used to update the membership of a team based on the contents of a CSV file, can be hosted in a SharePoint site where a list can be defined for logging purposes or run inside teams as a personal app.
New sample react-application-news-ticker by Ari Gunawan that displays news as a running text at the top of every modern page
Updates to react-staffdirectory by Tristian O'Brien which is a web part shows the current user's colleagues, and allows the user to search AD directory.
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 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

Web Part sample gallery - http://aka.ms/spfx-webparts
Extensions sample gallery - http://aka.ms/spfx-extensions

Microsoft Teams community samples

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-bot-SPUploader by Sathya Raveendran and Varaprasad SSLN which is a document manager solution
New sample tab-activity-feed by Sébastien Levert (Microsoft) which shows on how to build a solution leveraging the Teams Activity Feed API to send notifications to other users
Updates to tab-sso by Shama which shows how to create a tab for Teams that uses the built-in Single Sign-On (SSO) capabilities
Numerous updates on the existing samples provided by community and Microsoft

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

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

New sample color-functions by P3N showing functions that calculate the contrast between two colors
New sample convertbasenumber-functions by コルネ showing function that converts base numbers
New sample date-functions by Matthew Devaney (Hitachi Solutions) providing set of data functions for data manipulation
New sample financial-functions by Matthew Devaney (Hitachi Solutions) providing set of financial functions
New sample geolocation-utils by Hiroaki Nagao providing a function to calculate distance and compass heading between two locations
New sample list-functions by Laura Graham-Brown (AIS) providing set of functions around lists
New sample regex-functions by Geetha Sivasaiam and P3N on set of functions that performs regex match on currency, percent & time formats
New sample Tagbox by Carmen Ysewijn (Qubix) showing a textbox that adds items into a dynamic list
New sample Timesheet by April Dunnam (Microsoft) showing a timesheet application is a tablet-based canvas app that gives you a way to create and manage weekly timesheets
New sample calendar-component by April Dunnam (Microsoft) providing a re-usable component that allows you to display events in a calendar
New sample expandable-navigation by Luise Freese providing an example for a expandable navigation using Fluent UI icons
New sample status-indicator by Derek Cash-Peterson (Sympraxis Consulting) showing how to add a status indicator in a display form
New sample timer by Michael Roth (IT-P) providing an example of how to use the timer function as a stopwatch
New sample Try-Catch-Finally by Remy Blok (Prodware) providing a pattern for Try-Catch-Finally
New sample exception-handing-in-do-until-loop by Remy Blok (Prodware) providing a pattern for breaking out of a 'Do Until'-loop in Power Automate when an exception occurs.
New sample ics-calendar-invite by April Dunnam (Microsoft) which sends an .ics calendar invite when a new event is added to a SharePoint list
New sample planner-task-from-flagged-email by April Dunnam (Microsoft) which creates Planner Task from flagged emails
New sample teams-invites-via-graph-api by Carl Cookson (Avanade) sample showing how guest user can request access to a Team

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

Power Platform sample gallery - https://aka.ms/powerplatform-samples

Sharing is Caring initiative

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 Teams platform documentation - Microsoft Docs | GitHub
SharePoint Developer documentation - Microsoft Docs | GitHub
Microsoft Graph documentation - Microsoft Docs | GitHub
Office add-in documentation - Microsoft Docs | GitHub

Microsoft 365 Dev and Microsoft 365 Community (PnP) 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:

Microsoft Lists integration with Power BI - Mark Kashman (Microsoft) | @mkashman
SharePoint Content Type APIs in Microsoft Graph - Swapnil Shrivastava (Microsoft)
SharePoint Framework v1.12.1 new features - Vesa Juvonen (Microsoft) | @vesajuvonen
Getting started with Microsoft Viva Connections Desktop - Tejas Mehta (Microsoft) @tpmehta & Prateek Dudeja (Microsoft) @PrateekDudeja4
Viva Connections Desktop and Extensibility - Vesa Juvonen (Microsoft) | @vesajuvonen
Introduction to PnP Core SDK - Getting started in .NET 5 - Bert Jansen (Microsoft) | @o365bert
List group header formatting options for Microsoft Lists - Naveed Ahmed (Microsoft) | @naveed3
Best practices for data migrations to Microsoft 365 - Joshua Badach
Choosing the right tools for your Microsoft 365 migration - Eric Warnke (Microsoft) | @EricWarnke
Getting started on deploying Viva Connections for Microsoft Teams desktop - Microsoft
Your intranet is now in Microsoft Teams with Microsoft Viva Connections - Microsoft
Create custom apps with Power Apps - Microsoft
Explore Microsoft Graph scenarios for JavaScript development - Dan Wahlin (Microsoft) | @danwahlin
Learn how to develop apps with the Microsoft Graph Toolkit! - Ayca Bas (Microsoft) | @aycabs
Outlook add-in for creating templated signatures programmatically with events - David Chesnut (Microsoft)
Updates to Office Scripts and TICTAC UFO customer demonstration - Sudhi Ramamurthy (Microsoft)
Support tickets on Microsoft 365 around Office add-ins - Richard Tylor (Microsoft)
Take a lap around the Company Communicator app - Mykhailo Sydorchuk (Microsoft)
Streamline your work with Microsoft Graph | Tips & Tricks #1 - Bob German (Microsoft) | @Bob1German
Microsoft Graph Toolkit can do WHAT? | Tips & Tricks #2 - Ayca Bas (Microsoft) | @aycabs
Build Teams apps with Power Apps in Dataverse for Teams | Tips & Tricks #3 - April Dunnam (Microsoft) | @aprildunnam
Start calling the Microsoft Graph API in under 5 minutes! | Tips & Tricks #4 - Dan Wahlin (Microsoft) | @danwahlin
Set up your new Microsoft 365 Developer subscription | Tips & Tricks #5 - Bob German (Microsoft) | @Bob1German
Create a chatbot in Microsoft Teams with Power Virtual Agents | Tips & Tricks #6 - April Dunnam (Microsoft) | @aprildunnam

Community demos as following:

Advanced Page Properties web part solution - Mike Homol (ThreeWill) | @homol
Running the CLI for Microsoft 365 in Azure Container Instances orchestrated by Logic Apps - Albert-Jan Schot (Portiva) | @appieschot
Make your Power Apps sessions persistent when switching Microsoft Teams tabs! - Hardit Bhatia (Hitachi Solutions America, Ltd.) |
Surfacing your existing solution in Microsoft Teams - Rick Van Rousselt (Advantive) | @RickVanRousselt
Make your Power Apps user experience awesome with Gestalt design principles - Rory Neary |
Build your first Microsoft Teams Bot - Stephan Bisser (Solvion) | @stephanbisser
Live London Underground Line Status Bot in Microsoft Dataverse for Teams - Leon Armston (Intelogy) |
Microsoft Lists formatting with header and footer settings - Chris Kent (DMI) | @theChrisKent
Microsoft Teams Meeting Questionnaire App with SharePoint Framework - Nanddeep Nachan |
Building an advanced SPFx Image Editor web part - Peter Paul Kirschner (cubido) | _at
Customer scenario - Microsoft Teams integration with external systems - Kathy (Qinqyu) Xu (Pfizer) & Paolo Pialorsi (PiaSys) | @paolopia
Using Single Sign-On (SSO) with Office Add-ins - Andrew Connell (Voitanos)
Microsoft Teams – Authentication and Single Sign-on - Andrew Connell (Voitanos)
Microsoft Teams – Use the teamwork Microsoft Graph endpoint - Andrew Connell (Voitanos)

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

Microsoft 365 PnP Weekly - Episode 125 - Sandy Ussia (Lightning Tools)
Microsoft 365 PnP Weekly - Episode 124 - Emily Mancini (Sympraxis Consulting)
Microsoft 365 PnP Weekly - Episode 123 - April Dunnam (Microsoft)
Microsoft 365 PnP Weekly - Episode 122 - Mark Rackley (PAIT Group)
Microsoft 365 PnP Weekly - Episode 121 - Nik Charlebois (Microsoft)

Key contributors to the May 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.

Adam Wójcik - Adam-it
Agustin Del Vento (Change Champions Consulting Inc.)
Albert-Jan Schot (Portiva) - @appieschot
Alberto Gutierrez (Minsait) - @albertogperez
Alex Terentiev (SharePointalist) - @alexaterentiev
Alex Moumne (Fluidmaster) - afhmoumne
Alison Collins (Coupled Technology) - ReactIntern
Anders Mörtsell (Sogeti) - @andersmortsell
André Lage (Datalynx AG) - @aaclage
Andrew Benson (InElec) - @ViewPorter
Andrew Burns (AmSty) - @SharePointRox
Andrew Connell (Voitanos) - @andrewconnell
Andrew Koltyakov (ARVO Systems) - @andrewkoltyakov
Andy Boylan (AdEPT Technology Group) - apboylan
Anoop Tatti (Content+Cloud) - @anooptells
Ari Gunawan (DevStack) - @arigunawan3023
Asha Prajapati (T-systems India Pvt Ltd) - Ashaprjpt0707
Beau Cameron (Aerie Consulting) - @Beau__Cameron
Bianca Wilkinson - bianca-git
Bruce Cotter (Business Journey Consulting, LLC) - businessjourneyconsulting
Bruce Lane - brucelane
Carl Cookson (Avanade) - @LinkeD365
Carmen Ysewijn (Qubix) - @CarmenYsewijn
Chandani Prajapati - @Chandani_SPD
Charles Ndiaye (Netexio) - @manusquall
chimenjoku - chimenjoku
Chris Kent (DMI) - @theChrisKent
Chris Revell (Consult 365 IT Solutions) - @consult_365
Christian Zuellig (Monday Coffee) – @ChristianZuell1
Christine Green (EBSCO Information Services) - @cacurtica
codepwner - codepwner
Dan Toft (Evobis) - @tanddant
Daniel Westerdale (Westerdale Solutions Ltd) - @westerdaled
Damien Bird (Aberdeen City Council) - @DamoBird365
David Warner II (Catapult) - @DavidWarnerII
Django Lohn (InSpark) - @LohnDjango
Denis Molodtsov (CleverPoint Consulting) - @Zerg00s
Derek Cash-Peterson (Sympraxis Consulting) - @spdcp
Elio Struyf (Struyf Consulting) - @eliostruyf
Ellery July - @techrealist
Emily Mancini (Sympraxis Consulting) - @EEMancini
Eric Legault (Eric Legault Consulting Inc.) - @elegault
Eric Overfield (PixelMill) - @EricOverfield
Erwin van Hunen (Valo Intranet) - @erwinvanhunen
Frank Cornu (aequos) - @FranckCornu
Ganesh Sanap - @ganeshsanap20
Garry Trinder (CPS) - @garrytrinder
Gautam Sheth (Valo) - @gautamdsheth
Geetha Sivasaiam (Artis Consulting) - @GSiVed
Gissur Simonarson (Fujitsu) - @gissisim
Giacomo Pozzoni (DQC Sverige Ab) - @PozzoniGiacomo
Haiye Wang - haiyewang0717
Hardit Bhatia (Hitachi Solutions America, Ltd.) |
Hamid Malik (Smart-IS) - @HamidHMalik
Harold Wolfinger
Heidi Connor - bryllyg
Henrik Yllemo (Ylltec Sweden AB) - @yllemo
Henry Morales
Hiroaki Nagao - @mofumofu_dance
Hubert Lam (NSW Department of Education) - @z3019494
Jarbas Horst (Valo) - @devjhorst
Janeen Jackson - ajhodgejackson
Jasper Voskuilen - @jaspervoskuilen
Jennifer McGee (Wood plc)
Jens Otto Hatlevold (Bouvet) - jensotto
João Mendes - @joaojmendes
Joel Rodrigues (Storm Technology) - @JoelFMRodrigues
John Kelly (Domino Printing Sciences) - @fairgold
John O'Brien (Microsoft Canada) - obrien-j
Jonathan Cooper (First Horizon) - jdcooper901
Joy Muehlenbein (Edwards Lifesciences) - @huh_larious
Julie Turner (Sympraxis Consulting) - @jfj1997
Kanakarajulu Thota (Atos GITSS) - @KanakarajuNaidu
Kathleen Boilek (Alaka’Ina Foundation) - @kaboilek
Kathy (Qinqyu) Xu (Pfizer)
Kerry Lambert (NI) - @kazoogal23
Keval Solanki - @keval_solanki
koruneko - koruneko
Krzysztof Mikołajec (Krzysztof Mikolajec Consulting, Sii Pl) - @krzymiko
Laura Graham-Brown (AIS) - @Laura_GB
Laura Kokkarinen (Sulava) - @LauraKokkarinen
Lee Ford (Symity Ltd) - @lee_ford
Leon Armston (Intelogy Ltd) - @LeonArmston
Liam Cleary (SharePlicity) - @helloitsliam
Luis Mañes (ClearPeople) - @luismanez
Luis Renteria - TheSharePointProfessional
Luise Freese (Luise Freese M365 Princess) - @LuiseFreese
Lukas Jung - lukju
Luke Pfaffinger (Prime Group)
Maarten van Stam (Deloitte Nederland) - @aafvstam
Manoj Kumar Mittal (Mindtree) - @Manojmcan
Marc D Anderson (Sympraxis Consulting) - @sympmarc
Mark Rackley (PAIT Group) - @mrackley
Matthew Devaney (Hitachi Solutions) - @mattbdevaney
Matt Tracy (US Air Force)
Mike Homol (ThreeWill) - @homol
Michael Fenech (Atrium Hospitality) - SPHateMe
Michael Roth (IT-P GmbH) - @MichaelRoth42
Michiel Hamers (Ordina MTech) - @michielhamers
Michel Mendes (Storm Technology) - @michelcarlo
Mike - diver7
Mike Duffy (Boardwalk Pipelines) - @mike_duffy
Mike Ruhl (Williams Companies) - @ruhlma
Mohamed Derhalli (BDO Canada) - derhallim
Nabil Cherchali (OpenText) - @ncherchali
Nanddeep Nachan – @NanddeepNachan
Naveed Mohammad (Cognizant) - naveed243
Neil Sreenan (HKS Inc.) - @nsreenanhks
Nick Brown (Cardiff University) - @techienickb
Nikki Chapple (NTT Cloud Communications) - @chapplenikki
Nitin Jain (First Horizon) - @nitincomplete
Phil Harding - phillipharding
Paolo Pialorsi (PiaSys.com) - @PaoloPia
Patrik Hellgren (Sherpas Group) - @patrikhellgren
Patrick Lamber (Expertsinside AG) - @patricklamber
Paul Bullock (CaPa Creative Ltd) - @pkbullock
Paul Schaeflein (AddIn365) - @paulschaeflein
Peter Guhr - pguhr
Peter Paul Kirschner (cubido business solutions GmbH) - @petkir_at
Phil Broadbery (PKF) - @peb71b
P3N - P3N
Ralph Rivas (Sogeti) - @bigpix2000
Ravi Kulkarni (Cognizant) - @RaviKul16a87
Remy Blok (Prodware) - remyblok
Reidar Husmo (PointTaken) - reidarhusmo
Rick Van Rousselt (Advantive) | @RickVanRousselt
Rocio Holub (DAI)
Rolands Strakis (Atea Global Services SIA) - wonderplayer
Rory Neary -
Ross Allan (PKF LittleJohn)
Sam Collins (Coupled Technology) - @samc148
Sandeep Vootoori - sandeepvootoori
Sandy Ussia (Lightning Tools) - @SandyU
Sebastian Nagy - snagy22000
Sébastien Noel (ENGIE)
Sekhar Reddy Bhumireddy (Krish Services Group, Inc) - bhumi-github
Sergei Sergeev (Mastaq) - @sergeev_srg
Shiva Bezwada (JCS Solutions LLC) - @Texaport
Simon Doy (iThink 365) - @simondoy
Simon Hudson (Cloud2) - @simonjhudson
Smita Nachan - @smitanachan
Spencer Harbar (Triumph Media Limited) - @harbars
Stefan Bauer (n8d) - @StfBauer
Stephan Bisser (Solvion) - @stephanbisser
Steve Beaugé (Solutions pour SharePoint) - stevebeauge
Sudharsan Kesavanarayanan (NTT Digital Business Solutions) - @sudharsank
Susan McClements (1st Source Bank) - @smcclements
Tetsuya Kawahara - @techsn_k
Theresa Lubelski - @SharePointMadam
thomassmart - thomassmart
Thomy Gölles (Solvion) | @thomyg
Todd Baginski (Canviz) - @toddbaginski
Tristian O'Brien - tristian2
Troy Meacham (US Army)
Wictor Wilen (Avanade) - @wictor
Will Holland (ThreeWill) - @_WCHolland
Velin Georgiev (Pramerica) – @velingeorgiev
Veronique Lengelle (CPS) - @veronicageek
Vesa Nopanen (Sulava) - @vesanopanen
Yannick Plenevaux (PVX Solutions) - @yp_code
Yannick Reekmans (Qubix) - @YannickReekmans
Yves Habersaat (Sword Group) - @yhabersaat

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.

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

Antons Mislevics - antonsmislevics
Allen Snow - @asnow003
April Dunnam - @aprildunnam
Amrutha Srinivasan | @amruthasrin
Ayca Bas - @aycabs
Bert Jansen - @O365Bert
Beth Pan - @beth_panx
Bob German - @Bob1German
Charles Sterling - @chass
Dan Wahlin - @DanWahlin
David Chesnut - davidchesnut
Elise Yang - @elisenyang
Hema Sandhu - hemab-toronto
Hugo Bernier - bernierh
Jason Johnston - jasonjoh
Jeremy Kelley - @Fizzlenik
Joanne Hendrickson - JoanneHendrickson
John Nguyen - johnguy0
John Sudds - jsuddsjr
Karthig Balendran - @KarthigBalendr1
Kevin Coughlin - @kevintcoughlin
Kinga - kkazala
Koen Zomers - @koenzomers
Holland Kaviani - Holland-ODSP
Laura Graham - Lauragra
Linda Lu Cannon - lindalu-MSFT
Loki Meyburg - @lokimeyburg
Luca Bandinelli - lucaband
Luis E. Torres - luisenriquetorres
Matt Wolodarsky - @mwolodarsky
Melissa Torres - @Meltorac
Mikael Svenson - @mikaelsvenson
Nik Charlebois - @NikCharlebois
Nicolas Vogt - vogtn
Nikola Metulev - @metulev
Pam Green (Microsoft) - @contextuallib
Pat Miller - @PatMill_MSFT
Patrick Rodgers - @mediocrebowler
Philippe Signoret - @psignoret
Rabia Williams - @williamsrabia
Rob Garrett - robgarrett
Saikrishna-MSFT - Saikrishna-MSFT
Shane Weaver - shweaver-MSFT
Sébastien Levert - @sebastienlevert
Steven Jia - Steven-Jia
Tim Mayo (Microsoft) - @timmayo
Tomomi Imura - @girlie_mac
Vesa Juvonen - @vesajuvonen
Waldek Mastykarz - @waldekm
Vincent Biret - @baywet

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!

Albert-Jan Schot (Portiva) - @appieschot
Alex Terentiev (SharePointalist) - @alexaterentiev
Andrew Connell (Voitanos) – @andrewconnell
Andrew Koltyakov (ARVO Systems) – @andrewkoltyakov
Beau Cameron (Aerie Consulting) - @Beau__Cameron
Chris Kent (DMI) – @theChrisKent
David Warner II (Catapult) - @DavidWarnerII
Elio Struyf (Struyf Consulting) – @eliostruyf
Emily Mancini (Sympraxis Consulting) - @EEMancini
Eric Overfield (PixelMill) - @EricOverfield
Erwin van Hunen (Valo Intranet) – @erwinvanhunen
Frank Cornu (aequos) - @FranckCornu
Garry Trinder (CPS Solutions) - @garrytrinder
Gautam Sheth (Valo Intranet) - @gautamdsheth
Julie Turner (Sympraxis Consulting) - @jfj1997
Laura Kokkarinen (Sulava) - @LauraKokkarinen
Luise Freese - @LuiseFreese
Marc D Anderson (Sympraxis Consulting) - @sympmarc
Paolo Pialorsi (Piasys.com) – @PaoloPia
Patrick Lamber (Expertsinside AG) - @patricklamber
Paul Bullock (CaPa Creative Ltd) - @pkbullock
Rabia Williams (Engage Squared) - @williamsrabia
Stefan Bauer (n8d) – @StfBauer
Velin Georgiev (Pramerica) – @velingeorgiev
Veronique Lengelle (CPS) - @veronicageek
Wictor Wilen (Avanade) - @wictor
Yannick Plenevaux (PVX Solutions) - @yp_code

Here are the Microsoft Internal PnP Core team members:

April Dunnam - @aprildunnam
Bert Jansen – @O365Bert
Bob German - @Bob1German
Hugo Bernier - @bernierh
Koen Zomers - @koenzomers
Mikael Svenson – @mikaelsvenson
Patrick Rodgers – @mediocrebowler
Rabia Williams - @williamsrabia
Sébastien Levert - @sebastienlevert
Vesa Juvonen – @vesajuvonen
Waldek Mastykarz – @waldekm

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) – May11th 2021

Community Sample: News Ticker app (SPFx Extensions)

Ari Gunawan — Mon, 10 May 2021 14:21:21 GMT

You might be familiar with the running text that shows some breaking news on a news tv channel. I think it would be nice if we have a similar thing on a SharePoint site to show some breaking news to its users so I created the News Ticker app. Basically, the app will show some news from a SharePoint list as a running text at the top of every modern page on the site. Below is how it looks:

News Ticker

Below is the data source:

Data Source List

You can find the full source code and how to install it here.

In this article, I will share some key points from the solution code that might be useful for other SPFx projects.

1. Use React component in the SPFx Extension

SPFx extension doesn't include React component by default but we can easily add it manually.

We just need to render our React component in the placeholder element provided by the SPFx Extension Application Customizer.

You can find my implementation code here.

Render React Component

2. Get data from SharePoint list based on View using PnP JS

I'm using SharePoint list as the data source.

In order to make it simple to manage the news, I'm leveraging the list view and getting the data based on the view configuration.

It's great because we don't need to build any custom configuration mechanism in our app to configure (sort, filter, top, etc.) the data to be displayed. Just use the OOTB list view configuration.

It's very easy to get the data based on the list view using the PnP JS. Below is my implementation:

Get the view information using list.views.getByTitle(...)
Get list item based on the list view XML using list.getItemsByCAMLQuery(...)

You can find my implementation code here.

Get Data Based on List View

3. Use React third party component

I'm using an open-source React third party component for the running text component: react-ticker.

It's easy to add any React third party components to our SPFx project.

You can find my implementation code here.

Use Third Party Component

Thanks for reading. Hope you find this article useful

Power Automate: skip the Parse JSON action to reference data

LohnDjango — Mon, 10 May 2021 11:01:58 GMT

Why?

Let me emphasize that using the Parse JSON action (as explained in this great blog post of Luise Freese: How to use Parse JSON action in Power Automate) is always the way to go when you are starting with Power Automate. Especially if you want to have properties of your JSON ouput to show up as Dynamic Content in the rest of your Flow.

However the Parse JSON action is very picky... The action will fail if a property is missing, a new property is added later on or an existing property is giving back a different type of data. In short: any schema change not being updated in the settings of the action can cause a :cross_mark: "ValidationFailed error" :cross_mark:. Such an error will stop the Flow because the schema validation failed:

As long as you remind to also update the Parse JSON action schema, it will continue working fine.
But in my case, I wanted to know if Power Automate could skip the Parse JSON action :nerd_face:

What?

In this blog post, I can show you a way to skip the Parse JSON action and reference a property of an action with JSON output directly. This way, we can have one action less (#LessUsage #LessAPIcalls) and thus one action less that could fail (#Lean #LessActionsLessRisks).

How?

Let's first have a look at a simple JSON object:

The output of this Compose action will be this JSON output:

{
  "Property Product": "Product A",
  "Property Product Category": "Product Category 1"
}

I am using a Compose action to give JSON output, but in most cases JSON output will come from actions connected to a data source. In some types of actions unfortunately Power Automate does not create Dynamic Content. In these cases, the properties of these action do not show up in the Dynamic Content Panel for the rest of your Flow. When using the Parse JSON action on the output of such an action:

we can force the rest of the Flow to show us these properties in the Dynamic Content Panel. Making it easy for us to reference these properties. The Content input of the Parse JSON action will be the output of the Compose - SimpleJSONObject action:

@{outputs('Compose_-_SimpleJSONObject')}

Thanks to the Parse JSON - SimpleJSONObject action, we can (from this action on) use the properties defined in its Schema as Dynamic Content:

The expression of this reference would look like:

@{body('Parse_JSON_-_SimpleJSONObject')?['Property Product Category']}

In my first screenshot, you can see the action failing. It failed because the schema was expecting a string, while the Content input was giving an integer number. This was because I changed the JSON object temporarily :smiling_face_with_horns: to:

{
  "Property Product": "Product A",
  "Property Product Category": 1
}

1) We can also reference the property of the first action Compose - SimpleJSONObject action directly. We can use an expression like:

@{outputs('Compose_-_SimpleJSONObject')?['Property Product Category']}

Power Automate can thus skip the Parse JSON action. Even without this parsing, we can reference the property of any action with a JSON output:

No Parse JSON action needed! 8)

Originally published at https://knowhere365.space/power-automate-skip-the-parse-json-action-to-reference-data/

Re: Let’s build a timer app for Teams meetings

karthi natarajan — Sun, 09 May 2021 05:32:44 GMT

Thanks for detailed information.

New Microsoft 365 Patterns and Practices (PnP) team members – May 2021

Vesa Juvonen — Fri, 07 May 2021 15:48:25 GMT

We are excited to announce that we are again extending our virtual Microsoft 365 Patterns and Practices (PnP) team with additional community members. PnP team is responsible of the different community activities in different community channels, including our open-source work in the GitHub. This team consist of Microsoft employees and community members (MVPs) focused on helping the community the best use of Microsoft products, like Microsoft Teams, Power Platform, OneDrive, SharePoint or API layer like Microsoft Graph.

We announced our new PnP team model in April 2020 with additional community members and are further extending this team with new community members. We believe that working together as a one unified team across the organization barriers, we can make even larger worldwide impact and helping other community member to succeed on adopting different practices within Microsoft 365 platform.

Gautam Sheth - Software Designer

Gautam is a Software Designer at Valo. Coming from a developer background, he builds products using the Microsoft 365 developer stack. He is also a maintainer of the PnP PowerShell repository and a contributor to PnP Framework and SPFx related repositories. He loves to contribute to the community and share his learnings. He is a firm believer in Sharing is Caring and helping others.

You can read his blogs at https://gautamdsheth.wordpress.com and tweets @gautamdsheth

Outside of work, you can find him reading books, listening to Bollywood songs or occasionally speaking at local community/user group events.

Patrick Lamber – Microsoft 365 Solutions Architect

Patrick is a Microsoft Developer MVP and Microsoft 365 solutions architect at Experts Inside AG. He builds business solutions in the Microsoft 365 ecosystem for his international customers and he is the main developer of EasyLife 365 a new governance solution for Microsoft 365.

Patrick actively contributes to various projects on GitHub. You can follow him on GitHub.

When Patrick isn't coding or helping customers, you will find him walking his dog or dancing Salsa around the world.

If you are looking for more details on what Microsoft 365 Patterns and Practices (PnP) is all about, see more details on the different activities and projects from https://aka.ms/m365pnp, including all community calls, open-source projects, samples and more.

There are also numerous exciting new projects under development which will be released as open-source solutions soon addressing Microsoft Teams, OneDrive, Microsoft Graph and SharePoint areas. We want to thank also the countless of other community members who have been involved on this journey for past years. We still consider this as just a start and are looking your feedback and input to further improve the processes and model we use.

Got ideas, feedback, comments on our community work? – Don’t hesitate to let us know. We are here for you. Everyone is welcome!

Sharing is Caring!

Previous related announcements

New Microsoft 365 Patterns and Practices (PnP) team members - February 2021 - April Dunnam (Microsoft), Emily Mancini (Sympraxis Consulting) and Veronique Lengelle (CPS)
New Microsoft 365 Patterns and Practices (PnP) team members - December 2020 - Luise Freese and Sébastien Levert
New Microsoft 365 Patterns and Practices (PnP) team members - August 2020 - Albert-Jan Schot (Portiva), Koen Zomers (Microsoft), Paul Bullock (CaPa Creative), Rabia Williams (Microsoft) and Yannick Plenevaux (PVX Solutions)

Friday 7th of May, 2021

Microsoft 365 PnP Community Spotlight: Stefan Bauer

Luise Freese — Fri, 07 May 2021 11:05:41 GMT

Which community project do you maintain?

pnp/generator-spfx

How does it help people?

Allows people to create more advanced SPFx project with support for other frameworks VueJS, Handlebars and Angular Elements.

What have you been working on lately?

SPFx 1.12 integration

What do you do at work?

Designer and Solution Architect.

Why are you a part of the M365 community?

Because of all the great people.

What was you first community contribution?

Make SharePoint 2010 responsive.

One tip for someone who’d like to start contributing

Just do it.

Let’s build a timer app for Teams meetings

MichaelRoth42 — Fri, 07 May 2021 10:11:09 GMT

Introduction

Wouldn’t it be nice to have a timer at meetings, so that everybody can see how much time has passed and how much is remaining? A timer for everybody to see. To make this transparent and accessible to everyone, I wanted to build a timer app which you can use in Teams meetings.

And since we all get better at delivering and receiving virtual meetings, workshops and events, we all discover different techniques on delivering content. In a lot of agile techniques, time plays a relevant role. If you’re familiar with agile software development, Scrum in general or Stand-up meetings you know how effective timeboxing can be.

So I build a timer app and made it Microsoft Teams ready :beaming_face_with_smiling_eyes:

I’m gonna share, how I build it, so you can build something similar with the timer control, which caused the whole idea.

You can also just download my sample, I’ve published on M365 PnP Power Platform Samples. You get all the images and all the code to use and improve it (tag me if you did, I’d love to see if this thing can grow ;)). It’s all for free y’know?

I will split this blog into two parts:

Building the app
Make it available in Microsoft Teams meetings

Prerequisites

To build this app you just need access to the maker portal of PowerApps. You don’t need any data source or premium connectors.

When you want to make the app available in Microsoft Teams meetings you need the administrative rights to upload custom build apps in your Teams.

Any code editor will come in handy (I prefer Visual Studio Code), but don’t worry, you don’t need to know how to write code or anything.

About the app

Before we start, here’s a picture of the finished app.

I build this in the portrait orientation, since I want it to be used in Teams meetings. That means, it has to fit in the meeting side panel.

In the upper half you see a classic timer which shows the remaining time and three buttons: Start, Stop and Reset.

You also have four buttons to set the timer to a certain duration. In this case I went for 10 seconds, 30 seconds, 3 minutes and 5 minutes.

In the lower half you see two things:

A slider indicating the remaining time and a bar turning from blue to red as the time runs out.
A pie chart divided into quarters to visualize the remaining time

Accessibility Note:

I’d like to make it very clear in the beginning, that the colors are no coincidence. Initially I started with a classic color scheme: red and green. But then I realized that red-green colorblindness is one of the most common visual disorders. I switched the colors to make sure that everybody can see everything on the screen. Learn more about accessibility.

On all the Power App applications you can find the checker symbol in the upper right corner. It’s a very easy step to make sure that your product (app or flow or slide or whatever) reaches more people. We want to include everyone, correct? Correct!

Building the app

We have three steps to set up this app:

Build the timer in the upper half of the app.
Build the visualization in the lower half of the app.
Make it look pretty.

Build the timer in the upper half of the app

At first you start with inserting four things:

One timer input.
Three buttons for controlling the timer.
Four buttons to set the timer.

You will use the buttons to start, stop and reset the timer (think about renaming your controls in the tree view to remain an overview over all your components). Here is how to edit the parts:

Timer input

Start by changing the Duration into a variable. I called it “Dauer” (sorry for the german, but you can call it whatever you like). The timer shows now the duration we put into that variable.

By default, the timer starts counting upwards, but since we want to show the remaining time, we have to customize the Text property:

Replace the default function

Text(Time(0, 0, Self.Value/1000), "hh:mm:ss")

with this function

Text(Time(0, 0, (Timer4.Duration-Timer4.Value)/1000), "[$-en-US]mm:ss")

Now the timer shows only the minutes and seconds and starts on whatever is written in the variable “Dauer”. And it’s ticking downwards. Not bad.

Buttons to set the timer

Now we have to work further with that variable Dauer we set the timer on.

You add four buttons and change the text to “10 sec”, “30 sec”, “3 min” and “5 min” (remember to use the “”, because the text is just a string ;))

The magic happens on the OnSelect property. Set it for each button to the following function:

10 sec button: UpdateContext({Dauer:10000})

30 sec button: UpdateContext({Dauer:30000})

3 min button: UpdateContext({Dauer:180000})

5 min button: UpdateContext({Dauer:300000})

The timer control works with milliseconds, so you have to type your desired duration in milliseconds. When you click one of the buttons, you change the variable “Dauer” to the specific value and since the timer value show whatever the variable Dauer is set to, you can choose the duration.

Now let’s take a look at the three buttons we want to use to control the timer.

Start Button

We set the OnSelect property to this function:

UpdateContext({ClockTicking: true})

We are initializing a variable named ClockTicking and set the value to true. When we’re already on it, we use the same variable for the Stop Button.

Stop Button

We set the OnSelect property to this function:

UpdateContext({ClockTicking: true})

This way we have buttons to control the variable here. Logically, we have to tell our Timer input that it has to use this variable to start and to stop.

Timer input

Change the Start property to ClockTicking

Since we want the timer to not automatically reset at the end, but to control it with the button, we set the OnTimerEnd property with this function:

UpdateContext({ResetIt:false}); UpdateContext({ResetIt: true})

Now we have a timer that can be set to the values of the four buttons on the right side AND we can control it with three buttons. Neat!

Next stop: the visualization.

Build the visualization in the lower half of the app

We have two parts here: the slider on the right side and the pie chart on the left. We’re going to start with the slider.

Slider Control

To build this, start to insert the slider control.

Now it’s time to flip it over.

Change the Layout property to Vertical

Set the Max property to Dauer/1000. This way it shows, whatever Dauer is.

And to link the position of the handle to what your timer is showing set the Default property to (Timer1.Duration-Timer1.Value)/1000

Now you already have a slider whose handle slowly moves down while your timer counts down.

How cool is that?

Before we make it pretty, we set up the last element.

The pie chart

This chart consists of five icons, put on top of each other. You will need the following icons:

Circle (2x)
Quarter circle (1x)
Half circle (1x)
Three-quarter circle (1x)

You need to layer these in the following order:

Set the Fill property to of the top four elements to some blue, the full circle at the bottom is going to be red. The exact colors don’t matter at this point. We will beautify the app in the last part, don’t worry.

Don’t worry about the looks, we will change them in the last chapter.

As the timer and the slider count down, you will, step by step, let the single icons disappear by setting the Visible property to the following function:

Full circle on top: If(Slider1.Value >=22.5,true,false)

Three-quarter circle: If(Slider1.Value >=15,true,false)

Half circle: If(Slider1.Value >=7.5,true,false)

Quarter circle: If(Slider1.Value >0,true,false)

When the timer reaches the value 22.5 the full circle on top will disappear, revealing the Three-quarter circle. That indicates that only three quarter of the time remains. It is important to place the circles on top of each other.

That is all you need to do. What’s left to do is, to make this whole thing pretty. Are you ready?

Make it look pretty

I will split this part, again, in three parts:

The timer in the upper part
The slider and the chart in the lower part
The background

The timer in the upper part

I added a picture of a timer I’ve made myself. You can download and use it with the whole sample from the PnP Power Apps samples github repository.

You click on Insert > Media > picture to use that picture in your app. Now place it in the middle of the screen (Power Apps helps you with snapping it to the middle if you drag it near the middle).

Now you can remove the border and background from your…

Timer input
The Start Button
The Stop Button
And the Reset Button

In the Timer properties, change these values to transparent:

I did the same for the Start, Stop and Reset Button and placed them in the middle of a circle icon, I’ve added (Insert > Icon > Circle). Place the button over the circle icon and align it in the middle and in the center. You do that by right-clicking on the button and use the align feature. With Reorder you can also place the icon under the button.

Now select the icon and the button and group them (Ctrl+G), so you can place them in the spare holes of the timer picture.

In the end I group the whole timer pictures and all controls and labels to place them easily.

The slider and the chart in the lower part

I set the size and position values of the circles like this, but you can place them wherever you like:

Now for the slider. Set the size and position values like this:

Set the Handle size value to 50.

Set the Rail value to 20.

The four-colored scale behind the timer are four rectangle icons that I placed over each other.

The colors

Now there is one last step, you have to set all the correct colors, And of course, I have another little trick, if you are lazy (like me).

I like to set all the colors I’m going to use in an app in a variable. Then I can set the Fill or color value for each element to the name of the variable and don’t have to remember the hexcode for every color over and over again.

You want to set those variables on the OnStart property of the app itself, so the colors will show when, you start the app.

Here is the function that I used:

Concurrent( Set( Background_color, ColorValue("#f4f4fc") ), Set( Font_color, ColorValue("#484644") ), Set( Element_background, ColorValue("#e2e2f6") ), Set( Element_color, ColorValue("#484644") ), Set( Button_hover_Fill, ColorValue("#464775") ), Set( TheRed, ColorValue("#cc4a31") ), Set( Blurple_lightish, ColorValue("#6264a7") ), Set( Blurple_light, ColorValue("#8b8cc7") ), Set( Blurple_medium, ColorValue("#6264a7") ), Set( Blurple_darkish, ColorValue("#464775") ), Set( Blurple_dark, ColorValue("#33344a") ) )

Here is an overview on variables and their purposes.

Background_color:	the background of the app
Font_color:	Color property of the timer
	Color property of the Duration buttons on the right
	Color property of the scale labels next to the timer
Element_background:	Fill property of the duration buttons on the right
	Fill property of the buttons to start, stop and reset the timer
	ValueFill property of the slider
Element_color	Color property of the icons around the circles
Button_hover_Fill	HoverFill property of the timer
	HoverFill property of the Duration buttons on the right
	HoverFill property of the buttons to start, stop and reset the timer
TheRed	HandleFill property of the slider
	Fill property of the red circle
Blurple_lightish	Fill property from the bottom rectangle behind the slider
Blurple_light	Fill property from the next larger rectangle behind the slider
Blurple_medium	Fill property of the blue circle on top
	Fill property of the three-quarter circle
	Fill property of the half circle
	Fill property of the quarter circle
Blurple_darkish	Fill property from the second largest rectangle behind the slider
Blurple_dark	Fill property from the largest rectangle behind the slider

The result should look a lot like this:

As you can see, I added Fluent UI Icons on the buttons of the timer (if you don’t know how to use them, have a look at this awesome blog from Luise Freese), four lines around the circle to indicate quarters and halves and an arrow to make it look nice.

The lines around the circles are arrow icons.

The round arrow, is an image I uploaded. You can find it in my sample on PnP Power Platform Samples (you can also find the timer image and the icons. Everything’s included).

Next steps

Of course, I have a few more ideas in mind. I’m planning on adding two more steps next:

I would like to set the timer by just typing a duration into it. Or into a label somewhere around. I want to set the timer to any duration I like, instead of choosing from just four buttons. But I have no idea how to do that. Help!
I would like to visualize the circle in the lower half differently. Currently it disappears at three quarters of the elapsed time, at half and at three quarters. I would like to see the circle count down a little bit smoother. But for this I still lack the idea for the implementation

I’d love to hear what you think about it. Do you like it? Do you think it’s going to be helpful for yourself or your business? Do you think I should add a few more things?

SharePoint Framework Community Call Recording – 6th of May, 2021

Vesa Juvonen — Fri, 07 May 2021 15:44:53 GMT

SharePoint Framework Special Interest Group (SIG) bi-weekly community call recording from May 6th is now available from the Microsoft 365 Community YouTube channel at http://aka.ms/m365pnp-videos. You can use SharePoint Framework for building solutions for Microsoft Teams and for SharePoint Online.

Call summary:

Preview the new Microsoft 365 Extensibility look book gallery co-developed by Microsoft Teams and Sharepoint engineering. Download showcase apps, samples, and documentation. Register now for May trainings on Sharing-is-caring New releases in this call – CLI for Microsoft 365 v3.9.0, Reusable SPFx React Controls v3.1.0 and Property Controls v3.1.0 and SharePoint Framework v1.12.1. Also, a look at what’s ahead for SPFx - Microsoft Viva Connections, Teams improvements, tooling updates, and Store modernization.

There were six PnP SPFx samples delivered in last 2 weeks, details below. Great work!

Latest project updates include: (Bold indicates update from previous report 2 weeks ago)

PnP Project	Current version	Release/Status
SharePoint Framework (SPFx)	v1.12.1	GA
PnPjs Client-Side Libraries	v2.4.0	v2.5.0 scheduled for May 14^th
CLI for Microsoft 365	v3.9.0	Upgrading SPFx projects to v1.12.1
Reusable SPFx React Controls	v3.1.0	v2.7.0 (SPFx v1.11), v3.1.0 (SPFx v1.12.1)
Reusable SPFx React Property Controls	v3.1.0	v2.6.0 (SPFx v1.11), v3.1.0 (SPFx v1.12.1)
PnP SPFx Generator	v1.16.0	Angular 11 support
PnP Modern Search	v3.19 and v4.1.0	April and March 20th

The host of this call is Patrick Rodgers (Microsoft) @mediocrebowler. Q&A takes place in chat throughout the call.

Thanks everybody for being part of the Community and helping making things happen. You are absolutely awesome!

Actions:

Reserve date - SharePoint Monthly community call – 11^th of May 8 AM PDT | https://aka.ms/sp-call
Register for Sharing is Caring Events:
- First Time Contributor Session – May 24^th (EMEA, APAC & US friendly times available)
- Community Docs Session – May
- PnP – SPFx Developer Workstation Setup – May 13^th
- PnP SPFx Samples – Solving SPFx version differences using Node Version Manager – May 20^th
- AMA (Ask Me Anything) – Tech Community – May 11^th
- AMA (Ask Me Anything) – Microsoft Graph & MGT - June
- First Time Presenter – May 25^th
- More than Code with VSCode – May 27^th
- Maturity Model Practitioners – May 18^th
- PnP Office Hours – 1:1 session - Register
Download the recurrent invite for this call – https://aka.ms/spdev-spfx-call

Demos:

Adding support to add video with a text to modern pages with this video banner web part – from the Properties Pane, select a video, add banner title text and color it, adjust video brightness and banner height. This elegantly coded modern web part was built with SPFx using standard PnP property pane controls in less than 3 hours. Add the web part to top of your pages. The web part has only one functional component named: VideoBackground.
Building company stories web part for story experience – this web part allows you to add images to a SharePoint List, and renders (cycles) them with related text on page similar to Instagram Stories as a way to engage social media adept employees. Text, images, and author details stored in a SharePoint list. Uses an existing open-source React component called “react-insta-stories” and several Microsoft Graph Toolkit components. Sample in PnP Samples repository.
Building react groups and teams web part for aggregating detailed information for end users – this web part helps logged-in user quickly find their Microsoft Teams and Microsoft 365 Groups sites/content. For selected site, options to go to site, mail, calendar, or Planner. Match site color theme with one click. Filter by public, private or all Groups/Teams. The main React component is MicrosoftGroups.tsx. A brilliant code walk-through by first time presenter Alison Collins.

SPFx extension samples: (https://aka.ms/spfx-extensions)

Print List Item Command View Set - Ari Gunawan | @arigunawan3023

SPFx web part samples: (https://aka.ms/spfx-webparts)

Teams Membership Updater - Nick Brown | @techienickb
OneDrive Finder - André Lage |
Organization Chart - João Mendes |
Remote Event Receiver Manager - Dan Toft | @tanddant
All Microsoft 365 Groups and Teams - Alison Collins and Sam Collins | @Samc148

Thank you for your great work. Samples are often showcased in Demos.

Agenda items:

Latest updates on SharePoint Framework - Vesa Juvonen (Microsoft) | @vesajuvonen – 5:24
PnPjs Client-Side Libraries - Julie Turner (Sympraxis Consulting) | @jfj1997 – 7:49
CLI for Microsoft 365 - Patrick Rodgers (Microsoft) | @mediocrebowler – 9:22
PnP SPFx Controls - Patrick Rodgers (Microsoft) | @mediocrebowler – 10:27
PnP SPFx Generator - Patrick Rodgers (Microsoft) | @mediocrebowler – 11:57
PnP SPFx Samples - Hugo Bernier (Tahoe Ninjas) | @bernierh – 12:18

Demos:

Demo: Adding support to add video with a text to modern pages with this video banner web part – Mohamed Derhalli (BDO Canada) | @MohamedDerhalli | Deck – 13:13
Demo: Building company stories web part for story experience – Luis Mañez (ClearPeople) | @luismanez | Deck – 18:39
Demo: Building react groups and teams web part for aggregating detailed information for end users – Alison Collins & Sam Collins (Coupled Technology) | @samc148 | Deck – 29:39

Resources:

Additional resources around the covered topics and links from the slides.

The presentation used for this community call
Blog post - Introducing React Video Banner Web Part
Repo - Video Banner
Blog post - Community sample: Engage your users with SharePoint stories/reels
Repo - Company Stories Webpart
Alison’s Blog: Graphgod
Repo - All Microsoft 365 Groups and Teams with SPFx
Framework - v1.12.1 npm install –g @microsoft/generator-sharepoint@next
Gallery - Microsoft 365 Extensibility look book gallery
PnP Weekly – Episode 125 with Business Applications MVP guest Sandy Ussia (Lightning Tools ) | @SandyU | video | podcast
Viva Connections https://aka.ms/VivaConnections

General Resources:

CLI for Microsoft 365 v3
CodeTour
Sharing is Caring | aka.ms/sharing-is-caring
Tools - PnP Modern Search v4 | https://aka.ms/pnp-search
M365 PnP site | aka.ms/m365pnp
SharePoint Starter Kit v2
Blog: "A Lap Around Microsoft Graph Toolkit" blog series
New Microsoft 365 Patterns and Practices (PnP) team model with new community leads
Microsoft 365 Community Content (non-Dev docs)
PnP SPFx web part samples
PnP SPFx extension samples
GitHub PnPjs
Tutorials - Getting started with SharePoint Framework v1.10 Tutorials (12 videos)
Tutorials - Getting started with SharePoint Framework v1.10 Extensions (6 videos)
Docs - Tutorials and training material for SharePoint Development
SPFX Training Package
SPFx Web Parts
SPFx Extensions
SPFx Library Components
Documentation - PnPjs v2 documentation
Link - Microsoft 365 developer training
Link - Office 365 Developer Program
Latest documentation on SharePoint Framework
Found an issue with SharePoint Dev? - please let us know at http://aka.ms/spdev-issues
Reusable web part property controls
Reusable react controls for SharePoint Framework solutions
Reusable controls webcast
Office 365 CLI
PnP SPFx Yeoman Generator - Extends the out-of-the-box experience with open-source community capabilities
SharePoint Dev UserVoice - for new feature requests

Other mentioned topics:

Upcoming calls | Recurrent invites:

SharePoint monthly call – May 11^th at 8:00am PDT | https://aka.ms/sp-call
Microsoft Graph call – June 1^st at 8:00 am PDT | https://aka.ms/microsoftgraphcall
Office add-in monthly call – May 12^th at 8:00 am PDT | https://aka.ms/officeaddinscall
M365 General Dev call – May 13^th at 7:00 am PDT | https://aka.ms/m365-dev-sig
Adaptive Cards monthly call – May 13^th at 9:00 am PDT | https://aka.ms/adaptivecardscommunitycall
Microsoft Teams monthly call – May 18^th at 8:00 am PDT | https://aka.ms/microsoftteamscommunitycall
Power Apps monthly call – May 19^th at 8:00 am PDT | https://aka.ms/PowerAppsMonthlyCall
SharePoint Framework call – May 20^th at 7:00 am PDT | https://aka.ms/spdev-spfx-call
Microsoft Identity Platform – May 20^th at 9:00 am PDT | https://aka.ms/IDDevCommunityCalendar
Microsoft Graph call – June 1^st at 8:00 am PDT | https://aka.ms/microsoftgraphcall

SharePoint Framework engineering update from Microsoft
Talk about PnP JavaScript Core libraries
Office 365 CLI Updates
SPFx reusable controls
PnP SPFx Yeoman generator
Share code samples and best practices
Possible engineering asks for the field - input, feedback, and suggestions
Cover any open questions on the client-side development
Demonstrate SharePoint Framework in practice in Microsoft Teams or SharePoint context
You can download a recurrent invite from https://aka.ms/spdev-spfx-call. Welcome and join the discussion!

“Sharing is caring”

Microsoft 365 PnP team, Microsoft - 7th of May 2021

Navigate OneDrive data with Microsoft Graph and Mgt-File-List Beta version

aaclage — Thu, 06 May 2021 21:36:43 GMT

In my process of self learning regarding different technologies such us Azure, SPFX WebPart, React, Microsoft Graph, Node.js, Teams and all other Office 365 services, was surprise to find the current work already made by "Microsoft Graph Toolkit" and associated documentation on how to implemented with Microsoft Graph.

The amount of content and features already develop to integrate multiple platforms are definitely the Key to communicate with Office 365 and became easy to access content without a lot of effort, congrats to all the team.

This sample use SharePoint Online SPFX WebPart with Mgt-File-List and Mgt-File Beta version control to retrieve Shared Libraries as existing in OneDrive, navigate between their folders and use filter by file extension in a simple way using Microsoft Graph API Drive and Site.

Below a draw resuming the custom query's made and what control uses to retrieve associated folders and files from different locations.

How the Mgt-File-List Work

As OneDrive, this control allow to display Shared Files and Folders, for this ItemID (identity of the item to read, can be a folder or a file) has the main role on how to access content. To facilitate this access the control has multiple properties that allows call to content using different options such us: custom query's (file-queries) or pre defined query's (insight-type="shared").

This sample used the parameters SiteID (SharePoint Online Site ID) and ItemID it's the ID of the root Library used on site to store documents and control to display files/folders from that Path and navigate between them.

Solution also uses the property File-List-Query that allows to search files inside shared Libraries.

Where can I found SiteID of a site?

Use the Site Graph API with search query based on hostname to retrieve ID's of sites.

"https://graph.microsoft.com/v1.0/sites?search=*****.sharepoint&$Select=id"List of Site ID's:{ "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#sites(id)", "value": [ { "id": "*******.sharepoint.com,000000-0000-0000-0000-000000,000000-0000-0000-0000-000000" }, { "id": "*******.sharepoint.com,000000-0000-0000-0000-000001,000000-0000-0000-0000-000001" }, ...

How can I found the Root Folder ItemID from Site?

This can be achieved using the SiteID from last query and call the drive root from Site.

https://graph.microsoft.com/v1.0/sites/*****.sharepoint.com,000000-0000-0000-0000-000000,000000-0000-0000-0000-000000/drive/Root?$select=id

This query returns the Item-id of the root Folder that can be used to display content in Control.

"id": "01CM5BY6********************************"

Retrieve OneDrive Root Folder Item-id

OneDrive is managed differently and there is no need of SiteID just make the following Drive call.

https://graph.microsoft.com/v1.0/me/drive/root/?$Select=id

PS: This query's can be tested using the following site.

https://developer.microsoft.com/en-us/graph/graph-explorer

Below some additional Mgt-File-List documentation regarding possible options to use.

This main query will allow to fully explore the Mgt-File-List features that were used in sample "react-oneDrive-finder"

List of Drives Sites
Content List and Breadcrumb
Filter of Items
Filter by file extension
Custom Theme styles

Mgt provider and SharePointProvider

It's important that permissions are given from Microsoft Graph to SPFX WebPart that Mgt-File-List could make the necessary query's.

Access to config/package-solution.json and ensure the following permissions are given on SharePoint package.

"webApiPermissionRequests": [{ "resource": "Microsoft Graph", "scope": "Files.Read" }, { "resource": "Microsoft Graph", "scope": "Files.Read.All" }, { "resource": "Microsoft Graph", "scope": "Sites.Read.All" }]

Access to your code into BaseClientSideWebPart area and ensure SharePoint Provider is loaded with the current security access that Mgt-File-List control and custom graph query's could access to Microsoft Graph content.

import { Providers, SharePointProvider } from '@microsoft/mgt'; ... export default class OneDriveFinderWebPart extends BaseClientSideWebPart<IOneDriveFinderWebPartProps> { protected onInit() { Providers.globalProvider = new SharePointProvider(this.context); return super.onInit(); } ...

After defining the provider you should be able to include control and use parameter's id without permissions errors.

import { FileList } from '@microsoft/mgt-react'; ... <FileList siteId={this._siteID} itemId={this._itemID} itemClick={this.manageFolder} ></FileList>

Breadcrumb Navigation

It's also possible to use Breadcrumb to include the path of folders where user is situated in the Library.

This can be achieve capturing the itemID of Folder listed in Mgt-File-List, using the event "itemClick={(e)=>{ console.log(e.details);}".

More information can be found on Mgt-File-List documentation or by sample "react-onedrive-finder".

Filtering file extensions

The Mgt-File-List property fileExtensions allows to filter documents by file extension, this can be very handy when dealing with large amounts of documents.

Code below shows how can be implemented a multiple file extensions filter.

Styling with Mgt-File-List

The Mgt-File-List includes Light and Dark theme but you can also provide your custom styles.

To create your own custom style look and feel you can use css elements to customize Mgt-File-List.

Below some of the options available and shared in FileList Stories of the Beta Version.

.mgtfilelist { --file-list-background-color: #eff6fc; --file-item-background-color--hover: #deecf9; --file-item-background-color--active: #c7e0f4; --file-list-border: 0px solid #white; --file-list-box-shadow: none; --file-list-padding: 0px; --file-list-margin: 0; --file-item-border-radius: 0px; --file-item-margin: 0px 0px; --file-item-border-top: 1px solid #dddddd; --file-item-border-left: 1px solid #dddddd; --file-item-border-right: 1px solid #dddddd; --file-item-border-bottom: 1px solid #dddddd; --show-more-button-background-color: #fef8dd; --show-more-button-background-color--hover: #ffe7c7; --show-more-button-font-size: 14px; --show-more-button-padding: 16px; --show-more-button-border-bottom-right-radius: 12px; --show-more-button-border-bottom-left-radius: 12px; }

Search in Shared Libraries

The control by the property "fileListQuery" also allow the usage Graph Drive Search method to find Items in the Drive. Below an sample on how you could use a dynamic to search items in Drives.

//Make query on Shared Library or OneDrive Library const checkSearchDrive = (SearchQuery: string) => { if (this.state.siteID != "") { this.setState({ searchDrive: "/sites/" + this.state.siteID + "/drive/root/search(q='" + SearchQuery + "')" }); } else { this.setState({ searchDrive: "/me/drive/root/search(q='" + SearchQuery + "')" }); } }; //Search Box for Shared Library <SearchBox placeholder="Search Drive" onSearch={checkSearchDrive} onClear={checkClear} /> //Display search content {(this.state.searchDrive != "") && <FileList fileListQuery={searchDrive} ></FileList> }

Final sample solution

Below the final result of the configuration of Mgt-File-List react controls:

Solution can be found in the SharePoint Framework Client-Side Web Part Samples - OneDrive finder:

https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-onedrive-finder

PS: Solution will be updated with release version when Mgt-File-List is available by the Microsoft Graph Toolkit.

How to start with Microsoft Graph Toolkit and SharePoint Online

There is a very good articles on how to start for example, Build a SharePoint web part with the Microsoft Graph Toolkit

To use the Mgt-File-List control in Beta version please use the following packages.

npm i /mgt@next npm i /mgt-react@next

PS: The Microsoft Graph Toolkit Team made available access to Beta version of Mgt-File-List and react. Final version package can be monitor and accessible in microsoft-graph-toolkit.

I will hope this article could help you onboard when the Mgt-File-List control becomes officially available.

Support Documentation:

Introducing React Video Banner Web Part

derhallim — Thu, 06 May 2021 11:18:26 GMT

In this post, we will see how easy it is to build a cool looking video banner web part using SPFx with the help of PnP reusable property pane controls. First of all, the requirements:

The web part should look like a banner on top of pages, with a video playing
Ability to change the overlay text on this video
Control the banner area size

This is what the PnP React Video Banner web part offers, once you add the web part to your page, you will be able to select a video (using the file picker control from the PnP Reusable Property Pane Controls), you will be able to modify the text overlay and its color, control the height of the video area and lastly (at least for now) modify the brightness:

These settings would provide you with a web part that looks like this:

Now let's have a look at the code itself which is pretty simple. The file structure can be seen below:

The web part has only one functional component named: VideoBackground that accepts the following properties as defined in the IVideoBackgroundProps.ts file: wpTitle (string), videoUrl (string), labelColor (string), brightness (number), height (number).

The video url and the label color are set with the help of PnP Property Pane Controls as shown below:

Once the properties are setup on the VideoBackgroundWebPart.ts file, we pass them to the VideoBackground.tsx component.

All good so far? Now in our functional component, we have an HTML video control where the source of the video is set to the videoUrl prop we pass and we play with the CSS filter prop to set the brightness by adding the value concatenated with % as we need a brightness percentage:

Notice the ref attribute on the video control? The reason we have it is that we want to refresh the video whenever we change the video url. By default, when changing the properties, all values will be reflected except for the video url, it needs to be explicitly refreshed on the video control. So we get a reference to the video control using React's ref, where we define the "vRef" value on the functional component itself.

We then use React's useEffect to check if the video url has changed or not, if it has changed, we call the load() function on the video reference itself:

Some notable points about the CSS used is the div that's available just before the video control, it's aligned using an absolute position with a display of flex to position the h1 element inside of it. The video element itself has a CSS property object-fit: cover.

As demonstrated, with SPFx and the help of PnP Reusable Property Pane controls, building web parts using modern development techniques is very easy and isn't time consuming as some may think! Source code is available on Github along with other awesome web parts by the community, for more information about all the PnP offerings, checkout https://aka.ms/m365pnp

#SharingIsCaring

Using Power Automate And Graph API To Manage External Access To Teams

LinkeD365 — Thu, 06 May 2021 10:50:32 GMT

Matt Collins Jones and I presented API’s – The most powerful tool, anyone can use! for D365 UG and Swiss Power Saturday recently and I thought it would be good to share the Cloud Flow I created to automate the onboarding of external users to a Microsoft Team.

This is usually an admin driven activity – A team owner will have to type in the email address for each guest they want to add, rather than something you can push to external users and allow them to request access.

By using the Graph API via a Custom Connector, Microsoft Forms and Power Automate, we are able to realise this quickly and save a lot of time and effort in the manual process.

Also, I have been lucky to have this solution accepted as part of the samples in the Microsoft Patterns And Practices initiative, so the Flow, Custom Connector and implementation instructions are available in GitHub here.

Getting Hands-On With Graph

The main part of this flow is numerous calls to the Graph API. The Graph API is Microsoft’s standard endpoint to expose and interact with data relevant to your tenant. It includes Microsoft 365 (such as Teams, Exchange, SharePoint, Workspace Analytics), Enterprise and Mobility and even Windows 10 activities and devices. It really should be seen as a single stop shop for anything and everything in your tenant. The only thing it doesn’t expose is D365 data.

There is a Graph connector already available in Power Automate, but it is very limited to Security considerations. Thankfully, the rest of the Graph API abilities are available, but you have to go via a custom connector. You could call these directly via an HTTP request action, but by wrapping the Graph API in a connector, you are enabling other members of your organisation to re-use the connector and security you establish.

Microsoft also allows you to “play” with the Graph API as well, via the Graph Explorer. This web interface shows you all the sample calls you can make and also what permissions you require to call it and allows you to set up a call without using Power Automate or configuring a connector. It really should be the starting point for any Graph Customer Connector.

If things go wrong, it is usually around the permissions. Within the Graph Explorer you can consent to these extra permissions on the fly, but more importantly, tells you what you need to configure in the permissions of your App registration to allow your connector the same access.

Granting Permissions

Now that we understand what permissions that are needed to get at the actions required, let’s jump in and create an Azure App Registration. This allows you to grant rights to a particular application, which presents a client secret and App ID as part of the request. By doing this registration, you establish trust between your app (Custom Connector in our case) and your tenant.

Navigate to https://aad.portal.azure.com and log in. Select Azure Active Directory then App registrations. Select New, give it an appropriate name then hit Register.

In the next screen, record the Application Id, going to need it later. On the left, select Certificates & secrets

Select New client secret give it a name & expiry date and select Save.

Ensure you copy the Value here, you will only be able to see this for a short while, if you navigate away it will be gone. Not a big deal, just recreate the client secret, but you will need it later. Now select API permissions. This will list what permissions this registration has, and by inference, the caller using the client secret/application id.

Select the Add a permission button.

This presents a choice of which API to expose. The first on the list is Microsoft Graph, the one we want.

Select Delegated Permissions (Custom connectors doesn't support Application permissions yet, will run in the context of the person who runs the flow, so use an admin/system account) then type in the permission you want, listed here.

Directory.ReadWrite.All
User.Invite.All
User.ReadWrite.All

Select Add Permissions to return you to the Configured permissions screen, then select Grant Admin consent button. This shortcuts and pre-approves the app.

Leave this tab open and let’s go and define our custom connector.

Defining The Custom Connector

Jan Bakker has done an excellent job of walking you through this, here. His article goes into a lot of detail, so I will just take you through what is needed for this project.

In make.powerapps.com, select the appropriate environment and chose Custom Connectors under Data. Then select New custom connector. You can import from various sources, but we want to create from blank, give it a name then fill out the next page.

On the next screen, there are four tabs, which we need to step through. First the General Tab.

Other stuff is nice to have and you should document your work. Ensure Scheme is HTTPS and Host/Base URL are populated.

Host – graph.microsoft.com
Base URL – /v1.0

Select the Security Tab next, Authentication type is OAuth 2.0. You should be presented with the below screen.

Now, this is where we need to use the values you saved (you did save them?) when you were registering your app up here. Client Id is populated with the Application (client) ID, the Client secret is populated with the Value from the Client Secret grid. Login URL will be populated for you. The Resource URL value should be https://graph.microsoft.com.Select Create Connector now, as you need the Redirect URL, created when you create the connector to put back into your App registration to complete the security process.

I think that this is now standard, but just in case, copy the Redirect URL and go back to your App Registration in Azure AD. Click on the link highlighted.

Select Add a platform then chose Web. Enter the Redirect URL from the Custom Connector. Now we are ready to define the actions for our connector.

Creating the Actions

For our flow, we need 3 actions, Get the owners of a team, Get a user and Invite a User. This is where Graph Explorer and Postman help. You need to establish what you are sending and what you expect back for each action. For example, lets walk through the Get Owners of a team.

Select New Action and Populate General section. The Operation ID needs to be unique and is what appears within Power Automate when you select it.

I usually use the same for each, but be creative and descriptive. Select Import from sample then use the url below as the URL and select Get as the Verb.

URL – https://graph.microsoft.com/v1.0/groups/{teamId}/owners

By placing teamid in curly brackets { } you denote to the custom connector you want to use a parameter in that URL. You can call https://graph.microsoft.com/v1.0/groups/{teamId} (without the /owners) but that will return the detail from the group. In this I want get associated data, hence the /owners.

Select Import. You are returned to the definition screen, where we can see that the request has been populated for us.

We are ready to test our Get Owners now. Update the connector once more then head over to the Test tab. You will have to create a connection if not already done, which prompts you to establish who you are running the connector under (only for testing). Then supply a team id. These can be found by using Graph Explorer to find all teams. Hit the Test operation and if everything is working you will get a 200 response with some JSON in a body showing you all the information about the owners.

To just define the others

Get User

Verb: Get, URL: https://graph.microsoft.com/v1.0/users?$filter=

Invite User

Verb: Put, URL: https://graph.microsoft.com/v1.0/invitations, Body is below, as you need to define a new invite, with the required parameters. The data doesn’t matter, just the parameters that you need to pass.

{ "invitedUserEmailAddress": "emailaddress", "inviteRedirectUrl": "https://myapp.contoso.com", "invitedUserDisplayName": "Testy McTest", "sendInvitationMessage": true }

Make sure you test all your actions and lets move on to the Form.

Microsoft Form To Capture Information

Not going to dwell here, as others are doing a much better job at describing Forms. Basically, a simple form to define First and Last name, the email address and a choice field to define which team the user wants access to.

The teams list will have to be maintained to those that you want the public to be able to request access to.

Finally, lets take a look at the flow.

Power Automate Definition

This Flow is triggered by a new response being submitted against the Form defined above. Next, get the response details.

Next, retrieve all the Teams in your environment. This will return a JSON object which defines an array of Team definitions. We need to filter that to the one the user selected so that we can get the team id.

To do this, I use the Filter Array action, pass in the output from the List Teams and ensure we select where team Name is equal to the team selected (the Which Team? field in my case).

Next, is a compose statement. I do that just to simplify the way the flow works, as the return of filter array is an array, and I just want the first one.

body('Filter_array')[0]?['id']

Next, lets get the Owners of the team selected, using the Id just retrieved. This is the first time using the Custom Connector, it is available under the Custom Tab.

Selecting the connector will show the actions or triggers available.

The parameters are those that were defined in the Custom connector, passing in the output from the compose above.

Now, the response back from Get Owners is a JSON object, so next, Parse the JSON so there is a list of JSON objects for the flow to use. All that is needed in the approval that comes next is the email address(es) of the return from the owners call. But the approval needs a semi-colon separated list of emails. To achieve this, firstly use a Select to just return the email address from the JSON object, then join the output to that with a semi colon.

Next, start an approval. This is populated to let the owner know who has asked for access to the team and which team.

Check whether the response is positive. If this was for production, I would probably send an email to the requesting user to let them know that they were denied access. You could also use the response written in the rejection.

In the Yes path, call the Custom connector again to check if the user is already a part of your organisation as a guest user. As the parameter is expecting a query, use the expression below

mail eq ‘Email Parameter from the Form response’

mail eq 'Email Parameter from the Form response'

Next, check the length of the returned object from the custom connector. This basically checks if the user already belongs to your environment.

length(outputs('GetUser')?['body/value'])

If there is a value in the return, use the return to invite the user to the team.

The User id is returned by using the expression below

body('GetUser')?['value'][0]?['id']

On the negative side, firstly invite the user to your organisation by using the final action of the custom connector.

And finally, use the response from your custom connector, the invited user to the team.

That's it! There is a lot of configuration here, but you can see how you can extend your usage of Power Automate to automate a function usually confined to manual work by the team owner.

This post was originally published on LinkeD365.blog

Simple reminders for any Teams Channel or Chat message

z3019494 — Thu, 06 May 2021 11:43:33 GMT

Forgetting to take action on a message, or where that message was?

For busy people who have their lives invested in Microsoft Teams, whether collaborating with colleagues in Team Channels or using the Chat functionality, it's easy to forget:

To take action or reply to a message
The location of where that message is! Is it in a Chat, or a Team Channel? How far up do I have to scroll?

Outlook's solution: a well trodden path for many

Flags in Outlook have been the bridge to emails and task management

In Outlook, there are "flags" which can be set to remind yourself to take action for a particular email.

However, this functionality is missing from Teams. Even if you are a well seasoned ToDo and Planner user, you would still have to use the Copy Link feature and paste that into the ToDo/Planner task, which can be quite tedious.

Copy link to a Teams Channel message

Plus I entering a phase where I was forgetting that I had to respond to messages. Sometimes I ended up talking to Google (I use an Android phone, so you might be talking to Siri) to remind myself, but that still doesn't take you straight back to the original message with a single click - you still had to do a lot of navigation before you arrived at the message you were supposed to take action on.

My poor colleagues were also getting flooded with Teams messages. If they were diligent and cleared their activity bell notifications, they would potentially lose track of a visual reminder that they need to prompt them to action on a message.

So what if you just needed a simple and effective visual reminder, either at some hours/minutes down the track or at a specific time?

A Flow, some delay, and four Adaptive Cards

In comes Power Automate with a few adaptive cards to the rescue - this flow will generate a reminder via the Flow bot at a certain number of hours/minutes, or at a specified time to remind you to take action for a message!

The reminder card we wish to send ourselves

The beauty of this Flow is that it will give you one-click access back to the conversation thread within the team, or back to the chat with a person or a group of people.

So in the blog post below, the Flow will be explained in greater detail, and some caveats highlighted for anyone wanting to pursue this quick reminder flow!

Note: this was partially inspired by Microsoft's own template that you can create directly from Power Automate, but extends it to bring more flexibility to the reminder time, and also bring a far more visual experience via adaptive cards rather than just the Flow bot.

Inspired by Microsoft

When I first saw the template provided by Microsoft, I thought: this is nice, but it's a bit too elementary with the fixed timeframes from the choice radio buttons:

Microsoft's own sample Flow

...is perhaps a bit too restrictive

However, that was definitely a starting point. The sample Flow used an adaptive card (with some Input.Choice options) and a Delay action. Why not take this further?

Ingredients

Here's the "ingredients" needed for the flow to allow ourselves to set a reminder at a particular hour/minute offset from now OR at a specific time:

One to get user input regarding when they'd like to be reminded

The reminder setting card can accept an hour/minute offset or absolute time as input
One for the reminder itself:

The reminder card itself, with links to the original message and chat with message author
Two other cards which are for catching errors:
Cards reminding users of input error

The Flow

1. Data entry card

So the concept is basically taken from what Microsoft provided, but here we extend the adaptive card by using an Action.ToggleVisibility button to show and hide parts of a card: the relative time entry and the absolute time entry containers, in blue and green respectively:

The reminder setting card, with an initially invisible container

The Change reminder type button within the gray container is Action.ToggleVisibility button that you can add from the card elements bar on the left of the adaptive card designer screen. The JSON code looks like this:

The action button targets the section-hours (blue) and section-absolute-time (green) containers - i.e. when pressed, turns the visibility of section-hours off and section-absolute-time (as the respective ids of the containers) on, and vice versa. The blue and green containers are never on at the same time.

The ID and initial visibility of the blue container

For the Change reminder type button to turn the blue and green containers on and off, the Initially visible checkbox must be

Checked for the blue container
Unchecked for the green container:

The green container should initially be invisible

Within the containers are also ColumnSets to house the fields side by side, just to make it look nice.

Use the ColumnSet to place fields and labels (as TextBlock) adjacent to each other

The fields also need TextBlocks above them as their labels (until we get Adaptive Cards v1.3 in Teams), as well as having some of the parameters set properly:

Set some restrictions on the fields, and place TextBlocks above them as labels

Finally, the orange container just contains what to remind yourself of, and has an Input.ChoiceSet to provide the dropdown menu:

Input.ChoiceSet for dropdown menu

Below is the complete JSON code for the adaptive card that captures the user input:

{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.2", "body": [ { "type": "Container", "bleed": true, "style": "warning", "items": [ { "type": "ColumnSet", "columns": [ { "width": "75px", "type": "Column", "items": [ { "type": "Image", "url": "<your_url_here>/schedule.png" } ] }, { "width": "stretch", "type": "Column", "items": [ { "type": "TextBlock", "weight": "Bolder", "size": "Large", "text": "**Set myself a reminder about this message**", "color": "Attention", "fontType": "Default", "wrap": true } ], "verticalContentAlignment": "Center" } ] } ] }, { "type": "TextBlock", "isSubtle": true, "wrap": true, "text": "Fill out this card in entirety, and you'll be reminded by the Flow bot after the time selected." }, { "type": "Container", "separator": true, "style": "emphasis", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.ToggleVisibility", "title": "Change reminder type", "targetElements": [ "section-hours", "section-absolute-time" ] } ], "spacing": "None" } ], "verticalContentAlignment": "Center" }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Click on Change reminder type to select whether to remind myself at a specific time, or after a certain number of hours from now.", "wrap": true, "color": "Accent", "weight": "Bolder" } ], "verticalContentAlignment": "Center" } ] } ] }, { "type": "Container", "style": "accent", "items": [ { "type": "TextBlock", "wrap": true, "color": "Accent", "weight": "Bolder", "text": "Remind myself after" }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Hours", "wrap": true, "maxLines": 0, "spacing": "None", "isSubtle": true, "size": "Small" }, { "type": "Input.Number", "placeholder": "Type in the delay in hours", "id": "remind-hours-later", "spacing": "None", "min": 0, "max": 670 } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Minutes", "wrap": true, "size": "Small" }, { "type": "Input.Number", "placeholder": "Type in the delay in minutes", "spacing": "None", "min": 1, "max": 59, "id": "remind-minutes-later" } ] } ] }, { "type": "TextBlock", "wrap": true, "text": "Hours and minutes can contain decimals, e.g. **1.2 hours = 1 hour 12 minutes**", "spacing": "None", "size": "Small" } ], "id": "section-hours" }, { "type": "Container", "style": "good", "items": [ { "type": "TextBlock", "wrap": true, "color": "Accent", "weight": "Bolder", "text": "Remind myself at this time" }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Date", "wrap": true, "maxLines": 0, "spacing": "None", "isSubtle": true, "size": "Small" }, { "type": "Input.Date", "id": "remind-date", "spacing": "None" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Time", "wrap": true, "maxLines": 0, "spacing": "None", "isSubtle": true, "size": "Small" }, { "type": "Input.Time", "id": "remind-time", "spacing": "None" } ] } ] }, { "type": "TextBlock", "text": "Ensure that \n- Both **Date** and **Time** are selected\n- Date and time are no later than 30 days of the current time", "wrap": true, "size": "Small", "spacing": "None" } ], "id": "section-absolute-time", "isVisible": false }, { "type": "Container", "style": "attention", "items": [ { "type": "TextBlock", "wrap": true, "color": "Accent", "weight": "Bolder", "text": "Remind myself to" }, { "type": "Input.ChoiceSet", "choices": [ { "title": "Reply to the message", "value": "message-reply" }, { "title": "Get something done", "value": "message-get-something-done" } ], "placeholder": "Select the action to be reminded of", "spacing": "None", "id": "message-subsequent-action" } ] } ] }

2. Reminder card groundwork

After some experimentation with the For a selected message trigger for Teams, it seems that there is a good amount of dynamic content that would be useful for the reminder card:

For a selected (Teams) message provides a lot of useful dynamic content

We will return to this card after looking at the upcoming sections after having a look at the actions which the flow will take.

3. Variables required

Some variables are required to hold hold some of the data:

Some variables are required to hold the time information

Then we get the user profiles of the message sender and the person who initiated the flow: interestingly, only the AAD ID is available as dynamic content from the trigger, but thankfully the Get user profile (V2) action is able to handle this and return all of the information required:

4. Check for Chat or Channel conversation message and what action to take

We then build the Original message information block by testing whether the message came from a private chat, or from a Team channel with a simple check of whether the team dynamic content is null or not (input null as an expression, not dynamic content):

Check whether the message is in a Chat or Channel, and building the adaptive card to suit the occasion

If the message is from a Team Channel, then the List channels action is run, and a filter applied so that only the Channel Name is extracted out of the channels of the team.
- Channel Id is from the List channels action
- Channel ID (note the case sensitivity!) is from the From a selected message action.
The JSON card blocks are then saved in the TeamChannelBrick variable.

The ActionToTake variable is also populated after checking for whether it's been left blank, or one of the selections have been made:

Checking whether the ActionToTake choice has been set, and building the adaptive card brick to suit the input

5. Time calculations, data types & error handling

The difficult part is this bit: making sure the user's inputs for hours/minutes, or absolute time is valid!

We quickly check whether either date or time entered is null or not, and if so, the user probably has inputted the hour/minute offset instead since that is the default:

Checking to see whether absolute or relative time delay has been inputted

In the case where the user enters the hours/minutes offset to be reminded:

Check whether the Hours entered is blank or not (note that there's a very subtle difference between blank and null!). If so, set the HoursToDelay variable to a "0" or simply use the hours inputted.
Check whether the Minutes entered is blank or not. If so, set the MinutesToDelay variable to a "0" or simply use the hours inputted.

Finally, the TotalTimeDelay is set to the following expression:

mul(add(mul(variables('HoursToDelay'),60),variables('MinutesToDelay')),60)

e.g.

multiply the number of hours by 60 to obtain the number of minutes
add that to the number of minutes to delay by
multiply the final result up by another 60 to obtain the number of seconds

In the case where the user specifies an absolute time to be reminded

A lot more string processing is required!

Compose - date selected: compose the date/time that the user selected, into ISO8601 format. The caveat here: you need 7 decimal places after the seconds!
Compose - ticks of date to delay until: find the number of ticks from the previous compose action:
```
ticks(outputs('Compose_-_date_selected'))
```
Convert time zone - to UTC+10 (where I live): change this to wherever you are in the world.
Compose - ticks of current time: get the current time's ticks
Compose - difference in ticks: subtract the ticks of current time (4) from the ticks of the selected time (1).
Then check for whether the selected date is before the current time by seeing whether (5) is a negative number of not in the Condition - check selected date isn't on or before reminder date
Then do some final checks for whether the number of seconds falls on "0" by
1. Converting the ticks into minutes/seconds (Compose - ticks to seconds)
  
  The TotalTimeToDelay variable in this instance, should contain this expression:
```
add(0,div(outputs('Compose_-_difference_in_ticks'),10000000))
```
2. Checking whether there's remnant seconds (by looking for modulo 60) in Compose - modulo seconds action. If the number of seconds to delay by, falls on "0" then just add 1 more second to it in case the user enters a time which is just less than 1 minute as the div formula will only work with integers.
  
  The TotalTimeToDelay variable in this instance, becomes this expression instead:
```
add(1,div(outputs('Compose_-_difference_in_ticks'),10000000))
```
  The reason for this check is that the Delay action, is very fussy. It only takes integers, and can't cope with an input of 0 (you'd think that an input of "0" into the Delay action would just cause it to continue full steam ahead instead of sitting there and waiting!)

Absolute time calculations: finding out the TotalTimeToDelay

One final major condition block: check to see if the user has set a date over 28 days (or 720 hours)

We check the TotalTimeToDelay variable and see how many days it has racked up:

div(int(variables('TotalTimeToDelay')),86400)

This check is needed as Power Automate will time out after 30 days. But let's just be a little more conservative and set that at 28 days, and throw an error if so. This will ensure no reminders (especially those over 30 days) are quietly dumped without the user's knowledge.

Double checking that the user has entered a date no further than 28 days out to ensure the flow doesn't time out

The adaptive card that reports the error if a user enters a date that is greater than 28 days:

6. The Delay vs Delay Until action

Setting the delay

We are now ready to delay the flow!

Initially there was a consideration to use the Delay Until action if the user enters an absolute date/time, until a major stumbling block was encountered: time zones!

Power Automate basically works in UTC or UTC-8, whereas I live in UTC+10. Having said that, the documentation for the Delay Until action is quite scant, and it doesn't seem to take into consideration what timezone you are in. Hence all of the effort to subtract ticks and calculate remnant seconds etc when the user selects the date/time option.

7. Oops - don't forget the characters that adaptive cards dislike!

Two more Compose actions are required before we pop the reminder card out, namely:

Unfortunately if you wanted to insert the Plain Text Message dynamic content into the replace formula, you're almost out of luck. Here's where Compose comes to the rescue. The Compose - PTM without quotes action has this in its formula:

replace(replace(outputs('Compose_-_Plain_Text_Message'),'" ',''),' "','')

which replaces every instance of space-double-quote and double-quote-space with empty strings, in order to not allow the reminder card to spit the dummy with any double quotation marks.

8. The reminder card's code

With the TotalChannelBlock variable inserted into the appropriate location so that the correct information about the message is displayed to the user who initiated the flow:

...and a summary at the bottom of the card (pop the Show advanced options open!) to ensure a summary is sent - especially useful if your smartwatch notifications rely on a summary of sorts:

Thanks for reading! Hope you've learned loads yourself!

Re: Community sample: Engage your users with SharePoint stories/reels

Mafyou — Wed, 05 May 2021 17:09:36 GMT

Re: Community sample: Engage your users with SharePoint stories/reels

Luise Freese — Wed, 05 May 2021 17:07:45 GMT

I did not implement this, yet. But I like the sample and how clear described his solution. From my point of view, this sample is a perfect example to showcase on how to use the person component of Microsoft Graph Toolkit to provide a web part with which you can create visually appealing, professional looking content in SharePoint.

Re: Community sample: Engage your users with SharePoint stories/reels

Mafyou — Wed, 05 May 2021 16:52:08 GMT

, have you try? Why do you say it's lovely? It's not. It's an improvement for a better collaboration and it's in the current flow of what people want to use.

Can you explain your point? Thanks.

Re: Community sample: Engage your users with SharePoint stories/reels

Gabriel Karawani — Wed, 05 May 2021 09:51:19 GMT

Nice work as always !!!

Re: Community sample: Engage your users with SharePoint stories/reels

Luise Freese — Wed, 05 May 2021 08:52:50 GMT

love this sample! Thank you for sharing! You rock :rocket:

Re: How to beautify your Power Apps

Luise Freese — Wed, 05 May 2021 08:51:41 GMT

this made my day! Thank you!!

How to to get all site collections with their sub webs using PnP PowerShell?

ChandaniPrajapati — Wed, 05 May 2021 08:32:49 GMT

Sometimes we have a business requirement to get site collections with all the sub-webs so we can achieve the solution easily using PnP Powershell.

Let's see step-by-step implementation:

Implementation

Open Windows Powershell ISE
Create a new file and write a script

Now we will see all the steps which we required to achieve the solution:

1. We will initialize the admin site URL, username, and password in the global variables.

2. Then we will create a Login function to connect the O365 SharePoint Admin site.

3. Create a function to get all site collections and all the sub-webs

So in the end, our script will be like this,

$SiteURL = "https://domain-admin.sharepoint.com/" $UserName = "UserName@domain.onmicrosoft.com" $Password = "********" $SecureStringPwd = $Password | ConvertTo-SecureString -AsPlainText -Force $Creds = New-Object System.Management.Automation.PSCredential -ArgumentList $UserName, $SecureStringPwd Function Login { [cmdletbinding()] param([parameter(Mandatory = $true, ValueFromPipeline = $true)] $Creds) Write-Host "Connecting to Tenant Admin Site '$($SiteURL)'" Connect-PnPOnline -Url $SiteURL -Credentials $creds Write-Host "Connection Successfull" } Function AllSiteCollAndSubWebs() { Login($Creds) $TenantSites = (Get-PnPTenantSite) | Select Title, Url ForEach ( $TenantSite in $TenantSites) { Connect-PnPOnline -Url $TenantSite.Url -Credentials $Creds Write-Host $TenantSite.Title $TenantSite.Url $subwebs = Get-PnPSubWebs -Recurse | Select Title, Url foreach ($subweb in $subwebs) { Connect-PNPonline -Url $subweb.Url -Credentials $Creds Write-Host $subweb.Title $subweb.Url } } } AllSiteCollAndSubWebs

Output:

Summary:

In this article, we have seen how to get all the site collections and their subwebs using pnp Powershell.

Hope this helps! If it is helpful to you then share it with others.

Sharing is caring!

Community sample: Engage your users with SharePoint stories/reels

Luis Mañez — Wed, 05 May 2021 08:10:54 GMT

Would not be cool to engage your Modern Workplace users with content appearing like in your favourite social network? In my latest community sample, I built an SPFx webpart to do so. Here is how I did it, but first, this is how it looks:

SharePoint stories webpart

What we need first, is a SharePoint list that will contain all the “story images”, with the author of that story, and some Text, if we want to show the “show more” option. This list will be something like this:

SP List

Now it is time to code our SPFx webpart.

Before starting, for all the UI thing, I am using an existing open-source React component called “react-insta-stories”, that you can find in its GitHub repository. This component does most of the hard work with the image slide and so on. In its most simple way, the component just needs an array of images:

react package

But you can also specify an array of Story objects, where a Story can have the following properties:

Story object properties

Now that we know how to use the Stories component, the webpart functionality is quite easy. We just need to get the Stories information from the SharePoint list, and compose the proper Stories array.

As usual when developing SPFx webparts, the webpart itself, just loads a React component, passing the information that we need, in this case, for simplicity, I am passing the entire WebPartContext object, but try to avoid this practice, and only pass what you need.

This is the main code in the Render webpart method:

SPFx Webpart render

Once in the main React component, we are calling the SharePoint REST API to get the sotries from the list. To do so, I am using the endpoint:

/_api/web/lists/GetByTitle('Stories')/RenderListDataAsStream

As this endpoint is given me the Image URL in the format that I need (but pretty sure you can do the same with other endpoints, or using the PnP JS library). The code to do so is:

componentDidMount

The method “_getStoryFromListItem” will create a Story object for the “react-insta-stories” component, and here we have an interesting challenge. The Story object, has a Header property, aimed to render the Story author information, so you just provide the profile image, and a couple of texts for heading and subheading. Although we could get the Author profile image, username and email using Graph API, it is going to be much easier to make use of the MS Graph Toolkit library, and use the MGT Person component. In order to render the GMT Person component, we cannot use the Story Header property, however, the Story object allow us to specify a custom render function for the entire Story, and in that function, we can use the Person component. This is the relevant code to achieve it:

Story custom render function

The storyRenderer function is the one responsible for rendering the Story, and there, we use the GMT Person component. As you can see in the code above, we also use a React High Order Component called WithSeeMore, this component is from the react-insta-stories library and is the way to load a specific text when the “See more” link is clicked in the Story. So, if the list item has the Content field filled, we set the “seeMore” property of the Story object. This property is again a function, so you can customize how the content is rendered.

And that´s all!... you can get the full code sample in the PnP GitHub repository

Cheers!

Re: What is a “Dev Tenant” and why would you want one?

Nicholas Ang — Wed, 05 May 2021 06:07:48 GMT

Been using the Dev Tenants for a long time here to test new features and upcoming functionalities however it has its limitation sadly in the perspective trying to do/show newer stuff like SharePoint Syntex and Viva Topics. I had multiple conversation deadlock with business leaders trying to introduce those without the ability to show the potentials in the dev tenants.

Re: How to beautify your Power Apps

sagisim — Wed, 05 May 2021 02:40:10 GMT

Yes, help me a lot, i got everything up and running properly now, thank you very much

What's up with Markdown?

Bob German — Tue, 04 May 2021 23:31:24 GMT

Perhaps you've noticed a technology called Markdown that's been showing up in a lot of web sites and apps lately. This article will explain Markdown and help you get started reading and writing it.

Markdown is a simple way to format text using ordinary punctuation marks, and it's very useful in Microsoft 365. For example, Microsoft Teams supports markdown formatting in chat messages and SharePoint has a Markdown web part. Adaptive Cards support Markdown as well, as do Power Automate approvals. For the bot builders among us, Bot Composer language generation and QnA Maker both support markdown as well. And what's at the top level of nearly every Github repo? You guessed it, a markdown file called README.md.

Designed to be intuitive

Imagine you're texting someone and all you have to work with is letters, numbers, and a few punctuation marks. If you want to get their attention, you might use **asterisks**, right? If you've ever done that, then you were already using Markdown! Double asterisks make the text bold.

Now imagine you're replying to an email and want to quote what someone said earlier in the thread. Many people use a little greater-than sign like this:

Parker said,
> Sharing is caring

Guess what, that's Markdown too! When it's displayed, it looks like this:

Parker said,

Sharing is caring

Did you ever make a little table with just text characters, like this?

Alpha | Beta | Gamma
------|------|------
  1   |   2  |  3

If so, you already know how to make a table in Markdown!

Alpha	Beta	Gamma
1	2	3

Markdown was designed to be intuitive. Where possible, it uses the formatting clues people type naturally. So you can type something _in italics_ on the screen and it actually appears in italics.

In all cases you're starting with plain text - the stuff that comes out of your keyboard and is edited with Notepad or Visual Studio Code - into something richer. (Spoiler alert: it's HTML.)

What about emojis? Markdown neither helps nor blocks emojis, they're just characters. If your application can handle emojis, you can certainly include them in your markdown.

Commonly used Markdown

Markdown isn't a formal standard, and a lot of variations have emerged. It all started at Daring Fireball; most implementations are faithful to the original but many have added their own features. For example, the SharePoint Markdown Web Part uses the "Marked" syntax; if you're creating a README.md file for use in Github, you'll want to use Github Flavored Markdown (GFM).

This article will stick to the most commonly used features that are widely supported. Each of the following sections shows an example of some simple Markdown followed by the formatted result.

1. Emphasizing Text

Markdown:

You can surround text with *single asterisks* or _single underscores_ to emphasize it a little bit;
this usually formatted using italics.

You can surround text with **double asterisks** or __double underscores__ to emphasize it more strongly;
this is usually formatted using bold text.

Result:

You can surround text with single asterisks or single underscores to emphasize it a little bit; this usually formatted using italics.

You can surround text with double asterisks or double underscores to emphasize it more strongly; this is usually formatted using bold text.

2. Headings

You can make headings using by putting several = (for a level 1 heading) or - signs (for a level 2 heading) in the line below your heading text.

Markdown:

My Heading
---

Result:

My Heading

You can also make headings with one or more hash marks in column 1. The number of hash marks controls the level of the heading.

Markdown:

# First level heading
## Second level heading
### Third level heading
#### etc.

Result:

First level heading

Second level heading

Third level heading

etc.

3. Hyperlinks

Markdown:

To make a hyperlink, surround the text in square brackets
immediately followed by the URL in parenthesis (with no space in
between!) For example:
[Microsoft](https://www.microsoft.com).

Result:

To make a hyperlink, surround the text in square brackets immediately followed by the URL in parenthesis (with no space in between!) For example: Microsoft.

4. Images

Images use almost the same syntax as hyperlinks except they begin with an exclamation point. In this case the "alt" text is in square brackets and the image URL is in parenthesis, with no spaces in between.

Markdown:

![Parker the Porcupine](https://pnp.github.io/images/hero-parker-p-800.png)

Result:

In case you were wondering, you can combine this with the hyperlink like this:

Markdown:

[![Parker the Porcupine](https://pnp.github.io/images/hero-parker-p-800.png)](http://pnp.github.io)

Result:

5. Paragraphs and line breaks

Markdown:

Markdown will
automatically
remove
single line breaks.

Two line breaks start a new paragraph.

Result:

Markdown will automatically remove single line breaks.

Two line breaks start a new paragraph.

6. Block quotes

Markdown:

Use a greater than sign in column 1 to make block quotes like this:

> Line 1
> Line 2

Result:

Use a greater than sign in column 1 to make block quotes like this:

Line 1 Line 2

7. Bullet lists

Markdown:

Just put a asterisk or dash in front of a line that should be bulleted.

* Here is an item starting with an asterisk
* Here is another item starting with an asterisk
    * Indent to make sub-bullets
        * Like this
- Here is an item with a dash
    - Changing characters makes a new list.

Result:

Just put a asterisk or dash in front of a line that should be bulleted.

Here is an item starting with an asterisk
Here is another item starting with an asterisk
- Indent to make sub-bullets
  - Like this

Here is an item with a dash
- Changing characters makes a new list.

8. Numbered lists

Markdown:

1. Beginning a line with a number makes it a list item.
1. You don't need to put a specific number; Markdown will renumber for you
8. This is handy if you move items around
    1. Don't forget you can indent to get sub-items
        1. Or sub-sub-items
1. Another item

Result:

Beginning a line with a number makes it a list item.
You don't need to put a specific number; Markdown will renumber for you
This is handy if you move items around
1. Don't forget you can indent to get sub-items
  1. Or sub-sub-items
Another item

9. Code samples

Many markdown implementations know how to format code by language. (This article was written in Markdown and made extensive use of this feature using "markdown" as the language!) For example to show some HTML:

Markdown:

    ~~~html
    <button type="button">Do not push this button</button>
    ~~~

Result:

<button type="button">Do not push this button</button>

10. Tables

Tables are not universally supported but they're so useful they had to be part of this article. Here is a simple table. Separate columns with pipe characters, and don't worry about making things line up; Markdown will handle that part for you.

Markdown:

Column 1 | Column 2 | Column 3
---|---|---
Value 1a | Value 2a | Value 3a
Value 1b | Value 2b | Value 3b

Result:

Column 1	Column 2	Column 3
Value 1a	Value 2a	Value 3a
Value 1b	Value 2b	Value 3b

MVP Luise Freese also pointed out that there's a great Markdown tables generator here; looks like a big timesaver!

HTML and Markdown

Markdown doesn't create any old formatted text - it specifically creates HTML. In fact, it was designed as a shorthand for HTML that is easier for humans to read and write.

Many Markdown implementations allow you to insert HTML directly into the middle of your Markdown; this may be limited to certain HTML tags depending on the application. So if you know HTML and you're not sure how to format something in Markdown, try including the HTML directly!

Editing Markdown

If you'd like to play with Markdown right now, you might like to try the Markdown Previewer where you can type and preview Markdown using any web browser.

For more serious editing, Visual Studio Code does a great job, and has a built-in preview facility. Check the VS Code Markdown documentation for details.

There's a whole ecosystem of tools around Markdown including converters for Microsoft Word and stand-alone editing apps; these are really too numerous to list but are easy to find by searching the web.

Legacy

From vinyl records to 8-bit games and static web sites, there's a trend these days to rediscover simpler technologies from the past. Markdown definitely falls into this category.

Back before "WYSIWYG" (What You See Is What You Get) word processors were cheap and pervasive, there were "runoff" utilities that were very much like Markdown. They turned text files into nicely formatted printed documents (usually Postscript). Markdown harkens back to these legacy tools, but adds HTML compatibility and an intuitive syntax.

Conclusion

While it may seem unfamiliar at first, Markdown is intended to make it easy for people to read and write HTML. Whether you're a power user, IT admin, or developer, you're bound to run into Markdown sooner or later. Here's hoping this article makes it a little easier to get started!

Re: How to beautify your Power Apps

Luise Freese — Tue, 04 May 2021 08:43:14 GMT

its my pleasure - did you manage to use the app?

Microsoft 365 PnP Weekly - Episode 125

Vesa Juvonen — Tue, 04 May 2021 07:19:07 GMT

In this installment of the weekly discussion revolving around the latest news and topics on Microsoft 365, hosts – Vesa Juvonen (Microsoft) | @vesajuvonen, Waldek Mastykarz (Microsoft) | @waldekm are joined by Business Applications MVP, Flow Pro Show co-host, NLightning co-founder and Technical Evangelist at SharePoint ISV Lightning Tools Sandy Ussia | @SandyU.

Topics discussed in this session include: The appeal of Power Apps and Power Automate - enabling Power Users especially in resource constrained smaller businesses, whether or not Power Apps is the epitome or fulfillment of “Good-enough IT”, Sandy 2.0, and Lightning Tools’ business in COVID times. Microsoft and the Community delivered 22 articles in this last week. This session was recorded on Monday, May 3, 2021.

Please remember to keep on providing us feedback on how we can help on this journey. We always welcome feedback on making the community more inclusive and diverse.

This episode was recorded on Monday, May 3, 2021.

Video at Microsoft 365 Community YouTube channel.
Podcast format at https://pnpweekly.podbean.com.

Here are all the links and people mentioned in this recording. Thanks, everyone for your contributions to the community!

Events:

May 4, 2021 - Microsoft Business Applications Summit (MBAS) - Digital Event
May 25-27, 2021- Microsoft Build 2021
August 9-11, 2021 - North American Collaboration Summit
- Register with coupon code "PnP" for 25% off from the prize at https://nacs.ticketspice.com/nacs2021

Microsoft articles:

What’s New in Microsoft Teams | April 2021 - Microsoft
Skype for Business Online retires July 31, 2021 – here’s what to expect - Microsoft
SharePoint Roadmap Pitstop: April 2021 - Mark Kashman (Microsoft) | @mkashman
Microsoft Lists: Five free virtual workshops, May 10-14, 2021 - Mark Kashman (Microsoft) | @mkashman
Announcing SharePoint Framework 1.12.1 – Extending more of Microsoft Teams - SharePoint team | @SharePoint
Learn how to develop apps with the Microsoft Graph Toolkit - Microsoft
Updates to Organizational Theming in Microsoft 365 admin center - Maha Alam (Microsoft)

Community articles:

Microsoft Graph Mailbag – Create engaging apps with the Microsoft Teams Activity Feed API - Sébastien Levert (Microsoft) |
How to Set Up Tailwind CSS in a SharePoint Framework Project - Ari Gunawan (DevStack) | @arigunawan3023
Power Platform MS Forms Quiz with dynamic Leader Board created using Power Automate and HTTP Trigger - Damien Bird (Aberdeen City Council) |
How to get Source Code files for Power Apps Canvas apps - Luise Freese | @LuiseFreese
CLI for Microsoft 365 v3.9 - Garry Trinder (CPS) |
Power Virtual Agents bot setting the Out Of Office - Vesa Nopanen (Sulava) | @vesanopanen
Office Add-in Developer Community (PnP) – March 2021 update - David Chesnut (Microsoft) | @msdavech
Teams - an adoption idea? Transfer your group chat emails to Teams with Power Automate - Damien Bird (Aberdeen City Council) |
SPFx Check Locale - a nice option to check your localization consistency across SharePoint Framework solution - Sergei Sergeev (Mastaq) | @sergeev_srg
SharePoint Framework v1.12.1 - What’s in the latest Update of SPFx? - Andrew Connell (Voitanos) | @andrewconnell
Power Platform Rewind April 2021 - April Dunnam (Microsoft) | @aprildunnam
Episode #152 - Managing SharePoint Online Data with Microsoft Graph SDK for .NET - Paolo Pialorsi (PiaSys) | @PaoloPia
Flow Pro Show - Sandy Ussia (LightningTools) |@SandyU & Daniel Laskewitz (Sogeti) | @laskewitz
Azure Cloud Shell now available in Microsoft 365 - Robert Crane (CIAOPS) | @directorcia
Bulk-create Planner tasks with dates using Microsoft Power Automate - Waldek Mastykarz (Microsoft) | @waldekm

Additional resources:

Maturity Model for Microsoft 365
Power Platform Sample Gallery - for finding easily samples from the GitHub - contributions from the community are welcome!
PnP Sharing is Caring initiative - Getting started guidance and training for using GitHub and contributing to the community
Want to ask a question or in general engage with the community - Add a note in the Microsoft 365 PnP Community hub at https://aka.ms/m365pnp/community
Check out all the great community calls, SDKs, and tooling for Microsoft 365 from https://aka.ms/m365pnp

"Sharing is caring!"

Re: How to beautify your Power Apps

sagisim — Tue, 04 May 2021 00:28:35 GMT

Thank you very much

Re: Introduction to JSON

stchiew — Tue, 04 May 2021 00:27:57 GMT

Thank you for this! Super useful even for advanced developers who have occasional run-ins with JSON. Bookmarked this across all my browsers.

Re: Teams - an adoption idea? Transfer your group chat emails to Teams with Power Automate

AdamWoj — Mon, 03 May 2021 21:15:43 GMT

I love it. tried it out, and works like a charm

Office Add-ins community call – April 14, 2021

David Chesnut — Mon, 03 May 2021 19:56:08 GMT

Call summary

April’s call, hosted by David Chesnut, featured the following presenters and topics:
• Richard Taylor discussed different support options available on Microsoft 365, and how to submit a new support ticket.
• Sudhi Ramamurthy shared news about updates to APIs, Recorder, and Admin-control for Office Scripts.
• Leslie Black (Analysis Cloud Limited) demonstrated a TICTACUFO application he created with Office Scripts.
• David Chesnut demonstrated a new PnP sample that shows how to handle event-based activation and set the signature in Outlook.
To watch the call, tap the following link.
Office Add-ins community call – April 2021 - YouTube

Q&A (Question & Answers)

We welcome you to submit questions and topic suggestions prior to each call by using our short survey form.

Support options

When we try to open tickets in the admin center regarding SharePoint Development they are getting immediately closed with the comment "we don't provide support for developer issues". Is that different for Office Add-ins?
The comment you see applies if you don’t have a Premier account, or Enterprise SKU. If you do have a Premier account and are seeing this comment, please reach out to us on the next community call web chat so we can follow up with you.
What level of support can I get for my tenant from the Microsoft 365 Developer Program?
The Microsoft 365 Developer Program provides standard Office 365 support, and does not include developer support. You can get help with developer questions at Microsoft Q&A for Office Add-ins, or at Stack Overflow [office-js].

Office Scripts

ServiceHub is not enabled for my Enterprise ID. Is it possible for an admin to configure without admin access to rest of the Office 365 tenant?
If you have a Premier account, we can reach out to your ADC/TAM and ensure you have access. If you just have an Enterprise subscription, use the O365 admin instead. Either should work.
Are Office Scripts for Excel on the web available to Microsoft 365 family accounts or just Enterprise?
Currently, Office Scripts are only available on Enterprise, though we're exploring expanding availability to other licenses.

Miscellaneous questions

When will the current Outlook preview requirement set, including event-based activation, be available in production?
We don't have a specific date yet, but we hope to make it available soon.
The Outlook REST API is going to be decommissioned. Is it safe to continue using EWS (Exchange Web Services) with Outlook add-ins going forward or is it also at risk of being decommissioned?
At present, there is no plan to decommission EWS.
Is it possible to port Office.addin.showAsTaskpane common API function to Outlook JS?
This is a great suggestion! Can you please provide more details on this idea, and scenario at Microsoft 365 Developer Platform - Microsoft Tech Community?
One of our custom functions must access data (a table) not specified in the arguments. We've noticed that calling Excel.run to request that data through the Excel request context on every formula invocation leads to concurrency issues (RichApi.Error: Wait until the previous call completes.) Is there a flexible way to get this to work?
There is a code approach used in GitHub issue 483 in office-js that may help you. If that doesn’t work for your scenario, please post a question with more information at Microsoft Q&A: Office JavaScript API.
In Excel custom functions, is there a way to pause the calculations and resume later (other than setting calculation mode to manual)? End users want to pass an additional flag to the custom function that indicates if it should run or not run.
We suggest switching to manual recalc mode, instead of using an argument to the function. Our goal is for Excel custom functions to run using the same paradigm as built-in functions. We don't have a design pattern where we pause recalc based on an argument to a function. It's clearer for users if you ask them to change to manual recalc, that you could implement in the task pane UI. Then when completed, you can switch back to automatic recalculation and the custom functions will run.
In Excel custom functions, you can get the address of the calling cell from the invocation object. Is there a way to get the current value from the cell along with the address?
We suggest that you use the onCalculated event which is called when custom functions are calculated. Here's an example:

async function onCalculated(event) { await Excel.run(async (context) => { console.log(event.address); if (event.address == "A13") // “A13” here is an example of the cell that has the custom function. It can be replaced by a real cell address. { context.load (event.address, “values”); await context.sync(); console.log(`The range value was "${cellC1.values}".`); } }); }

Can the Microsoft Graph API be used by an add-in without a dedicated server to proxy requests to the Graph API? We're trying to replace the usage of the Outlook REST API in an add-in that makes API calls from the client-side. We are struggling to find tutorials covering that case.
If you're Outlook add-in is basically a single-page app (SPA) this tutorial will help you call the Microsoft Graph API from the add-in: Tutorial: Create a JavaScript single-page app that uses auth code flow - Microsoft identity platform | Microsoft Docs. There are also additional Microsoft Graph samples at https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2/tree/master/2-WebApp-graph-user
When will Outlook sideload and debug from VS Code (as demoed in November community call) be available?
This feature is available, but there is an issue that prevents it from working in all scenarios. We’re working to get a fix out soon.

Resources

Microsoft 365 support

Office Scripts demo by Leslie Black

Source for TICTACUFOGame: https://github.com/MrAnalyticals/OfficeScripts/tree/main/TICTACUFOGame
Short demo video: https://youtu.be/FMOCPm1aV_Q
Long demo video: https://youtu.be/F49hwCzpygQ
Office Scripts LinkedIn Group: https://www.linkedin.com/groups/9016822/
Analysis Cloud Limited, The Irish Cloud Company: www.analysis.ie

PnP: Outlook set signature

Office Add-ins community call

Recurring, monthly community call calendar invite
Community call topic requests and questions
Community call recordings on Microsoft 365 developer YouTube

Office Add-ins feedback

Technical questions – Microsoft Q&A (office-js-dev), (office-addins-dev)
Issues – GitHub (office-js repo)
Recommendations and suggestions – Microsoft 365 Developer Platform ideas

The next Office Add-ins community call is on Wednesday, May 12, 2021 at 8:00AM PDT. You can download the calendar invite at https://aka.ms/officeaddinscommunitycall.

Re: How to beautify your Power Apps

Luise Freese — Sun, 02 May 2021 17:44:12 GMT

I added a link to the sample app in the blog post - this way you can download the .msapp file and the source code files to reverse engineer :)

How to Set Up Tailwind CSS in a SPFx Project

Ari Gunawan — Sat, 01 May 2021 08:48:06 GMT

In the State of CSS 2020 survey, the Tailwind CSS becomes the number 1 CSS Framework in terms of Satisfaction and Interest in the last 2 years. It also gets the awards for The Most Adopted Technology. It seems a lot of developers like this framework. Based on my experience, this framework can help us rapidly build UI by reducing complexity when styling the UI.

State of CSS 2020 Survey — CSS Frameworks result

In this article, I will share my setup to use the Tailwind CSS in a SharePoint Framework (SPFx) project.

Prepare the SPFx Project

Prepare your SPFx project. I use a newly generated SPFx project (v1.11) but you can also use your existing SPFx project.

Install Modules

Install all modules needed by executing the command below:

npm install tailwindcss@1.9.6 postcss postcss-cli postcss-import @fullhuman/postcss-purgecss gulp-postcss autoprefixer@9.8.6 -D

Initialize Tailwind CSS and PostCSS

Initialize Tailwind CSS by executing the command below:

npx tailwind init -p --full

The command will create the tailwind.config.js in the project’s base directory. The file contains the configurations, such as colors, themes, media queries, and so on.

The command will also create the postcss.config.js file. We need PostCSS because we will use Tailwind CSS as a PostCSS plugin.

Inject Tailwind CSS Components and Utilities

We need to create a CSS file that will be used to import Tailwind CSS styles.

Create an assets folder in the project’s base directory
Create a tailwind.css file in the assets folder
Add the following lines of code to the file:

@import "tailwindcss/components";
@import "tailwindcss/utilities";

Add Gulp Subtask for Processing Tailwind CSS

We need to add the Tailwind CSS build process to our SPFx build process.

Open the gulpfile.js
Add the following lines of code to the file (before the build.initialize(require(‘gulp’)); line):

const postcss = require("gulp-postcss");
const atimport = require("postcss-import");
const purgecss = require("@fullhuman/postcss-purgecss");
const tailwind = require("tailwindcss");

const tailwindcss = build.subTask(
   "tailwindcss",
   function (gulp, buildOptions, done) {
      gulp
         .src("assets/tailwind.css")
         .pipe(
            postcss([
               atimport(),
               tailwind("./tailwind.config.js"),
               ...(buildOptions.args.ship
                  ? [
                       purgecss({
                          content: ["src/**/*.tsx"],
                          defaultExtractor: (content) =>
                             content.match(/[\w-/:]+(?<!:)/g) || [],
                       }),
                    ]
                  : []),
            ])
         )
         .pipe(gulp.dest("assets/dist"));
      done();
   }
);
build.rig.addPreBuildTask(tailwindcss);

The code will add the tailwindcss subtask to the SPFx Gulp Build task. It will also purge (remove unused styles) the Tailwind CSS for build with ship flag:

gulp build --ship

gulp bundle --ship

Add Reference to The Generated Tailwind CSS

We need to add reference the generated Tailwind CSS by adding the import code in your main .ts webpart file:

import '../../../assets/dist/tailwind.css';

That’s it!

Now you can use Tailwind CSS utilities in your SPFx project.

Result

You might be familiar with the below result except it’s not using styles from the 74-lines scss/css file anymore.

Below is the updated React component that’s using the Tailwind CSS utility classes for styling.

You can see the full code changes in my Github repository.

Microsoft 365 Developer Community Call recording – 29th of April, 2021

Vesa Juvonen — Fri, 30 Apr 2021 11:15:17 GMT

Recording of the Microsoft 365 – General M365 development Special Interest Group (SIG) community call from April 29, 2021.

Call Summary

Announcing the release of SharePoint Framework v1.12.1, check out the new Microsoft 365 Extensibility look book gallery, visit the Microsoft Teams samples gallery to get started with Microsoft Teams development, please complete the Microsoft 365 developer community survey, and register now for May trainings on Sharing-is-caring. Open-source project activity is focused on prepping for May releases.

Open-source project status:

Project	Current Version	Release/Status
PnP .NET Libraries - PnP Framework	v1.4.0	Bug fixes, Prepping for v1.5.0 (May)
PnP .NET Libraries - PnP Core SDK	v1.1.0	Bug fixes, Prepping for v1.2.0 (May)
PnP PowerShell	v1.5.0	Prepping for v1.6.0 (May)
Yo teams - generator-teams	v3.0.3 GA, v3.1.0 Preview	Preview with Viva Connections support
Yo teams - yoteams-build-core	v1.1.0
Yo teams - msteams-react-base-component	v3.1.0
Microsoft Graph Toolkit (MGT)	v2.1.0 GA, v2.2.0 Preview	Bug fixes and v2.2.0 preview updates

Additionally, one new Teams sample delivered. The host of this call was Vesa Juvonen (Microsoft) | @vesajuvonen. Q&A takes place in chat throughout the call.

Actions:

Last week to complete the Microsoft 365 Developer Community Survey – https://aka.ms/m365pnp/survey
Try the public beta of SPFx v1.12.1.
Reserve date - SharePoint Monthly community call - 11^th of May 8 AM PDT | https://aka.ms/sp-call
Register for Sharing is Caring Events:
- First Time Contributor Session – May 24^th (EMEA, APAC & US friendly times available)
- Community Docs Session – April
- PnP – SPFx Developer Workstation Setup – May 13^th
- PnP SPFx Samples – Solving SPFx version differences using Node Version Manager – May 20^th
- AMA (Ask Me Anything) – Power Platform Samples – May 5^th
- AMA (Ask Me Anything) – Tech Community – May 11^th
- First Time Presenter – May 25^th
- More than Code with VS Code – May 27^th
- Maturity Model Practitioners – May 18^th
- PnP Office Hours – 1:1 session - Register
Download the recurrent invite for this call – http://aka.ms/m365-dev-sig
Call attention to your great work by using the #PnPWeekly on Twitter.

Microsoft Teams Development Samples: (https://aka.ms/TeamsSampleBrowser)

Document manager sample app using messaging – Sathya Raveendran, Varaprasa...

Thank you for being part of the community and for helping others to succeed. You are awesome!

Demos delivered in this session

Delegated and application permissions in the Microsoft Identity Platform – demystifies the identity model with a clearly delivered 100 level overview of app permissions - operation and terminology, i.e., delegation, requests, grants, consent, tokens, etc. How app/services permission delegation works, how tokens are aligned to a machine or to a person. Is the app or person authorized to access resources? How and when machines dynamically/statically request permissions and more.
Localization check inside SharePoint Framework projects – VS Code extension to increase your productivity – a VS Code and Node.js extension that keeps resources in sync by making sure all localization labels inside SharePoint Framework project files across organization are consistent. The extension is automatically activated for your SPFx solutions and checks, whether localization resource files (en-us.js, nl-nl.js, etc.) follow the pattern, defined in the corresponding strings.d.ts. Prevents accidental or refactoring errors in SPFx solutions.
Using field lookups with list formatting – Field Type = “Lookup.” Lookups get values from a list and have limited formatting options. Of horse, this limitation does not deter Chris from showing crazy, crazier, craziest formatting options for lookups. Approach = format the lookup column into which content from the list will flow. Use advanced forEach property. In this demo, Chris shows formatting capabilities available in a referenced sample.

Thank you for your work. Samples are often showcased in Demos.

Topics covered in this call

PnP .NET library updates - Bert Jansen (Microsoft) | @O365bert - 6:59
PnP PowerShell updates - Bert Jansen (Microsoft) | @O365bert - 8:43
yo Teams updates - Wictor Wilén (Avanade) | @wictor - 9:53
Microsoft Graph Toolkit updates - Beth Pan (Microsoft) | @beth_panx - 11:10
Microsoft Teams Samples - Vesa Juvonen (Microsoft) | @vesajuvonen - 12:33
Demo: Delegated and application permissions in the Microsoft Identity Platform – Philippe Signoret (Microsoft) | @psignoret - 14:48
Demo: Localization check inside SharePoint Framework projects – VS Code extension to increase your productivity – Sergei Sergeev (Mastaq) | @sergeev_srg - 30:22
Demo: Using field lookups with list formatting – Chris Kent (DMI) | @theChrisKent - 42:48

Resources:

Additional resources around the covered topics and links from the slides.

Slides used in this community call
Blog - SPFx Check Locale - a nice option to check your localization consistency across SharePoint Framework solution
VS Code Extension - SPFx Check Locale
Repo - Checks that your localization files match the schema inside mystrings.d.ts
Repo - Multi-lookup fields and projected fields
Demos – Other formatting demos from Chris
Documentation – Create list relationships by using unique and lookup columns
PnP Weekly – Episode 124 with guest MVP from Sympraxis Consulting Emily Mancini |@EEMancini | video | podcast
Microsoft 365 Extensibility look book gallery | aka.ms/m365/extensibility
Microsoft Teams Samples Gallery | aka.ms/teams-samples

General resources:

Microsoft 365 PnP Community hub | aka.ms/m365pnp/community
Microsoft Graph Toolkit in Microsoft Learn | http://aka.ms/learn-mgt
Viva Connections https://aka.ms/VivaConnections
SharePoint look book
Yo Teams video training package
.NET Standard 2.0 version of SharePoint Online CSOM API
Microsoft 365 community (PnP) videos | aka.ms/m365pnp-videos
Microsoft Teams Toolkit for Visual Studio Code
yo Teams | aka.ms/yoteams
Video - Getting started using yo Teams | Wictor Wilén (Avanade)| @wictor
Build a crisis management site to connect people and information
Developer documentation | https://aka.ms/spdev-docs
PnP Power Shell
SharePoint Modernization Partner Guidance - Feedback welcome
Solution - Building a modern search experiences with SharePoint Framework web parts
Page transformation guidance
Page transformation videos
Modernization scanner
Microsoft 365 developer program site - Need to become a Tenant Admin to test look book capabilities? Get a Microsoft 365 E5 developer subscription (free tenant for 90 days)
SharePoint Provisioning Service - Easily provision look book designs to any tenant in the world
SharePoint Provisioning templates on Github
PnP Provisioning Tenant Templates documentation
SharePoint Page Transformation webcast series
PnP Power Shell
SharePoint Modernization Tools

Upcoming Calls | Recurrent Invites:

Microsoft Graph call - May 4^th at 8:00 am PDT | https://aka.ms/microsoftgraphcall
SharePoint Framework call – May 6^th at 7:00 am PDT | https://aka.ms/spdev-spfx-call
SharePoint monthly call – May 11^th at 8:00am PDT | https://aka.ms/sp-call
Office add-in monthly call – May 12^th at 8:00 am PDT | https://aka.ms/officeaddinscall
M365 General Dev call – May 13^th at 7:00 am PDT | https://aka.ms/m365-dev-sig
Adaptive Cards monthly call – May 13^th at 9:00 am PDT | https://aka.ms/adaptivecardscommunitycall
Microsoft Teams monthly call – May 18^th at 8:00 am PDT | https://aka.ms/microsoftteamscommunitycall
Power Apps monthly call – May 19^th at 8:00 am PDT | https://aka.ms/PowerAppsMonthlyCall
Microsoft Identity Platform – May 20^th at 9:00 am PDT | https://aka.ms/IDDevCommunityCalendar

“Sharing is caring”

Microsoft 365 PnP team, Microsoft - 30th of April 2021

Re: Teams - an adoption idea? Transfer your group chat emails to Teams with Power Automate

DamoBird365 — Fri, 30 Apr 2021 09:47:22 GMT

I've recently done a video on this solution too - if you care to have a watch

Video is here or watch below

Power Platform MS Forms Quiz with dynamic Leader Board created using Power Automate and HTTP Trigger

DamoBird365 — Thu, 29 Apr 2021 22:30:34 GMT

Here is an example Power Automate solution where we query a real SharePoint List acting as a Quiz Leader Board on my dev tenant and bring the contents to this very blog post (at the bottom of the page). Using the Power Automate and the HTTP trigger we can retrieve, embed and display content from our Office 365 environments.

The competition is rife at the top of this Leader Board. The aim is to get 100% and it is ordered by last completed to give everyone a chance to be top, albeit I am sorry to say that there is no official badge for this one.

Want to test your Power Automate knowledge? Click Here

For the first flow of two, using Microsoft Forms and Power Automate I have built a pretty standard process. The user completes the quiz, the form gives them feedback on how well they have done and I capture the answers to a SharePoint List - seen below.

I use the when a new [form] response is submitted trigger and during the next couple of actions I calculate their score again (based on their answers) as the score is not passed back to the Cloud Flow via the Response Body.

What's the Score?

In order to calculate the score I have created an array via a compose action and used the equals expression. If the response equals the answer, it will return true. I then use a filter action on the item() of each output from the select and filter on true. This will leave me with an array of true values. During the create item score field and tweet action, I use the length() expression (i.e. length of array from 10 possible true answers) to return the number of answers equaling true and multiply by 10 to get the percentage correct.

The final stage of this flow is a condition where I check to see if the user has supplied a twitter handle. If it's not empty I tweet out their score. The only disappointment here is that Twitter will not let you tag users due to spamming any attempt to include an @ result in it being stripped out.

The Leader Board

The interesting piece though, is the second flow, using the HTTP trigger action to present the leader board to the web and seen below (at least until my premium trial has not expired). Using the trigger we can run an action to get items, prepare HTML table rows using a select action and send back a response to the website in a fraction of a second. The end user loading the website almost doesn't know it's happening, albeit there is a slight delay for the flow to run, i'll admit. Did you notice the delay in this page loading?

The reponse to the embedded IFrame on my Blog and indeed this article which is simply calling the url provided by the HTTP Request trigger is an HTML table. I create the table header and then using the select action body, I use the join() expression to join the elements of the array with '' into a string and complete the HTML table.

I'm not a web developer and I am sure that there will be slicker ways to embed the results of the http response into your site and for that I would be grateful to hear from those with experience but what do you think of this idea? Are you on the leader board yet?

As things stand - here is the leader board. Can you resist not talking part? Click Here

Tweets with your result will be posted via my twitter handle DamoBird365

Meanwhile, if you are looking for a certificate for your efforts, fill out my form here

Happy quizzing

How to get Source Code files for Power Apps Canvas apps

Luise Freese — Fri, 30 Apr 2021 10:47:20 GMT

This post will guide you through the process of how to use the Power Apps Language Toolkit to extract a Power Apps .msapp file.

Why would you want to have the source code files?

To make your app reusable, so that more people can benefit from it, you will want to share the source code files. Unfortunately, when you save your Canvas App from Power Apps Studio, it is saved in one opaque .msapp file. To be able to get the source files, you will need to use the Power Apps Language Toolkit to extract all files from the .msapp file. This way,

developers can not only open the source code in their code editor of choice but can effectively manage the code of a Canvas app in GitHub or Azure DevOps. This makes a huge difference as we can't look into .msapp files.
makers can still open the .msapp file to easily import an app sample into their environment

Prerequisites

To be able to use the Power Apps Language Toolkit, you will need to

install Visual Studio Code
install .NET Core 3.1.x (x64)
download the Power Apps Language Toolkit
- go to github.com/microsoft/PowerApps-Language-Tooling
- select Code
- select Download ZIP
extract the Power Apps Language Toolkit to a local folder
open that local folder
locate the build.cmd file
rightclick, Run as Administrator
in the Pop up Window, select more info
select Run anyway

Please note, that command Prompt will open, show a few lines and then close automatically again.
Please also not, that you can now find a bin folder in the local folder you extracted the PowerApps Language Toolkit to. In this bin folder, you will find a Debug folder and inside of the Debug folder you will find a PASopa folder.

Download the .msapp file

go to [make.powerapps.com](https://make.powerapps.com)
log in
open your app in edit mode
select File
select Save as
select This Computer
select Download
move the downloaded .msapp file to your folder in which you extracted the PowerApps Language Toolkit as well

unpack .msapp file

Now that we have the .msapp file of the app:
press the WINDOWS key on your keyboard and search for Command Prompt (first few letters should do)
run as an Administrator
copy the path of the PASopa folder
type in Command Prompt `cd <your PASopa path>`
copy the path of the .msapp file
create a new folder in your app folder
copy the path of that new folder
type in Command Prompt `pasopa -unpack <your msappfile path> <new folder path>`

Please note that you will now find all source code files in that new folder. You can open the folder in a code Editor of your choice, for example Visual Studio Code.

submit as a sample

Well done! If you like to contribute with your app to the PnP Power Apps sample gallery , you can submit your app with these source code files here. To do so, follow these steps:

Now you can submit these source code files as a sample. Please

fork the PnP PowerApps repository
commit your files
Pull Request by filling out the PR template

Please do not forget to provide as well a `README.md` file which explains what your sample is about.

If this all sounds confusing to you and you are new on GitHub - you are more than welcome to attend the Sharing Is Caring sessions, where we guide you through using GitHub and making your first PR.

Sharing Is Caring

Re: CLI for Microsoft 365 v3.9

Timothy Balk — Thu, 29 Apr 2021 15:05:53 GMT

NICE!

Re: CLI for Microsoft 365 v3.9

garrytrinder — Thu, 29 Apr 2021 13:24:44 GMT

yes, that's correct.

Re: CLI for Microsoft 365 v3.9

Timothy Balk — Thu, 29 Apr 2021 13:02:24 GMT

Add a specific application permissions to a SharePoint Online site

Is this feature using the scoped site permissions in the Graph API for applications?

Like in this demo:

https://www.youtube.com/watch?v=wcJRQDsXMQ8&list=PLWZJrkeLOrbYJEr_LoIJ7-1Goy09XJzha

CLI for Microsoft 365 v3.9

garrytrinder — Thu, 29 Apr 2021 12:29:57 GMT

CLI for Microsoft 365

Manage Microsoft 365 and SharePoint Framework projects on any platform

CLI for Microsoft 365 is a cross-platform CLI that allows you to manage various configuration settings of Microsoft 365 and SharePoint Framework projects no matter which operating system or shell you use.

While building solutions for Microsoft 365 expands beyond the Windows operating system, managing many of the platform settings is possible only through PowerShell on Windows. As more and more users work on non-Windows machines, it’s inconvenient for them to have to use a Windows virtual machine to configure their tenants. With the CLI for Microsoft 365, you can configure your tenant no matter which operating system you use. Additionally, using CLI for Microsoft 365, you can manage your SharePoint Framework projects.

New version of CLI for Microsoft 365 – v3.9

Following our monthly release cadence, we’ve released a new version of the CLI for Microsoft 365 with some new capabilities. Here are a few of the most noteworthy additions.

Changes

We’ve continued improving CLI building upon the changes we’ve introduced in the previous version.

Support for upgrading SharePoint Framework (SPFx) projects to beta versions

With the new public preview release of SharePoint Framework 1.12.1 and a new public quality assurance model that was announced with it, we are delighted to announce that we have added support for upgrading your SharePoint Framework projects to the latest beta release candidate.

To upgrade your SharePoint Framework project to the latest preview version, execute:

m365 spfx project upgrade --preview

As part of our beta release cadence, when new release candidates are made available in npm, we will release support for upgrading to that new version as soon as they are available.

Support for creating Azure Active Directory (AAD) applications from a manifest

As part of our efforts to make development easier in Microsoft 365, we have released support for creating Azure Active Directory application registrations from an app manifest file.

A typical scenario for developers and administrators is to create app registrations in the Azure Portal manually through the friendly user interface, however this can be time-consuming and error prone to repeat for multiple environments.

This update will enable you to copy the app manifest file that is generated in the Azure Portal and pass it into the command to confidently recreate app registrations.

m365 aad app add --manifest @manifest.json

Support for using relative URLs in SharePoint Online (SPO) commands

CLI for Microsoft 365 contains a number of commands for managing SharePoint Online. Each of these commands requires you to specify the site or web on which you want to execute the command. For example, to get information about a site collection located at https://contoso.sharepoint.com/sites/contoso, you'd execute:

m365 spo site get --url https://contoso.sharepoint.com/sites/contoso

If you executed an spo command previously, CLI for Microsoft 365 already knows the hostname of your SharePoint Online tenant. In such case, you can use a server-relative URL as well:

m365 spo site get --url /sites/contoso

If you try to use a server-relative URL but CLI for Microsoft 365 doesn't know of your SharePoint Online URL yet, you will see an error prompting you to either use an absolute URL or set the SPO URL using the spo set command:

m365 spo set --url https://contoso.sharepoint.com

You can also execute a command like m365 spo site list that will automatically detect your SharePoint Online tenant URL for you.

To check if CLI detected the SPO URL previously, use the m365 spo get command.

Moved from adal-node to msal-node

CLI for Microsoft 365 up to this point has been using the Microsoft Azure Directory Authentication Library for nodejs (adal-node) for handling authentication requests between the CLI and Microsoft 365, however the ADAL library was put into maintenance mode and stopped receiving updates on June 30th 2020.

With this release we have moved to use the Microsoft Authentication Library for nodejs (msal-node) which replaces adal-node, ensuring that the CLI for Microsoft 365 is able to receive updates and take advantage of new authentication features added to msal-node going forwards.

New Commands

Add a role to a specified Azure Active Directory (AAD) app registration

Role-based access control (RBAC) is a popular mechanism to enforce authorization in applications. When using RBAC, an administrator grants permissions to roles, and not to individual users or groups. The administrator can then assign roles to different users and groups to control who has access to what content and functionality.

To add a role to the Azure AD application registration specified by its name, execute:

m365 aad app role add --appName "My app" --name Managers --description "Managers" --allowedMembers usersGroups --claim managers

Add a new Microsoft Planner plan

All teams need to track tasks, a quick and easy way to do that in Microsoft 365 is to create a shared plan in Planner to manage and assign those tasks to team members.

To add a new Microsoft Planner plan to a Microsoft 365 Group, execute:

m365 planner plan add --title "My Planner Plan" --ownerGroupName "My Planner Group"

Add a specific application permissions to a SharePoint Online site

On Feb 11, Microsoft announced support for resource-specific consent in SharePoint via Microsoft Graph in this release we have added a new command to support adding permissions to SharePoint Online sites.

To add a specific application permissions to a SharePoint Online site, execute:

m365 spo site apppermission add --siteUrl https://contoso.sharepoint.com/sites/project-x --permission read --appDisplayName Foo

Return the User Profile properties of a specific SharePoint Online user

To return the user profile properties of specific user, execute:

m365 spo userprofile get --userName 'john.doe@mytenant.onmicrosoft.com'

Create the Microsoft Viva Connections desktop app package to upload to Microsoft Teams

Microsoft Viva Connections was the first part of the Viva Employee Experience features to be be made Generally Available to all Microsoft 365 tenants on 31st March 2020, however to enable Viva Connections in your tenant a number of deployment steps that needed to be followed, which includes the creation of the desktop app package that is deployed to Microsoft Teams. So we have added a new command which simplifies the creation of this app package for you.

To create the app package, execute:

m365 viva connections app create --portalUrl https://contoso.sharepoint.com --appName Contoso --description "Contoso company app" --longDescription "Stay on top of what's happening at Contoso" --companyName Contoso --companyWebsiteUrl https://contoso.com --coloredIconPath icon-color.png --outlineIconPath icon-outline.png

To upload the app package to your Microsoft Teams app catalog, execute:

m365 teams app publish --filePath ./contoso.zip

New script samples

CLI for Microsoft 365 is a great tool both for quick adjustments to the configuration of your Microsoft 365 tenant as well as automating more complex tasks. Because CLI for Microsoft 365 is cross-platform you can use it on any OS and in any shell. To help you get started using the CLI for Microsoft 365 for automation scenarios, we started gathering some sample scripts.

If you have any scripts that you use frequently, please share them with us so that we can learn more about the common automation scenarios.

Cleanup completed Microsoft To Do tasks

Microsoft To Do is the go to personal task management tool of choice in Microsoft 365, however completed tasks can sometimes get in the way.

This script helps remove all completed Microsoft To Do tasks by iterating over all of your task lists and deleting tasks that have been marked as completed.

Create a Microsoft Teams team and bulk add members from CSV file

Microsoft Teams is core to collaboration in Microsoft 365, but creating several teams and adding new members to those Teams can be time consuming.

This sample script shows you how to create a Team and add members and owners using a CSV.

Setup an example SharePoint Online site

When creating SharePoint Online sites, generally you want to make some immediate changes after its creation.

This script is a good starting point for a setup script to create site with some assets like columns, content types, lists, navigation etc.

The given example:

creates a site,
adds a site column and a content type,
adds list and modifies it's settings (add a content type to it and makes it hidden),
adds a document library with a custom column and some folder,
modifies the all items view of the document library,
modifies the site navigation links

Upload local files and folders to SharePoint Online

SharePoint Online is the backbone of Microsoft 365 for file storage and sharing. This script shows how you can use the CLI to upload files located on a local folder to a SharePoint Online library or subfolder.

Bulk add members to Microsoft Teams team from CSV file

Adding new team members to an existing Team through the Teams user interface can be time consuming, this script will add users to existing Teams contained in a .csv file.

Copy files to another SharePoint Library in another site

This script helps you copy files across different sites in SharePoint Online, it shows you how you can copy all files and folders from source library to a different library in different SharePoint site keeping the same folder and subfolder structure and copy all files from all folders and subfolders from source library to a different library to a root folder in different SharePoint

Remove a Site Collection Admin User from all Site Collections

When employees leave organisations or change job roles it is important that access is removed where it is no longer required.

This script helps remove a designated user in every SharePoint Online site in the tenant if he/she is a Site Collection Admin. This applies to Group-connected sites, non group-connected sites, or classic sites.

Replace an owner in a Microsoft 365 Group or Microsoft Team

This script helps find all the Microsoft 365 Groups that a user is an Owner of and replace them with someone else useful for when an employee leaves and ownership needs to be updated.

Add a SharePoint Site Collection Administrator using CSV file

This script helps you add a new SharePoint Site Collection Administrator to many sites using a CSV file, this is useful for granting access to sites that are not visible in the SharePoint Admin Center such as Microsoft Teams Private Channels.

Contributors

This release wouldn’t be possible without the help of (in alphabetical order)

Thank you all for the time you chose to spend on the CLI for Microsoft 365 and your help to advance it!

Work in progress

Here are some things that we’re currently working on.

More commands, what else

Microsoft 365 is evolving and new capabilities are being released every day. With CLI for Microsoft 365, we aim to help you manage your tenant on any platform in a consistent way, no matter which part of Microsoft 365 you interact with. While we keep adding new commands to CLI for Microsoft 365 each release, we still barely scratched the surface with what’s possible in Microsoft 365. In the upcoming versions of the CLI for Microsoft, you can expect us to add more commands across the different workloads in Microsoft 365.

Improved managing SharePoint pages

Microsoft keeps investing in modern SharePoint pages continuously introducing new capabilities to let us publish rich content. We're looking into extending our support for managing modern SharePoint pages to let you use them to their full potential.

Improved creating Azure AD apps

Recently, we've introduced a command to easily create Azure AD app registrations. Because they're backbone of every app you'd build on Microsoft 365, we think you should be able to create them as easily as possible. So with CLI for Microsoft 365, you can create a fully configured Azure AD app for the most common scenarios with just one line of code.

In the future versions of CLI for Microsoft 365 you can expect us extend the capabilities with additional scenarios and features supported by Azure AD.

Script examples

In every release of the CLI for Microsoft 365, we introduce new commands for managing Microsoft 365. With over 350 commands across the different Microsoft 365 services, the CLI for Microsoft 365 has become a powerful tool, not just for managing your tenant but also for automating your daily work.

We’d love to show you how you can use the CLI for Microsoft 365 to build automation scripts in PowerShell Core and Bash. If you have any scripts using SPO or PnP PowerShell that you use frequently, please share them with us so that we can learn more about the common automation scenarios.

'ensure' commands

We've just shipped our first ensure command - an easy way to help you that a site with specific settings exists. If it doesn't, CLI creates it for you, if it does, CLI ensures it has the right properties. All in one line of code. We'd love to hear from you how you like it and if it's something you'd like us to implement for other commands as well.

Try it today

Get the latest release of the CLI for Microsoft 365 from npm by executing:

npm i -g @pnp/cli-microsoft365

Alternatively, you can get the latest release from Docker by executing:

docker run --rm -it m365pnp/cli-microsoft365:latest

If you need more help getting started or want more details about the commands, the architecture or the project, go to aka.ms/cli-m365.

If you see any room for improvement, please, don’t hesitate to reach out to us either on GitHub or twitter.

Power Virtual Agents bot setting the Out Of Office

Vesa Nopanen — Thu, 29 Apr 2021 10:12:33 GMT

It is always interesting to hit the wall with limitations when you are working with Power Automate. Some limits are due to licensing but some are due to other good reasons. I was running a PoC where a person interacting with a Power Virtual Agent bot required to do actions on behalf of that person. And after digging some information out (Thank you @Tomasz for helping there! ) it was clear that I had reached the wall when I was trying to make my little bot to set up Out of Office for the interacting user. Using the Office 365 Set Automatic Replies action always works on the connection user only. And since you can not act on behalf of that user it required to go beyond the wall and say “there is no spoon”. And I found it there wasn’t a spoon- just the miracle world of Graph API.

From that phase I advanced to create

Azure Logic Apps that uses Graph API to set the Out of Office / Automatic replies to a specific user.
Setting up a Azure API Management service so that Azure Logic App can be called from the Cloud Flow running inside Power Virtual Agent – and still keep on using standard licensing (no need to go to premium)

First it was necessary to create the Azure App Registration (applicationid, secret) with suitable set of API permissions. After that it was all about figuring out the Graph API call & JSON to set the Automatic Reply / Out of Office. Read the documentation (& about permissions) from Docs here.

Next I built a Azure Logic Apps that uses HTTP Request trigger (get) to retrieve user email and number of away days in parameters.

This is the format to exclude parameters from the GET request. triggerOutputs()[‘queries’][‘FileID’]

After those steps I have user email and number of days that needs to be set Out of Office. I returned the HTTP-request and prepared variables with Application ID, TenantID and App Secret information to be able to call Graph API with application permissions.

The key is of course setting the Out of Office information JSON.

The Graph API call URL and example JSON I used to test this are:

https://graph.microsoft.com/v1.0/users/useremail/mailboxsettings { "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#Me/mailboxSettings", "automaticRepliesSetting": { "externalAudience": "all", "externalReplyMessage": "I am away from the office. ", "internalReplyMessage": "I am away from the office. ", "status": "Scheduled", "scheduledStartDateTime": { "dateTime": "2021-04-17T18:00:00.0000000", "timeZone": "UTC" }, "scheduledEndDateTime": { "dateTime": "2021-04-18T18:00:00.0000000", "timeZone": "UTC" } } }

Then it was just the case of patching the information

The next step was to create the Azure API Management Service and define the API call there. There are two ways to handle the information transportation: in the body (as JSON) or as parameters. I put the Username and Days in this Proof of Concept to parameters.

For how to create and set up Azure API Management you can find information in this URL. It is good to keep in mind that Azure API Management has a cost involved – it is not a free one. I created the one with Developer (No SLA) tier to keep costs lower. And it still estimated to be over 40€ per month. For production use the price will be higher.

Another alternative would have been to put the “set these to Out of Office” information to a SharePoint List (for example) and use a Azure Logic Apps trigger to read that list and make those API Calls. That would have some delay, but since Out of Office is rarely requiring an instant response it would be a better one for the real world scenario in this case. However if you are already using Azure API management then using it for this as well is a good idea. But setting it up solely for a single purpose does not get a good ROI for most cases.

After setting the API up into the Azure you can export it directly to the Dataverse for Teams environment – so it is there for the bot to use without any Premium licensing.

When adding an action to your Cloud Flow in the Dataverse for Teams environment where your bot runs you can find the custom action in the menu.

Cool – what about the test-run side?

And when running this one from the PVA of the acting user I can see the results via Teams easily

There are of course other steps as well in that PoC conversation & flow but setting up the Out of Office proved to require a bit more steps than I originally thought. I have to say that this was also a great learning experience about updating user mailbox settings via Graph API and as well about using Azure API management to create a custom connector to Power Automate.

With Azure API Management & Graph API you can quite easily go beyond the walls what you have with Dataverse for Teams bots and applications.

This article is a repost of my blog post in my own blog at MyTeamsDay.Com.

Office Add-in Developer Community (PnP) – March 2021 update

David Chesnut — Thu, 29 Apr 2021 16:21:42 GMT

The Office Add-ins developer platform team has new updates to share this month on Office Add-ins Patterns and Practices. PnP is a community effort, so if you are interested in contributing, see our good first issue list.

Use Outlook event-based activation to set the signature (preview)

Screen shot of PnP sample displaying an information bar prompting the user to set up signatures, and sample signature inserted into the email.

This sample uses event-based activation to run an Outlook add-in when the user creates a new message or appointment. The add-in can respond to events, even when the task pane is not open. It also uses the setSignatureAsync API. If no signature is set, the add-in prompts the user to set a signature, and can then open the task pane for the user.

Check out the code sample: Use Outlook event-based activation to set the signature (preview)
Check out the docs: Configure your Outlook add-in for event-based activation (preview)

Contributors

Thank you to our contributors who are actively helping each month with the PnP-OfficeAddins community effort.

Maarten van Stam - helping review PRs and issues on PnP-OfficeAddins

Want to contribute?

PnP is a community effort by developers like you. Check out our good first issue list as a great place to help with some samples. Feel free to contribute to existing samples or create new ones.

About Office Add-ins Patterns & Practices (PnP)

Office Add-ins PnP is a Microsoft-led, community driven effort that helps developers extend, build, and provision customizations on the Office platform the right way by providing guidance and help through official documentation and open-source initiatives. The source is maintained in GitHub where anyone can participate. You can provide contributions to the samples, reusable components, and documentation. Office Add-ins PnP is owned and coordinated by Office engineering teams, but the work is done by the community for the community.

You can find code samples for Office Add-in development in the Office Add-ins PnP repo. Some samples are also documented in the Office Add-ins docs, such as Open in Excel.

Additional resources

Get started with Office development by joining the Microsoft 365 developer program.

Try out some samples and get coding quickly with Office add-ins by downloading Script Lab.

Learn more by joining the monthly Office Add-ins community call.

Power Apps Community Call – April 2021

Todd Baginski — Wed, 28 Apr 2021 16:48:53 GMT

Call Summary:

Topics covered in this month’s community call include - Make your Power Apps sessions persistent when switching Microsoft Teams tabs! (Making your Teams mobile and desktop power apps off-line capable), Power Apps Custom Functions Library (sharing your great work - find, use, submit samples), Make your Power Apps user experience awesome with Gestalt design principles (create visually compelling model driven apps), and Recent Power Apps News and Community Contributions. This session included Q&A in chat. The call was hosted by Todd Baginski (Canviz). Demo presenters include Hardit Bhatia, Matthew Devaney, April Dunnam, Hiro Nagao, Geetha Sivasailam, Hugo Bernier, Anton Robbins and Rory Neary. Recorded on April 21, 2021. Thank for attending the call or viewing it on demand.

Demos:

Make your Power Apps sessions persistent when switching Microsoft Teams tabs! - tired of losing data captured in your Microsoft Teams-based Power Apps when you leave the app to respond to a chat message or go to another channel? Learn how to store data and then reload data when restarting your Power App to effectively achieve session data persistence. Hint – make your app off-line capable. Works on desktop too!
Power Apps Custom Functions Library – now that it is possible to create user defined custom functions in Power Apps the DRY principle applies, so let’s share! The custom functions library is the new Power Platform samples repository. Find, use, and submit custom functions, Power app, Power Automate and Power Virtual Agents samples. Not sure where to start? Community contributor training offered at PnP | Sharing Is Caring
Make your Power Apps user experience awesome with Gestalt design principles - how you layout objects in your Power Apps UI is a mixture of art, industry standard, and Gestalt. In Power Apps, objects are in a 2D frame. In this demo, you will understand how and why using Gestalt principles in app design matters in a world where users do not typically read manuals and adoption is largely based on visual perceptions.

Recent News & Cool Stuff:

Power Apps Custom Functions Library -https://github.com/yourekittenme/powerapps-custom-functions
PowerPlatformLearn – Gestalt Principles -https://www.powerplatformlearn.academy/courses/power-apps/contents/6061fe2159dfb
Power Apps Demo Extravaganza 2021 - https://aka.ms/PowerAppsDemoExtravaganza

Actions:

Complete the Microsoft 365 Developer Community Survey – https://aka.ms/m365pnp/survey
Entries Start May for Demo Extravaganza 2021 | https://aka.ms/PowerAppsDemoExtravaganza
Microsoft Office 365 Developer Survey - https://aka.ms/developersuccess
Join the M365 Customer Success Platform Panel - https://aka.ms/SuccessPanel
Join the community - Find a user group - https://aka.ms/Dynamics365UserGroups, https://aka.ms/PowerPlatformUserGroups
Join us for our next call: May 19, 2021 at 08:00am PDT | https://aka.ms/powerappscommunitycall

Learn more:

See the full blog post for this call on the Tech Community Blog - https://aka.ms/m365pnp/community/blog
Microsoft’s Power Platform website
Power Apps Responsive Design - https://bit.ly/responsivepowerapps
Power Apps Training Resources - https://aka.ms/PowerAppsTraining
Power Apps Community - https://Community.PowerApps.com
Power Apps Community Samples - https://aka.ms/PowerAppsCommunitySamples
Power Apps Community Videos - https://aka.ms/PowerAppsCommunityVideos
Power Addicts Hangout - https://wearepoweraddicts.com
#LessCodeMorePower Video Series - https://www.youtube.com/playlist?list=PL8IYfXypsj2Cr4DUqMKYkGM-Wejfim2QX
Share more - draw attention to your great work - #PowerAppsCC

Stay connected:

Twitter: https://twitter.com/MSPowerPlat
Twitter - https://twitter.com/microsoft365dev
YouTube - https://aka.ms/M365DevYouTube
Blogs - https://aka.ms/M365DevBlog
Recurrent Invite - https://aka.ms/powerappscommunitycall

Re: How to beautify your Power Apps

Valerie Fahel-Schaffer — Wed, 28 Apr 2021 13:01:51 GMT

That's amazing. You do such a great job.

Re: How to beautify your Power Apps

Luise Freese — Wed, 28 Apr 2021 12:51:00 GMT

Hi : I draw my sketchnotes in OneNote on a Surface Pro and record the replay with Camtasia, Then I export as a gif.

Re: How to beautify your Power Apps

Valerie Fahel-Schaffer — Wed, 28 Apr 2021 12:40:32 GMT

Thanks for this; it's great! Question: how did you create the sketchnote?

Re: Teams - an adoption idea? Transfer your group chat emails to Teams with Power Automate

gilblumberg — Wed, 28 Apr 2021 10:11:23 GMT

Thank you for sharing, what an awesome idea!

Microsoft 365 PnP Weekly - Episode 124

Vesa Juvonen — Fri, 30 Apr 2021 08:05:06 GMT

In this installment of the weekly discussion revolving around the latest news and topics on Microsoft 365, hosts – Vesa Juvonen (Microsoft) | @vesajuvonen, Waldek Mastykarz (Microsoft) | @waldekm are joined by MVP, PnP Team member, and Architect at US-based Sympraxis Consulting Emily Mancini |@EEMancini. Topics discussed in this session include: Sharing is Caring engagement model, Aligning and addressing the client’s business needs with capabilities of owned technologies, i.e., Microsoft 365 for making changes with the business and not to the business! Conscious/unconscious usage of the Microsoft 365 Maturity Model for business ROI maximization. Ideas for increasing diversity in IT personnel, Imposter Syndrome, Tech vs Outcome and Teams or Yammer.

Please remember to keep on providing us feedback on how we can help on this journey. We always welcome feedback on making the community more inclusive and diverse.

Covering also 23 articles from Microsoft and the Community.

This episode was recorded on Monday, April 26, 2021.

Video at Microsoft 365 Community YouTube channel.
Podcast format at https://pnpweekly.podbean.com.

Here are all the links and people mentioned in this recording. Thanks, everyone for your contributions to the community!

Events:

April 26-28, 2021 - Microsoft 365 Virtual Marathon 2021
May 25-27, 2021- Microsoft Build 2021
August 9-11, 2021 - North American Collaboration Summit
- Register with coupon code "PnP" for 25% off from the prize at https://nacs.ticketspice.com/nacs2021

Microsoft articles:

Announcing Viva Learning public preview - John Mighell (Microsoft)
Build and ship software better with GitHub and Microsoft Teams - Microsoft
Microsoft 365 Virtual Marathon 2021 - free, online training event - Mark Kashman (Microsoft) | @mkashman
iPad support now available in Microsoft Lists for iOS - Mark Kashman (Microsoft) | @mkashman
Build quality Microsoft Teams apps with these best practices: Part 3 - Microsoft
Utilize change notification APIs for Microsoft Teams messages - Microsoft

Community articles:

Teams - an adoption idea? Transfer your group chat emails to Teams with Power Automate - Damien Bird (Aberdeen City Council) |
Microsoft 365 PnP Community Spotlight: Wictor Wilén - Luise Freese | @LuiseFreese & Wictor Wilén (Avanade) | @wictor
What I (as a non dev) learned as I created my first Power App - Michael Roth (IT-P Information Technology-Partner GmbH) |
Learn to debug your Power Apps - Michael Roth (IT-P Information Technology-Partner GmbH) |
Export Power Apps and Power Automate user licenses - Yves Habersaat (Sword Group) |
How to beautify your Power Apps - Luise Freese | @LuiseFreese
Intro to Power Apps Components and Custom Functions - April Dunnam (Microsoft) | @aprildunnam
Microsoft 365 Developer - Tips & Tricks playlist - Bob German (Microsoft) | @Bob1German, Dan Wahlin (Microsoft) | @DanWahlin, April Dunnam (Microsoft) | @aprildunnam and Ayca Bas (Microsoft) | @aycabs
Episode #151 - Paging Data with Microsoft Graph SDK for .NET - Paolo Pialorsi (PiaSys) | @PaoloPia
Power Apps Forms - Updates, Unsaved & Submit Confirmation - Reza Dorrani (Catapult Systems) |
Actually, It’s Already In The SharePoint PageContext! - Tips by Bits | @TipsByBits
Implement Carousel in SPFx web part using react-slick - Prasham Sabadra | @SabadraPrasham
Monitoring Microsoft 365 using Raspberry Pi and M365 CLI - Anatoly Mironov (Bool by Sigma) | @mirontoli
Building Modern SharePoint Pages with Quick Links - Sam Collins (Coupled Technology) | @SamC148
Adding Conditional Formatting for a List Form Header with JSON - Marc D Anderson (Sympraxis Consulting) | @sympmarc
SharePoint Syntex - teaching AI to extract contents of structured documents with Form Processing - Chris O'Brien (Content+Cloud) | @ChrisO_Brien
Would you ever use SharePoint Online without Microsoft Teams? - Sarah Haase | @sarahhaase, Antonio Maio | @AntonioMaio2 and Mike Maadarani | @mikemaadarani

Additional resources:

Maturity Model for Microsoft 365
Microsoft 365 Community Survey - Open for April 2021 - please let us know how we can help to help you!
Power Platform Sample Gallery - for finding easily samples from the GitHub - contributions from the community are welcome!
PnP Sharing is Caring initiative - Getting started guidance and training for using GitHub and contributing to the community
Want to ask a question or in general engage with the community - Add a note in the Microsoft 365 PnP Community hub at https://aka.ms/m365pnp/community
Check out all the great community calls, SDKs, and tooling for Microsoft 365 from https://aka.ms/m365pnp

"Sharing is caring!"

Re: How to beautify your Power Apps

sagisim — Mon, 26 Apr 2021 08:15:31 GMT

thank you so much

Re: How to beautify your Power Apps

Luise Freese — Mon, 26 Apr 2021 08:14:17 GMT

will ping you once I made the sample app available.

Re: How to beautify your Power Apps

sagisim — Mon, 26 Apr 2021 08:12:45 GMT

Thank you for getting back so quickly, I've uploaded the images (icons) created the collection and included them in my collection successfully, i struggle from this point onwards, i'm obviously missing something as i can't get the menu to work properly for me, i just get errors

Re: How to beautify your Power Apps

Luise Freese — Mon, 26 Apr 2021 08:09:21 GMT

Hey there I will make a sample app available soo and link to it here. Still, out of curiosity - which part doesn't work right now? (I don't feel bothered)

Re: How to beautify your Power Apps

sagisim — Mon, 26 Apr 2021 08:06:58 GMT

Hi,

thank you, looks amazing but i struggle to get it working, any chance you can include the sample app? it will be easier for me to reverse engineer it than bother you with million questions

thank you

Teams - an adoption idea? Transfer your group chat emails to Teams with Power Automate

DamoBird365 — Mon, 26 Apr 2021 07:31:06 GMT

Transfer your group chat emails to Teams with Power Automate

I recently covered this idea on my blog but it is a Cloud Flow that I make use of often so I thought I would share it with you all. My organisation is well in to their Teams adoption journey and whilst a large proportion of users use Teams for their first port of call for a group chat, it still often surprises me when a conversation is struck up via Outlook Email and very quickly we get lost between reply to alls and reply to sender. Could Power Automate help you move that conversation group or one to one to Teams with a mouse click before the conversation gets out of control?

The simplest way for me, to transfer the conversation from Outlook and trigger a flow, was to use “When an email is flagged” trigger. Therefore I can simply flag an email in Outlook and take the conversation onto Teams.

With the variables provided by the email trigger, I compose (by default) the to and from fields in order to get all mail recipients (albeit you may want to include the CC'd emails to) and simply replace the semi colon with a comma, this is needed for the final and only other step.

Using the “Post your own adaptive card as the Flow bot to a user” step, I am able to send an adaptive card notification in Teams to myself and provide a summary of the email I am transferring, from, subject and body preview and in my case the option to start a one to one chat with the sender or a group chat if there are more than one recipients of the email. This is done using the Deep Link feature of Teams.

I have supplied a copy/paste option at the end of my post that will allow you to replicate this in your personal PowerAutomate / Teams environment in a matter of seconds.

**NOTE** make sure you update the TO field in the post adaptive card action as it’s currently set to youremail[at]yourdomain[dot]com.

So, what does the Cloud Flow look like?

The cloud flow only has 2 actions

The flow simply consists of a compose action in order to structure the list of emails from the email trigger, above I don't include the cc'd emails. You've therefore a couple options for the get group email compose action, do you want to include cc'd or not in the Group Chat Deep Link? The below sample snippet expression includes the ccRecipients, but feel free to adjust as necessary.

replace(tolower(concat(triggerOutputs()?[‘body/toRecipients’], ‘;’, triggerOutputs()?[‘body/from’], ‘;’, triggerOutputs()?[‘body/ccRecipients’])), ‘;’, ‘,’)

The second and final step is an adaptive card built via adaptive cards designer. It's a steep learning curve but Designer site gives you plenty of sample cards to experiment with and it is here that you need to include the deep links to your new Teams conversations which will automatically launch a teams conversation with these users.

The User Experience

My colleague Alex, sends me an email with a list of colleagues in the to field. Before the conversation gets out of control, I simply flag the email and instigate a move to Teams Group Chat.

Within a matter of seconds, basically as fast as your Flow is triggered, a Flow Bot message is received to my Teams application with the subject and summary email body including a link to both a one to one and group chat.

Clicking on that Group DM in Teams button results in an opening conversation line and conversation subject (in draft), all courtesy of the deep link. Now it's time to get the conversation going.

Want to try the solution quickly?

Did you know that you can copy and paste Cloud Flow actions between environments really easily? Simply by creating a new Cloud Flow with the "When an email is flagged” trigger you can then copy the provided code below and paste it into your ClipBoard by clicking Next Step, selecting My ClipBoard and pasting with Ctrl + V. The only field you need to change is the Adaptive Card Recipient which by default is set to youremail[at]yourdomain[dot]com. Just make sure you set this to your own email address to receive the Adaptive Card.

{"id":"f616b2c7-1645-4360-aff5-1710-a2bfb6a1","brandColor":"#8C3900","connectionReferences":{"shared_office365":{"connection":{"id":"/providers/Microsoft.PowerApps/apis/shared_office365/connections/shared-office365-2c7a215d-616e-4cc2-9dab-9d05f14c21a5"}},"shared_teams_1":{"connection":{"id":"/providers/Microsoft.PowerApps/apis/shared_teams/connections/shared-teams-c32e6b36-e3dd-4ca6-806d-5969ba7e6dee"}}},"connectorDisplayName":"Control","icon":"data&colon;image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KIDxwYXRoIGQ9Im0wIDBoMzJ2MzJoLTMyeiIgZmlsbD0iIzhDMzkwMCIvPg0KIDxwYXRoIGQ9Im04IDEwaDE2djEyaC0xNnptMTUgMTF2LTEwaC0xNHYxMHptLTItOHY2aC0xMHYtNnptLTEgNXYtNGgtOHY0eiIgZmlsbD0iI2ZmZiIvPg0KPC9zdmc+DQo=","isTrigger":false,"operationName":"DamoBird365_Transfer_Email_To_Teams","operationDefinition":{"type":"Scope","actions":{"Get_All_To_and_From_Emails":{"type":"Compose","inputs":"@replace(tolower(concat(triggerOutputs()?['body/toRecipients'], ';', triggerOutputs()?['body/from'])), ';', ',')","runAfter":{}},"Post_your_own_adaptive_card_as_the_Flow_bot_to_a_user":{"type":"OpenApiConnection","inputs":{"host":{"connectionName":"shared_teams_1","operationId":"PostUserAdaptiveCard","apiId":"/providers/Microsoft.PowerApps/apis/shared_teams"},"parameters":{"PostAdaptiveCardRequest/recipient/to":"youremail[at]yourdomain[dot]com;","PostAdaptiveCardRequest/messageBody":"{\n \"type\": \"AdaptiveCard\",\n \"body\": [\n {\n \"type\": \"TextBlock\",\n \"size\": \"Medium\",\n \"weight\": \"Bolder\",\n \"text\": \"Transfer Email to Chat\",\n \"wrap\": true\n },\n {\n \"type\": \"ColumnSet\",\n \"columns\": [\n {\n \"type\": \"Column\",\n \"items\": [\n {\n \"type\": \"TextBlock\",\n \"weight\": \"Bolder\",\n \"text\": \"@{triggerOutputs()?['body/from']}\",\n \"wrap\": true\n },\n {\n \"type\": \"TextBlock\",\n \"spacing\": \"None\",\n \"text\": \"@{triggerOutputs()?['body/subject']}\",\n \"isSubtle\": true,\n \"wrap\": true\n }\n ],\n \"width\": \"stretch\"\n }\n ]\n },\n {\n \"type\": \"TextBlock\",\n \"text\": \"@{triggerOutputs()?['body/bodyPreview']}\",\n \"wrap\": true\n }\n ],\n \"actions\": [\n {\n \"type\": \"Action.OpenUrl\",\n \"title\": \"Start Group DM in Teams\",\n \"url\": \"https://teams.microsoft.com/l/chat/0/0?users=@{outputs('Get_All_To_and_From_Emails')}&topicName=@{triggerOutputs()?['body/subject']}&message=Hi, regarding your Email (@{triggerOutputs()?['body/subject']}). \"\n },\n {\n \"type\": \"Action.OpenUrl\",\n \"title\": \"Start 1:1 DM in Teams\",\n \"url\": \"https://teams.microsoft.com/l/chat/0/0?users=@{triggerOutputs()?['body/from']}&topicName=@{triggerOutputs()?['body/subject']}&message=Hi, regarding your Email (@{triggerOutputs()?['body/subject']}). \"\n },\n ],\n \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\",\n \"version\": \"1.2\"\n}","PostAdaptiveCardRequest/messageTitle":"Transfer Email To Teams"},"authentication":"@parameters('$authentication')"},"runAfter":{"Get_All_To_and_From_Emails":["Succeeded"]}}},"runAfter":{},"description":"***Please make sure you update the TO: in the Adaptive Card***"}}

Summary

Get that internal conversation moved from traditional Email into modern Teams. Not all conversation is better suited to Teams, I accept, but it's often far more productive to have the order of conversation in front of you, expecially if you have had a couple days off. If a colleague has taken the initiative to shift a conversation into Teams, it will save the group a lot of effort having to sift through that email string and potentially allows you to work in real time seeing if someone is available/online, rather than wait for that next email to come in or maybe a couple of people reply to that email at the same time with a different opinion I've enjoyed working with you email, but Teams messaging is my preferred internal conversation route these days if I can't start a call of course.

What trigger would suit you best?

Would you include To/From or CC'd members too in your Group Email?

Have you used Teams Deep Links before?

Check out my blog for more ideas or if you have an idea of your own but don't know where to start, give me a shout via the various platforms - DamoBird365

Microsoft 365 PnP Community Spotlight: Wictor Wilén

Luise Freese — Fri, 07 May 2021 10:59:46 GMT

Which community project do you maintain?

yo teams

How does it help people?

yo teams helps developers kickstart their Teams extensibility projects by providing an easy way to create the first Teams App all the way to scaffolding a solution that can be deployed, scaled and maintained.

What have you been working on lately?

yo teams is continuously evolving based on feedback and real-world feedback and experience from the community. As of lately we've been focused on making it easier and faster to create a project and at the same keep a high level of flexibility for those developers who wants to control and manage everything themselves.

What do you do at work?

I'm the global innovation lead for Modern Workplace at Avanade

Why are you a part of the M365 community?

Because I learn new stuff all the time - the benefits of a community is the diversity of different voices and opinions. This eventually makes me become better in what I do, and I hope that others learn from what I do.

What was you first community contribution?

My first true open source community contribution was in the form of a web part for SharePoint 2007/WSS 3.0, called the ChartPart

One tip for someone who’d like to start contributing

Just do it. You never know what you might learn and who you might learn to know.

What I (as a non dev) learned as I created my first Power App

MichaelRoth42 — Sun, 25 Apr 2021 15:29:53 GMT

Header picture for article "What I (as a non dev) learned as I created my first Power App"

I like to share my very own experiences while building my first canvas app. I have no tech background and at the beginning I thought that I could never do it. But now, looking back, I’ve learned so many things. Not only about functions and Power Apps syntax, but about the process of building apps, learning from failure and community.

I hope you find that helpful, get inspiration or learn anything from it.

Let’s dive into the topic, without any further delay: Here are 9 things I’ve learned while building my first canvas app. Why only 9? Why not 10? Because I want to leave room for improvement ;)

1. Canvas App vs Model driven app

The first question I had for myself was “Do I want to build a model driven app or a canvas app”? And since I had no idea at all, I tried to go for a model driven app. The app will be modelled around your data, so it sounds like this would be a lot easier than starting from scratch, right?

For several cases that remains true, but actually it depends from which mindset you’re coming. If you’re familiar with your data and have an idea about how data may be presented within an app, model driven apps are your way to go. It makes it really easy to design an app with little clicks.

BUT

If you come from a non-tech background, like I did, maybe a canvas app is the better choice. I had a very clear image in my mind, how the app was supposed to look and perform. If you start with a model driven app you must customize it heavily until it suits your needs/ideas. And I actually found out, that while customizing it, I was deleting and editing connections, that came automatically. And then everything broke. Nothing worked anymore and it left me so frustrated.

For me it was so much easier to start with a canvas app. There is nothing there, just the plain white canvas. And that had two very important effects:

1. I was forced to build the app step by step and let it grow over time.

2. I learned how the connections, items and bits worked from the very beginning.

Let’s get into those two aspects a little bit deeper, shall we?

2. Scavenger Hunt. Build your app bit by bit

If you build your app step by step you are forced to think about an MVP in the very beginning. I don’t talk about the Microsoft Most Valuable Player, but a Minimal Viable Product. Ask yourself: What is the basic functionality that my app needs to work? That is a very important question at the beginning. After you’ve created your MVP you can add functionality and features step by step.

And that leads to a much more fulfilling learning experience. You will have multiple tiny success experiences and your confidence will grow. You will get the feeling, while your app grows and gets more functionality, it will become YOUR baby. Your thing, that you created out of nothing. There’s hardly a related feeling.

3. It’s Trial and Error all the time

Start with a canvas app and add functionality piece by piece. If something doesn’t work, you know exactly what you did, before it broke (at least in theory). That makes troubleshooting so much easier. If you start with a model driven app, you have no idea where to even begin with looking for possible problems.

But in your own canvas app, you can recreate the steps you’ve taken, before something stopped working.

And you will experience this over and over again: It’s trial and error. Get comfortable with the feeling, that this may be long way. Frustration and anger are natural parts of this and it’s perfectly fine. When you solved a problem that seems impossible to even understand at the beginning, that’s the moment when you really learn how these things work.

Get used to it and embrace failure as THE way of learning.

4. You’re constantly reading Microsoft Docs. All the time

Usually I have an idea in my mind, what I want my app to do. Then I start to google, if this is even possible, I’ll find the right function and read on Microsoft Docs how this works. I try it out. Doesn’t’ work? Back to Microsoft Docs. Are all the circumstances okay? Did you use the same data source as MS docs describes it? Try it out again. Still not working? Back to reading MS docs.

Actually, I found myself more time reading instructions, than really working in my app, but that is part of the process, too. Even people who are familiar with Power Apps and are deep into the topic have to check up things again and again. MS docs has (nearly) all the information you need to make this work. It’s all in there, but you have to be prepared to dig into this. Really deep.

5. Knowing about the Power Apps Community is crucial

MS docs may have the answer to your problem, but quite often I couldn’t find the right answer, or I didn’t understand the answer at all (no tech background, remember?). That is frustrating. So much.

But you can be sure about one thing: Somebody has been at exactly that point, where you are right now. And that’s where community comes into play. There are so many amazing people out there who love to share their knowledge, give you hints and tricks. There are blogs, video tutorials, the Power Apps community forum and an endless list of other sources, where you can get help.

Next to MS docs this is the most useful source of information, by far. Quite often these people don’t give you a plain manual but describe their problem and their solution. That makes it easier to understand it yourself.

6. Find someone who can take you by hand

MS docs and the community are awesome. Hands down. But I found myself in a couple of situations where I wasn’t really able to explain my problem (I didn’t know this at this point yet). And that would make even the best manual/explanation/tutorial useless.

THIS CRAP ISN’T WORKING AND I DON’T KNOW WHY. I DON’T EVEN KNOW WHERE TO GET HELP ANYMORE

I’ve screamed something like this a thousand times, I swear. At least. And do you know what helps? If you can talk to someone, who’s been there. If you struggle to solve your problem on your own (even with a good tutorial at hand), reach out and talk to people. Even better, if you can show them what’s not working and where you are at the moment.

If you spend some time building your app you sometimes struggle to see the obvious. A view from someone uninvolved is so important. I found myself emotionally involved and too frustrated to remain calm and clear. My view was too narrow and too focused to see new ways to the solution.

And quite often I shared my screen with someone and before I even explained my problem, the other person knew what was wrong. I was just buried too deep into my problems and views.

And believe me, there are far more people out there, who are happy to take your hand and show you a couple if things than you may believe. I had to overcome myself to ask not only for help, but for people showing me how things work. But the member of the communities are eager to help. Shall I tell you, why so many of them are happy, if they can help you and show you stuff?

If you teach, you’ll learn. If you explain something to somebody else, you are forced to explain it in a way that the other person understands. And therefore, you must learn, how to describe things from different perspectives. Teachers don’t just give away their knowledge, they’re gaining experience and get deeper into the topic themselves.

It’s a win-win situation.

7. Always insert, create, make!

“Nothing will work, unless you do!” – Maya Angelou

Try things out. Insert a function, create a button, make things work. As I mentioned earlier, building an app is trial and error and therefore you have to do something. Every action you make, everything that you try out, makes you better. Makes you understand more things. Lets you learn.

So, before you google and read for ours, go out there and try things out. Yes, it may be frustrating, but that is part of the learning process and it’s actually good for you.

If you are building a canvas app, you can undo every step you take, so there is actually little risk to try things out. Click and see, what happens. It will teach you a lot.

Here is a little trick that I found especially useful: Always make a button. What do I mean by that? For every new function I want to try out I make a new button. It doesn’t look good, but it gives me the possibility to test a functionality in an own, separated environment. There are no other functions on that button but the one I want to test. If it works, I copy the code and paste it into the place, where I originally wanted it.

8. Form follows function. Make it work, then make it pretty

I think this point should be obvious from what I explained earlier, but this was hard for me to learn. You take care of the functionality first; then you work on the looks and the interface. Of course I wanted to create a pretty app right away, but that didn’t work out at all.

I ended up with a lot of different buttons, shapes and text all over the place. But everything worked.

From this point on I had all the possibilities to make it pretty and didn’t need to worry about any functionality anymore. That was a relieving point while creating my first app.

If you focus on the functionality first, you focus on the backend first (frontend: the layer the user sees and uses; backend: the functionality layer that no user should ever see). When the backend works, you can take care about the frontend.

You have a lot of possibilities to make a working app look nice. The other way around, getting a nice-looking app to work is way more difficult.

Compare frontend and Backend

9. Give back to the community. Tell others, what and how you did it

Maybe that is one of the most important parts. I talked a lot about the community, about resources to learn online, about getting help from the community. And all of this only works, if there’s content to learn from.

I guess many people might feel intimidated because their first app doesn’t look that beautiful or offers not that much of functionality.

But that doesn’t matter.

You created something, you learned something and you should be proud of it, so tell people about it. There are many, many people who want to hear about it. And those are thankful for the opportunity to learn from you and your experiences. There are many people out there, just starting, just as you did. Help them, teach them, learn from that experience.

The community thrives from content that is at every level of expertise. Your experiences matters and can help a lot of people.

Give a little bit back, because I’m sure you needed help as well.

That is how we all progress and grow. That is community

Learn to debug your Power Apps

MichaelRoth42 — Sun, 25 Apr 2021 15:11:27 GMT

Head pic for article "Start debugging your Power App"

Make troubleshooting and understanding single elements easier.

They exist. Those little moments that drive you crazy. Things simply don’t work; they don’t work the way you imagined and you almost despair because it just doesn’t want to go on. Or they break. I swear I didn’t touch anything, yet all of a sudden, my functions are broken. WHAT THE HECK???

I’ve built a few apps by now and I always realize that I have a different view and approach than classic developers. I’m a citizen developer, with no IT knowledge and no technical background, and I’ve learned some useful techniques while building apps that I benefit from with every app. Really, with every app.

I have talked to many people and found that these little tips and tricks can save you a lot of nerves and a lot of frustration. If you haven’t read my blog about 9 things I wish I learned before I build my first Power App, you should check it out, but this one here is the next step. It’s not only about troubleshooting and debugging, but some of those tips will also just keep you sane or teach you good habits that will make your app building experience easier.

So, let’s lift our troubleshoot and debugging experience on the next level

Keep calm and let’s build apps.

1. Duplicate your screen

Remember my tip to build your app step by step? If you don’t add all the functionality at once, your app grows over time. At some point your pretty satisfied with your app but you want to try out new things and add others.

If you don’t know how some functions work exactly, always duplicate your screen, before adding new things.

While building your app and adding new functions, you need to add things, you need to delete others to make it work. And you don’t want to mess with the progress you’ve made so far.

A duplicated screen is like an additional save game slot, just to make sure. If you break everything, you can always go back.

Duplicate your screen before trying out new things

2. Use debug label

Label are a life saver in Power Apps. They literally make things visible. Let me show you an example. I have a time app and I control the timer with a variable called Uhr_tickt. If it’s set to true, the clock is ticking, if it’s set to false it isn’t. The “Go!” button sets the variable to true, the stop button sets it to false.

While testing your app and adding a new functionality, I tried to make the Reset button work and had a hard time figuring out, why it wasn’t working. Quite often it was because my variable Uhr-tickt wasn’t set the correct way. Is my timer not starting, because the UpdateContext function for my variable wasn’t working or was it something else?

That’s when I added a debug label. It’s a simple label that shows you the status of your variable. This way you can actually see, what’s happening in the background, making debugging and troubleshooting so much easier.

Demonstrating how debug label can give you information of the state of a varible

3. Build a button

Build a button to test a function. If it works, include it in your desired function.

I’ve said this a million times before, but it is the most helpful habit, ever. If you want to add a new functionality, don’t put it on top of that main function you have. Insert a button and try the new functionality on that button. If it works, add it to the place where you want to have it.

But if it doesn’t work, you will never wonder where the error is.

4. Snap to align

Okay, this one is a mini tipp: Did you ever try to align some buttons or elements and the snap to align functionality drives you crazy? Often it helps to arrange your elements but sometimes it’s your worst enemy.

Did you know, that you can disable this function by holding the Alt-Key while placing elements?

5. Use more Excel

Whaaaat? More Excel, are you sure? Okay, hear me out. Did you know, that Power FX (the syntax used in Power Apps) is based to Excel functionalities.

I’m pretty sure you’ve seen that If-Statement before, haven’t you? That is because Power FX is designed for people who are familiar with Excel functions.

But how can we make use of it?

I often have a hard time trying to visualize how my data sources work. If I want to write a functional VLOOKUP function, I need to see my tables. That can be difficult with Power Apps because your tables may be anywhere. Somebody gave me the tip to try out difficult functions (AN: like nested if-functions) (another AN: Try to avoid nested if-functions at ALL costs) in Excel. When they work you can replace the fields in your formula with the fields you need in your Power App.

6. …but it worked a minute ago

Do you know that: You swear you haven’t touched anything, yet all of sudden nothing works anymore? I’ve been there too, and still am from time to time. It happens. Here’s what you do, first thing:

Check your connections. Are they all working fine? No? Go fix them.

Did you just change anything in your data source? Are you sure? Update them anyway.

Did that help already? Good, I thought so.

Check your connections and data sources every once in a while. If you add another column to that SharePoint list and didn’t update your data source….well. It’s a common pitfall, just remember to check those things.

Something else about data sources. If you use SharePoint or Excel in your OneDrive (and yes, both can be very valid data sources, don’t let any “IT pro” tell you something different), consider that not everyone in your organization has access to those. If you published and shared your app, ask yourself if everyone who wants to use it has access to the data source you used.

7. Name the elements you use, as you build them

Develop the habit of re-naming your screens and elements as you build them. That will keep you a lot of frustration and time. Especially if you have multiple screens, apps can become crowdy. So every time you add another function or you want to try something new, unnamed elements can not only cause unnecessary extra work to find the right element you’re looking for. It can also be frustrating, when you keep adding the wrong elements to your function and that causes it to not work. It can be a serious source of errors.

a bunch of unnamed labels and elements

Which label shows you variable and which is just some explanatory text?

8. Learn what the result view is

I haven’t used it for too long because nobody explained it to me. But this a so important to understand in order to learn what it needs for functions to work properly. If you click on functions you can get two important views. The result view and the data type.

By clicking on Office365User the formular bar shows you the original record with all elements.

If it’s not showing at first, click on the little arrow next to the function.

This way you can see, what kind of records are stored and what data you can work with.

If you click on the next part of the function DisplayName Power Apps will show you what this function does AND what data type you get.

That helps you understanding complex formulars (try it with a filter function to examine what it does) and also how to work with the data. Do you know the error message “This formula expects data of the type value”? If a functions give you data type text, like in the Office365Users example above, you can’t use it in a function that needs a value to work. Here is a comparison between the Now() and the Today() function. The output looks similar, but it’s different data types. DateTime is some else than Date.

Difference of functions Now and Today

The formular bar shows it to you, which might help you debugging your app and functions.

9. Dear Diary….

Document what you just learned. Like a learning diary. You will need this knowledge later and you can recycle bits and pieces you’ve once build again and again. Already countless times I was relieved to have written down insights and functions. That way, I can always check back to see how they work. This saves me a lot of time and above all frustration.

Also, the brain processes things differently when you not only think about them but write them down. This additional occupation with learning content consolidates what you just learned.

10. The world gains beauty through all its colors

If you want to make your app pretty and professional (I recommend Luise Freese’s latest blog “How to beautify your Power Apps” on that) you want to use more then the set of standard colors. But I can be a lot of work to paste all the color codes in every single element you have in your app.

But it’s very handy to set your colors in labels to make sure you can quickly use the correct colors.

Set up a label for every color you want to use and set the Color value as you like. To not get confused later on, set the Text value to something clear, like BackgroundColor or IconColor and remember to rename the labels in the Tree view as well (see tipp #7).

Now, whenever you want to use that color you don’t need to remember or copy the Hexcode, but just set the value to your color label by using IconColor.Color.

Quick, easy and you will always use the correct color without much effort.

Two labels for my most used colors

Fill value of the Rectangle_background

Color value of the Icon_heart

Here you see the Fill and Color values, set by the labels we defined earlier.

There we have it. That are 10 tipps on how to start debugging your app.

Do you like them? Do you have more tipps for me? I’m always happy to get new ideas and hints because I am far from being an expert and I’m always learning

Re: CLI for Microsoft 365 v3.7

sptrack — Sun, 25 Apr 2021 04:31:50 GMT

Hello,

I'm upgrading my SPFx version in my project from 1.6.0 to 1.10.0 using CLI. I went through all steps that the upgrade task suggested but running into gulp errors. I upgraded my gulp version from 3.9.1 to 4.0.2 but still having issues. The error I get is shown below. Any ideas?

Error: More tasks executed then were scheduled.

at D:\Rightpoint\ACH\ACH-Upgraded-Project\ACH-%20Intranet%20Migration\spark-meganav\node_modules\zone.js\dist\zone-node.js:1266:9
at process.removeListener (eval at createNamedFn (D:\Rightpoint\ACH\ACH-Upgraded-Project\ACH-%20Intranet%20Migration\spark-meganav\node_modules\zone.js\dist\zone-node.js:1207:17), <anonymous>:3:41)
at process.on (domain.js:151:13)
at process.emit (events.js:187:15)
at process.EventEmitter.emit (domain.js:442:20)

Re: Use Power Automate to automatically create SharePoint News Links from an RSS feed

miniwi — Sat, 24 Apr 2021 19:29:22 GMT

Finally... the problem was - as expected - not the code, but my system.

I use a Mac and Safari which is somehow incompatible with PA.

It struck me as odd that the CPU was close to 100% when I edited the code.

After restart it runs faster and the interpreter accepted the inputs.

Now it works.

Re: Use Power Automate to automatically create SharePoint News Links from an RSS feed

miniwi — Sat, 24 Apr 2021 19:08:27 GMT

Sorry for coming back, but when I add the lines exactly without converting the text into functions, PA doesn't interpret them.

In other words the URL composed for the news post is composed like this:

Outputs:

"BannerImageUrl": "outputs('Get_Thumbnail')?['body']?['d']?['ThumbnailUrl']",

"Description": "<p> dqwdsDS<CSCswcwWc</p>\n<p>Der Beitrag <a rel=\"nofollow\" href=\"https://uavdach.org/?p=1309692\">Neuer RSS Test</a> erschien auf <a rel=\"nofollow\" href=\"https://uavdach.org\">UAV DACH e.V.</a>.</p>\n",

"IsBannerImageUrlExternal": true,

which is obviously simply the text and not the Url expected.

Re: Use Power Automate to automatically create SharePoint News Links from an RSS feed

RaulPop — Sat, 24 Apr 2021 17:43:13 GMT

In terms of syntax, I used exactly (copy - paste) the lines Will mentioned.

When renaming each component, use the ones in my image.

I hope that this works for you.

Re: Use Power Automate to automatically create SharePoint News Links from an RSS feed

miniwi — Sat, 24 Apr 2021 16:29:56 GMT

nope: If I add outputs('Get_Thumbnail')?['body']?['d']?['ThumbnailUrl'] in the blocks edit field, no error occurs but I am not sure if it works. If I use the dynamic input box to add outputs('Get_Thumbnail')?['body']?['d']?['ThumbnailUrl'] OR outputs('Get_Thumbnail') only, the error is reported. Since in the receipt above the OUTPUTS function logo is show, I thought I have to use the dynamic content function.

Also, PowerAutomate doesn't allow to set Url as described.

Anyhow, thanks for repsonding.

Re: Use Power Automate to automatically create SharePoint News Links from an RSS feed

RaulPop — Sat, 24 Apr 2021 16:14:11 GMT

Hello ,

When you rename that component - keep only "GetThumbnail" without the rest - that worked for me.

Best regards!

Betreff: Use Power Automate to automatically create SharePoint News Links from an RSS feed

miniwi — Sat, 24 Apr 2021 15:59:25 GMT

Sad, would love to use it BUT in my international Power Automate environment,

1. the variable reports an error: the reference linked to GetTumbnail is incorrect AND

2. the expression _api/sitepages/pages/reposts is invalid to be set as Url

Any idea? I can set Sharepoint BODY für Url in (2) but miss documentation to understand if this is correct.

Re: Use Power Automate to automatically create SharePoint News Links from an RSS feed

RaulPop — Fri, 23 Apr 2021 17:56:57 GMT

Tested and it works like a charm

Thank you

Export Power Apps and Power Automate user licenses

yhabersaat — Fri, 23 Apr 2021 12:48:48 GMT

Context

During a Power Platform audit for a customer, I was looking for exporting all user licenses data into a single file to analyze it with Power BI. In this article, I’ll show you the easy way to export Power Apps and Power Automate user licenses with PowerShell!

Download user licenses

To do this, we are using PowerApps PowerShell and more particular, the Power Apps admin module.

To install this module, execute the following command as a local administrator:

Install-Module -Name Microsoft.PowerApps.Administration.PowerShell

Note: if this module is already installed on your machine, you can use the Update-Module command to update it to the latest version available.

Then to export user licenses data, you just need to execute the following command and replace the target file path to use:

Get-AdminPowerAppLicenses -OutputFilePath <PATH-TO-CSV-FILE>

Note: you will be prompted for your Microsoft 365 tenant credentials, you need to sign-in as Power Platform Administrator or Global Administrator to execute this command successfully.

After this, you can easily use the generated CSV file in Power BI Desktop for further data analysis:

Happy reporting everyone!

You can read this article on my blog here.

Resources

https://docs.microsoft.com/en-us/powershell/powerapps/get-started-powerapps-admin

https://docs.microsoft.com/en-us/powershell/module/microsoft.powerapps.administration.powershell/get-adminpowerapplicenses

Re: How to beautify your Power Apps

Luise Freese — Fri, 23 Apr 2021 12:39:30 GMT

I will update the article accordingly soon, thank you for your feedback.

1. get the icons

2. upload them into your app

3. include the name of the image into the collection right after `image:` , please don't use the `.svg` at the end of the file name.

Does this help? Please reach out if you need more support

Re: How to beautify your Power Apps

Michael_Larsenmlan — Fri, 23 Apr 2021 10:57:35 GMT

Primarily its it step 1 about adding the collection, not how to make that work and what to do honestly. Does this require I add those icons first, because there seems to be multiple ways to add those icons you mention in the beginning, but can't quite figure that out either.

Re: How to beautify your Power Apps

Luise Freese — Fri, 23 Apr 2021 09:50:02 GMT

^{would it be helpful if you could download this sample app?}

^{Or do you need me in detail instructions?}

SharePoint Framework Community Call Recording – 22nd of April, 2021

Vesa Juvonen — Fri, 23 Apr 2021 13:29:57 GMT

SharePoint Framework Special Interest Group (SIG) bi-weekly community call recording from April 22nd is now available from the Microsoft 365 Community YouTube channel at http://aka.ms/m365pnp-videos. You can use SharePoint Framework for building solutions for Microsoft Teams and for SharePoint Online.

Call summary:

Preview the new Microsoft 365 Extensibility look book gallery co-developed by Microsoft Teams and Sharepoint engineering. Download showcase apps, samples, and documentation. Register now for April trainings on Sharing-is-caring. Give us feedback, the Microsoft 365 developer community survey is now open. Announcing public preview of SharePoint Framework 1.12.1.

There were six PnP SPFx web part samples delivered in last 2 weeks. Great work!

Latest project updates include:

PnP Project	Current version	Release/Status
SharePoint Framework (SPFx)	v1.12.1 (beta)	GA by end-of-April
PnPjs Client-Side Libraries	v2.4.0	April 9th
CLI for Microsoft 365	v3.9 (beta)	Upgrading SPFx projects to v1.12.1-rc.2
Reusable SPFx React Controls	v2.6.0	v3.0.0 when SPFx v1.12.1 GA
Reusable SPFx React Property Controls	v2.5.0	v3.0.0 when SPFx v1.12.1 GA
PnP SPFx Generator	v1.16.0
PnP Modern Search	v3.19 and v4.1.0	April and March 20th

The host of this call is Patrick Rodgers (Microsoft) @mediocrebowler. Q&A takes place in chat throughout the call.

Jungle seating in a Pacific Northwest, Washington, US amphitheater! Truly unique like this Community!

Actions:

Complete the Microsoft 365 Developer Community Survey – https://aka.ms/m365pnp/survey
Reserve date - SharePoint Monthly community call - 13^th of April 8 AM PDT | https://aka.ms/sp-call
Register for Sharing is Caring Events:
- First Time Contributor Session – April 27^th (EMEA, APAC & US friendly times available)
- Community Docs Session – April
- PnP – SPFx Developer Workstation Setup – April 29^th
- PnP SPFx Samples – Solving SPFx version differences using Node Version Manager – May TBD
- AMA (Ask Me Anything) – Power Platform Samples – May 5^th
- AMA (Ask Me Anything) – Tech Community – May 11^th
- First Time Presenter – May TBD
- More than Code with VSCode – April 28^th
- Maturity Model Practitioners – May TBD
- PnP Office Hours – 1:1 session - Register
Download the recurrent invite for this call – https://aka.ms/spdev-spfx-call

Demos:

Running the CLI for Microsoft 365 in Azure Container Instances orchestrated by Logic Apps – or Flow in Power Automate. Step through how the Azure Container Instance is created with the specified managed identity. Docker enables you to bundle a pre-configured version of CLI for Microsoft 365 together with all its required dependencies and also is used to orchestrate containers. Purpose of configuration is to run scripts or reports against your tenant.
Advanced Page Properties web part solution – when the normal page properties web part is not enough, this new Advanced Page Properties web part delivers more. New properties supporting theme variants, capsule format for list options, support for image fields, for links, for currency, and for dates. Tour the code for tracking available properties for drop downs, tracking property selections and parameters for refreshing and rendering the data.
SharePoint Framework 1.12.1 new features – support for Node v12, Gulp 4, Microsoft Teams SDK v1.8 and for creating Microsoft Teams meeting apps. Demos – 1) Increased access to page structure and context to avoid DOM dependency (web part detects DOM structure and selects output size to fit allotted space) and 2) SPFx support for Complex Microsoft Teams solutions (manifest included in Package to synchronize with Teams App catalog).

SPFx extension samples: (https://aka.ms/spfx-extensions)

News Ticker - Ari Gunawan | @arigunawan

SPFx web part samples: (https://aka.ms/spfx-webparts)

Data Table - Chandani Prajapati | @Chandani_SPD
Staff Directory - Tristian O'Brien
OneDrive Finder - André Lage |
Graph MGT Client - Sébastien Levert |
Teams Membership Updater - Nick Brown | @techienickb

Thank you for your great work. Samples are often showcased in Demos.

Agenda items:

Latest updates on SharePoint Framework - Vesa Juvonen (Microsoft) | @vesajuvonen – 6:25
PnPjs Client-Side Libraries - Julie Turner (Sympraxis Consulting) | @jfj1997 – 8:07
CLI for Microsoft 365 - Patrick Rodgers (Microsoft) | @mediocrebowler – 10:20
PnP SPFx Controls - Patrick Rodgers (Microsoft) | @mediocrebowler – 11:34
PnP Modern Search - Patrick Rodgers (Microsoft) | @mediocrebowler – 12:49
PnP SPFx Samples - Hugo Bernier (Tahoe Ninjas) | @bernierh – 13:57

Demos:

Running the CLI for Microsoft 365 in Azure Container Instances orchestrated by Logic Apps – Albert-Jan Schot (Portiva) | @appieschot | deck – 18:04
Advanced Page Properties web part solution – Mike Homol (ThreeWill) | @homol | deck – 32:00
SharePoint Framework 1.12.1 new features – Vesa Juvonen (Microsoft) | @vesajuvonen

– 45:33

Resources:

Additional resources around the covered topics and links from the slides.

The presentation used for this community call
Walkthrough - Running the CLI for Microsoft 365 in an Azure Container Instance
Tool - CLI for Microsoft 365
Docker Hub - m365pnp/cli-microsoft365
Blog - Run CLI for Microsoft 365 in Docker
Article - Improving the Page Properties web part
Repo - Advanced Page Properties

Framework - v1.12.1 public preview \ npm install –g /generator-sharepoint@next
Gallery - Microsoft 365 Extensibility look book gallery | aka.ms/m365/extensibility
PnP Weekly – Episode 123 with guest Power Platform Cloud Advocate - April Dunnam (Microsoft) | @aprildunnam | video | podcast
Viva Connections https://aka.ms/VivaConnections

General Resources:

CLI for Microsoft 365 v3
CodeTour
Sharing is Caring | aka.ms/sharing-is-caring
Tools - PnP Modern Search v4 | https://aka.ms/pnp-search
M365 PnP site | aka.ms/m365pnp
SharePoint Starter Kit v2
Blog: "A Lap Around Microsoft Graph Toolkit" blog series
New Microsoft 365 Patterns and Practices (PnP) team model with new community leads
Microsoft 365 Community Content (non-Dev docs)
PnP SPFx web part samples
PnP SPFx extension samples
GitHub PnPjs
Tutorials - Getting started with SharePoint Framework v1.10 Tutorials (12 videos)
Tutorials - Getting started with SharePoint Framework v1.10 Extensions (6 videos)
Docs - Tutorials and training material for SharePoint Development
SPFX Training Package
SPFx Web Parts
SPFx Extensions
SPFx Library Components
Documentation - PnPjs v2 documentation
Link - Microsoft 365 developer training
Link - Office 365 Developer Program
Latest documentation on SharePoint Framework
Found an issue with SharePoint Dev? - please let us know at http://aka.ms/spdev-issues
Reusable web part property controls
Reusable react controls for SharePoint Framework solutions
Reusable controls webcast
Office 365 CLI
PnP SPFx Yeoman Generator - Extends the out-of-the-box experience with open-source community capabilities
SharePoint Dev UserVoice - for new feature requests

Other mentioned topics:

Upcoming calls | Recurrent invites:

M365 General Dev call – April 29^th at 7:00 am PDT | https://aka.ms/m365-dev-sig
Microsoft Graph call - May 4^th at 8:00 am PDT | https://aka.ms/microsoftgraphcall
SharePoint Framework call – May 6^th at 7:00 am PDT | https://aka.ms/spdev-spfx-call
SharePoint monthly call – May 11^th at 8:00am PDT | https://aka.ms/sp-call
Office add-in monthly call – May 12^th at 8:00 am PDT | https://aka.ms/officeaddinscall
Adaptive Cards monthly call – May 13^th at 9:00 am PDT | https://aka.ms/adaptivecardscommunitycall
Microsoft Teams monthly call – May 18^th at 8:00 am PDT | https://aka.ms/microsoftteamscommunitycall
Power Apps monthly call – May 19^th at 8:00 am PDT | https://aka.ms/PowerAppsMonthlyCall
Microsoft Identity Platform – May 20^th at 9:00 am PDT | https://aka.ms/IDDevCommunityCalendar

SharePoint Framework engineering update from Microsoft
Talk about PnP JavaScript Core libraries
Office 365 CLI Updates
SPFx reusable controls
PnP SPFx Yeoman generator
Share code samples and best practices
Possible engineering asks for the field - input, feedback, and suggestions
Cover any open questions on the client-side development
Demonstrate SharePoint Framework in practice in Microsoft Teams or SharePoint context
You can download a recurrent invite from https://aka.ms/spdev-spfx-call. Welcome and join the discussion!

“Sharing is caring”

Re: How to beautify your Power Apps

Michael_Larsenmlan — Fri, 23 Apr 2021 09:23:15 GMT

Love it..

But a powerapps simpleton like me, might need a more simple guide, since I simply cannot duplicate what you have done here :)

Best regards

Michael

Re: How to configure and use Incoming Webhooks in Microsoft Teams

jameskirsop — Fri, 23 Apr 2021 00:02:18 GMT

How do we use the templating feature of Adaptive Cards through an incoming Teams webhook?

Re: Change your own profile picture as a Guest in Microsoft Teams

MichaelRoth42 — Thu, 22 Apr 2021 09:40:06 GMT

Never mind, of course I was logged in as the wrong user 🤦‍:male_sign:

Re: Change your own profile picture as a Guest in Microsoft Teams

MichaelRoth42 — Thu, 22 Apr 2021 09:21:37 GMT

Super cool idea, but it didn't work for me. I am not allowed to edit my profile in Azure :(