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.

Microsoft Teams for Education Released

Class teams are now available inside Microsoft Teams. These are created automatically using School Data Sync (SDS) or can be created manually in the Teams interface.

Microsoft Class Teams

Teams is a great collaboration interface that pulls together instant messaging, videos calls, SharePoint, OneNote and assignments into one place. It can also be extended with custom tabs.

I’ve created a quick video review below.



There are some similarities to Microsoft Classroom, however some functionality is different. A few issues with Class Notebooks in Teams:

  • Student sections menu not visible
  • Missing the Class Notebook tab to distribute pages and sections
  • Immersive reader option missing from view tab

You can get around these issues by opening the Team’s SharePoint site and clicking “Notebook” inside SharePoint. Hopefully Microsoft will be quick to resolve these issues.

Microsoft Classroom had a mobile app for Android and iOS which gave students notifications when new assignments were posted or graded. It also allowed students to set reminders for homework. The Teams mobile app does not include the assignment section at all so no notifications for students or teachers. The assignments are not visible on mobile devices. Again, this is early days and I expect Microsoft to release this functionality in the not too far future.

SharePoint Virtual Summit 2017

The 2017 SharePoint virtual summit took place last week. The previous year had seen a brave new bold redesign of SharePoint into a modern experience. This year we had exciting new announcements building on last year’s vision.

New OneDrive and SharePoint Sync Client

The new version of OneDrive sync client will map out the entire contents of SharePoint and OneDrive libraries without syncing them across. Documents will only be synced when requested on-demand or when a document is opened and edited.

OneDrive Files On Demand

This is great news and solves two problems faced by OneDrive users:

  • Large OneDrive/SharePoint libraries consumed large amounts of local storage syncing across
  • Possibility of errors when large numbers of files synced at once

A new unified sharing interface will be rolled out across OneDrive and SharePoint for a simpler experience. This feature will also be available in windows explorer.

SharePoint Virtual Summit

Communication portals

SharePoint released a new experience team site last year. It has now matured with developers creating third party web parts using the SharePoint Framework. Microsoft have now released a new type of site called a communication portal. This site replaces the older publishing sites used for company intranets. Although the new site is responsive out-of-the-box, we can now apply custom branding and functionality extending this into a true intranet experience.

SharePoint Communication Portal

Integration with Flow and PowerApps

These two new Office 365 apps are gaining momentum as modern replacements for SharePoint Designer Workflows and InfoPath Forms Designer.

Microsoft Flow creates workflows that can integrate with almost any product including Google Calendar, Twitter, Slack and a whole host of other services. Flow will have tighter integration with SharePoint and Flows can be created directly from list views.

PowerApps empowers users to create useful mobile friendly apps with no code for SharePoint and OneDrive. This has now been extended to integrate directly into a SharePoint page. PowerApps can now act as the custom form for SharePoint list data. This was a task previously done using InfoPath Designer or custom code.

SharePoint with PowerApps and Microsoft Flow

There was also news of a more powerful personalised search and much more. You can read the Microsoft review from Jeff Teper here.

So, it’s another exciting year ahead for the SharePoint and Office community!

Microsoft Teams for education replacing Microsoft Classroom Preview

Over the last few months, we have received lots of positive feedback about the new Microsoft Classroom Preview product. Today Microsoft announced in the Office 365 message centre that this would be replaced at the end of July 2017 with Microsoft Teams for Education.

Microsoft Teams for Education

No need to panic, MS Classroom functionality will still exist but in the Microsoft Teams app (from what we can see from the screenshots). You can still set assignments, create class notebooks, discuss, share files and quizzes but it will all be accessed through the Microsoft Teams interface rather than through the MS Classroom App. There is no news on the Microsoft Classroom mobile app for iOS and Android but hopefully this will be replaced so that students can still get notifications for new assignments and grades.

More details can be found on Microsoft’s site here.



You may have seen the following message in the Office 365 message centre, notifying you of the change.

On July 31, 2017, we’ll discontinue support for the Microsoft Classroom Preview, as we work to unify our classroom experiences in Microsoft Teams in Office 365 for Education. Since the Microsoft Classroom Preview released, we’ve been very thankful for schools’ feedback from around the world; which has helped us improve benefits and features of the service. Ultimately, we learned to keep it simple and put classroom resources all in one place. We listened and we’re bringing the best of the classroom features (e.g., Assignments and OneNote Class Notebook) to Microsoft Teams in Office 365 for Education.

How does this affect me?

– Microsoft Classroom Preview will continue with current functionality until July 31, 2017. – Teachers will not be able to create new notebooks or assignments after the July 31, 2017. – Current classes and associated content will continue to be available as Office 365 Groups. Teachers can access assignment resources, files, calendars, and conversations, through tools such as Microsoft Outlook and SharePoint Online. If necessary, they can copy Class Notebook content to their personal workspace (e.g. OneDrive for Business). – When the new class experiences become available in Teams, School Data Sync will start creating the new classes for Microsoft Teams. SDS will continue to sync existing Microsoft Classroom Preview classes through July 31, 2017.

What do I need to do to prepare for this change?

We apologise for any inconvenience resulting from this transition. We encourage you to try out Microsoft Teams, and get yourself familiar with the Teams experience. Please click Additional Information to learn more.