SharePoint Framework Office UI Fabric

SharePoint Framework Office UI Fabric

Today, lets take a look at using SharePoint Framework Office UI Fabric. Lets start by creating a SharePoint Framework project. Create a new folder and execute the yo @microsoft/sharepoint command within the folder. If you have not yet set up your workstation for SharePoint Framework you can check out my post SharePoint Framework SpFx Setup Continue reading “SharePoint Framework Office UI Fabric”

SharePoint Framework SpFx Example

SharePoint Framework SpFx example

Let us have a look at a SharePoint Framework SpFx example without using any client side framework i.e it uses plain vanilla JavaScript or TypeScript.

In the previous post, we set up the development environment and created a simple hello world web part. If you need to setup your dev environment, you can check out the post – SharePoint Framework SpFx setup. Now, lets examine how to
customize the SharePoint Framework SpFx step by step to retrieve and display some list data.

In the top of the HelloWorldWebPart.ts, we need to import the SPHttpClient and SPHttpClientResponse objects. This will provide us the helper methods to make the REST calls.

import {
SPHttpClient,
SPHttpClientResponse
} from '@microsoft/sp-http';

Lets create couple of interfaces to represent the structure of data returned from the api

export interface ITaskListItems {
  value: ITaskListItem[];
}
export interface ITaskListItem {
  Title: string;
}
In the HelloWorldWebPart class, remove the existing default row provided by the framework and add a new row to load the results. Also, we’ll call a
JavaScript method to load the data. The updated render method looks like
public render(): void {
    this.domElement.innerHTML = `
      <div class="${ styles.helloWorld }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <div id="taskListInfo" />
            </div>
          </div>
        </div>
      </div>`;

      this.loadTaskListInfoAsync();
  }

loadTaskListInfoAsync calls two helper methods


private loadTaskListInfoAsync(): void {
this.getListData()
.then((response) => {
this.renderListInfo(response.value);
});
}

One to query the data
private getListData(): Promise {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/getByTitle('Tasks')/Items?$select=Title`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
and a method to load the data to the html
Ensure that you have started the server by running
gulp serve
Now if we navigate to the SharePoint Online workbench and add the webpart, we should see the list of items in the
Tasks list
{sharepoint online site url}/_layouts/15/workbench.aspx
Items in Tasks List
Items in Tasks List

Now we can see the SharePoint Framework SpFx example in the SharePoint online workbench.

Deploy the app

Now lets deploy our SharePoint Framework SpFx example to SharePoint online. Press Ctrl + C to stop the gulp serve

Under the config folder, check the package-solution.json file. You can change any of the parameters such as id,
name etc. You can leave it as defaults for now.

Now, we can package up the solution

gulp package-solution

which will create a package file

helloworld-webpart.sppkg in sharepoint/solution folder
Now we can add this package to our app catalog(Admin center -> apps -> app catalog). If it’s the first time
you are accessing your SharePoint online tenant you need to create the app catalog for this tenant.
SharePoint Framework SpFx Example - Trust App in App Catalog
Trust App in App Catalog

Once it is added to app catalog, it will list the app and error column should say something like ‘No errors’

App Catalog
App Catalog

Now, lets add the SharePoint Framework SpFx example to the dev site. navigate to the dev site and click the gear icon and ‘Add an app’ and select the hello world web part.

Add an app
Add an app

Ensure ‘gulp serve’ is running on your local machine again. Now you can go to any page in your site and add this web part.

App added to page
App added to page

Notice that we are still serving this app from local server. You might get an error if gulp serve is not running
locally.

Deploying the files to Office 365 tenant CDN

Now instead of serving the files locally, we can upload it or host it in the CDN which is given for free by
Microsoft. Let’s go ahead and upload our SharePoint Framework SpFx example package to Microsoft CDN.

First, ensure you have the latest SharePoint
Online Management Shell

Next, connect to your tenant admin site

Connect-SPOService -Url https://<yourtenant>-admin.sharepoint.com

Enable the public CDN for the tenant

Set-SPOTenantCdnEnabled -CdnType Public

Lets check the setting by running

Get-SPOTenantCdnOrigins -CdnType Public and we should get back

Check Cdn settings using Get-SPOTenantCdnOrigins

In the package-solution.json ensure that includeClientSideAssets is set to true.
Let’s package the solution
gulp bundle --shipgulp package-solution --ship and redeploy the package. If the previous local package is already present, it will ask to replace. Click on ‘Replace it’Replace app packageNow, if we refresh our page and go to the console window and check the Sources tab, we can see the files for the SharePoint Framework SpFx example are served
from a public cdn. You can now do a Ctrl + C to end the ‘gulp serve’ on your local machine. The web part will still
work! Congratulations! you have successfully deployed a SharePoint Framework SpFx web part to Office 365 and served the
required files from a public cdn.

Creating a SharePoint SPA using AngularJS and Breeze

Today, we will look at creating a SharePoint SPA using AngularJS and Breeze in a SharePoint hosted app. Single Page Apps or SPA does not mean the application is limited to one page. The experience of navigating between pages is seamless for the user without the postback which happens when navigating to a page.
Continue reading “Creating a SharePoint SPA using AngularJS and Breeze”

Using eDiscovery in SharePoint Online

What is eDiscovery?

Auditors, Record managers and litigators can use eDiscovery to discover content in electronic format. It allows to collect content from multiple sources such as documents, files, emails etc. which could be used in a legal case.
Continue reading “Using eDiscovery in SharePoint Online”

PnP Provisioning Engine

Today, let’s explore the Microsoft patterns and practices or PnP Provisioning Engine solution to provision SharePoint artifacts. The way this works is the business users and designers make the required changes to the UI from the browser in one site. After that, we can import this entire configuration. Then, we can create new sites or artifacts using this configuration.

Continue reading “PnP Provisioning Engine”

Remote Event Receivers (RER) in SharePoint Online

Just like event receivers in the classic model, Remote Event Receivers (RER) in SharePoint Online also have before events and after events. Also called as synchronous and asynchronous events.

If you are not aware of this, what this essentially means is synchronous events are the -ing events. For example ItemAdding event where we can do a validation and cancel the event if the validation did not pass.
Continue reading “Remote Event Receivers (RER) in SharePoint Online”

Branding SharePoint Online

Even though the title for this post is Branding SharePoint Online, this is applicable to on-premises as well. Microsoft is suggesting that we should avoid creating custom master pages. Not that it should not be used, however we should consider other approaches such as themes and alternate css first.

Continue reading “Branding SharePoint Online”