Corey Roth [MVP]

Today, Microsoft released the long waited Files-On-Demand support in macOS Mojave. As you might know Files-On-Demand (or FOD) has been available in Windows 10 for a while but it has been a featured that we have been waiting for in macOS for quite some time. Now at Ignite, Microsoft is giving you the opportunity to try it out. In order to try it out, you first have to upgrade to macOS Mojave 10.14. The latest version of macOS just came out today on September 24th and is now available to download. If you are running on a beta version still, you can try it out as well.

The second thing, you need to do is make sure you are in the Insiders Ring for Office and / or OneDrive. If you aren’t sure, download the script from the installation site. It’s a bash script, so you will need to make the script executable. If you aren’t familiar with this process, you have to get back to the Unix / BSD roots of OS X. Open a new Terminal, and go to the directory where you downloaded the script and then execute the following command:

chmod u+x ./EnableMacFilesOnDemand.sh

If you’ve had OneDrive installed on your Mac before, you’ll need to delete some cache files in the following folder: ~/Library/Caches/OneDrive. Delete *.json in that folder.  I didn't actually do this step, but you may need to.

Now you can install the OneDrive client. Download the client from the install link and then go through the install process. Launch OneDrive when it’s complete. If you run into issues, there are a few troubleshooting tips about force closing Finder. I didn’t have to do that but you may need to on your machine.

If you have enabled the new macOS Mojave Dark Mode, the first thing you might notice is that the OneDrive client respects that and will also show using Dark Mode. Good job, OneDrive engineering team! That makes for a nice experience.

I had to setup one of my Office 365 accounts on this particular machine but that’s good because it gave me an idea for the new account setup experience. After you sign in, you’ll get this new dialog that explains the icons that you will see in Finder.  Cloud = online only, checkbox = the file is on disk.  This is helpful, because I’ve always had trouble remembering what the icons mean in FOD for Windows 10.

For existing accounts, you may need to turn on Files-On-Demand manually. I didn’t have to in my case, but it’s good to know where to go. Go to Preferences in OneDrive and then look for the Files-On-Demand section. You can see verify whether it has been turned on or not.

Now we can go find our OneDrive folder inside Finder and see how it all works. When I open one of my synced folders, you’ll notice that I am now seeing files that I have not downloaded yet indicated by the cloud icon next to each one. That’s right, I am seeing files that are online, but not yet downloaded.

Clicking on an online file will immediately download it and you can access it like you had it all along. This is what we have been waiting for. If you right click on a file, you now see the option to Always keep on this device. This is how you tell OneDrive to keep that file on your device for offline use.

Once you do that, you’ll notice the icon changes from a cloud to a check mark.

I’m looking forward to using this on a day-to-day basis. This should make working with OneDrive files online and offline much easier with macOS Mojave 10.14.

With React, sometimes the simplest of things are overly complicated.  When it comes to creating a page anchor so your users can jump down to a specific point in the page, this one is no exception.  From our old HTML4 days, you probably remember you create an anchor by doing something like the following:

When you look for the name attribute of an anchor in React though, it's nowhere to be found.  Ultimately this has to do with React's routing system, but that doesn't really do you any good in your SPFx Web Part.  How do you get around it?  One way is to use the Link component from Fabric React.  You'll notice it does have a name attribute but using it isn't quite straight forward.  First, include Link on the page you are building.

Once you do that, add your Link to the page using the name attribute and a unique identifier.  This will be the destination we are jumping to.

You might be wondering why I have the href tag there on the anchor tag.  That is because the Link element renders a Link element as a button instead of an anchor tag if there isn't an href tag.  You can include any value you want there, but a value is required.

Now to jump to our anchor tag, use the Link tag and include a hash tag and your unique identifier.

Again this seems like a simple topic, but if you are new to React because you just started SPFx development, this might take you a minute to figure out.

Contrary to popular belief, I still do development.  In fact, I do quite a bit of development.  In the last couple of years, I have built two mobile platforms as a service using Ionic and Angular.  This node.js based development stack positioned me well to start working with SPFx.  I'm starting up a string of blog posts that help cover the basics that I think that we often overlook in the bigger picture of how to do things with SPFx.  Today's topic is simple: reading a value from the query string.  When I recently looked at this simple scenario, I thought sure I could go back to my JavaScript roots and use location.href but there has to be a better way now right?  The SPFx team thought of that and they included a nice helper class to get you going called UrlQueryParameterCollection.

Start by including a reference to UrlQueryParameterCollection.

import { UrlQueryParameterCollection } from '@microsoft/sp-core-library';

We use the getValue() Like ASP.NET or other languages, you'll usually want to check to see if it has a value before using it.  I then cast it to an integer time after reading the value.

Again, this is a simple example, but hopefully it will keep you from going down the path with location.href.  The sp-core-library has all sorts of useful utitlities for you to use such as Environment, Random Number Generators, and logging.  Check it out the next time you start out a project.