Join me at Kansas City SharePoint Saturday on September 16th!

I will be presenting 10 Ways SharePoint Online Will Benefit Your Intranet on Saturday, September 16th, 2017 in Kansas City as part of SPS Kansas City!

There are 20 different sessions across 5 tracks presented by some great speakers and MVPs. All of that for the low low price of free!

1400-hero-kansas-city-mo-dusk-city-view-imgcache-rev1394030674270-web-1400-720

My session:

While many companies have already initiated transformation around their products and customers, that same level of transformation is often not happening around employees. Yet increasing employee productivity can come with an enormous ROI, by streamlining collaboration, reducing the amount of time employees search for content, eliminating manual tasks, and creating faster decision-making that leads to more agile employees and companies.

Discover how you can build a Digital Workspace for your employees by utilizing Office 365 and SharePoint Online to take your Intranet to the next level. By moving to the cloud, we’ll cover how your organization can start delivering more value at an even lower cost. Whether you’re considering a full migration to SharePoint Online or looking at a hybrid scenario, this session will help you envision an even more powerful Intranet for your company.

Key Takeaways:

  • Keep your team connected
    • Access your Intranet from any location and any device, with the ability to also include external parties. Keep information at the fingertips of your employees
  • Embrace an Agile Environment
    • Capitalize on regularly scheduled enhancements to the platform, as well as powerful development capabilities, such as the SharePoint Framework, Microsoft Graph API, PowerApps, and Flow
  • Safe and Secure
    • Discover how SharePoint Online meets security and compliance requirements in even the most demanding environments, while also providing a high level of reliability

What are you waiting for? Go get Registered!

Taking Advantage of the Loading Indicator in the SharePoint Framework

Applies to SharePoint Framework (SPFx)

When making SharePoint Framework (SPFx) client side webparts, it’s common to load some data from somewhere else and then display it on the screen. Even if that data is just coming from a local list these requests are performed asynchronously and you should indicate to a user that the operation may take some time. The easiest way to do this is through the loading indicator. Here’s how it looks by default:

Default Indicator

Did you know that you can easily show/hide this indicator and even customize the text? You can even decide where it’s displayed. WOWEE!

To show the Loading Indicator you can simply call this.context.statusRenderer.displayLoadingIndicator where the this refers to your BaseClientSideWebPart. This method takes 2 parameters.

The first parameter is the element where you want the loading indicator to be displayed. Typically if you are calling this from the main render method in your webpart, you’ll just specify this.domElement. However, you can easily specify any other element (see below for an example). Just be aware that the default styles are currently pretty large.

The second parameter is the text you want to display between Loading and

Loading indicator with some custom text:

Custom Text

this.context.statusRenderer.displayLoadingIndicator(this.domElement,"Some Stuff");

Loading indicator inside a custom element with custom text:

Custom Text - Inline

this.domElement.innerHTML = `
  <div class="${styles.loadingIndicator}">
    <div class="${styles.row}">
      <div class="${styles.container}">
        <span class="ms-font-xl">Critical Information:</span>
        <div class="${styles.specialbox}" id="myspecialbox">
        </div>
        <span class="ms-font-xl">Static text, wowee!</span>
      </div>
    </div>
  </div>`;

//Show the loading indicator inside an element
this.context.statusRenderer.displayLoadingIndicator(document.getElementById("myspecialbox"),"Some Stuff");

Hiding the Loading Indicator:

this.context.statusRenderer.clearLoadingIndicator(this.domElement);

You can find a sample project here: https://github.com/thechriskent/spfxLoadingIndicator

You can download the whole project and run it, or just take a look at the main webpart file.