SPFx Extension – Profile Completeness Meter

With the profile completeness extension we can encourage or force users to fill their profiles. This sample SPFx extension renders a profile completeness score. By clicking the score, user can see the score details as shown below:

react-application-profile-meterreact-application-profile-meter

Used SharePoint Framework Version

SPFx v1.6

Applies to

Solution Author(s)
react-application-profile-meter Joseph Velliah (SPRIDER, @sprider)

Version history

Version Date Comments
1.0 February 13, 2019 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Minimal Path to Awesome

  • Clone this repository
    • Open serve.json file under config folder. Update PageUrl where you wish to test. react-application-profile-meter
  • Move to folder where this readme exists
  • In the command window run:
    • npm install
    • gulp serve

Features

This project contains SharePoint Framework extensions that illustrates the following features:

  • Command extension
  • Office UI Fabric React

Notice. This sample is designed to be used in debug mode and does not contain automatic packaging setup for the “production” deployment.

Console Application – Get Groups using Microsoft Graph API and Azure Active Directory App Authentication

Microsoft Graph is the gateway to data and intelligence in Microsoft 365. Microsoft Graph provides a unified programmability model that you can use to take advantage of the tremendous amount of data in Office 365, Enterprise Mobility + Security, and Windows 10.

You can use the Microsoft Graph API to build apps for organizations and consumers that interact with the data of millions of users. With Microsoft Graph, you can connect to a wealth of resources, relationships, and intelligence, all through a single endpoint: https://graph.microsoft.com.

Register Application

In order to call Graph API you need to have a registered application within Azure Active Directory that has delegated permissions for the API application.

  • Sign in to your Application Registration Portal(https://apps.dev.microsoft.com).
  • Click on the “Add an app” button.
  • Enter the app name and click the “Create” button to proceed further.

  • Copy Application Id(Client Id) and save it.

  • Now you need to create the Application Secret. To do so click on the “Generate New Password” button as shown below. Once you click the button a pop-up screen will appear displaying the generated one time password. Copy the password and save it securely. Then click the “Ok” button as shown below.

  • Add the Microsoft Graph Permission as shown below

  • Click on the “Save” button to update the changes you made.

Grant Admin Consent

Application permissions are used by apps that run without a signed-in user present; for example, apps that run as background services or daemons. Application permissions can only be consented by an administrator.

To grant admin consent through a URL request:

  • Construct a request to login.microsoftonline.com with your app configurations and append on &prompt=admin_consent.
  • After signing in with admin credentials, the app has been granted consent for all users.

Execute Console Application

  • Download the code sample from this link.
  • Open the solution in Visual Studio.
  • Update the following values in the App.config file
    • TenantId – Office 365 Tenant Identity
    • ClientId – Application Id copied in the app registration process
    • ClientSecret – Password / Public Key copied in the app registration process
  • Save and Execute the console application

Output

Note: Output may vary based on the groups created in your tenant.

 

 

 

Special thanks to @Arutvicky for the code cleanup.

Publish SharePoint add-in to Office Store

If you want your SharePoint add-in to appear in SharePoint Store, you need to submit it to the Seller Dashboard for approval. You can add and save your submission as a draft in your Seller Dashboard account until you’re ready to submit it for approval.

Prerequisites

  • Familiarize yourself with the AppSource validation policies
  • Seller dashbaord account 
  • Add-in file in .app format 
  • App logo 
  • App screenshots specific to supported languages 

Steps

This section lists the steps involved in submitting your SharePoint add-in in the Seller Dashboard.

Add a new app

On the overview page, click on Add a new app button 

Listing type

On the listing type page, select SharePoint add-in and click next

Upload package

On the overview page, provide the mandatory field details as shown below and click next 

Language details 

On the details page, select the necessary languages and provide the mandatory field details as shown below and click next 

Block access 

If you want to prevent the app purchases, select the countries / regions 

Lead management 

To get information about users who acquire your add-in, you can submit lead configuration details for your customer relationship management (CRM) system in the Seller Dashboard.

Pricing model

Choose the pricing model fits your need

Save as Draft or Submit 

On your summary page, select EDIT DRAFT and make your changes. Select SUBMIT FOR APPROVAL. After your seller account is approved, you can submit your add-in to the Seller Dashboard. You can make changes at any point before you submit for approval, but during the approval process, you won’t be able to make any changes.

Office 365 Service Communications API

Problem 

  • Office 365 Service Communications can only be accessed by any user with global admin or product admin rights (for Exchange, Skype for Business and SharePoint).
  • Dependencies tied to Office 365 Service, as well as the teams that are accountable for those configuration items

Solution 

The Office 365 Service Communications API is a REST service that allows us to develop solutions using any web language and hosting environment that supports HTTPS and X.509 certificates. The API relies on Microsoft Azure Active Directory and the OAuth2 protocol for authentication and authorization. To access the API from our application, we will need to first register it in Azure AD and configure it with permissions at the appropriate scope. This will enable our application to request OAuth2 access tokens necessary for calling the API. We can find more information about registering and configuring an application in Azure AD at Office 365 Management APIs getting started.

We can use the Office 365 Service Communications API V2 to access the following data:

  • Get Services: Get the list of subscribed services.
  • Get Current Status: Get a real-time view of current and ongoing service incidents and maintenance events
  • Get Historical Status: Get a historical view of service health, including service incidents and maintenance events.
  • Get Messages: Find Incident, Planned Maintenance, and Message Center communications.

Note: The Office 365 Service Communications API has been released in preview mode. When the General Announcement of Office 365 Service Communications API was made, the older version of the Service Communications API began a period of deprecation.

Sample Calls using Postman

commapitoken

commapigetstatus.PNG

Benefits 

  • Provide service health information to partners and endusers.
  • Encouraging early adoption by endusers
  • Plan our change and release management strategy for Office 365
  • Plan our monitoring strategy and tool integration for Office 365
  • Ensure Service Desk and Incident Management know how to proactively operate and support Office 365 in an end-to-end manner by integrating the tools available into our existing processes

Development Scenarios 

  • Build intelligent bots to naturally interact with our users on a website, app, Microsoft Teams, Skype and more.
  • Building Microsoft Teams tab using SharePoint Framework
  • An application that is running in the background, such as a daemon or service

 

 

Microsoft Teams Custom Tab – Video Recorder App using SharePoint Framework

Summary

Sample SharePoint Framework client-side web part for Microsoft Teams Tab illustrating Video Recording using MediaRecorder Web API.

This is an experimental web part. Because this technology’s specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes

Teams Custom Tab

About

Add Custom Tab

API Management - MSGraph

Custom Tab

Applies to

Solution

Solution Author(s)
teams-tab-video-recorder Joseph Velliah (SPRIDER, @sprider)

Version history

Version Date Comments
1.0 November 20, 2018 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.


Minimal Path to Awesome

  • clone this repo
  • run npm i
  • go to this Microsoft article and follow the steps to package and deploy my sample
  • Go to your tenant’s API management page to approve the permission requests configured in this web part.

Features

This project illustrates the following concepts:

  • Building Microsoft Teams tab using SharePoint Framework
  • Packaging and deploying web part as a Microsoft Teams tab
  • Front/Back camera selection
  • Video recording using the supported browsers
  • Playback recording
  • Upload recorded video in user’s OneDrive root folder

SharePoint Online – Analyze User Feedback using Sentiment Analysis API and Microsoft Flow

The Sentiment Analysis API provided by Microsoft evaluates text input and returns a sentiment score for each document, ranging from 0 (negative) to 1 (positive). This capability is useful for detecting positive and negative sentiment in social media, customer reviews, and discussion forums. In this article I am going to show you how to send the feedback entered in a SharePoint online modern list item to Sentiment Analysis API and update the response back in SharePoint. Also I am going to show how to beautify the Sentiment score with emojis using column formatting feature.

Create a SharePoint list with the following columns

columns.PNG

At the top of the list, click Flow, and then click Create a flow.

newflow

Select the below flow template from the right-hand panel.

select flow type.PNG

Follow the instructions on the Microsoft Flow site to connect to the list we have created. Credentials will be verified for each service used in the flow. For Office 365 services such as SharePoint and Outlook, connections will be created automatically. The next steps will be performed in the Microsoft Flow designer. The first action displayed, also known as a trigger, will determine how the flow will be started. Additional actions may be added after the first. Each new action will be dependent on the previous action.

add new step.PNG

Next step is to add an initialize variable action to set the value of the current Item Id.

setitemid.PNG

Create a POST request using a HTTP action. Set the HTTP Method, URI, Headers and Body as shown below:

Note: Login to Azure and get the Ocp-Apim-Subscription-Key. Refer this article for steps.

CallSentimentAPI.PNG

Now let us parse the sentiment score from the response we received from the HTTP action and save the value in a variable using initialize variable action as shown below

SetSentimentScore.PNG

Expression : body(‘CallSentimentAPI’)[‘documents’][0][‘score’]

Here CallSentimentAPI is HTTP action name.

Let us update the sentiment score in the list item using a Send an HTTP request to SharePoint action as shown below

update list item.PNG

Save the flow and go back to the list.

Let us create a new item in the SharePoint list to check the sentiment score for our feedback

new item.PNG

If all goes well, we should see the sentiment score in the list column as shown below

data.PNG

We can check the status of every execution in the flow history as shown below

status.PNG

success run.PNG

To beautify the sentiment score with emojis, we can use SharePoint column formatting feature as shown below

column formatting

I have used the following column formatting formula to convert the sentiment score into emojis

formual.PNG

Hope you liked this post. If you have any questions on sharepoint or office 365, please let me know.

Add Modern SharePoint Site Page in Microsoft Teams

Microsoft Teams is a chat-based workspace that brings together people, conversations, content, and tools for easier collaboration. SharePoint sites include the modern page feature, which allow you to engage the team members with important or interesting stories. Here I am going to show you how to display a SharePoint modern page with in teams as a tab.

I have created a SharePoint modern page as show below:

samplemodernpage.png

Set up SharePoint Modern Page in Teams

  • In Teams, navigate to the team where you want your SharePoint page to appear.

teams1.PNG

  • Click the plus sign to add a new tab.

teams2

  • Click on Website

teams3.png

  • Provide a Tab name and SharePoint Modern page url and click Save. Optionally we can select Post to the channel about this tab check box to communicate this change with the users.

teams4

  • That’s it! Now, every time you visit your team, the newly added tab will appear as part of the teams as shown below

teams5.png

  • You can use the expand / collapse button to view the content the way you like

teams6

Notes :

  • I don’t know if you noticed, but the out of the box sharepoint controls such as Suite Bar, Left Navigation, Search Box, Page Title Area and Command Bar are gone within teams.
  • If you have custom webparts within the page, you can not edit properties of those within teams.
  • You can not change the web part arrangement sequence within teams.
  • You can not display classic page.

Displaying SSRS Reports in External Applications using an iframe – SQL Server 2016

Problem Statement

After upgrading the SQL Server Reporting Service to 2016, the SSRS reports embedded in different applications including SharePoint pages using an iframe tag or page viewer web parts were stopped rendering.

iframe1.PNG

Error

erroriframe

Workaround Tried

I tried to fix this issue by adding the following entries in the rsreportserver.config but no luck.

report config file.png

The rsreportserver.config file is installed in the following location by default:

SharePoint Mode

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\WebServices\Reporting

Native Mode

C:\Program Files\Microsoft SQL Server\MSRS13.MSSQLSERVER\Reporting Services\ReportServer

Solution

Added rs:Embed=true as a query parameter at the end of the report URL and this fixed the issue and reports started working properly.

iframe2.PNG

SPFx Extension – Email Item/File URL

In SharePoint there used to be a ‘copy shortcut’ option in the right-click menu on a document. This feature is not available currently. Now we need to go to the share sub-menu to get a link to the document, but what is offered there is the docidredir link, not the full path.

This SPFx extension opens a dialog where the user can see the document full path. The Email Link button helps the user to share the link via default email client.

react-command-email-urlreact-command-email-url

Used SharePoint Framework Version

SPFx v1.6

Applies to

Solution Author(s)
react-command-email-url Joseph Velliah (SPRIDER, @sprider)

Version history

Version Date Comments
1.0 October 20, 2018 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Minimal Path to Awesome

  • Clone this repository
    • Open serve.json file under config folder. Update PageUrl to the URL of the list you wish to test. react-command-email-url
  • Move to folder where this readme exists
  • In the command window run:
    • npm install
    • gulp serve

Features

This project contains SharePoint Framework extensions that illustrates the following features:

  • Command extension
  • Office UI Fabric React

Notice. This sample is designed to be used in debug mode and does not contain automatic packaging setup for the “production” deployment.