Tag Archives: SharePoint News

SharePoint news from Tony Phillips

A communications portal for Dublin and Dún Laoghaire ETB with Microsoft 365

Dublin and Dun Laoghaire Education and Training Board (DDLETB) worked with Cloud Design Box to build a centralised communication and collaboration portal in Microsoft SharePoint and Teams.  

In this webinar, we speak to Marcella O’Dowd (FET Quality Assurance at DDLETB) about the impact the portal is having on the way people work together in the organisation. 

“DDLETB has responsibility for a variety of education and training services, serving a population of nearly 800,000 people and delivering education and training to approximately 70,000 learners,” Marcella explains.

“We serve a network of around 650 schools, colleges, centres and outreach and community-based settings.” 



Previously, DDLETB had a Google site called Cloud ETB that housed all the Quality Assurance (QA) and curriculum documentation.

“The Google site was a repository to house material. All the FET (Further Education and Training) users had the same access password that offered two access choices: editor or reader,” she continues. 

“This presented a few problems. It wasn’t as secure as we wanted it to be, and we had one instance where someone changed the password so no one could get in to access what they needed.” 

We worked with DDLETB to create a new QA Hub in SharePoint.

Recognising that the team needed a solution that went beyond file storage, we built a portal that encourages communication and collaboration. 

The QA Hub home page. A communications portal for Dublin and Dún Laoghaire ETB with Microsoft 365

“The exciting thing about the new QA hub is that it provides tailored, secure access to everything our further education and training services need, whether that’s downloading a module descriptor, getting programme information, accessing policies and procedures, looking at assessment guidelines or checking when the next committee meetings are happening,” Marcella enthuses. 

“It’s no longer just a repository. It’s a communication and collaboration site. It’s a one-stop-shop for any QA needs.” 

One thing that was particularly important to DDLETB was strict version control of documents:

“To give an example, we currently need to make sure the DDLETB LGBTQA+ Handbook, policies and publications are available. This will be housed on the QA Hub, ready for people to access the most up-to-date version,” she confirms.

The QA Uploader. A communications portal for Dublin and Dún Laoghaire ETB with Microsoft 365

The QA Uploader is another way we’ve helped DDLETB save time and reduce the risk of human error. 

Previously, users would need to download a template from the Google site, fill it out and then send an email to the QA team.

“Our team would have to monitor the email account and check to see if new reports had been submitted. We would then have to re-upload them into the right folders, which was time-consuming and it was easy for emails to go astray when we were monitoring multiple inboxes.” 

“With the QA uploader, the users simply upload their reports directly to the QA Hub and choose the right report type and training centre. This sends us a notification and the file is already stored in the correct, secure folder that can only be accessed by people with the right permissions.” 

The QA Hub Calendar. A communications portal for Dublin and Dún Laoghaire ETB with Microsoft 365

Tedious admin tasks are also being reduced and communication improved by the QA Hub’s new calendar. 

There are a large number of FET and QA dates each year that are usually sent out as a list at the beginning of each academic year, with reminders sent out as dates and deadlines approach. 

“We get a barrage of emails asking when the next course approval or committee meeting is. Previously, we’d have to go to a document with a list of the dates and respond to each email,” Marcella reveals.

“The new calendar feature makes things so much easier. All we need to do is send a link to the calendar. We’ve already seen a huge difference in the number of emails coming in, as people are just going straight to the calendar to check for dates, rather than emailing.”

QA News section. A communications portal for Dublin and Dún Laoghaire ETB with Microsoft 365

DDLETB is using the SharePoint News feature to communicate key information and announcements:

“Having the ability to pop announcements into the QA News is great because everybody who needs to know gets an email about it. What’s more, they don’t need to flag emails or save them into folders because they know they can come to the QA Hub and find the information.”

QA News is also automatically displayed on the SharePoint home pages of FET and QA staff.

With such a big change in the way DDLETB works, there were some reservations about moving from the Google Cloud ETB site to Microsoft 365. However, the feedback so far has been extremely positive.

“With Cloud Design Box’s support, the new workflows make a lovely user experience that is easy for us to manage and support. We needed this to be user-friendly and intuitive and ‘intuitive’ is a word that has been mentioned by users when we’ve asked for feedback,” enthuses Marcella.

“We wanted our users to be no more than three clicks away from whatever they needed. Our users love the layout and the simplicity of it and love the fact they can do everything on one site.”

Our work with DDLETB is part of a wider initiative called the DEIS Connect Project. We have also worked with St Kevin’s Community College and Firhouse Community College (both part of DDLETB) to provision teaching and learning environments. 

If you would like to find out more about our Cloud Box platform, book a free demo today.  

How to add your upcoming events to a SharePoint site with the My Events web part

In this guide, we show you how to add the Cloud Design Box exclusive My Events web part to your SharePoint sites.  

The My Events web part gives you a quick glance at your upcoming events by showing your calendar events from Outlook.  

It would sit perfectly on a home page so users can see their calendar items at a glance whenever they log in.

An example of the My Events web part on a SharePoint homepage

How to add the My Events web part to a SharePoint site. 

Before you add this web part, you need to make sure your Office 365 global admin has approved the Calendars Read API permission. This can be done via the SharePoint admin centre.



 

  1. Head to the site you wish to add it to and hit Edit in the top-right corner of the screen. 
  2. Decide where you want your calendar events to appear on the site and hit the plus button to add a new web part.
  3. Search for “CDB My Events” and Cloud Design Box customers should be able to see our CDB My Events web part.

Search for My Events to find the web part in SharePoint

4. Selecting this will show your personal calendar events for the day.

5. Select Republish in the top-right hand corner. 

With this web part, you can flick back and forth through the days of your calendar.  

An example of the My Events web part in SharePoint

You can also select Open My Calendar to open a full view of your calendar in Outlook. 

An example of an Outlook calendar that can by accessed via the My Events SharePoint web part

There is also a privacy mode which will initially hide the events. This is particularly useful if you are a teacher with sensitive events and you regularly share your screen on a projector. This mode can be configured using the pencil icon when editing the web part.

web part properties

The My Events web part for SharePoint is only available to Cloud Design Box customers. If you would like to find out more about our Cloud Box platform and how we can help improve communication and collaboration in your school or MAT, book a free demo today. 

How to add an FAQ web part to a SharePoint page

In this guide, we show you how to add the Cloud Design Box Frequently Asked Questions (FAQ) Web Part to your SharePoint sites.

The FAQ web part is an extremely versatile addition to any SharePoint site and can be customised to create an interactive FAQs section to help give quick guidance to your users.  

What’s more, it’s searchable, allowing users to type in a question and quickly get an answer.  

The Cloud Design Box FAQ web part on a SharePoint site

One example of the FAQ web part being particularly useful is for IT Help sites. Simply make a list of your most common questions and add them to the web part. It can be really useful for onboarding new staff to SharePoint.  

Meanwhile, it can also be used on teaching and learning sites, guiding students on how to use SharePoint to find their learning resources.  

Below, we show you how to add the FAQ web part to your SharePoint sites – it only takes a minute or two.  



How to add the FAQ web part to your SharePoint site.

  1. Head to the site you wish to add it to and hit Edit in the top-right corner of the screen.  

Note: You need Designer access to be able to do this.  

  1. Decide where you want your FAQ section to appear on the site and hit the plus button to add a new web part.
  2. Search for “FAQ” and Cloud Design Box customers should be able to see our FAQ web part. Search for FAQ on the SharePoint web part options
  3. Select Republish in the top-right hand corner. An example question and answer section will appear.

How to add questions and answers to the FAQ web part. 

  1. Select the cogs icon to open SharePoint settings.
  2. Choose Site contents and you will see there’s now an FAQs folder stored here.Via Settings, go into Site Contents to add a new FAQ
  3. Select the list to add a new FAQ.The FAQ folder in Site Contents on SharePoint
  4. Select + New to add a new FAQ. You can add a question (Title) and answer.

There’s also an option to enter an order number. For example, ‘1’ if you wish this question to appear first.  

Additionally, you can choose to add an attachment.  

Add a new question and answer to the FAQ web part in SharePoint

    5. Hit Save to save the question.

Your FAQs will now appear on the SharePoint site and be visible and searchable for any users with access to that site.

An example FAQ web part on a SharePoint page 

The FAQ web part for SharePoint is only available to Cloud Design Box customers. If you would like to find out more about our Cloud Box platform and how we can help improve communication and collaboration in your school or MAT, book a free demo today.  

How to create a Microsoft Graph SharePoint Web Part to show recent OneDrive files

How exciting, SharePoint web parts can now talk to other parts of Office 365 rather than just SharePoint using the Microsoft Graph and third party APIs!

With the release of the SharePoint Framework version 1.4.1, we now have preview support of the Microsoft Graph API.

In this example, I’m going to create a SharePoint Framework web part to show my latest OneDrive files.

SPFx Microsoft Graph Web Part

I’m going to assume that you already know how to create SharePoint framework web parts, if you don’t, take a look at my previous blog posts:

I will begin with a new SharePoint framework project (no JavaScript framework) using the latest version 1.4.1 (see getting started).

In the new project, open the web part typescript file (src\ webparts\ webpartname\ webpartname.ts).

Import the MSGraphClient using the following code:

import { MSGraphClient } from '@microsoft/sp-client-preview';

Inside the render function in our default class, we are going to define a variable for the service scope.

const client: MSGraphClient = this.context.serviceScope.consume(MSGraphClient.serviceKey);

We can make it easier to catch errors when coding against the MS Graph by installing the typings. You can do this from the terminal in VSCode by running:

npm install @microsoft/microsoft-graph-types –save-dev

This then needs to be imported in the web part typescript file.

import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

Under the line defining the service scope, add the following code to get data from the graph API

    client
      .api('me/drive/recent')
      .get((error, files: MicrosoftGraph.DriveItem, rawResponse: any) => {
        // handle the response
        for (var _i = 0; _i < rawResponse.body.value.length; _i++) {
          htmlcode += `<a href="${rawResponse.body.value[_i].webUrl}">${rawResponse.body.value[_i].name}</a></br>`;

        }
      this.domElement.innerHTML = `
      <div class="${ styles.myOneDriveFiles }">
        ${htmlcode}
      </div>`;
    });

Configuring API permission requests

In the package-solution json file (in the config folder), we need to define which Graph permissions we will be using.
Under “skipFeatureDeployment”, add the following JSON.

"webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "Files.Read"
      }
    ]

To determine the permission levels and which API to use, I used the following references:

Graph Explorer
Permission Scopes

So we can test this, we need to allow access for this API in the Office 365 admin centre. To do this we are going to build and package the solution and then add it to the app catalog.

To package the solution, run the following commands from the VSCode terminal:

gulp bundle –ship

gulp package-solution –ship

This will create a SPPKG file in the sharepoint\solution folder. This is the file you will need to drag and drop into the tenant App Catalog. Please note that the next steps can only be performed on a first release tenant (not just a first release user).

You will see the additional highlighted message below.

SPFx Microsoft Graph Web Part

Open the SharePoint Admin Centre of your tenant, and select to “Try the new SharePoint admin center”, in the upper right corner of the screen.

SPFx Microsoft Graph Web Part

Select “API management”

SPFx Microsoft Graph Web Part

There seemed to be a bit of a bug on this page, I had to refresh a few times before it appeared and it appeared twice (maybe because i tried uploading to the app catalog twice).

Select the request and press Approve

SPFx Microsoft Graph Web Part

Add the web part to a modern page. If you have a pop-up blocker enabled in chrome, you will be asked to disable this.

SPFx Microsoft Graph Web Part

After reloading the page, wow we see Microsoft Graph data inside a SharePoint web part!!

SPFx Microsoft Graph Web Part

You can download the source code from my GitHub page

Creating a choice field in SPFx

When using the SharePoint Framework (SPFx), we can use spHttpClient to manage our REST calls. Creating new fields (columns) in lists is like using jQuery ajax methods, first we feed in the body of our call in JSON format.

const spOpts: ISPHttpClientOptions = {
      body: "{'Title': 'Group', 'FieldTypeKind':2,'Required':false, 'EnforceUniqueValues': 'false','StaticName': 'Group'}"
    };

Then we create the REST call and receive the response.

this.context.spHttpClient.post(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/GetByTitle('List Name')/Fields`, SPHttpClient.configurations.v1, spOpts)
      .then((response: SPHttpClientResponse) => {
        console.log(`Status code: ${response.status}`);
        console.log(`Status text: ${response.statusText}`);
        response.json().then((responseJSON: JSON) => {
          console.log(responseJSON);
        });
      });

However, we get an error when trying to create a choice column using the following body:


      body: "'Title': 'Behaviour', 'FieldTypeKind':6,'Required':true, 'EnforceUniqueValues': 'false', 'StaticName': 'Behaviour', Choices: ['Choice1', 'Choice2', 'Choice3'] }"

Error: “The property ‘Choices’ does not exist on type ‘SP.Field’. Make sure to only use property names that are defined by the type.”

To resolve this issue, we need to add the data type to the request, we structure the JSON in a different way (compared to jQuery ajax calls). This is the JSON required to create a choice column:

body: {'@odata.type': 'SP.FieldChoice','Title': 'Behaviour', 'FieldTypeKind':6,'Required':true, 'EnforceUniqueValues': 'false', 'StaticName': 'Behaviour', Choices: ['Choice1', 'Choice2', 'Choice3'] }

Hope someone finds this useful and saves you a lot of time!

Branding SharePoint using Application Customizers

Collab365 Global Conference

Have you heard about the virtual Collab365 Global Conference 2017 that’s streaming online November 1st – 2nd?

Join me and 120 other speakers from around the world who will be bringing you the very latest content around SharePoint, Office 365, Flow, PowerApps, Azure, OneDrive for Business and of course the increasingly popular Microsoft Teams. The event is produced by the Collab365 Community and is entirely free to attend.

Places are limited to 5000 so be quick and register now.

During the conference I’d love you to watch my session which is called : ‘Branding SharePoint using Application Customizers’

I’ve been a SharePoint designer now for over 10 years. By designer, I mean changing the look and feel of SharePoint. Not just adding simple themes, but making SharePoint, “not look like SharePoint”. It’s a common request for companies and schools to have an intranet or communication portal which reflects their brand and identity. Although Microsoft have come along in leaps and bounds in this area with out-of-the-box options, it’s still a common requirement for some deeper unique branding. The ways in which we apply design customisations have changed over the years. From MasterPages and themes to custom actions, the landscape has been ever-changing but moving slowly towards JavaScript and client-side customisation. In this session, I will go through the SharePoint design technique changes over the years and finish with an example of the most recent SharePoint UI (modern experience). Using the new SharePoint framework, we will build a simple Application Customizer to apply a custom header and footer. This project will be built using web stack tools and libraries such as Node.js, Yeoman and Gulp.

If you join me, you will learn:

  • How to create a new application customizer
  • Using the application customizer to apply branding to modern sites
  • History of SharePoint design
  • Introduction to SASS and TypeScript

Topic(s):

  • Office365
  • SharePoint

Audience :

  • Developer

Time (in UTC) :

  • Thursday, November 2 2017 12:00 Noon

How to attend :

  1. Register here.
  2. At the time listed above go here to watch my session. (you can also add me to your own personal planner from the agenda.
  3. Be ready to take notes!

SUGUK Leeds – Branding SharePoint using Application Customizers

Note: this is an updated blog post to include reference material and demos from the SUGUK meeting in Leeds on 5th September 2017.

I’ve been a SharePoint designer now for over 10 years. By designer, I mean changing the look and feel of SharePoint. Not just adding simple themes, but making SharePoint, “not look like SharePoint”.

It’s a common request for companies and schools to have an intranet or communication portal which reflects their brand and identity. Although Microsoft have come along in leaps and bounds in this area with out-of-the-box options, it’s still a common requirement for some deeper unique branding.

The ways in which we apply design customisations have changed over the years. From MasterPages and themes to custom actions, the landscape has been ever-changing but moving slowly towards JavaScript and client-side customisation.

The most recent SharePoint UI (modern experience) gives designers the opportunity to deploy custom headers and footers to all new SharePoint pages. To make these customisations, we need to use the new SharePoint framework. Projects are built using web stack tools and libraries such as Node.js, Yeoman and Gulp. I’ve provided an overview of these on previous blog posts last year:

Getting started with the new SharePoint framework

Creating a picture library slideshow using jQuery cycle

Demos from SUGUK Leeds on 5th September 2017.

DEMO 2 – Adding HTML and CSS to the Top placeholder

Demo 2 on Github

DEMO 3 – Add Google Analytics, Get Announcements using REST, Show Date and Time, Import jQuery and jQuery Cycle 2

Demo 3 on Github



Note: This is a new video for the release candidate of SharePoint framework extensions.

In the video above, I show how design has changed over the years and I create a new Application Customizer SharePoint framework extension using TypeScript and SASS for design purposes.

It’s an exciting time to be a SharePoint designer and the quicker these extensions are released as general availability, the better! We can then start updating customisations and switching clients over to the new pages.

Branding SharePoint using Application Customizers

I’ve been a SharePoint designer now for over 10 years. By designer, I mean changing the look and feel of SharePoint. Not just adding simple themes, but making SharePoint, “not look like SharePoint”.

It’s a common request for companies and schools to have an intranet or communication portal which reflects their brand and identity. Although Microsoft have come along in leaps and bounds in this area with out-of-the-box options, it’s still a common requirement for some deeper unique branding.

The ways in which we apply design customisations have changed over the years. From MasterPages and themes to custom actions, the landscape has been ever-changing but moving slowly towards JavaScript and client-side customisation.

The most recent SharePoint UI (modern experience) gives designers the opportunity to deploy custom headers and footers to all new SharePoint pages. To make these customisations, we need to use the new SharePoint framework. Projects are built using web stack tools and libraries such as Node.js, Yeoman and Gulp. I’ve provided an overview of these on previous blog posts last year:

Getting started with the new SharePoint framework

Creating a picture library slideshow using jQuery cycle



In the video above, I show how design has changed over the years and I create a new Application Customizer SharePoint framework extension using TypeScript and SASS for design purposes.

It’s an exciting time to be a SharePoint designer and the quicker these extensions are released as general availability, the better! We can then start updating customisations and switching clients over to the new pages.

SharePoint Virtual Summit 2017

The 2017 SharePoint virtual summit took place last week. The previous year had seen a brave new bold redesign of SharePoint into a modern experience. This year we had exciting new announcements building on last year’s vision.

New OneDrive and SharePoint Sync Client

The new version of OneDrive sync client will map out the entire contents of SharePoint and OneDrive libraries without syncing them across. Documents will only be synced when requested on-demand or when a document is opened and edited.

OneDrive Files On Demand

This is great news and solves two problems faced by OneDrive users:

  • Large OneDrive/SharePoint libraries consumed large amounts of local storage syncing across
  • Possibility of errors when large numbers of files synced at once

A new unified sharing interface will be rolled out across OneDrive and SharePoint for a simpler experience. This feature will also be available in windows explorer.

SharePoint Virtual Summit

Communication portals

SharePoint released a new experience team site last year. It has now matured with developers creating third party web parts using the SharePoint Framework. Microsoft have now released a new type of site called a communication portal. This site replaces the older publishing sites used for company intranets. Although the new site is responsive out-of-the-box, we can now apply custom branding and functionality extending this into a true intranet experience.

SharePoint Communication Portal

Integration with Flow and PowerApps

These two new Office 365 apps are gaining momentum as modern replacements for SharePoint Designer Workflows and InfoPath Forms Designer.

Microsoft Flow creates workflows that can integrate with almost any product including Google Calendar, Twitter, Slack and a whole host of other services. Flow will have tighter integration with SharePoint and Flows can be created directly from list views.

PowerApps empowers users to create useful mobile friendly apps with no code for SharePoint and OneDrive. This has now been extended to integrate directly into a SharePoint page. PowerApps can now act as the custom form for SharePoint list data. This was a task previously done using InfoPath Designer or custom code.

SharePoint with PowerApps and Microsoft Flow

There was also news of a more powerful personalised search and much more. You can read the Microsoft review from Jeff Teper here.

So, it’s another exciting year ahead for the SharePoint and Office community!

Microsoft Classroom Webinar

I would like to thank everyone who took part in today’s webinar on Microsoft Classroom by Cloud Design Box.

In the session, we covered:

  • How to get Microsoft Classroom
  • How to create a new class
  • Using OneNote Class Notebook to enhance teaching and learning
  • Setting assignments
  • Marking and returning student work
  • Using the mobile apps
  • How to access School Data Sync (SDS)

The session was recorded for all those who missed the session.



I hope everyone found the session useful. We will be putting on additional webinars and live events later this year. Please follow us on Twitter for the latest updates.