SharePoint development and design tools and practices
You can use SharePoint design and development tools to apply branding to your SharePoint sites.
Applies to: apps for SharePoint | SharePoint 2013 | SharePoint Add-ins | SharePoint Online
Note
The name "apps for SharePoint" is changing to "SharePoint Add-ins". During the transition, the documentation and the UI of some SharePoint products and Visual Studio tools might still use the term "apps for SharePoint". For details, see New name for apps for Office and SharePoint.
In this article
Key SharePoint development and design terms and concepts
Development options
Design tools
Design tool options for SharePoint Online
Additional resources
This article provides information about the development and design options that are available in SharePoint. You can also find information about how to use the remote provisioning pattern to apply branding assets to a SharePoint site.
Key SharePoint development and design terms and concepts
Term or concept |
Definition |
More information |
---|---|---|
Design Manager |
A feature activated in SharePoint publishing sites or Team sites with publishing enabled that is used to import and manage site branding assets and export them to a design package. |
Use Design Manager to import branding assets created in other tools, such as Adobe PhotoShop or Adobe DreamWeaver, into SharePoint. SharePoint Designer is not available for use with OneDrive for Business or SharePoint Team sites where publishing is not enabled. |
Design package |
Designed for use with SharePoint 2013 Publishing sites, contains branding assets that are stored in Design Manager. |
|
Remote provisioning |
A model that involves provisioning sites by using templates and code that runs outside SharePoint in a provider-hosted app. |
Site provisioning techniques and remote provisioning in SharePoint 2013 Self-service site provisioning using apps in SharePoint 2013 |
Root web |
The first web inside a site collection. The root web is also sometimes referred to as the Web Application Root. |
|
Sandboxed solutions |
.wsp files that contain assemblies, other non-compiled components, and an XML manifest file. A sandbox solution uses partial-trust code. |
|
SharePoint Designer 2013 |
An HTML designer and design asset management tool for managing branding elements in SharePoint. In SharePoint 2013, SharePoint Designer mainly supports custom workflows. |
|
.wsp file |
A SharePoint solution file. A .wsp is a .cab file that categorizes site assets and organizes them with a manifest.xml file. |
Development options
When you use SharePoint 2013 as a development platform, you'll need to create an environment to develop, test, build, and deploy your content. For information about the options for development, see SharePoint Server 2013 Application Lifecycle Management. Table 2 lists the considerations for the various development options.
Options for SharePoint development, testing, and acceptance
Option |
Considerations |
---|---|
Team foundation server |
|
Cloud test and acceptance environments |
|
On-premises test and acceptance environments |
|
In most cases, you’ll need at least the following tenants, although this can vary depending on your requirements:
Developer tenant. As a best practice, provision and use your own developer site. This way, you avoid mixing your data with the production environment. To sign up for and provision a developer site, see https://msdn.microsoft.com/fp161179.
Integration/testing tenant. Use this site to make sure that new apps and functionality work across more than one site collection and against the services and data in the production environment. Configure the environment to include capabilities that are in preview. (To do this, in your tenant admin console, choose Service Settings, and then under the Updates setting, choose First Release.) You can use Visual Studio online to run automated testing and any other continuous integration testing.
Production tenant. Release tested, accepted, and approved apps to this tenant. You can create a developer site on this tenant to develop and test apps that are small in scope or have isolated impact. In general, avoid mixing your development and production environments.
Design tools
Use standard web design and development tools, such as HTML, images, CSS files, and JavaScript files to create SharePoint site branding assets. For example, you can use Adobe DreamWeaver and Adobe PhotoShop to design the HTML, CSS, JavaScript, and image files you’ll use to brand your SharePoint sites. Alternatively, you can use SharePoint Designer 2013 to create, manage, and customize branding assets, or create custom solutions in Visual Studio 2013.
SharePoint design packages and .wsp files
Design packages are .wsp files created by Design Manager that follow predictable rules for packaging design assets. They are, essentially, sandboxed solutions. If you're using another tool to package branding assets in a .wsp file, your branding assets will be in a less fixed and predictable state.
The design package includes all files that have been customized. For example, if you create a page layout that uses a custom content type, the design package includes the page layout, the custom content type it uses, and all custom site columns. The design package also includes several files related to any composed looks that have been applied to your SharePoint site, including files uploaded to the following locations:
Site assets library
Style library
Master Page gallery
If you applied composed looks to a site before you applied custom branding, the design package will include files with .themedcss and .themedpng file extensions. To apply the branding assets in a design package to a SharePoint site, export the design package and use the remote provisioning pattern to apply the contents of the design package.
SharePoint 2013 includes the APIs that you can use to work with design packages. If you're using either SSOM, CSOM, or JSOM, you can use the DesignPackage or DesignPackageInfo classes.
Using the design package CSOM to apply the contents of design packages to a SharePoint site
The following example shows how to use the Design Package APIs in the remote provisioning pattern to apply the contents of design packages to a SharePoint site.
This code was designed for use with Publishing sites. Although it is possible to use the Design Packages API to apply branding to Team sites that have the Publishing feature enabled, this can introduce long-term support issues.
Note
The code in this article is provided as-is, without warranty of any kind, either express or implied, including any implied warranties of fitness for a particular purpose, merchantability, or non-infringement.
using Microsoft.SharePoint.Client;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Microsoft.SharePoint.Client.Publishing;
namespace ProviderSharePointAppWeb
{
public partial class Default : System.Web.UI.Page
{
protected void Page_PreInit(object sender, EventArgs e)
{
Uri redirectUrl;
switch (SharePointContextProvider.CheckRedirectionStatus(Context, out redirectUrl))
{
case RedirectionStatus.Ok:
return;
case RedirectionStatus.ShouldRedirect:
Response.Redirect(redirectUrl.AbsoluteUri, endResponse: true);
break;
case RedirectionStatus.CanNotRedirect:
Response.Write("An error occurred while processing your request.");
Response.End();
break;
}
}
protected void Page_Load(object sender, EventArgs e)
{
// Use TokenHelper to get the client context and Title property.
// To access other properties, the app might need to request permissions
// on the host web.
var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
// Publishing feature GUID to use the infrastructure for publishing.
Guid PublishingFeature = Guid.Parse("f6924d36-2fa8-4f0b-b16d-06b7250180fa");
// The site-relative URL of the design package to install.
// This sandbox design package should be uploaded to a document library.
// For practical purposes, this can be a configuration setting in web.config.
string fileRelativePath = @"/sites/devsite/brand/Dev.wsp";
//string fileUrl = @"https://SPXXXXX.com/sites/devsite/brand/Dev.wsp";
using (var clientContext = spContext.CreateUserClientContextForSPHost())
{
// Load the site context explicitly or while installing the API, the path for
// the package will not be resolved.
// If the package cannot be found, an exception is thrown.
var site = clientContext.Site;
clientContext.Load(site);
clientContext.ExecuteQuery();
// Validate whether the Publishing feature is active.
if (IsSiteFeatureActivated(clientContext,PublishingFeature))
{
DesignPackageInfo info = new DesignPackageInfo()
{
PackageGuid = Guid.Empty,
MajorVersion = 1,
MinorVersion = 1,
PackageName = "Dev"
};
Console.WriteLine("Installing design package ");
DesignPackage.Install(clientContext, clientContext.Site, info, fileRelativePath);
clientContext.ExecuteQuery();
Console.WriteLine("Applying design package");
DesignPackage.Apply(clientContext, clientContext.Site, info);
clientContext.ExecuteQuery();
}
}
}
public bool IsSiteFeatureActivated( ClientContext context, Guid guid)
{
var features = context.Site.Features;
context.Load(features);
context.ExecuteQuery();
foreach (var f in features)
{
if (f.DefinitionId.Equals(guid))
return true;
}
return false;
}
}
}
Using FileCreationInformation to upload branding assets and a master page to a Team site
You can use SharePoint 2013 CSOM functionality to install and uninstall design packages and export design packages to SharePoint Online sites. For example, use the SP.Publishing.DesignPackage.install Method (sp.publishing) to install the design package on the site, as shown in the following example.
public static void Install(
ClientRuntimeContext context,
Site site,
DesignPackageInfo info,
string path
)
The DesignPackageInfo class specifies metadata that describe the contents of the design package to be installed. Use the Uninstall method to uninstall the design package from the site, as shown in the following example.
public static void UnInstall(
ClientRuntimeContext context,
Site site,
DesignPackageInfo info
)
If you need to brand a Team site with the Publishing feature enabled, or a Publishing site on SharePoint Online, you can use the ExportEnterprise or the ExportSmallBusiness method to export design packages for site templates to the Solution Gallery. Use the ExportSmallBusiness method with the small business site template, and use the ExportEnterprise method for all other site templates, as shown in the following example. In the example, note that packageName is a string that represents the name of the design package.
public static ClientResult<DesignPackageInfo> ExportEnterprise(
ClientRuntimeContext context,
Site site,
bool includeSearchConfiguration
)
When you use this method, you can include the search configuration in the design package, as shown in the next example. Note that all design package methods operate at the level of the site collection.
public static ClientResult<DesignPackageInfo> ExportSmallBusiness(
ClientRuntimeContext context,
Site site,
string packageName,
bool includeSearchConfiguration
)
Design tool options for SharePoint Online
The tools you can use to brand a SharePoint Online site depend on your SharePoint Online edition and the type of site you want to build. The Small Business edition, for example, includes one Team site and one public site. It does not include a Publishing site. You can use the Site Builder app in SharePoint Online to customize public site branding.
The Enterprise edition includes a Team site collection at the root web application for the domain that does not include Publishing. It does not include a public site. Use Design Manager to manage SharePoint site branding elements for the Publishing site in the SharePoint Online Enterprise edition.