How to create a custom theme in PowerApps (workaround)

PowerApps is a great tool at building complex business applications using logic and no code. Microsoft provide several themes out-of-the-box to give your app a consistent look and feel. There is no option to create a custom theme (please release this functionality Microsoft)!

PowerApps Themes

As a workaround, we can use some logic to have a single place to update the colours, fonts, etc. However, please note that there are some steps to set this up and its time consuming but once you have done this, it’s much easier to play around with the theme rather than editing every element individually.

To make our theme easy to update, we are going to create a new screen which will be used for defining our design. Create a new screen called “Theme”.

PowerApps Themes

PowerApps Themes

On this new screen, we are going to add the elements that we want to style. We only need one instance of font-size, primary colour and secondary colour.

To start with, I’m going to add a button on the theme screen. I’m going to give the button my own custom colour as a background colour.

PowerApps Themes

In my theme, I’m going to rename my button to “ThemedButton” to make it easier to reference.

PowerApps Themes

In every other screen in our app (and every new screen we make), we are going to set the properties of the objects to reference our theme screen element colours, sizes, etc.

In my Edit Screen, I’m going to select the “RectQuickActionBar” and select the “Fill” option. Rather than add a colour here in the formula bar, I’m going to reference our primary colour (used in the button on the theme screen). To do this, we enter:

Fill=ThemedButton.Fill

PowerApps Themes

You can use this method to reference font size (ThemedButton.Size), font colour (ThemedButton.Color), etc.

Once you have setup all the properties, you can now change your styles in a single place by editing your theme screen.

It’s a very long-winded way to create a custom theme but might save you a lot of time changing colours when your manager asks for a different shade of blue across the whole app! I’m pretty sure custom themes will be on the Microsoft PowerApps roadmap soon, so you won’t have this problem!

If you need help with PowerApps, SharePoint or anything else Office 365 related, you can contact us at Cloud Design Box.

Learning Tools in OneNote Class Notebook

OneNote Class Notebook is free for education users as part of Office 365, it has some additional functionality which isn’t available in standard OneNote files. In this blog post, I want to focus on the additional learning tools available in this version. There is also a video guide for this post below.



How do I get Class Notebooks?

Class Notebooks can be created in a many ways (depending on how your school decides to use Office 365). Class Notebooks can be created from the Class Notebook App, Microsoft Teams or inside SharePoint or OneDrive.

Creating a “Class” in Microsoft Teams will automatically create a Class Notebook for the group.

How are Class Notebooks different to OneNote Notebooks?

Class Notebooks have a section for each student. Each student can see their own section, the teacher resources and the collaboration area. They can’t see other student sections. Logged in as a teacher, you have access to all the student sections.

OneNote Class Notebook

How do I send distribute an assignment to the students?

Assignments, worksheets or any other hand-outs can be copied into each student’s own section. To distribute a page, the teacher must:

  • 1. Create a new page
  • 2. Populate the page with what you would like to be sent out to the student (e.g. write an essay on…..)
  • 3. In the “Class Notebook” option in the ribbon, select “Distribute Section”
  • 4. Select where you would like the page to be sent

OneNote Class Notebook Distribute Section

How do I review student work?

Class Notebook has a great tool to make it simple to find student work. In the ribbon select “Review Student Work” from the Class Notebook.

OneNote Class Notebook Review Student Work Button

From here, you can select a page and switch between students for quick access to their work.

OneNote Class Notebook Review Student Work

Immersive reader

This option is available under the “View” tab.

Immersive Reader Button

The immersive reader provides the student with a tool to clearly show text on the page without other distractions (images, formatting, etc). In addition to sharpening the student focus on the text, the tool provides some options to:

  • Emphasise syllables, nouns, verbs and adjectives.
  • High contrast themes
  • Focus on lines or sections of the text
  • Read out the text

Immersive Reader

This is a learning tool that has some good research behind it which suggests that it can be used to improve reading and writing comprehension.

Read the study here

What about formal assignments and homework?

OneNote Class Notebook is a great tool for non-formal work hand-outs. With Microsoft Teams, it can be enhanced to provide formal assignments which can be handed out to students, collected in and graded. We will look at that in the next blog/video post.

Need help setting up Microsoft Teams?

I work for Cloud Design Box and we provide teacher training workshops, support, MIS integration, apps and many other services for Office 365. You can contact us via the website or by email. I hope you have found this blog and video post useful!

The benefits of Office 365 and SharePoint in education

There’s no denying that Office 365 now provides a fantastic integrated suite of products. Why should schools and colleges look at moving to Office 365? Can it save time, money and improve student engagement? Let’s take a look in more detail.

Why is cloud storage important?

Office Integration
Office 365

One of the big benefits of using Office 365 (in general), is the close integration with Office Online. The days when students had to install Office on a PC or be restricted to an OS or desktop device are long gone. Office 365 brings Word, Excel, PowerPoint, OneNote and Sway to all devices. Office 365 licencing also means that students can download the full version too.

Access on any device

Can your students access all the lesson resources, shared drives and personal drives on their mobile and tablet devices at home? Only Google and Microsoft provide realistic solutions. Both are free for schools, but both require some setup and modification to make them suitable for each individual school.

Students are far more likely to access resources on mobile or tablet devices. In fact, many will never want to own a laptop or desktop computer. In addition to this, teachers are more reliant on using personal tablets and phones to access resources. The OneDrive for Business app allows students to search and navigate through all the shared resources from their phone and tablet.

Document management
Office 365

Remember accidentally losing a file? It would involve a call to the IT department who would then be searching through backups trying to locate the correct file. OneDrive and SharePoint both have a recycle bin, so you can restore documents for 93 days after the original deletion date. If you delete it from the end-user recycle bin, your IT admins can get it back from the site collection recycle bin (within the 93 days). Even after the 93 days, you can call Microsoft who can sometimes help you get older files back.

What if someone saves over a document or a mistake is made? Every document has version history by default, so you can easily go back to a previous version of the document.

Live collaboration and co-authoring

One of the most impressive features of SharePoint to demonstrate is the ability for multiple users to work on the same document at the same time. It could be a lesson plan in a Word Document, a marksheet in excel or a presentation in PowerPoint. These products provide co-authoring in a slick and easy-to-use way. The paragraph, cell or slide will lock and all users will see the editing live (see below).

Remember when marksheet spreadsheets were locked for editing when trying to open on the school servers? You don’t have that problem in SharePoint, you can work quicker and more efficiently saving precious time that teachers don’t have enough of.
co-authoring
Co-authoring in Office 365

What about homework and electronic assignments?

SharePoint is a great document management system but what about assignments and grading work? For homework and assignments, Office 365 has a range of built-in and third-party products to provide assignment functionality.

Microsoft Teams is also free for education and comes with some built-in assignment tools. These are great basic assignment tools ideal for keeping track of homework. Teams integrates with SharePoint, so you can access all your class and shared resources.

Microsoft Teams
Assignments in Microsoft Teams

Class Notebook is a powerful learning tool with individual student sections, an immersive reader, and tools to distribute and collect work.

OneNote Class Notebook
OneNote Class Notebook

If you want some more in-depth assignment tools, third-party products such as teacher dashboard, firefly, show my homework and many more come with Office 365 single sign-on. Store your resources in SharePoint and use any other application for assignments. Please note that not all these third-party products will allow students an easy way to create and submit office documents.

At Cloud Design Box, we can help you implement Teams with MIS data, create SharePoint resource areas, apply custom branding, training, support, workflows and much more! Contact us via the website for more details.

SharePoint by Cloud Design Box
SharePoint Design by Cloud Design Box

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!

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.

Back to School – Microsoft Teams Update for Education

September is here and new collaboration tools are being tried for the first time in Office 365.

Microsoft Teams now has class sites, watch my full review in my blog post earlier this summer

Latest updates include:

  • Options to disable chat
  • Full screen Class Notebooks
  • Fully working Class Notebooks with settings available
  • OneNote Edit in browser functionality
  • Ability to add links to assignments

Still some functionality we are still waiting for:

  • Teams mobile app to support assignments and notebooks
  • Option to add SharePoint files to assignments
  • Share resources between classes
  • Assign Class Notebook page

Video about the latest updates:



Original review (from July) in full:



What are your thoughts on Microsoft Teams? As good as Microsoft Classroom yet? What features do you want to see?

Creating a WordPress RSS feed for custom terms

A quick break from the SharePoint posts to share something that I couldn’t find a solution to on the internet.

In WordPress, there is no out-of-the-box RSS feed for custom post types filtered by taxonomy terms. If I’m creating a custom post type for news items and within that, I create a taxonomy to tag news with categories, there is no RSS option to show only news items of a single category.

This can be limiting, especially if you are using MailChimp to send out newsletters per news category. MailChimp has a great feature in which it will automate a regular newsletter from an RSS feed.

So, the only way I found to achieve this without using any custom plugins, was to create a custom RSS feed.

Register the RSS feed

I followed this excellent post on WPBeginner on how to register and create a custom RSS page. In the functions.php file, we register our custom RSS feed:

add_action('init', 'cdbcustomRSS');
function cdbcustomRSS(){
        add_feed('newscat', 'cdbcustomRSSFunc');
}
function cdbcustomRSSFunc(){
        get_template_part('rss', 'newscat');
}

Create a new RSS file

As I registered this as “newscat”, I then create a new file in my theme called “rss-newscat.rss”. This is the place where WordPress will look for the custom RSS feed.

To see this page, navigate to [WordPress URL]/feed/newscat. You may have to reset your rewrite rules to see this page. Re-save your permalinks page to refresh this.

Variables

I want to pick up a category from the URL so I’m going to use the following line to grab the “category” variable.

$cdbcat = $_GET['category'];

At the start of the file, I’m also going to set variables for the custom post type and the taxonomy name. I have hard-coded these but you could also pass them through the URL if required.

$cdbposttype = 'news_item';
$cdbtaxonomy = 'news_item';

Header and RSS format

We then define the header and feed in normal RSS format. A good place to find the clean starter RSS code is on this WPBeginner post.

<?php
//headers
header('Content-Type: '.feed_content_type('rss-http').'; charset='.get_option('blog_charset'), true);
echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>';
//main body
?>
<rss version="2.0"
        xmlns:content="http://purl.org/rss/1.0/modules/content/"
        xmlns:wfw="http://wellformedweb.org/CommentAPI/"
        xmlns:dc="http://purl.org/dc/elements/1.1/"
        xmlns:atom="http://www.w3.org/2005/Atom"
        xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
        xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
        <?php do_action('rss2_ns'); ?>>
<channel>
        <title>My News - Feed</title>
        <atom:link href="<?php self_link(); ?>" rel="self" type="application/rss+xml" />
        <link><?php bloginfo_rss('url') ?></link>
        <description><?php bloginfo_rss('description') ?></description>
        <lastBuildDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_lastpostmodified('GMT'), false); ?></lastBuildDate>
        <language><?php echo get_option('rss_language'); ?></language>
        <sy:updatePeriod><?php echo apply_filters( 'rss_update_period', 'hourly' ); ?></sy:updatePeriod>
        <sy:updateFrequency><?php echo apply_filters( 'rss_update_frequency', '1' ); ?></sy:updateFrequency>
        <?php do_action('rss2_head'); ?>

Looping through the posts

We can then loop through the posts in the taxonomy and custom post type. Each time we compare the term with the category in the variable. If the category matches, we output the RSS for the post.

<?php
//get news_item terms
$custom_terms = get_terms( $cdbtaxonomy);
//get posts
foreach($custom_terms as $custom_term) {
    //echo var_dump($custom_term);
    wp_reset_query();
    $args = array('post_type' => $cdbposttype,
        'tax_query' => array(
            array(
                'taxonomy' =>  $cdbtaxonomy,
                'field' => 'slug',
                'terms' => $custom_term->slug,
            ),
                                
        ),
        //order of posts
        'order' => 'DESC',
        'orderby' => 'modified',
    );
    $loop = new WP_Query($args);

    while($loop->have_posts()) : $loop->the_post();
        if($custom_term->name == $cdbcat){
            ?>
                <item>
                        <title><?php the_title_rss(); ?></title>
                        <link><?php the_permalink_rss(); ?></link>
                        <pubDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_post_time('Y-m-d H:i:s', true), false); ?></pubDate>
                        <dc:creator><?php the_author(); ?></dc:creator>
                        <guid isPermaLink="false"><?php the_guid(); ?></guid>
                        <description><![CDATA[<?php the_excerpt_rss() ?>]]></description>
                        <content:encoded><![CDATA[<?php the_excerpt_rss() ?>]]></content:encoded>
                        <?php rss_enclosure(); ?>
                        <?php do_action('rss2_item'); ?>
                </item>
        <?php
        }
    endwhile;
}
?>

The feed should now work using the URL: [wordpressURL]/feed/newscat?category=My%20Category

Conclusion

While this isn’t most efficient way to do it, it does return the desired results. I will look forward to your thoughts and comments on how this can be improved!

Full Code

<?php
/**
 * Template Name: Custom RSS Template for News Categories - newscar
 * By Cloud Design Box Ltd 2017
 */
 // get variables from url
 $cdbcat = $_GET['category'];
 //set post type and taxonomy name
 $cdbposttype = 'news_item';
 $cdbtaxonomy = 'news_item';

//headers
header('Content-Type: '.feed_content_type('rss-http').'; charset='.get_option('blog_charset'), true);
echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>';
//main body
?>
<rss version="2.0"
        xmlns:content="http://purl.org/rss/1.0/modules/content/"
        xmlns:wfw="http://wellformedweb.org/CommentAPI/"
        xmlns:dc="http://purl.org/dc/elements/1.1/"
        xmlns:atom="http://www.w3.org/2005/Atom"
        xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
        xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
        <?php do_action('rss2_ns'); ?>>
<channel>
        <title>My News - Feed</title>
        <atom:link href="<?php self_link(); ?>" rel="self" type="application/rss+xml" />
        <link><?php bloginfo_rss('url') ?></link>
        <description><?php bloginfo_rss('description') ?></description>
        <lastBuildDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_lastpostmodified('GMT'), false); ?></lastBuildDate>
        <language><?php echo get_option('rss_language'); ?></language>
        <sy:updatePeriod><?php echo apply_filters( 'rss_update_period', 'hourly' ); ?></sy:updatePeriod>
        <sy:updateFrequency><?php echo apply_filters( 'rss_update_frequency', '1' ); ?></sy:updateFrequency>
        <?php do_action('rss2_head'); ?>
<?php
//get news_item terms
$custom_terms = get_terms( $cdbtaxonomy);
//get posts
foreach($custom_terms as $custom_term) {
    //echo var_dump($custom_term);
    wp_reset_query();
    $args = array('post_type' => $cdbposttype,
        'tax_query' => array(
            array(
                'taxonomy' =>  $cdbtaxonomy,
                'field' => 'slug',
                'terms' => $custom_term->slug,
            ),
                                
        ),
        //order of posts
        'order' => 'DESC',
        'orderby' => 'modified',
    );
    $loop = new WP_Query($args);

    while($loop->have_posts()) : $loop->the_post();
        if($custom_term->name == $cdbcat){
            ?>
                <item>
                        <title><?php the_title_rss(); ?></title>
                        <link><?php the_permalink_rss(); ?></link>
                        <pubDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_post_time('Y-m-d H:i:s', true), false); ?></pubDate>
                        <dc:creator><?php the_author(); ?></dc:creator>
                        <guid isPermaLink="false"><?php the_guid(); ?></guid>
                        <description><![CDATA[<?php the_excerpt_rss() ?>]]></description>
                        <content:encoded><![CDATA[<?php the_excerpt_rss() ?>]]></content:encoded>
                        <?php rss_enclosure(); ?>
                        <?php do_action('rss2_item'); ?>
                </item>
        <?php
        }
    endwhile;
}
?>
</channel>
</rss>

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.