Tag Archives: Web Part

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.  

Add students’ upcoming assignments to your school’s SharePoint home page

We have launched a new SharePoint web part exclusive for Cloud Design Box customers called My Assignments, allowing students to see all their current and upcoming assignments from their SharePoint homepage.  

Your school’s SharePoint homepage should give students a quick overview of what’s going on in the school community, and their classroom.  

Popular features of a school intranet include the latest news, an announcement from the headteacher and maybe even a word of the day/week to get students thinking.

But, a common question we get asked by our customers is Is there a way to show upcoming assignments on the homepage? and thats why we created this new web part.  

Schools can now add My Assignments to their SharePoint’  pages 

SharePoint home page with My Assignments web part showing students upcoming assignments.

The student can see what assignments are coming up, what class theyre for and when theyre due. The ones that are overdue are highlighted in red.  

Whats more, the student can click the assignment and be taken directly to that assignment page in Microsoft Teams.  

My Assignments SharePoint web part showing students upcoming assignments.

The My Assignments web part has been designed to make it easier for students to keep track of assignments and take more ownership of their learning.    



If you’re a Cloud Design Box customer, you can edit your SharePoint home page and add the My Assignments web part to the page. Please get in touch with support if you need assistance with this.  

If youre not a customer but want to find out how we can help your school or trust achieve more with Microsoft 365, get in touch with a member of our team right now 

How To Share News on Your SharePoint Site

Keep everyone in your organisation in the loop with the news feature on SharePoint. Whether you’re using Microsoft 365 for business or education, this feature is a brilliant way to share important information, announcements and updates. 

The best part is that it’s incredibly easy to set up, create and publish eye-catching content to your SharePoint site members. 

Keith Lown has created a step-by-step guide on how to:

  • Add news links to SharePoint.
  • Add news posts to SharePoint.
  • Bring in news from your other SharePoint sites.
  • Create an email digest with news from SharePoint. 
  • Promote news in SharePoint. 



There are two ways that we can produce a news article within SharePoint. 

Select Add to open a drop-down menu and choose either a News post or News link

Select add to add a new news post or news link

Adding a News Link to SharePoint.

Selecting News link allows you to add a link from an external site into your news section. All you need to do is copy and paste your link. 

This brings up a number of options – you can edit the preview image, title and description. 

Adding a news link to SharePoint

When you’re happy with your News link, click Post and your link will appear in your News area. 

Adding a News Post to SharePoint.

Selecting News post opens up Pages where you can choose from different built-in templates, including Blank, Visual and Basic text.

This provides you with a structure to create your own news content. 

Creating a news post on SharePoint

Each section of this page can be customised – you can change the layout, alignment, colours, set alternative text and add images where appropriate. 

Customising a News Post to SharePoint.

 

Once you’re happy with your content, hit Post news and your post will appear in your News area. 

How to bring in news from your other SharePoint sites. 

Select Edit in the top right-hand corner of your SharePoint site. 

Editing your SharePoint site

Next, go to the News web part and select the pencil icon to start editing it. 

Editing your SharePoint News Web Part

From here, you can change your news source. 

You have three options – bring in news from your current site only, select specific sites to bring in news from and bring in news that’s recommended for the current user. 

If you select Select sites, your frequent sites and recent sites are displayed and you can select which ones you want to bring in news articles from. 

 

Change your news source on SharePoint

 

If you select Recommend for current user, Microsoft will bring in news depending on their assigned role – i.e. news from SharePoint sites they have permissions and access to. 

You can also adjust other settings, such as layout, filters, targeting and order. 

 Customising your news section on SharePoint

 

How to distribute news via email on SharePoint.

Select See all on the News web part. 

From here you can Email a news digest to specific people or groups. 

How to distribute news via email on SharePoint.

 

How to promote specific news on SharePoint

Open up your selected news article. 

Via the toolbar at the top of the page, select Promote.

How to promote specific news on SharePoint

From here, you can:

  • Add page to the navigation.
  • Add the page to an email.
  • Post onto Yammer.
  • Copy the page address.
  • Save page as template.

If you would like to learn more about how we can help your organisation achieve more with Microsoft, please contact a member of our team today.

Google Search Box Web Part

At Cloud Design Box, we have created a free Google search box SPFx web part. It’s a very simple web part to add a Google search box to a modern SharePoint page which then opens up the results in a new tab. Maybe a nice web part for an intranet homepage?

Google Search SharePoint Web Part

You can download it here or even submit code to the project!

A big thanks to Lloyd for writing most of the code to get this to work and for sharing on GitHub! I’m sure we can develop this over time to make it even more useful.

There are web part properties to change the search results url, you can use your local Google search page. In addition to this you can change the default search text and search button text! Enjoy!

Promoted Links Web Part for Modern Pages

Promoted Links Web Part for Modern SharePoint Pages

This web part replicates the classic Promoted Links Web Part but with added features such as web part properties to change the background colour, size of background image and to select which promoted link list to use. You can download it here.

For more information on the full Cloud Design Box learning platform for modern SharePoint or custom workflows and design, Contact us via the website.

If you are interested in developing web parts using the new SharePoint Framework, this web part is a good example of:

  • loading jQuery from CDN
  • adding third party modules
  • making REST calls
  • configuring web part properties

You can find the complete source code in my GitHub repository at https://github.com/CloudDesignBox/cdb-promoted-links.

As soon as I get chance, I will create some additional blog posts on how this web part was created, breaking down the different task lists.

While I work on that, please feel free to download the code and have a play yourselves!

Creating a picture library slideshow using jQuery Cycle2 and the SharePoint framework

In this post, I wanted to show how you can modify the SharePoint framework Hello World web part and add other custom JavaScript libraries to create a simple slideshow.

spfx

Prerequisites

I’m going to start my tutorial after following these steps:

Setup SharePoint Tenant
Setup your machine
HelloWorld WebPart
HelloWorld, Talking to SharePoint

Once that is all working fine, you should have something that looks like this:

spfx-slideshow01

Note: In the solution below, I have removed some of the HTML rendered in the SolutionNameWebPart.ts file (optional):

this.domElement.innerHTML = `
<div class="${styles.solutionName}">
  <div class="${styles.container}">
    <div id="spListContainer" />
  </div>
</div>`;

Pull in images from SharePoint picture library

Create a picture library in your SharePoint site called “Slideshow”. Upload a couple of images into this library for testing purposes.

Inside your project, open up SolutionNameWebPart.ts (found inside your WebPart folder). Change the REST API call so that the picture library item URLs are fetched. Currently the REST query (found in the _getListData function) is pulling list and library names, change it to:

this.context.pageContext.web.absoluteUrl + "/_api/web/lists/GetByTitle('slideshow')/Items?$select=EncodedAbsUrl"

This will return the picture library item URLs.

Add the EncodedAbsUrl as a string to the ISPList object:

export interface ISPList {
  Title: string;
  Id: string;
  EncodedAbsUrl: string;
}

In the “_renderList” function, change the item loop to this:

items.forEach((item: ISPList) => {
   html += `<img src="${item.EncodedAbsUrl}" alt="image" />`;
});

This will now use the EncodedAbsUrl as the image location. Running this using gulp serve should now show the images from the picture library. You may want to add in some mock data for local tests.

spfx-slideshow02

Making it responsive

The images are rendered at their actual size. Some CSS is required to make the images responsive. Add the class ${styles.cdbImage} to the image tag.

html += `<img src="${item.EncodedAbsUrl}" class="${styles.cdbImage}" alt="image" />`;

Open the SolutionName.module.scss file and add the following code inside the last brace.

.cdbImage{width:100%;height:auto;}

Serve the files again and the images will now be responsive.

spfx-slideshow03

Adding jQuery and Cycle2

Download using Node Package Manager

When adding common JavaScript libraries to projects, Node Package Manager is an excellent tool to quickly bundle items. Run the following nodeJS package manager commands:

npm install jquery

npm install jquery-cycle-2

Two extra folders are now created under “node_modules”.

Install TypeScript definitions

In order to use these libraries in TypeScript, a definition file is required for IntelliSense and compilation. jQuery can be added via the TypeScript definition tool in the nodeJS command line:

tsd install jquery –save

jQuery Cycle2 is not available via this command line but can be downloaded from here:

Github jQuery TypeScript

Download it and add it to a new folder called jquerycycle under the “typings” folder. The typings folder contains all the TypeScript definition files. jQuery has automatically been added here. However we need to manually add the Cycle2 definition.

In the root of the typings folder, open the file named tsd.d.ts. This file controls all the definitions which are used in the project. jQuery has already been added, manually add a new line for jQuery Cycle2.

/// <reference path="jquery/jquery.d.ts" />
/// <reference path="jquerycycle/jquery.cycle.d.ts" />

Add libraries to project

Open the config.json file (under the config folder) in the project. This lists all the external references. jQuery and Cycle2 need to be added here so they can be used in the project. In the “externals” section, add:

 "jquery": "node_modules/jquery/dist/jquery.js",
 "jquery-cycle": "node_modules/jquery-cycle-2/src/jquery.cycle.all.js"
 

The libraries can now be included in the project. Go back to the solutionNameWebPart.ts file and add:

import * as myjQuery from 'jquery';
require('jquery-cycle');
 

The object myjQuery should be a unique name for your project to avoid conflicts. jQuery cycle is added using require as it has a dependency on jQuery.

At the end of the _renderList function in the web part class, add the following code to initialise the slideshow:

myjQuery( document ).ready(function() {
    myjQuery('#spListContainer').cycle();
});
 

Refreshing the page, should now give you a responsive slideshow.

spfx

Creating a HTML5 iPhone Web App!

iPhone App Icon

First create two images which will be vital in creating the iPhone web application. The first image is for the app’s icon. This is the icon you will see when you add it to your home screen. Make sure your image is 57px by 57px and save it as a JPEG or PNG file.

iPhone icon

Startup Screen

The second image is for the app’s loading screen. When the icon is selected, the app will start in full screen mode and display a loading screen while it loads the HTML page in the background. This image should be 320px wide and 460px high.
Startup Screen

HTML 5 page

HTML5 does not yet work in any desktop browser fully yet but more mobile web broswers are supporting it.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset=utf-8>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<title>tony is here iPhone web app</title>
		<link rel="stylesheet" href="html5css.css">
		<link rel="apple-touch-icon" href="images/tony-icon.jpg" />
		<link rel="apple-touch-startup-image" href="images/tonystartup.png" />
		<!-- Prompt user to install on iphone if accessed through mobile safari -->
		<script type="text/javascript">
			if (window.navigator.standalone) {
				// fullscreen mode
			} else{
				alert('Install on iPhone by pressing Add to Home Screen')
			}
	</script>
	</head>
	<body>
		<section id="wrapper">
			<header>
				<h1>Tony Phillips SharePoint and Web Design Blog</h1>
			</header>

			<article>
				<section>
					<button type="button" name="Blog" class="css3button" onclick="parent.location='blog.html'">Blog</button>
					<button type="button" name="Linked In" class="css3button" onclick="parent.location='linkedin.html'">Linked In</button>
					<button type="button" name="Facebook" class="css3button" onclick="parent.location='facebook.html'">Facebook</button>
					<button type="button" name="Twitter" class="css3button" onclick="parent.location='twitter.html'">Twitter</button>
					<button type="button" name="Email" class="css3button" onclick="parent.location='email.html'">Email</button>
				</section>
			</article>
		</section>
	</body>
</html>

You may notice a few differences in the example above from a standard HTML page. There are two link tags to provide the iPhone with the icon and loading screen location. These are the two graphics created in the first section of this post.

<link rel="apple-touch-icon" href="images/tony-icon.jpg" />
<link rel="apple-touch-startup-image" href="images/tonystartup.png" />

The two meta tags below scale the site to the mobile device’s screen and enable adding as a web app on the iPhone.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes">

The only new tags in this example are the section, header, article and button tags which all make it much easier to create websites in HTML5. HTML5 is worth a google!

JavaScript

You can also detect if the site is being accessed through the web browser or if it has been loaded from the home screen. If it has been opened in the browser, we can notify the user that they can add this site as a web app. All you need to do is add the following JavaScript in the HEAD section of the HTML.

// Prompt user to install on iphone if accessed through mobile safari
if (window.navigator.standalone) {
// fullscreen mode
} else{
alert('Install on iPhone by pressing Add to Home Screen')
}

Make sure you take full advantage of CSS3 when styling your site. Rounded corners and shadows look great on buttons without the need for background images or jQuery!

To see this example working go to the following URL on your iPhone and add it to your home screen. In my next post I will explain how this could also be a SharePoint MasterPage!

http://www.tonyishere.co.uk/mobile