Tag Archives: Design

One-minute trick for a professional-looking SharePoint site – CDB Section Breaks Web Part

We’re thrilled to announce the release of the new CDB Section Breaks SharePoint Web Part, which adds a new dimension to your SharePoint page design.

The CDB Section Breaks Web Part allows you to create different shaped sections on your SharePoint sites, for example curved or zigzag lines that add more flare and visual interest to otherwise static and square pages.

CDB Section Breaks

In this video, Tony shows you the different design choices and how you can easily create a more dynamic and exciting SharePoint site.



 

How to add attractive section breaks to your SharePoint sites

Start by editing your SharePoint site.

  1. Scroll down to where you’d like to add the new section break and select the + button to Add a new section.
  2. Add a Full-Width Section.

Add a full-width section in SharePoint

3. Select CDB Section Breaks. This adds a default curved section break, but you can pick from a long list of design options.

4. Tap the pencil tool in the top-left corner of your new CDB Section Breaks Web Part.

5. Select the type of section break you’d like to add. For example, Curves, Circles, Castle, Chequered, Clouds, Triangle, Mountains, Paint, Round, Waves and Zigzag.

zigzag sharepoint

6. Select Republish in the top-right-hand corner. An example question and answer section will appear. 

Change the colour of your CDB section breaks.

Changing the colour of your CDB section breaks is easy. You can change the colour to any colour within your organisation’s pre-set colour palette. We recommend changing it to the same colour as the adjacent section so it flows nicely as you scroll down the page.

  1. Select Edit Section on your Section Break.
  2. In the Configuration menu, you can Select Image Shading to change the colour of the section break or Select Background Shading to change the colour underneath the section break.

Change the colour of your section breaks in SharePoint

You may also like:

The CDB Sections Breaks 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.  

 

 

 

 

School Homepages in SharePoint – The Ultimate Guide

Creating a visually appealing yet functional homepage for your school or trust is challenging. It isn’t easy to strike the right balance between including all the information, links and announcements and making it look engaging and fresh for staff and students.

What’s more, creating and maintaining SharePoint sites can be time-consuming. You want to make sure your school homepage is updated with the latest news, announcements and resources, but you don’t want to be tied to manually updating it every day. 

We’ve created this ultimate guide, so you have all your bases covered, from must-have web parts for schools and trusts to simple design tips that will transform how your pages look. 

The best part? Once set up, a lot of the content automatically updates, pulling information from other SharePoint sites, document libraries and external web pages. 



Get started creating a school homepage in SharePoint.

Your SharePoint homepage is made up of different web parts. Web parts are essentially widgets or content blocks that can be configured to display different types of information.

You can add web parts to the sections of your SharePoint homepage.

How to add a section to your SharePoint homepage.

Hit Edit at the top-right-hand corner of your SharePoint homepage.

Select the plus icon in the top left corner of your homepage to bring up a list of Section types to choose from:

  • One column
  • Two columns
  • Three columns
  • One-third left
  • One-third right
  • Full-width section
  • Vertical section

Add different sections to your SharePoint homepage to add interest and variety

Tip: Use several different section types on your SharePoint homepage to make them more visually interesting.

How to add a new web part to your SharePoint page.

  1. Hover over a section, and a plus icon will appear.
  2. Hit the plus icon to bring up a list of available web parts.
  3. You can use the search part to look for a specific web part, or filter by category.
  4. Select the web part you wish to add to your page.
Note: Some web parts are only available in certain sections.

Some top tips for creating a beautiful SharePoint site:

  • Use different section types to make your site look more interesting.
  • Stick to a specific colour scheme.
  • Use the Spacers web parts to spread out content on your page.
  • Stick to high-quality images that are either taken by your school or trust, or from the Microsoft stock image bank.

We have created a full guide on how to make SharePoint sites look great here. 

Must-have web parts for your school or trust SharePoint homepage.

Sharing links, resources and documents in SharePoint.

Hero links.

With the Hero web part, you can add up to five links on a hero-style banner with clickable tiles.

You can pick 1, 2, 3, 4 or 5 links.

Some example destinations you could link to on your school or trust homepage are important documents and policies, key areas of the SharePoint site or external links to other frequently used sites.

Add a Hero banner to SharePoint linking to key resources and documents

Customise your Hero banner by:

  • Editing the title of the link.
  • Adding a background image – you can use a colour block, add your own image or choose from one of the many stock images from Microsoft’s library.
  • Add alternative text to assist usability and accessibility.
  • Add/remove a call to action such as “Learn more” or “Visit now”

Jump to the Hero Links section in the video.

Promoted links.

This is a Cloud Design Box exclusive web part.

The Promoted Links web part helps you navigate the key document libraries within the current SharePoint site.

promoted links

You can add a different title – for example, “Libraries” or “Resources” and configure it to show certain libraries.

Save time by checking “Include document libraries from the current site automatically”. Doing this ensures that any new libraries created in this SharePoint site are automatically shown in your Promoted Links section.  

Tip: Users with permissions can add a new document library by selecting New and Document Library.

Jump to the Promoted Links section of the video.

Quick links.

The Quick Links web part allows you to add a list of links to internal or external pages.

It’s easy (and quick) to add a link, and you can rename the links and customise their icon or image.

Jump to the Quick Links section of the video.

The Quick Links web part allows you to add a list of links to internal or external pages.

Sharing news and announcements on SharePoint.

News.

Add a news feed to your SharePoint homepage to share announcements and news with the rest of the school or trust.

You can configure the News web part to pull in news from different sources. For example, the current SharePoint site, multiple SharePoint sites or news that is tailored to the current user (this pulls news from any sites that the user is a member of).

announcements and news

The filter tool is handy if you want to only show news with certain keywords. For example, “Sports” if you are designing a sports homepage.

Pick from several different view options, including a list, side-by-side, tiles or carousel.

There is a slider option to choose the number of news items to display, and you can also choose whether to display info, such as number of views, author and publish date.

Tip: Users with permission can add a new news post or link. Select New in the top-left-hand corner and News link or News post.

Jump to the News web part section of the video.

Events.

The Events web part enables you to post important events to your site.

Similar to the News web part, you can configure it to display events from certain sources. For example, “Events from this site”.

Post important events to your SharePoint site with the Events web part

You can also narrow down your events by category or date range.

On top of this, you can choose whether to display your events in a film strip or grid style.

Add a new Event by hitting Add Event at the top of the web part.

From here, you can add a title and image, choose your start and end times, and a location or meeting link if it’s online.

You can also set a category, add a description or invite and tag people.

Jump to the Events section of the video.

Twitter feeds.

Another way to ensure your school SharePoint homepage isn’t static is to embed social media feeds.

The Twitter web part can be used to display tweets from any account. We’d suggest using it for your school or trust’s Twitter account.

Simply type in the username to start displaying Tweets from that account.

The Twitter web part can be used to display tweets on your SharePoint site.

Jump to the Twitter section of the video.

Personalised SharePoint web parts. 

My Profile.

The My Profile web part automatically creates a profile banner that is tailored to the user who is logged in.

The My Profile web part in SharePoint creates a profile banner, automatically tailored to the user.

The profile includes the user’s photo, name and a list of handy links that are relevant to them. For example, My Classes, My Assignments and OneDrive.

Jump to the My Profile section of the video.

My Events.

The My Events web part gives you a quick glance at your upcoming events by showing your calendar events from Outlook. This is exclusive to Cloud Design Box customers.

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

Our customer-exclusive My Events web part gives you a quick glance at your upcoming events in SharePoint.

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

Jump to the My Events section of the video.

My Class Teams.

The My Class Teams web part brings in all the Class Teams you’re a member of, whether you’re a student or teacher. This is exclusive to Cloud Design Box customers.

You can click on a Class Team, which will take you directly to the class within Microsoft Teams.

My Class Teams

Jump to the My Class Teams section of the video.

My Assignments.

My Assignments is great for student homepages as it allows students to see all their current and upcoming assignments. This is exclusive to Cloud Design Box customers.

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

Our customer-exclusive My Assignments shows students' set and due assignments in SharePoint.

Jump to the My Assignments section of the video.

Add media and other content to your SharePoint homepage.

YouTube and video.

You can embed a YouTube video by inserting the YouTube web part and copying and pasting in the YouTube link or embed code.

Tip: If you want to embed a video into SharePoint that is hosted on another platform (i.e. not YouTube), you can use the Embed web part.

Jump to the Add Video section of the video.

Word of the Day.

The Word of the Day web part updates every day of the year with a different word. This is exclusive to Cloud Design Box customers.

You can select our pre-populated word banks, or create your own list of words. The Word of the Day web part could also be used for a “Quote of the Week”.

Our customer-exclusive Word of the Day web part updates your SharePoint site every day or week with a new word or quote.

Jump to the Word of the Day section of the video.

CDB Blogs.

If you want to share our helpful teaching and learning guides with your staff and students, you can use the CDB Blog Post web part to automatically pull through our latest blogs, guides, podcasts, videos and resources.

Depending on the page you’re creating, you can filter our blogs to focus on student tips, teacher guides or parent guides.

Jump to the CDB Blogs section of the video.

Share our helpful teaching and learning guides on your SharePoint sites with the CDB blogs web part.

Found these tips useful? Share this guide with your colleagues.

How To Make Your SharePoint Sites Look Great

Creating a visually appealing SharePoint site is vital if you want people to engage with it regularly. But you don’t need to spend hours designing and curating your sites for them to look good.

We’ve created a video to show you that it’s possible to create a professional and captivating SharePoint site in under 20 minutes. By sticking to our top tips, you can make sure your organisation’s SharePoint sites look clean and well-designed while remaining practical and informative.



Get inspired by the SharePoint look book.

Microsoft has put together a free resource filled with inspiration for SharePoint sites, whether you need pages for news, announcements, resources or training.

The beauty of the look book is that if you see a site you like, you can add it to your SharePoint as a starting point.

SharePoint look book

Use high-quality images.

Inject life into your SharePoint site by using eye-catching imagery.

There are plenty of free and high-quality image resources out there, so you don’t necessarily need to spend money on bringing a photographer in to take team photos.

The SharePoint look book is a great place to download professional photos, and SharePoint itself has an image library filled with all types of pictures to suit your needs.

By filling your site engaging imagery, you’re already halfway there to making it look good.

SharePoint Design

Stick to a colour scheme.

Once you start playing with colour in SharePoint, you can truly make a site your own. Use your brand colours and stick to a simple colour palette of around 2-4 shades to keep everything looking consistent and professional.

You could go one step further and bear this colour scheme in mind when selecting images for the site.

Section variety.

When you have lots of content to showcase, important messages can easily get lost in the noise.

Make sure you break up your content into logical sections and ensure these sections look distinctive from each other.

Again, use colours to differentiate each section. As Tony shows in the video demonstration, you can make some areas pop with a brighter hue, followed by a simple muted tone for the next section.

Be sure to use different layouts for each section and mix it up with your column numbers and sizes.

SharePoint sections

Think about spacing.

Avoid cramming your pages full of content and instead separate out elements with spacers. A bonus tip to ensure your spacing is consistent throughout is to stick to a specific spacer size, for example, 20 pixels.

SharePoint spacing

Toggle Between Published and Edit Mode.

When editing a SharePoint site, it’s easy to get fixated on how it looks in Edit mode rather than what it will look like when finally published.

Switch between Published and Edit mode to give yourself a chance to step back and look at it through the eyes of your users.

Engaging content.

It’s all well and good creating an attractive SharePoint site, but you also need to ensure the content is relevant, engaging and adding value to your end-users if you want them to use the site consistently.

Think creatively and don’t be afraid to add some fun, light-hearted content in there.

As you can see from our demo video, Tony uses a Word of the Day web part and also a short message from the CEO. It’s about finding the balance between this type of content and your more serious stuff, like policies and company updates.

Engaging Content

Additionally, make sure your SharePoint site isn’t static is by adding the News web part that links in and pulls content from your company news pages so your readers will always have the latest articles and updates at their fingertips.

If you have any questions about creating SharePoint sites for your organisation, please get in touch with a member of our team right now.

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!

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!

How to show SharePoint list data in a pivot table

List data inside SharePoint can be pulled into Excel as a data source which can in turn be embedded on a SharePoint page as a graphical representation of the SharePoint list data. Great way to spice up your SharePoint page with graphical content and the functionality is built into SharePoint online. It’s also available in SharePoint on-premises 2010, 2013 and 2016 if you have Office Web Apps configured or excel services enabled.

Excel graph on SharePoint page

First open excel and go to “Data” in the ribbon and “From other sources”, select “From OData Data Feed”.

import sharepoint list data to excel

Copy and paste the URL of the site adding “_vti_bin/listdata.svc” at the end.

connecting to sharepoint

Select your list when prompted and a pivot table will appear. Select a few columns to populate it with data.

Pivot chart in excel

Save the excel file and upload it into a SharePoint document library on your site.

Edit the page and add the “Excel Web Access” web part under the business data category.

adding excel web access web part to sharepoint page

In the web part properties select the excel document and optionally enter a named item such as a pivot chart or table. Your chart is now on the SharePoint page and can be configured to refresh at intervals. It’s a great way to visualise SharePoint list data easily without any third party products.

web part on page

Watch the video guide below for a more detailed explanation and guide.



The future of SharePoint

The future of SharePoint event took place last night live from San Francisco. It was a live online event open to all which was watched by thousands of SharePoint fans across the globe. Microsoft renewed its commitment to SharePoint and the SharePoint brand by announcing the renaming of the sites tile in Office 365 to SharePoint and the release of a new SharePoint mobile app.

SP2016mobileteamsite

It was a very exciting glimpse into the future of SharePoint (both on-premises and online). A completely new revamped UI for team and publishing sites and a slick editing experience. One of the flaws with the current SharePoint experience is the inheritance of older SharePoint site templates and libraries which has only incrementally improved over time. Frustratingly this has left users with a poor mobile experience and a clunky, more complex editing process. Even the current SharePoint 2013 mobile site looks more like an ancient WAP site designed for a Nokia 7110. Below is a sneak peak as to what the new team site may look like. Above is a preview of the new SharePoint app.

SP2016teamsite

New document library experience

This has already rolled out to some tenancies. It gives a fresh look to document libraries which puts them in-line with the OneDrive experience and the SharePoint mobile view. The classic view will still be supported if you are using JS client side rendering, workflows or specific custom views. One downside to the new experience is the loss of any branding, however you could add document libraries to pages if you wanted to keep this. Users can pin files to the top of the page and get really nice previews of documents. Administrators can override end users to choose either the classic or new view of document libraries (see details here).

Design and development

The new improvements in the interface mean not only a fully responsive design but also a mobile app experience on iOS, Android and Windows. SharePoint is also moving away from the iframe app part model allowing more fluid and responsive web parts. For designers and developers there is now a new SharePoint framework (to be released later this year) which doesn’t depend on Visual Studio or any server-side development. Using JavaScript open source libraries we will soon be able to create design experiences which apply to both the browser and mobile apps.

There was several indications that design was moving this way over the last few years. Check out my earlier posts on moving from custom master pages to JS actions and client side rendering. Using these client side technologies was the first step in preparing ourselves for the new client side rendering experience for the next generation of SharePoint portals. I’m very excited to get stuck into the new SharePoint framework technologies (please release it soon Microsoft!). If you can’t wait to get started, you can start by learning the new technologies which will be used to develop against the SharePoint framework such as nodejs, Yeoman, Gruntjs and all the open source JavaScript frameworks which interest you. There is a good post on how to get hold of all these applications and packages on this blog post by Stefan Bauer. You can also view the full development lifecycle processes that Microsoft recommend in their latest video previewing the new framework below.



Microsoft Flow

Microsoft Flow is a new tool in the SharePoint toolbox. It’s a new way to get data into SharePoint and perform workflows using custom logic. It doesn’t replace InfoPath or SharePoint Designer but I can see many uses for it in a business process environment and sales. It extends workflow functionality out of SharePoint using templates or custom written apps. For examples you can have a flow which picks up tweets from Twitter and puts them into a SharePoint list. Very interesting to see how this product develops with SharePoint. You can find out more on the flow website.

Microsoft PowerApps

Create your own mobile apps in a few simple steps from lists and libraries in SharePoint without having to write any code. This could be a mobile app or just a web app. In fact you can do this from the browser from any list in a few simple steps. This could be a SharePoint list view or a web part. The PowerApps will be available from within the SharePoint app. I’m assuming you will be able to pin these apps to your start screen like you can with OneNote notebooks and pages. You can find out more about Power Apps on the website.

More updates to come…

Adding SharePoint Online navigation from XML using PowerShell CSOM

The following PowerShell scripts were created to enable me to deploy a custom navigation across multiple site collections. You can use managed metadata navigation as mentioned in my previous post. Unfortunately this method doesn’t allow the user to reuse managed metadata navigation across multiple site collections (no idea why, I thought that was one of the advantages of managed metadata navigation!).

So a new and clean way of doing this is to use the CSOM for PowerShell. The code below deletes every navigation node using the first function and then adds each item added to an XML file. A strength of using this method is it can be manipulated to add additional logic for adding links to particular site collections depending on the variables in the XML file. Hope you find this useful.

For SharePoint design, workflows, automation, training and support please visit my SharePoint consultancy site www.clouddesignbox.co.uk. We offer education and business SharePoint solutions and services.

How to stop using custom master pages when branding SharePoint



With the rise of Office 365 and SharePoint online, the ancient practice of using a custom master page to brand a SharePoint site is coming to an end. SharePoint online has many incremental changes, bug fixes and improvements to the Seattle master page meaning that if you have taken a copy of this Master Page to apply your branding, you could be missing out on the constant evolution of SharePoint online.

Custom Master Pages can still be used but Microsoft recommend against this now. The good news is that we can make exactly the same branding changes without having to use a custom master page.

I will briefly mention that you can create themes for SharePoint very quickly using Microsoft’s free tool which can be downloaded from here. Great for quick colour palettes and background images but not great if you want a responsive or more custom design.

Custom master pages (for branding purposes) tended to have a small number of adjustments such as:

  • Custom HTML (maybe for a menu container)
  • Links to CSS files (for responsive styling and branding)
  • Links to JavaScript files (for use of jQuery and additional libraries)

Link to custom CSS file

A link to a custom CSS file is recommended for advanced branding changes. This won’t affect any improvements to the default Seattle master page however you may need to update the CSS from time to time to reflect any interface changes. The alternative CSS link can be set via the GUI on a publishing site or by CSOM on any site.

As a designer, you will be aware that you can’t do everything in CSS such as placeholders for menus or other interactive content or run JavaScript.

Inject JavaScript

JavaScript and HTML plays a big role in most branding exercises. It could be DOM manipulation, a responsive menu, sliding effects or responsive background slideshows and JavaScript tends to be a requirement on most projects. Luckily there is some more good news, JavaScript can be added to a site without editing the Master Page by adding custom actions.

You should already be storing JavaScript in external files (in the Style Library) rather than embedding on the master page. So the only change is to inject these JavaScript files rather than reference them on the MasterPage. This can be done via CSOM (I use the PowerShell method).

#Run all of your lines to load the context of the site collection
$context.Load($site)

#add custom js injection action
$customJSAction = $site.UsercustomJSActions.Add();
$customJSAction.Location = “ScriptLink”;
#reference to JS file
$customJSAction.ScriptSrc = “~SiteCollection/Style Library/JS Display Templates/test.js”;
#load it last
$customJSAction.Sequence = 1000;
#make the changes
$customJSAction.Update();
$context.ExecuteQuery();

You can use the same objects to remove all the custom actions and list them. You can find out more information and the C# examples here.

Conclusion

Although this is a different way of thinking about branding, in the long run, it’s cleaner and more reusable than custom master pages. Your customers will have a better experience in Office 365 but even CSS and DOM manipulation may need updating as SharePoint evolves.

Some really useful examples and more detailed explanations can be found on Vesa Juvonen’s Ignite talk. In Vesa’s example he uses Visual Studio and Apps to deploy the CSS and JS.

In the video at the top of the post, I quickly go through the process of setting alternative CSS and JavaScript custom actions.

How to embed a Twitter widget on a SharePoint page

Many schools and businesses are using twitter as a social communication platform to send out news and information to users. How to embed twitter feeds on SharePoint intranets and public sites has been a popular question recently so thought I would share with you how it is done. I’ve also created a video guide on YouTube to talk through the process.

First login to your twitter account in a browser on a desktop computer (it doesn’t have to be the same account as the one that you want to display in your widget).

Click on your profile picture in the top right of the screen and select “Settings” from the drop down menu.

Twitter

Select “Widgets” from the left side menu.

Twitter

Create a new widget.

Twitter

Choose your design and configuration. More options are available via the customisation documentation link on the page. Click “Create Widget” to generate the code.

Twitter

Copy and paste the code into a Script Editor web part. The Script Editor web part can be found under the “Media and Content” category.

Twitter

I go through the process in more detail in the video below. Hope you find it useful. For SharePoint support and consultancy please contact me at Cloud Design Box.