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
- A script action graphically represented
- the actual generated JSON of the Site Script
- Undo
- Save the changes
- Edit the information of the Site Script
- Expand all actions
- Collapse all actions
- Switch to “Design-only” mode
- Switch to “Code-only” mode
- 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
YP code 
Hell,
Thanks a lot for your great webpart SiteDesign Studio.
I woul like to aks you a question. Is it possible to create a site script for creating a View (AddSPView)?. I am unable to find it or write an own script ind the studio.
Thanks a lot for your answer
LikeLike
Hi Jan, first of all thank you for your kind words! I think it is possible to add a view and supported in the WebPart, I’ll double-check it a bit later today 🙂
LikeLike
Hi Jan,
I double-checked it, and you can indeed create view on a new or existing list with Site Scripts as a sub action of the createSPList action.
using the Site Designs Studio, you can do that by clicking the “+” button inside the “Create a List” action (you have to know that this action actually acts as a “Create or Update” list if you specify the name of an existing list).
Then select the “Add a view” action. Unfortunately, so far, for this action, the fields to include in the view must be done from the JSON, I plan to have an improved UI regarding this in next version.
So to select the fields of the view, make sure you have selected all other parameters from the UI (otherwise, the designer won’t be able to refresh),
then, from the JSON editor, as value to view fields , put a JSON array such as “[“myField1”, “myField2”]
Here is a screenshot of what it should look like: https://ypcode.files.wordpress.com/2018/03/sds_addspview.png
Hope that’ll help 🙂 and stay tuned to check out the V2 of Site Designs Studio 🙂
LikeLike