Tag Archives: Web Part

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