Developer Tools for SharePoint 2013 : Customization Options with SharePoint , OOB Developer Experience

9/26/2013 4:05:08 AM

1. Customization Options with SharePoint

SharePoint is full of options for customization and development. These changes can be made from many different tools by many different users. Although every developer doesn’t need to know each tool in depth, it helps to know what each tool’s capabilities are and what the strengths are of each tool. Table 1 shows an overview of the different types of users and the tools they use to customize their SharePoint experience.

TABLE 1: Tools for Customization

End user SharePoint Sites
Power user/Designers Microsoft SharePoint Designer 2013
Developer Visual Studio 2012

The largest group of users is end users. They understand how to use the user interface to build an application for a specific need. End users primarily make out of the box (OOB) changes directly in the SharePoint site that the user has access to. Although many developers don’t initially think of these changes as development, SharePoint has grown over the years to include end users that fully understand how to make small modifications to HTML, CSS, JavaScript, and customizable web parts that allow them to build dynamic applications.

Many of the changes focus on changing the look and feel of the site, input entry, and information management with deep knowledge of the problem domain the user works on. For many end users SharePoint development is not their primary job, but a requirement to have functional and optimal applications for the solutions they solve.

The next group of users is the power users. They need more capabilities than the user interface provides them, and the tool of choice is Microsoft SharePoint Designer. As the name implies, the tool has its roots as an HTML editor for designing web pages. The tool is a must-have for many power users, especially with improved capabilities added in SharePoint Designer 2010 that included additional workflow capabilities, packaging integration, BCS integration, and richer HTML capabilities. The SharePoint Designer team understands the importance of both the end user and developers, especially for Application Lifecycle Management (ALM). Developers using SharePoint Designer can deploy solutions directly to their production sites if they build only a single site, or they can save the changes locally. The changes stored locally can be reopened in Visual Studio for further customization and stored in source control when they are completed.

The final group of users is developers, and the tool for coded or packaged solutions is Visual Studio 2012. Visual Studio 2012 gives a familiar interface for developers of .NET languages such as ASP.NET that requires less learning time to quickly start building apps. One of the major challenges facing new developers has always been learning the SharePoint API Framework and understanding how to modify the XML that defines SharePoint. The enhancements in Visual Studio 2012 have created an improved experience and added new tools to give developers a user interface for many common changes in the XML.

2. OOB Developer Experience

The user interface for SharePoint has become one of the most used development platforms. This is due to the number of users of SharePoint and the different ways users can change the application directly through the user interface. Many end users can create powerful applications and experiences with a few clicks. In addition to building the applications directly on the site, you can use the UI to quickly create mock-up lists and sites that can be reused in SharePoint designer and Visual Studio. This adds a great capability for developers looking for a rapid application development (RAD) platform for proof-of-concept code or expediting development. Each option has been improved with SharePoint 2013 for creating full-featured business applications.

The Get Started with Your Site web part provides users with a quick set of actions to start customizing their sites. They can change the look and feel, title, and logos, and share the site with others. Not every site must have the getting started web part, but you can allow site owners to add and remove it easily through the user interface. When the users no longer need the web part, they can click the Remove This link and start using the Settings menu for any future changes.

One of the quick actions is to add the new Project Summary web part. This new Project Summary web part can be quickly added to the page using the Working on a Deadline? link on the Get Started with Your Site web part. Click the link and you are prompted to add two apps: the Tasks (with a Timeline) and Calendar (as shown in Figure 1).



You can add other applications to the site to further customize the look or provide added functionality, such as a Site Mailbox. From the quick actions, click Add Lists, Libraries and Other apps to bring up the Add apps menu. The new SharePoint store enables you to select from a number of prebuilt applications without coding them. When you select the SharePoint store, you can access full prebuilt apps or apps that enhance your site.

Understanding the User Interface for Customization

Customization of sites is one of the main actions that a developer needs to perform, whether that modifies the look and feel or just uses web parts and apps on the page. There have been major changes to the user interface look and feel, but the page customization experience remains familiar. This means that the major changes to the page with editing using the SharePoint Ribbon have not changed. Don’t forget to click the Page tab if the Ribbon does not automatically appear. The Ribbon is still there; it just might not be needed at the moment. There are still contextual tabs based on the actions you perform and the web part that you select. There is a subtle difference with how the Ribbon displays to the user. Instead of requiring page real estate to always be reserved, the Ribbon now drops down onto the page and then can be hidden to display the content under the Ribbon as shown in Figure 2 (hidden Ribbon) and Figure 3 (displayed Ribbon).





Branding the site continues to evolve because this is one of the biggest modifications performed. SharePoint 2013 introduces a new branding experience that builds on previous versions of SharePoint called composed looks. SharePoint 2010 has themes that are a grouping of the files needed to change the colors on a site. This makes it easy to quickly apply the colors you want to the CSS on the SharePoint pages without changing the CSS location or making any changes to the page. This did not allow designers to completely change the look and feel with a single package, as composed looks provide. Each composed look is made up of a Display Name, Master Page, Theme, Background Image, and Font Scheme. Also, a new Try It Out link has been added to make it easier to view the site before applying any changes. As you can see from Figure 4, you can change the entire look and feel of the site with a single click.



SharePoint 2010 made great changes to the way users edited pages using wiki page editing and adding the ability to place web parts anywhere on the page. The ability to create and design your layouts remains part of the rich user experience.

Microsoft has created a more intuitive user interface by adding common language terminology and adding inline editing for some common navigation. The use of the Pencil icon, along with the text “Edit”, can be seen in any location that allows users to edit. For navigation you can now click the Edit Links icon to manage the top navigation links or the quick launch links.

Anyone new to SharePoint finds that the page editing still provides the familiar Microsoft Word experience using the wiki pages that enable you to add all types of rich content, from text to images. The experience is more fluid than previous versions with new features such as Paste Clean and a preview of applying styles before you select them. Users were always asking what the styles looked like to know which one to apply to the content. The Change with Preview feature enables users to know what the pages, styles, and fonts are before they make the content changes. Also the Styles menu is now similar to the Microsoft Word Style menu layout with the name and a preview of what the style looks like. Users now see the full set of styles on the Ribbon without needing to try each one or have a style guide printed out and next to each computer.

One feature that users have wanted is to add code to the page without the page manipulating it when it is saved. Two new options enable this change: the Embed Code option and the Video and Audio embedding option. With the exponential growth of many cloud services, users need a way to add embedded video from such sites as YouTube and Vimeo (in addition to adding custom scripts to sites such as Facebook, LinkedIn, and Twitter). These cloud services enable users to build customized sites by using generated code that users can add by copying and pasting.

Getting your web parts onto the page and customizing them has not changed from SharePoint 2010. The Web Part menu appears on the Ribbon for inserting your web parts onto the page. You can select your web parts and insert them into the page as in the previous version. In SharePoint 2013 there are also app parts that can be added to your pages to enrich the content. These app parts are added to the page in the same way that traditional web parts are added to the page through the Parts viewer. To make it easier to find all of the parts, the layout of the Web Part menu has categories: the web parts available in that category, a description of the web part, and the location of where to add to the web part, as shown in Figure 5.



The Modify Web Part settings have not changed from previous versions of SharePoint. They continue to appear on the right-side tool pane, enabling you to customize the properties for the web part, change its appearance, or modify its layout.

One of the nice things about SharePoint development is that you get a number of out of the box (OOB) web parts to speed your development so that you do not need to write everything from scratch. Although the following isn’t an exhaustive list of all the web parts in SharePoint, it includes a number of key, new web parts that you should be aware of: Timeline, Project Summary, and Community Changes.

Microsoft focused on the needs of users to keep all their tasks organized. One area that was needed was to keep tasks visible and updated. The quickest way to add the Project Summary web part to the page is to use the quick actions from the Get Started web part as previously mentioned. After the web part has been added to the page, you can allow end users to update the timeline or manage the task list providing the data to the web part. You can see that the Project Summary web part provides an overview of the upcoming tasks and a timeline of the current tasks. Now you can manage all your tasks, create a project site, and allow users to have a full view of the timeline, all within the user interface, as shown in Figure 6.



The Timeline web part provides the timeline without the Summary or Quick Edit links. This allows the user that is managing the site to use the web part that fits their needs, whether that is managing the tasks or simply viewing them. The Timeline web part provides the ability to move the layout of the tasks. Users can still quickly interact with the tasks on the timeline by clicking the task, which brings up a dialog with common editing options such as opening the full item or removing the task from the timeline.

Microsoft has created a new set of web parts based on the new Community features. The new web parts are About This Community, Join, My Membership, Tools, and What’s Happening. These web parts can be added to a site that has the Community features enabled, shown in Figure 7. The community site already has the web parts on the page, but you can also add them or move them on the communities you create. You can see they are all grouped into the Community category to easily find and add them.


Top 10
Review : Sigma 24mm f/1.4 DG HSM Art
Review : Canon EF11-24mm f/4L USM
Review : Creative Sound Blaster Roar 2
Review : Philips Fidelio M2L
Review : Alienware 17 - Dell's Alienware laptops
Review Smartwatch : Wellograph
Review : Xiaomi Redmi 2
Extending LINQ to Objects : Writing a Single Element Operator (part 2) - Building the RandomElement Operator
Extending LINQ to Objects : Writing a Single Element Operator (part 1) - Building Our Own Last Operator
3 Tips for Maintaining Your Cell Phone Battery (part 2) - Discharge Smart, Use Smart
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
Popular Tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8