Saying Goodbye to SharePoint Designer

Image Title

posted by Khoa Quach
on May 07, 2018

I finally found an awesome tool to handle some development workload that used to require SharePoint Designer (SPD). First, let’s address the elephant in the room, there was no SPD 2016 release along the SharePoint 2016 release, so the community was already expecting the tool to depreciate over time. Using Visual Studio (VS) Code to handle the light development tasks on SharePoint is incredible and I’ll show in this article why.

The Pro and Con for VS Code in the Context of SharePoint

Here are some of the pro:

  • Platform support. I used both my MAC and PC for work and the fact that I was only limited to PC with SPD was frustrating. VS Code can be installed on Windows, Mac and even Linux.
  • Using Git. Since you will be downloading and editing a local copy of your file, you can set it up in a way that your changes on SharePoint assets can be pushed and committed to Git.
  • Extensions. Tons of extensions can be added on to the tool to make it more friendly in regards to your development. Few SharePoint packages are available allowing you to get snippets of code or authentication method source code for example. But this is not limited to SharePoint, if you develop in Angular or React and are in need of specific npm package, you can bring them alongside with your SharePoint code.
  • Stability. I have been using the tools for few weeks to access SharePoint environment and have not reported any weird bugs or unexpected closures. SPD would lag, hang or simply crash from time to time.

On the cons side, if you are looking to perform some administration (creation of lists and content types), managing SharePoint Designer workflow or Business Connectivity Services, the SPD will still be the go-to platform (unless you are OK with the web interface).

Install Visual Studio Code

Navigate to https://code.visualstudio.com/download download the relevant version and install it.

05072018 SharePoint Designer

Install SPGo

Once you open up VS Code, go to your extensions and search for “sharepoint”. Then install SPGo, this is the tool that will allow you to connect to the remote SharePoint environment.

SharePoint Designer

Create Workspace

Now hit F1 to bring the command palette and type “spgo”. You want to select the “Configure workspace”. It will allow you to enter the SharePoint URL, the type of saving mechanisms (recommend: select “Major” to see your changes reflected instantaneously on the web) and the authentication method used by the environment.

SharePoint Designer SharePoint Designer SharePoint Designer

This will create a JSON file that will store the connection options.

SharePoint Designer

Connect to your SharePoint Environment

Again, hit F1 and this time we are going to use the SPGo: Retrieve folder command.

SharePoint Designer

You will be prompted to enter your username and password, as well as the relative path to the folder you would like to retrieve.

You should now see the file(s) loading in your explorer.

SharePoint Designer

To test and see the changes reflected, you can go ahead and open the file, edit and save to see the results.

If you don’t know which URL to use, here are some quick tips:

/sitepages will bring your Site Pages
/_catalogs/masterpage will bring you master pages, page layouts and display templates items.
/siteassets will bring your site assets (usually you will find branding components place here like CSS and JS).

SharePoint Designer

Conclusions

VSCode and SPGo provide a great alternative to SharePoint Designer that is lightweight and more development focus. I absolutely love the fact that this can be connected to our Git Enterprise account and therefore ensure some versions and code management that was not really available on SPD (export/import is not great on SPD).

Hope you enjoy and let me know if you have any question.

Khoa Quach

***

Here at NIFTIT, from Office 365 consulting to SharePoint solutions, we can handle projects of any size and difficulty. We follow industry standards and best practices to build world-class solutions. Learn more about our office 365 support here!