Tag Archives: Tony is here

Rubric Grading Criteria in Microsoft Teams Assignments

Microsoft Teams Assignment Rubric

Rubrics are a powerful tool used to assess students’ work. The criterion helps students to have a concrete understanding and visualisation of what they need to do to achieve a particular score. Each criterion also includes a gradation scale of quality.



Microsoft Teams for education now includes rubric based grading. They can be created and reused across Teams making it a powerful time saving tool for teachers while at the same time helping students understand how to succeed in the assignment.

If you are unfamiliar with Microsoft Team Assignments, please check out our earlier post here.

When setting assignments, you will notice a new “Add Rubric” option.

Microsoft Teams Assignments

On this page, you can search for a rubric that has already been created at your school or create a brand new one. In this post, I’m going to go through how to create a new one. Click “new rubric”.

Create new Rubric

Give the rubric a name and turn on “points” so that we can assign scores to each piece of criteria.

Rubric Criteria

Enter your criteria, you can add more by pressing the plus button. You can also adjust the grading balance for each element. Teams will turn the points into an overall percentage when marking based on the balance given to each criterion.

Microsoft Teams Rubric

When you have finished creating your rubric, set the assignment for the students.

When the students have completed the assignment, go to review the work and open the student’s homework. In addition to the comment and grade, you can now select the rubric.

Review student work

This will show the criteria and you can select which has been met. The student work will be automatically marked based on the grade balance set in the rubric.

Review student work with rubric

This is what the student will see when you have graded their work with the rubric.

Student view of assignment rubric

It’s another fantastic update to Microsoft Teams for education. There is still more to come this summer including Microsoft Forms integration with self-marking quizzes. We will bring you news and guides on how to use that as soon as it is released!

At Cloud Design Box, our solutions help schools and companies get the best out of SharePoint, Teams and OneNote.

Microsoft Teams Assignments

More information on our education and business solutions can be found on our website.

Creating a quiz using Microsoft Forms in OneNote

Microsoft Forms are a great way to quickly gather survey results or produce quizzes. It could be testing employees on health and safety in OneNote or it could be setting students a topic quiz in Class Notebook.

In this post, I’m going to go through the steps on how to add a quiz to OneNote.

First, create a new page and call it “Quiz”.

Class Notebook

Go to the insert tab in the ribbon and select “Forms”.

Microsoft Forms

Here you will see a list of any forms and quizzes that you previously created in addition to the new options.

List of forms

Click “New Quiz”.

Microsoft Forms will open in a new tab, give the quiz a title and description.

Click “Add question” and select “Choice”.

Enter a question and all the options, you can press “Add option” to add more answer options.

Next to each answer option, you can provide some feedback for users who select this option using the speech bubble icon (see highlighted below).

Mark the correct answer by selecting the tick icon (see highlighted below).

At the bottom of the question, you can assign points for the correct answer, allow multiple answers and make it a required question.

By pressing the menu (…), you can bring up more options such as shuffling the answers or writing math equations.

You can add more questions by clicking “Add question”. The form will save automatically as you edit it (no save button).

When you have finished creating your quiz, switch the browser tab back to the OneNote file, you will see that the quiz has now appeared in the “My forms” list.

Press the “Insert” button.

Our quiz is now embedded on the page!

When users complete the quiz, they will see their points after pressing submit (with feedback on each question).

The author of the quiz can go back into “Microsoft Forms” via the app launcher (see highlighted below).

They can then see a detailed breakdown of the results with the option to export to Excel.

Microsoft Forms can also be added to SharePoint pages, so you can enhance your intranet with surveys and quizzes!

Microsoft Forms is a great tool in the Office 365 package. By using this tool in your organisation, you could really improve engagement with users.

At Cloud Design Box, our solutions help schools and companies get the best out of SharePoint, Teams and OneNote.

More information on our education and business solutions can be found on our website.

Cloud Design Box Class Dashboard

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!

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.

New SharePoint apps for education and business

We are releasing several apps for SharePoint (on-premises and Office 365) I’ve included some information below, please feel free to drop me an email or give me a call if you want an online demonstration of the Apps. More information on the apps can be found here

Parents evening booking system

Parent evening booking SharePoint App

This app allows parents to view available days/times and book online. This app was designed to reduce the administrative time taken to book slots on behalf of parents based on their preferences.

Parent evening booking SharePoint App

Some of the features include:

  • Parents view available slots
  • Parents book online
  • Parents can make changes to the booking
  • Teachers can see who has booked to see them
  • Admins can upload session data via spreadsheet
  • Supports multiple children at the school
  • Updated several times a year as part of the subscription

Internal helpdesk

The Cloud Design Box internal helpdesk app manages all your support tickets in an easy-to-use list. Users can view and update their own tickets while the helpdesk team have access to manage all the support tickets.

Parent evening booking SharePoint App

Leave requests

Leave and holiday requests tend to create a burden on admin, managers and human resources. Streamlining requests to just a few clicks and automating the processes by sending notification emails saves everyone time.

Parent evening booking SharePoint App

Using the Cloud Design Box dashboard, employees can view all approved holidays for their team, allowing them to make an informed decision on when to request leave. Employees fill in a simple form on the site which is them emailed to their manager for approval. In just a few clicks the manager can approve or reject with some feedback.

Employee onboarding dashboard

Over the years Cloud Design Box developed several workflows and processes for new employees. When making this web part, we took the core requirements made added them to an easy-to-use interface.

Parent evening booking SharePoint App

A clean dashboard shows instantly the onboarding status and progress of each employee. Each task list assigned to individual departments can be viewed in more detail.

Parent evening booking SharePoint App

The HR department have full control over the lists so they can check the current status and chase up any outstanding tasks. Departments are alerted by email when a new employee joins and have access to update their own task list. The app is mobile friendly and can be used on any device.

KPI and appraisal tracker

This dashboard was designed to make it easier and clearer for managers to track the progress of their team. Setting a KPI is easy and the employee can view their own goals and see a graphical representation of the progress made towards meeting their targets.

Parent evening booking SharePoint App

Appraisal documentation can also be attached to the employee making appraisal meetings easy to track.
It’s been really exciting developing these new apps and dashboards. Our enthusiastic customers have helped define the core functions and we look forward to developing these further as time goes on.

Other Apps

Our other apps include:

  • PO Tracker
  • Timesheets

And can be found on the Cloud Design Box website

For more information or to arrange a demonstration please drop me an email or give me a call.

Thanks,
Tony

Creating a simple Microsoft Flow for a SharePoint list

For anyone using the new style SharePoint lists, there is now a new action for Microsoft Flow integration. It’s a really cool product that integrates all the Office 365 products (and more) into your workflow.

SharePoint Designer workflows still have their place but the Microsoft Flow interface offers rich functionality and is easy to view and structure workflows.

One downside to using Microsoft Flow is the error messages. They come back as error messages from the REST API as headers which can be very confusing for non-technical users. SharePoint Designer errors were much clearer and easy to understand for general users.

In the video below, I go through quickly creating a Microsoft Flow from a new style SharePoint list in an Office 365 group site.



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