session 2 branding and site development in sharepoint

The 7th SharePoint Saturday Vietnam has been made possible because of a generous sponsorship

from the following friends

About Me Khoa Quach SharePoint Technologies MCTS, MCP CEO, Cofounder of NIFTIT

Brooklyn, New York based startup We empower users through nifty solutions www.niftit.com

@niftykhoa

@NIFTIT

Branding SharePointMore Tools

Most SharePoint Intranet portals looks like this…

When they can display…

CSWPThe content search web parts and display templates

Advantages

• CSWP is a new feature in SP 2013 – Used to display search related information– The CSWP returns content that is as fresh

as the latest crawl of your content

• Granular control over the information display– Easily create query, sorting and filtering– Power Users can select property mappings– Display templates are using HTML,CSS and

JS

Before we get started

• Only available enterprise version• Not necessary but highly

recommended to have CA access and access to SSA

• Why? – Because CSWP returns content from the

search index.– Because you want to have control over

managed property and content sources

Where are the display templates

Via the web, all display templates are located under the design manager

Via SPD: All Files >> _catalogs >> masterpage

>> Display Templates >> Content Web Parts

They always come in pair: HTML + JS. Never edit JS (auto-generated)

Control Display Template

Control the chrome or recurring elements of the CSWP

Item DisplayTemplate

Allow to control the display of one specific item

<mso:ManagedPropertyMapping /> helps you provide proper mapping from the CSWP (or enforced them)

'Line 1'{Select a Title}:'Title'

Two examples via demo

Announcement simple display template

Calendar with Date sorting Slider Image with Bootstrap.js

STEPS for successful CSWP:- What are the information to be query- How to display the information

Alternative to CSWPA step into development

Content Query Web Part

Introduced in 2010 Still viable solution Same restrictions from 2010 applies

for 2013

SOAP/REST web services and useful libraries

SOAP: XML based format, protocol agnostic web service

REST: ATOM/JSON format, HTTP only web service

SPServices.js (Marc D Anderson) Restpoint.js (Dom Benoscek)

SOAP/REST web services and useful libraries

SOAP: XML based format, protocol agnostic web service

REST: ATOM/JSON format, HTTP only web service

SPServices.js (Marc D Anderson) Restpoint.js (Dom Benoscek)

Example via SPServices.js

A useful SOAP library

SOAP/REST web services and useful libraries

Useful functions on SPServices

• SPGetCurrentSite• SPGetCurrentUser

• GetListItems

• GetRolesAndPermissionsForCurrentUsers

Other useful libraries

That can help you providing a great branding solution

Bootstrap.js

• framework for faster and easier front end development.

• In the context of SharePoint:– Navigation– Grid system

Angular.js

• Hot topic in mobile and windows 8 application development

• Provides clean framework for MVC type development with JS

• In the context of SharePoint:– Cleaner HTML– Neatly organize multiple CSOM/JSOM

• Recommend reading posts from Jeremy Thake

Thank you