SharePoint – SharePoint Thoughts

CategorySharePoint

Quick Tip: Importing React In SPFx Web Parts

We’re used to importing React into our web parts using this syntax:

import * as React from "react";

But did you know we can also do it using this syntax:

import React from "react";

How’s that possible? Let us talk about the difference first.

import something from “library-name”; is used to import the default export from that library. A “default export” is that thing that is marked as “default” when exporting code from a module. For example, you might see in a module file an export that looks like this:

export default MyClass;

Now when importing it, you can do it with import myclass from ‘MyClassModule’; Basically, the import something from “lib-name”; is a short hand for this:

import {default as something} from "lib-name";

As long as there is a default export, you can use import something from ‘lib-name’;

Now how about the other syntax (import * as something from “lib-name”)?

This is written when the library does not have a default export, but rather exports multiple objects together; for example, you might have the export looking like this:

export { something1, something2, something3}

See? No default export there.. so you you will need to import all (*) from that module. Which is the case with React.. If you go to React’s source code on Github: react/index.js at main · facebook/react · GitHub you will notice that they do not have export default in their file. But.. why can we do it in SPFx web parts?

The reason is, starting with TypeScript 2.7, there is a property in the tsconfig file that allows the compiler to analyze the exported package and treat the whole package as a default export, so you do not have to write the longer syntax (export * as), this property is called allowSyntheticDefaultImports, and as long as it is set to true, it will allow you to do that!

Creating Organization Events Centre

July 24, 2021 / Mohamed Derhalli / 0 Comments

white printer paperr — *Photo Credits: https://unsplash.com/@erothermel*

Holding events is a crucial task for any environment to keep employees up to date with everything taking place in the firm, however what do we do when we have too many departments, each having its own set of events? In this case an events centre to consolidate events is a good way to think about it, and this is what we did at BDO Canada!

Many companies like BDO have many departments, from Taxes, BDO Law, Industries, Digital office .. to IT, Marketing and Human Resources.. just to name a few! Each department has its own events going on and each department is its own hub site with more associated sites connected to it.

Our plan was to create yet one more site, name it Events Centre as part of the Intranet Home hub site that will show events across ONLY hub sites. For example, we have an Industries hub site, “under” that industry site we have associated sites such as Agriculture, Cannabis, etc..

You can use an Events web part on the Industries site to show events across the hub itself, this is a setting that’s available on the Events web part to show events across all sites in the hub:

Now what we want to appear on the events centre is a rollout of all “Intranet” events. To do that we created a content type specific for “Intranet Events”. To have that, we’ll need to create a content type inheriting from the basic Event content type and add it to each Events list and make it the default content type. On top of that, we want to have our own categories, because the categories that exist by default in the Events list don’t match our needs. So to achieve this, we used PnP Provisioning Templates in combination with PnP PowerShell.

PnP Templates will provision everything to the department sites once they are created such as any required site columns, content types, modifications to lists/libraries such as adding content types to these libraries, adding the custom event content type to the events list and making it the default, adding page templates, pages and so on.

The PnP PowerShell will do extra work such as changing the category column values (plus other extra stuff we needed it to do). Now we have a consistent structure for all departments created and all of them have the same content type. Back to our Events centre, we can place an Events web part for each category filtered by that categories name.

In fact we can use the category right without having to create a custom content type, but if you want to make your events scalable for later (for example, get all “Intranet” events in Search) then having your own events content type is very handy.

The end result of this would look like:

One catch is when you filter a category that contains a character such as “-“, you’ll need to replace the – with a space. For example, “Firm-wide” category will be filtered as “Firm wide”.

Notice that the categories don’t represent departments. They are shared across all departments in the environment. With the help of PnP Provisioning templates and PnP PowerShell Scripts we are able to keep this consistency across all departments.

Hope this would inspire you on the possibilities of things you can achieve with such a simple web part like the Events web part.

Feel free to reach out if you need to implement a similar functionality in your environment or if you have any questions, It’d be my pleasure to discuss it with you!

Demo – How to easily create web parts with SPFx and PnP JS

May 20, 2021 / Mohamed Derhalli / 0 Comments

My demo at the Microsoft 365 Community Call is now published. It’s about how to easily create fancy web parts with SPFx and PnP JS.

Here’s the demo:

Using Youtube To Create Fancy SharePoint Headers

March 31, 2021 / Mohamed Derhalli / 0 Comments

As everyone knows, SharePoint now supports adding an image for pages’ headers by using the Extended header type.

Now what if we could have this header animated, from any Youtube video? We could use gif files as a background image, and we could generate these files using some tools to record a Youtube video and create our own headers.

I use a tool called: Screen to gif, which allows me to record the screen and generate my gif file.

For more details on how to accomplish this, watch the video below:

Modern SharePoint Events WebPart Categories

February 20, 2021 / Mohamed Derhalli / 0 Comments

So you want to manipulate the new Categories in the Events WebPart in SharePoint, here are few tips that might help you out!

First of all, you want to do your changes in the list itself, not on the site column. The site column itself won’t be helpful as you won’t find it unless you go to the content type first, and you’ll notice it’s in the Hidden category. So if you want to add your categories, you’ll need to do it on the list itself.

The Category column as it appears on the Event content type (as a site column)

What do you do it if you provision the list as part of a provisioning process aka PnP Provisioning 😉 ? Well, if you run Get-PnPSiteTemplate and try to get the list, you won’t find the categories as part of the exported template. So if we want to change the categories, we’d do it with PnP PowerShell. I’m using P nP.Pow erShell module (using PowerShell Core). In order to change the categories, you’d want to run these commands:

        $ctx = Get-PnPContext
        $field = Get-PnPField -Identity "Category" -List "Events"
        $choiceField = New-Object Microsoft.SharePoint.Client.FieldChoice($ctx, $field.Path)
        $Ctx.Load($ChoiceField)
        Invoke-PnPQuery
 
        $ChoiceField.Choices = "Firm-wide"
        $ChoiceField.Choices += "Community"
        $ChoiceField.Choices += "Industry"
     

        $ChoiceField.UpdateAndPushChanges($True)
        Invoke-PnPQuery

Now one catch here is if you want to filter your Events WebPart to show only events of Category: Firm-wide.. when you filter by Firm-wide, you won’t get back any events back:

You would want to replace the – with space, so you’d filter by Firm wide:

Note if you’re using other WebParts that depend on SharePoint Search (ex: Highlighted Content WebPart), you’ll want to filter the same way by replacing the – with space.

Hope this post helps someone out there!

Ciao!

Picture By: Andrei Stratu @avantgardian

Microsoft 365 & SharePoint Languages Explained

December 10, 2020 / Mohamed Derhalli / 0 Comments

Users in Microsoft 365 (even experienced ones) often get confused as how languages work across the platform. This an important topic specially for organizations that operate across multiple countries, or in countries that have 2 official languages.

There are many areas where a language can be specified in Microsoft 365, and they can be grouped in 3 categories:

Group A: Services whos language can be changed in Account Settings.
Group B: Services who language can be changed in Delve.
Group C: Free For All. (Each service has its own way of setting the language).

We’ll be looking at each one of these categories, and then dig deeper into the new multilingual capabilities of SharePoint.

Group A (Account Settings): These services depend on the current user’s account settings to determine the language. If you login to Microsoft landing page: Office.com, and you want to change the language for that page or the language being used for Forms, Planner, Word Online, Excel Online. Then you need to do this using the account settings of Microsoft 365. To do this, you can follow these steps:

Click on your profile image, and click account settings:

Next, from “Settings & Privacy” section, click on Languages > Display language. (The display language is the one that is used to change the labels across the platform). Here you can assign the preferred language.

Group B (Delve): To change the language for SharePoint and OneDrive, the process is a bit more involved. There are 2 locations where the user can set the language, either on their browser or in Microsoft Delve. Delve has more priority than the browser language settings, meaning that if the user set their Delve settings to French, SharePoint sites will display in French (if French is supported on the site). If the user hasn’t specified a language in Delve, SharePoint will look for a preferred language in the browser settings. If the user hasn’t set a preferred language in both Delve and the browser, the site will be displayed in its default language.

For quick tests for SharePoint multilingual pages, it’s best to use the browser settings as it’s very quick to reflect the changes. Changing the language in Delve will take around 10 minutes to take effect. To change the language in browser will depend on the browser itself, but for Chrome and Edge, it’s done by clicking on the options menu:

Then searching for “languages”, there we can set our preferred language. OneDrive will pick up this change and will be displayed in the browser language if Delve has no default language (remember Delve has more priority). To change the language in Delve, you can refer to this article: https://support.microsoft.com/en-us/office/change-your-personal-language-and-region-settings-caa1fccc-bcdb-42f3-9e5b-45957647ffd7

Group C (Free For All): Services in this group have their own ways to change languages. For example, Teams will allow you to change the language while using Teams client. Stream will allow to change the languages in Stream itself and same for other services in this category.

In the next post, we will see how multilingual sites work in SharePoint and how they’re affected by the settings discussed in this post (Group B). Till the next time!

Working with XML & PnP Provisioning

December 10, 2020 / Mohamed Derhalli / 0 Comments

If you work with PnP Provisioning Engine that much, you might reach a point where you want to have your configuration sitting in an XML file, and read its settings and pass it to your provisioning engine. However, you might run into some issues when dealing with special characters if you try for example to name your sites something such as “R&D”.

We’ll have a look at a case. Let’s say you have an XML configuration file named config.xml, that contains some settings regarding site urls and site names that you want to use in your provisioning engine. One of the values in XML might look like this:

If you try to read its value like this:

Reading XML file with PowerShell

You’ll end up with such an error:

Cannot convert value “System.Object[]” to type “System.Xml.XmlDocument”. Error: “‘<‘ is an unexpected token. The expected token is ‘;’

This means, that we’ll need to encode our value in XML, so we’ll end up with something like this:

Or we can keep the value is XML as R&D, and replace the & with & in our PowerShell script like the following:

Getting XML as string then replacing invalid characters

Now when we get the right value from $Config in PowerShell, it works just fine, and we’ll have a string as “R&D”. However, when we pass this value to our provisioning template:

It will complain again with such an error:

‘ ‘ is an unexpected token. The expected token is ‘;’.

The reason is, when it’s passed from PowerShell as “R&D” to the provisioning engine, it has to be encoded one more time. To do so, we’ll need to execute this before passing our values to the provisioning engine:

[System.Web.HttpUtility]::HtmlEncode($config.parameters.SiteTitle)

We store this in a variable, and pass it as a parameter to our provisioning engine. It will work like a charm!

Sharing Excel Sheet On A SharePoint Page (Or any web page)

August 1, 2020 / Mohamed Derhalli / 0 Comments

You might come across a requirement to share an excel file on any page, or even on a SharePoint page (either on prem or online). Considering the options that would be available, and since we want to share an excel file, so why not using Excel online?

To do this, we can upload our document to either OneDrive or SharePoint online, since both of them will use Excel online to work with the Excel document. Once we do that, we can open our Excel document, then click File > Share > Embed:

In the page that appears you have many options to control the rendering of your excel file, the end result will be an iframe HTML element that you can copy and paste in any page you need (Even any site accessed anonymously).

ONE CATCH: The option to “Let people sort and filter” will provide you with the headers to sort and filter column, but it will also provide you with a refresh button at the bottom of the sheet:

HOWEVER, if you update the data in your workbook and you click on this button it won’t refresh the data. From what I’ve seen, it takes around 5 minutes to refresh the data in this embedded sheet from the actual data source. This button will serve well if you stay on that page for 5 minutes then click it. Otherwise, a page refresh will just give you the updated data after the minutes. So if you change the data in your excel file and don’t see them updated right away, don’t panic, wait a bit then refresh the page.

Now to embed this in a SharePoint on prem page, you can just use the script editor web part, for SharePoint online, you can edit the page, and from the list of web parts choose Embed:

Which is similar to the SharePoint on prem way of embedding the code. There you can just paste the iframe code you got from Excel.

Theme by Anders Norén — Up ↑

SharePoint Thoughts

By Mohamed Derhalli

I work at

All posts

Categories