Getting Started With SharePoint PnP Engine

This blog will give you an overview of the Office 365 Developer Patterns & Practices tools. Moreover, you will see some of the most useful tools available on the market, most of them made by the community of Office 365 developers, to realize the potential of the platform.

Getting to Know Office 365 Developer Patterns & Practices tools

Office 365 Developer Patterns & Practices (PnP), which is a community initiative originally made by Microsoft and today held by a core team of a few Microsoft internals and external community members like MCSMs (Microsoft Certified Solution Masters for SharePoint) and MVPs (Microsoft Most Valuable Professionals). The focus of PnP is to provide training, guidance articles, samples, solutions, and more to support the community of Office 365 developers.

One of the key elements of the PnP offering is a library of helper types, extension methods, and frameworks to make it easy to develop Office 365 solutions. The library is called SharePoint PnP Core library, and it is an open source library that is available for free on GitHub
Also, PnP is being used in other areas as well like SharePoint Framework (SPFx), Office 365 development, Office Add-ins and Microsoft Graph API.

Accessing SharePoint Using APIs

From SharePoint 2010, Microsoft introduced client-side development and use of different types of client-side API’s. The primarily used API’s to access SharePoint objects are:

1) Managed Client Side Object Model
2) JavaScript Object Model
3) SPServices
4) REST API’s

Using SharePoint patterns and practices JavaScript Core Library(PnP JS Core Library)

One of the most useful libraries for SharePoint Framework developers is SharePoint PnP JavaScript Core Library. This library was created to help SharePoint developers work with SharePoint content, simplifying the common operations with a REST wrapper required in most SharePoint applications. It has a simple and powerful API, which uses SharePoint REST API under the hood, but makes operations very easy and as straightforward as possible. It also includes a number of utility and helper functions. The library is currently in version 2.0.

Accessing PnPJS Core Library

To access SharePoint PnP JavaScript Core Library open the repository URL which contains the source of PnP JavaScript core library for SharePoint as showing in the figure below:-

https://github.com/SharePoint/PnP-JS-Core

There are numerous repositories on open source code samples. You can use the URL below to access such repository:-https://github.com/PnP

Learning with Samples

This section presents an example to demonstrate three ways to write the same type of code via SharePoint JSOM, REST and PnP.js.

Using JSOM

Use the code given below for JSOM.

function getwebdetails() {
var ctx = SP.ClientContext.get_current();
oWeb = clientContext.get_web();
ctx.load(oWeb, 'Title', 'Description');
clientContext.executeQueryAsync(new function() {
var wDetails = "Web Title: " + oWeb.get_description() + " ";
console.log(wDetails);
}, onQueryFailed);
}
ExecuteOrDelayUntilScriptLoaded(getwebdetails, "sp.js");

Using REST API

Use the code given below for REST API.

$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web?$select=Title,Description",
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function(data) {
console.log("Web: " + data.d.Title + " - Description: " + data.d.Description);
}
});

Using PnP.js

Use the code given below for PnP.js.

$pnp.sp.web.get().then(function(data) {
console.log(data.Title + ' - ' + data.Description);
});

To Use PnP.js in SharePoint, give reference to 3 scripts on a SharePoint page. as shown below.

< script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js" type="text/javascript"gt</script
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.0/es6-promise.min.js" type="text/javascript"gt</script
<sscript src="https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/2.0.5/pnp.min.js" type="text/javascript"gt</script>

Following are the three types of script files used :

1) Fetch.min.js : This file is required to get the new feature of JavaScript promise work on Internet Explorer.
2) Promise.min.js: This file gives methods like “.then()” and “.catch()”, which are executed when called web service gives a response & fulfilled a promise or gives an error as response respectively.
3) Pnp.min.js: This file is required for SharePoint site objects operations

Tracking the PNP Journey

The PnP journey is fascinating. With a few driving forces within Microsoft and the community, the Office Developer Patterns and Practices emerged some years ago. Office Dev PnP, is a massive project aiming to provide a centralized hub to resolve common issues.In practice, the Office Dev PnP aids developers wishing to become better on their journey with the SharePoint Framework by providing a wealth of guidance and code that can be freely reused. Figure below shares some interesting insights on PnP’s journey and milestones.

Why PnP?

There’re a number of reasons why you should be using PnP. The figure below cites a few key reasons.

PnP JS Helps in
· By default follows good practices and eases Future maintenance headaches
· Benefit from code that was reviewed by multiple people
· Help by creating issues and by submitting pull requests (bug fixes, new features, new controls)
· Helps in simplifying common operations within SharePoint and the SharePoint Framework.
· Contains a fluent API for working with the full SharePoint REST API as well as utility and helper functions.
· Takes the guess work out of creating REST requests, letting developers focus on “what” and less on “how”.

Acknowledging the 3 pillars of PnP

The three pillars of PnP are
PnP Core – wrapper over CSOM.
PnPJS – wrapper of SharePoint Rest API. Also supports Microsoft Graph API. Is fluent and quite awesome
PnP PowerShell – OOTB SPO shell is geared more towards Tenant and Site Collection level events. PnP PS uses PnP Core and is more geared towards lists, files, and list items as well as the tenant, site collection and web events

Conclusion

This blog showcased how to leverage PnP JS Core in SharePoint projects. If you’d like to know more about Office 365 or PnP do write to us today at enquire@aqltech.com.

For more updates on the latest from the world of Office 365 do subscribe to our blogs/newsletters.

PowerApps – Replacement for InfoPath?

InfoPath is Microsoft’s software application that allows users to design, distribute, fill, and submit electronic forms that contain structured data. Till 2015, InfoPath forms were heavily used by most organizations, especially in SharePoint on-premises environment. But, with the involvement of cloud, InfoPath becomes out-dated, and even Microsoft indicated this by discontinuing its services in 2014. However, there is a better alternative available to InfoPath – PowerApps!

So, here we will discuss what the issues with InfoPath are? What is PowerApps? Key advantages of PowerApps, and is PowerApps replacing InfoPath Forms?

Issues with InfoPath Forms

There were many reasons behind the discontinuity of InfoPath. Here we have tried to highlight some of them.

• The last version of InfoPath was released in 2013, which will no longer be supported by
Microsoft after 2026. And in Office 365, it will no longer be supported after 2023
• Microsoft also announced that there would be no new development with InfoPath
• Desktop client for InfoPath form will only be available till 2026
• It is challenging to use InfoPath forms in SharePoint online
• Coded InfoPath forms are no longer supported in SharePoint online
• Migrating InfoPath forms is a bit complicated, as they cannot be migrated easily and
directly. It requires efforts and time to migrate them and make them workable
• InfoPath browser forms don’t work on mobile devices
• It is not easy to maintain InfoPath forms

But, don’t worry! You can still access all the features of InfoPath Forms with PowerApps. Let’s know a bit about PowerApps.

What is PowerApps?

PowerApps is part of the Office 365 ecosystem that allows users to create business apps quickly without writing any code. These apps can run on almost every device and browser. Here are some other benefits of PowerApps:

1. Apps created by PowerApps can easily be deployed to Dynamics 365, SharePoint, Teams,
Power BI, Web or any mobile device
2. PowerApps enable power users (non-technical users) to create apps quickly as it doesn’t
require any coding or visual studio
3. PowerApps almost (Not fully) replaced InfoPath and Access forms
4. Users can create simple apps directly from their browser via – https://web.powerapps.com as shown below:

5. The drag-drop UI of PowerApps enables users to add different controls, images, videos,
forms, etc.
6. There are many OOB templates available to get started, such as:

Key advantages of PowerApps over InfoPath forms

Some key benefits that make PowerApps better than InfoPath Forms are:

1. Working with different data sources in InfoPath forms is a bit complex as developers need
to check the code behind the option mostly. However, working with PowerApps is easier because it works with multiple data sources and service connections in one app.
2. PowerApps supports more than 200 connectors.
3. With PowerApps, users can connect with third-party services as well, such as Dropbox,
Google, Salesforce, Slack, Twitter, Facebook, YouTube, GitHub, etc.
Now, the primary concern of most users is – how they can access PowerApps?

How to Avail PowerApps?

Well, PowerApps is not free to use. As it is a part of O365, so it is only available with Office 365 subscription.

1. Organizations having Office 365 Enterprise E1 or above plans can access PowerApps
2. It is available on per-user license basis, which means every user need a personal license
to run apps
3. There are also two standalone plans for PowerApps:
a) PowerApps Plan1 – With this plan, users can create apps to store and
manage data and do the following things:
• Create canvas and model-driven apps
• Run canvas apps
• Connect with Office 365 data
• Connect data using standard connectors and premium connectors
• Access on-premises data with an on-premises gateway, etc.
b) PowerApps Plan2 – Users can run model-driven apps with code plugin and real-time workflows
To know more about pricing visit Power Pricing. Also, you can download the PowerApps studio from here.

Conclusion

With the above points, we can say that PowerApps is more powerful than InfoPath. Though it doesn’t provide all the features of InfoPath, it is still faster than InfoPath. However, replacing InfoPath with PowerApps entirely depends on organizations. If businesses start adopting PowerApps for their every need, then InfoPath will soon be replaced by it.

Connect with me:
Blog: http://www.meetsameer.com/ Twitter: https://twitter.com/sameerm2003

LinkedIn: https://www.linkedin.com/in/meetsameer/

SharePoint Responsiveness & Mobile Capabilities

Web technology has changed considerably in the past few years. Microsoft has embraced the new generation of open standards in web technology with a fundamental shift in how SharePoint 2013 supports web content management, responsiveness, and mobile capabilities.

Understanding SharePoint’s Responsive Frame-work and Offering

SharePoint has embraced the responsiveness and simplistic design that the modern applications and design landscape demands. Unlike the other offerings of Microsoft, SharePoint also boasts of the intuitive UI, sleek designs and interactive web experiences.

The Microsoft SharePoint app takes care of key elements like:
• resizing as per different resolutions
• screen sizes,
• alternate image mapping,
• CSS media queries

SharePoint 2013 onwards and SharePoint online supports Bootstrap, one of the leading responsive and mobile friendly CSS frameworks. The sites and pages can be accessed by any Desktop, mobile, tablets on any browser without any loss of functionality or page designs.

Leveraging SharePoint’s Mobile Responsiveness Features

In terms of mobile responsiveness, the Microsoft SharePoint app has come a long way in terms of delivering enterprise capabilities and applications on the go, within your pocket. Microsoft offers a dedicated and free of cost app for the following three major mobile platforms:
• Windows
• Android
• iPhones

The app can be installed without any hassles and supports both online and on-premise versions (SharePoint 2013 and above) of SharePoint.

Installing the App

Once a user installs the app, the app will ask for the credentials to authorize. This is a onetime activity. In the case of on-premise versions, users can type in the URL directly and authorize themselves by providing the credentials. The credentials page appears as shown in the image below.

Fig 1: User Sign in page

 

 

After logging in to the app, one finds the mobile version to be very fluid and not much different than the browser-based experience. In case the user is within a SharePoint Online site in the app, he is presented with the following three sections:
· News
· Find
· Me

Exploring the News Section

The news section displays all the news posts across your various sites. The news section lets a user do the following:
• save the posts to view later
• share it internally or externally via Facebook, WhatsApp, etc
• view more details of the news posts
The news posts can be further filtered to show items across these sections.

Fig 2: News Section

Exploring the Find Option

Find is synonymous to the out-of-the-box search that SharePoint offers in its web versions. The Find screen lets the user search for contents. SharePoint offers an extensive search that filters the results across the following sections as shown in the figure below.
• All
• Sites
• Files
• People
• News

The Find landing screen also displays the frequently visited sites, People, recent files, etc.

Fig 3: Find Section

Exploring the Me section

The Me section is the people section of the app where a user can view all his details. The section has two tabs- Recent and Saved. Recent display the items that a user has recently accessed. Saved displays all the items saved by the user.

Fig 4: Me section

Understanding Additional Features in the SharePoint App

SharePoint offers smooth navigation in the app. For example, if the user has to visit any site, he can directly use the Find screen. In case the site does not open from the Find section a user can also use the “More sites” option.

On opening the site, a user can work with files, documents, lists, etc. There is a mobile menu for site content navigation. Clicking on it will open the available options as shown in the next image.

Fig 5: List Menu on opening a site

SharePoint also allows users to add documents and folders with ease. Users can perform the following options on the documents
• Download
• Delete
• Copy link
• View
• Manage version history

Fig 6: Managing Documents within a site

Conclusion

These were some of the key highlights from the SharePoint app. The app lives up to the pocket-sized gateway to your enterprise applications. As we have seen, SharePoint allows many useful actions that can be performed on the go.

Microsoft rolls out new features in its SharePoint app with every new update. If you’d like to be posted on these, learn more on this topic or are keen to get answers to some very specific queries, feel free to write to us at emailid@domainname.

To check more on customized solutions for Office 365 do visit our website http://aqltech.com.

Connect with me:
Blog: http://www.meetsameer.com/ Twitter: https://twitter.com/sameerm2003  LinkedIn: https://www.linkedin.com/in/meetsameer/  

Using PnPJs with React Framework In SPFx

This blog focusses on some of the best practices while using PnPJS with react framework in SPFx.

SharePoint SPFx Development Model is designed to help both new and existing devel-opers better acquaint themselves with the new set of tools required to do the job, as well as providing clear instructions how some of the server-side full trust development model practices can be achieved with this new framework.

Moving into the cloud and away from server-side takes away certain customization capabilities, but enhances the client-side look and feel. Relying on the SPFx framework, this new model can be used to create modern lightweight web applications in Share-Point Online.

Building your SharePoint Framework (SPFx) web parts:

You may choose to use @pnp/sp library when building your SharePoint Framework (SPFx) web parts. This library provides a fluent API to make building your REST que-ries intuitive and supports batching and caching.

PnPJS is a fluent JavaScript API for consuming SharePoint and Office 365 REST APIs in a type-safe way. You can use it with SharePoint Framework, Nodejs, or JavaScript pro-jects. This is an open-source initiative provided by Microsoft offering developers an an-other way to consume information from SharePoint and Office 365.

The next section enumerates the steps to build a SPFx web part which uses MS Graph API through PnPjs.

Getting Started

This section focusses on Building SPFx webpart using MS Graph API through PnPjs.
Before running the steps mentioned below, check the version of Node JS and NPM in your environment as shown in the figure below.

FIG 1: CHECKING THE VERSION OF NODE JS AND NPM

Building SPFx webpart using MS Graph API through PnPjs

1. To create a SPFx web part project first create a scaffolding using the command yo @microsoft/sharepoint. The yeoman generator will ask questions like including which type of framework you want to choose .Select React as framework and press enter.

FIG 2: CREATING A SCAFFOLDING USING YEOMAN GENERATOR

2. For using PnPjs, it is necessary to Install PnPjs dependencies. Run the below com-mand in Node JS command prompt

npm install @pnp/common @pnp/odata @pnp/logging @pnp/graph @microsoft/microsoft-graph-types –save

This command will also install useful type definitions for MS Graph types.

3. Open your webpart (i.e. main webpart file – PnPGraphWebPart.ts) and import setup method:

import { setup as pnpSetup } from ‘@pnp/common’;

FIG 3: IMPORT SETUP METHOD

Add onInit (method which is called before the DOM is rendered) and configure spfx-Context with an instance of web part’s context (i.e. current context).

FIG 4: CONFIGURING SPFXCONTEXT

4. To access Microsoft Graph API, one needs to specify READ permissions to request data in the web part. Open ./config/package-solution.json (from the config folder) and add permission requests, as shown in the figure below:

FIG 5: ADDING PERMISSION REQUESTS TO ACCESS MICROSOFT GRAPH API

Note: This example uses Group API to show Office 365 groups so that all the groups which are created at tenant level (O365) will be shown in the client side web part.

5. Once the web part is developed, it needs to be bundled to create a package which will create .sppkg package in the sharepoint folder. Run the commands given below to bun-dle and package your solution.

gulp bundle –ship
gulp pacakge-solution –ship

On running the above commands, .sppkg file will be created, as shown in the figure be-low.

FIG 6:CREATING THE .SPPKG FILE

6. The package created in the previous step needs to be uploaded on your tenant-scoped App Catalog. Upon uploading you will see a screen as shown in the figure below.

FIG 7: UPLOADING YOUR TENANT-SCOPED APP CATALOG

The message means that you should approve all permission requests which we added earlier.
The next section explains how to approve app permission requests.

Approving App Permission Requests

There are different ways to approve your permission requests (UI, PowerShell, and O365 cli). The simplest one is through the new UI of SharePoint central administration. You can navigate to your old SharePoint admin center and click “Try new” UI from there. Or you can simply open a page
https://-ad-min.sharepoint.com/_layouts/15/online/AdminHome.aspx#/webApiPermissionManagement (replace “ with your real organization name), please find be-low the screenshot:-

Go ahead and select your APIs and click Approve. Once approved, you will see the screen as shown in the figure below.

FIG 8: API MANAGEMENT SCREEN

graph.groups.get<Group[]>().then(groups => {
this.setState({
groups
});
});

The code mentioned in the image below is used to access Office 365 groups using Graph API (Groups API)

FIG 9: ACCESSING OFFICE 365 GROUPS USING GRAPH API

On completion of the above steps, simply run gulp serve and open SharePoint hosted workbench (it only works in hosted one) to see the output. The output will be as shown in the figure below.

FIG 10: GROUPS AT YOUR TENANT

Cross Verifying the Output

To cross-verify the output, check the below screen where Office 365 groups are shown. Go to Office 365 admin center and click on Groups on left and check the groups which are created.

FIG 11:CROSS VERIFYING THE OUTPUT USING GROUPS

Note: Web part in this solution illustrates the following concepts on top of the SharePoint Frame-work:
1. showcases PnPJS configuration inside SharePoint Framework
2. showcases how to use MS Graph with PnPJS
3. showcases how to correctly configure SharePoint Framework solution and tenant to allow PnPJS to call MS Graph

Important Tips

1. Please use http://aka.ms/sppnp for the latest updates around the whole SharePoint Patterns and Practices (PnP) initiative.If you want to learn more about PnP JS Library, refer the URL – https://pnp.github.io/pnpjs/
2. The following packages comprise the Patterns and Practices client side libraries.
@pnp/common: Provides shared functionality across all pnp libraries
a. @pnp/config-store : Provides a way to manage configuration within your application
b. @pnp/graph : Provides functionality to query the Microsoft Graph
c. @pnp/logging: Light-weight, subscribable logging framework
d. @pnp/nodejs: Provides functionality enabling the @pnp libraries within nodejs
e. @pnp/odata: Provides shared odata functionality and base classes
f. @pnp/pnpjs: Rollup library of core functionality, mimics sp-pnp-js
g. @pnp/sp : Provides a fluent api for working with SharePoint REST
h. @pnp/sp-addinhelpers: Provides functionality for working within SharePoint add-ins
i. @pnp/sp-taxonomy: Provides a fluent API for querying taxonomy in-formation
j. @pnp/sp-clientsvc: Handles generic communication with client.svc endpoint, removing SP.*.js dependencies

Conclusion

This article explained how we can use PnPJS in SharePoint Framework (SPFx) client side web-part by using React as JavaScript framework.

If you’d like to know more on this topic write to us today at reachit@aqltech.com.
To get latest updates and hear new on Office 365 subscribe to our blog section now.

Connect with me:
Blog: http://www.meetsameer.com/ Twitter: https://twitter.com/sameerm2003 LinkedIn: https://www.linkedin.com/in/meetsameer/

Import Mode Vs Direct Query

Power BI is a powerful business intelligence tool for analyzing your data and presenting it visually.

Power BI is best known for the impressive data visualizations and dashboard capabilities it has. However, before you can begin building reports, you first need to connect to the necessary data sources. When establishing a connection to a data source, you may be presented with one of two different options on how your data should be treated: Import or DirectQuery. This blog will help you determine when to use Import Mode or DirectQueryMode for a project.

Understanding Import Mode Vs DirectQuery Mode:

Power BI offers two types of connections to build a report.
• Import Mode
• DirectQuery Mode

To decide which connection to use do a preliminary check by asking yourself the following questions, before loading the data.

1. Is your requirement to load the data daily or weekly?
2. If your requirement to load data is daily, how frequently should it be refreshed?
3. What is the size of your dataset?
4. Do you always need fresh data?

The following image pictorially describes the best option to be used as per the answers you get to the preliminary check questions.

Fig 1: Preliminary Check Questions For Decision Making

Getting to know the thumb rules for decision making

This section enumerates a few thumb rules for easy decision making to choose between Import Mode Vs DirectQuery.
• Import Mode is most suitable and recommended if the requirement to load data is weekly or daily.
• If however, the requirement to load data is many times in a day – like daily with a 3-hour frequency – then Import Mode rather than DirectQuery Mode is recommended.
• If the objective is to always have fresh data, then DirectQuery Mode is required.
• If your dataset is less than 1 GB, then the Import mode is suitable. For larger datasets, it is better to connect with DirectQuery mode.

Understanding how DirectQuery works:

This section lists the initial steps while using DirectQuery and also highlights some key facts.
Following are the steps while using DirectQuery:

• Whenever the user interacts with any Power BI visualization, a query is sent to the actual data source.
• The performance can be checked using SQL Profiler if there is a connected SQL Server database.
• If the page has 10 visualizations, then a database query is called for whenever a visual is clicked.
• An independent query to the original data source is created for each and every visualization.

Following are some key facts about DirectQuery

• DirectQuery performs much slower than Import mode.
• DirectQuery Mode only supports Single data source unless a composite model is being used.
• DirectQuery Mode has some limitations related to Power Query. It does not support all transformations within the Power Query. It completely depends on the data source that is being used.
• There are many limitations with regards to DAX in DirectQuery. These are listed below:
• Calculated Tables are not supported with DirectQuery Mode.
• Built-in Date Hierarchy is not supported.
• Calculated columns and measures can be written, but all DAX functions cannot be used.
• The limited number of DAX functions are supported.
• It restricts us from using OOTB Time Intelligence functions.
• Any DAX expression we apply gets executed as T-SQL script on the data source.
• There is no need to refresh data with DirectQuery. It refreshes data every 15 minutes.

Understanding how Import Mode works

This section explains a few key facts about the ImportMode. These facts will help you for better decision making.

Following are the key facts about Import Mode:

• Import mode loads all the data in Power BI Desktop.
• The performance is much faster than a DirectQuery Mode.
• It supports multiple data source.
• There are no limitations of the DAX and ETL operations.
• With Import mode, 8 schedule refreshes in a day can be set with Power BI Pro license.

Helping you choose the best option

Now that you have learned about the two different ways to connect to your data, you’re left to wonder which option is best for you. It’s fair to say that the choice you make will really depend on the requirements of each individual project you. However here are few recommendations for quick decision-making.

Use of DirectQuery Mode is recommended when:
• Reflection of the data is needed frequently, near to “real-time data” processing.
• Size of the dataset is very large (petabytes).

Use of ImportMode is recommended when:
• Reflection of the data is needed once in a day or week or month or frequent interval of hours.
• Size of the dataset is less than 1 GB.
• When there is a need to connect different multiple data sources.

Conclusion

In this blog, we learned about the benefits and disadvantages of each query mode and understood methods for weighing the right options for decision making.
If you’d like to learn more about data transformations and Power BI,

subscribe to our blog now or write to us at ReachIT AQL <reachit@aqltech.com>.

To know more about Office 365 and Microsoft Power BI log on to our website www.aqltech.com