Hi SharePoint guys,

Today, I am very proud to announce the upcoming release of Site Designs Studio 1.0. [EDIT] The latest version (1.1) of Site Designs Studio, is now maintained under a PnP repository here

Site Designs and Site Scripts

Recently, Microsoft has released a new capability in SharePoint Online : Site Designs. It is a modern way of automating customizations of SharePoint sites. You can use them in the Modern site creation interface on the SharePoint homepage. A Site design is a set of Site Scripts that will be applied to the modern site when it is created. These scripts are a set of actions to configure.

 

When the site is created, the Site Design will be applied, in other words, the customization actions will be executed. When all actions are executed, you will be invited to view the updated site.        

JSON and REST API

By the time of this writing, the only official ways of managing Site Designs and Site Scripts is through REST API or SharePoint Online Management shell. Check out this page to get all the needed technical information.

The Site Scripts are described in JSON format. While it is quite easy to use for developers, the business end-users won't probably be very confortable with these technical matters.

Site Designs Studio

I decided to create a user-friendly interface that will allow these end-users to manage and create Site Scripts and Site Designs. I called it Site Designs Studio. It is a SharePoint Framework WebPart that will rely on a JSON schema to dynamically build a Site Script generator UI, manage the Site Designs and associate Site Scripts to them.

Manage Site Designs

• To create a new Site Design, click the "+ New" button
• By clicking the pen under the Site Design picture, you will be able to update its information
• You can delete a Site Design by clicking the trash icon

Here you can edit the information of the design and associate the available scripts that you need.

Manage Site Scripts

The WebPart displays the list of Site Scripts in your tenant

• Click the edit icon to edit the Site Script
• Click the trash icon to delete the Site Script

1. A script action graphically represented
2. the actual generated JSON of the Site Script
3. Undo
4. Save the changes
5. Edit the information of the Site Script
6. Expand all actions
7. Collapse all actions
8. Switch to "Design-only" mode
9. Switch to "Code-only" mode
10. Switch to "Split" mode (as in the exhibit)

By clicking the "+" button, you can add a new action to your script.

Enjoy !

Here it is, without any specific technical knowledge, we all will be able to create and manage Site Scripts and Site Designs. Currently I only publish the source code of the WebPart here but I plan to ship an easy-to-install package very soon.

Stay tuned. Give your feedback and ideas, I would be more than happy to bring some new features to this software.

Cheers,

Yannick