Like chameleons, SPFx web parts can change colors to adapt to changing environments and blend in.
With a few lines of code and some knowledge of which semantic colors you can use, you can built awesome web parts that will look good no matter what theme (or theme variant) your site uses.
In this post, I’ll show you how you can use SCSS pseudo-classes in your SPFx projects and configure stylelint so that it doesn’t give you any warnings.
This is an interactive post that allows you to customize the article to get a personalized list of commands you’ll need when contributing to a PnP repository on GitHub.
Find out how you can automatically synchronize your NodeJS package version with your web part solution version and display it in a web part’s property pane.
Here is a handy compatibility matrix telling you which version of SharePoint and SPFx work together.
In today’s post in the web part layout series, we discuss the compact layout.
According to Microsoft documentation, you should be able to use a base64-encoded SVG image for your web part icon, but it hasn’t worked in a while. This article shows you how to use an embedded SVG image.
In this episode of my series about SharePoint Framework Design, we discuss the carousel layout.
Today, we’ll discuss how to use the filmstrip layout.
Sometimes you just want to define a CSS class in your `.scss` file but you don’t want SCSS to mangle the class name.
SharePoint uses a number of different layout types for web parts. How do you decide the best layout for your web parts, and how do you build such web parts? Part I.
To celebrate the release of the SharePoint Framework v1.9, I wanted to share this timeline that I created that highlights the SPFx Yeoman generator’s history since it first became available.
In this third article about property panes, find how to create image choice groups, conditional fields, and conditional groups.
Reactive and non-reactive web parts and displaying a loading indicator in the property pane.
In this post from our SharePoint Framework Design Series, we begin discussing how to create property panes.
In this first real SharePoint Design series, we discuss how to add titles and descriptions to web parts to help users understand their purpose.
Dear future me: next time you look for this, I hope you’ll find this post in the top search results.
In this companion series to Microsoft’s SharePoint Framework Design, we’ll explore the various design elements of a SharePoint web part.
Did you know that you can temporarily turn off telemetry calls on an SPFx workbench page to make it easier to analyze the page’s network traffic with a simple query string parameter? Find out how.
In this article, I convert a Javascript-only SPFx web part created by Eric Skaggs into a React SPFx web part. See if I do his example justice.
This article describes some of the techniques and approaches I used to reverse engineer the out-of-the-box File Picker to create my own.
I asked the SharePoint Developer Community what development tools they use on their workstations to develop SPFx solutions. They came through!
What if you could set your #SPFx web part’s default properties based on a user’s name, language, role, or preferences when they add your web part to a page? How about changing the default based on the SharePoint environment, current language, or current date and time?
If you’ve tried calling external APIs from within your SPFx component, you may have run into an issue due to CORS. This article explains what CORS is, and how to prevent the issue.
Find out about a cool helper function that makes it easy to combine CSS classes dynamically — and it is built-in your SPFx solution already!
Introduction A week ago, Microsoft officially released the SharePoint Framework Package v1.5, introducing new awesome features like the Developer Preview of Dynamic Data and the ability to create solutions with beta features by adding –plusbeta to the Yeoman command — among other features. While it isn’t necessary to update your existing SPFx solutions, you may need to do so (let’s say, because you have an existing solution that needs a feature only available in SPFx 1.5, for example). Unfortunately, the solution upgrade process between versions of SPFx is often painful. Thankfully, there is an easy way to do this now! This article explain a (mostly) pain-free to upgrade your SPFx solution. Waldek explains this process in details, but this is a summary of how to do it. Office 365 CLI Office 365 CLI is a cross-platform command-line interface (at least, that’s what I think CLI means… I hate acronyms) that…
Introduction Last week, I attended the SharePoint 2018 Conference in Las Vegas. There were a lot of cool announcements and demos. The SharePoint team rocks! One of the cool things that I noticed which has nothing to do with SharePoint was that a lot of presenters who showed code had a really cool command prompt that showed the node module they were in, and their Git branch status in a pretty “boat chart”. I had seen this many times before, but never realized how much easier it was to get a sense of what’s going on until I was watching someone else code on a big screen. Of course, I set out to find and configure this awesome command-line on my workstation. This article will show you how you too can install and configure this command line interface. Cmder During Vesa’s awesome session, I paid close attention to the title…
Introduction One of the premises of SPFx is that, with it, third-party developers have the same set of tools that the SharePoint team has. So, if you like the look of an out-of-the-box web part you can, in theory, reproduce the same look and feel yourself. A friend of mine needed to display a list of upcoming events, but the events are coming from a WordPress site that uses the WP Fullcalendar widget. They also really liked the look of events in SharePoint. So, I thought: why not try re-creating the out-of-the-box SharePoint events web part, but instead of reading events from a SharePoint list (or group calendar), it would read from WordPress? Since I was taking the challenge, I decided to also try to do these extra features: Read events from multiple event providers, including RSS, iCal, and WordPress. Support additional event providers without having to re-design the entire…
As the World’s Laziest Developer, I don’t like to invent anything new if I can find something that already exists (and meets my needs). This article is a great example of that mentality. I’m really standing on the shoulder of giants and combining a few links and re-using someone else’s code (with credit, of course) to document what my approach to versioning SPFx packages is, with the hope that it helps someone else. CHANGELOG.md: a standard way to communicate changes that doesn’t suck The problem with change logs There are a few ways to communicate changes when working on a project: you can use your commit log diffs, GitHub Releases, use your own log, or any other standard out there. The problem with commit log diffs is that, while comprehensive, they are an automated log of changes that include every-single-change. Log diffs are great for documenting code changes, but if you…