Presented by D'arce Hess, Strategic Consultant, AvePoint Client Services on October 24, 2015 at SharePoint Saturday New Hampshire In this session, you will learn how to using client-side rendering techniques such as jsLink to transform out-of-the-box list web parts to fully-customized interfaces that will engage your users. You will learn how to create a custom Announcements and Events web part and how this common web part will transform your enterprise in SharePoint 2013 and O365. More from AvePoint: http://www.avepoint.com/community

1. Accessible content is available upon request.
Web Part Transformers
D’arce Hess

2. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
@darcehess
https://www.linkedin.com/in/darcehess
Darce.Hess@avepoint.com
D’arce Hess

3. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Introduction
References
What is jsLink?Lists
Questions
Agenda
Code

4. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
INTRODUCTION

5. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
What we used to do

6. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
SAID NO ONE EVER!

7. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
• Easier to develop
• Easier than XSLT
• Can use jQuery to aid in
development across the
platform
• Use CSS to control look & feel
Enter Client-Side Rendering

8. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
LISTS

9. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Types of Lists
Lots of Options
• Generic Lists
• Document Libraries
• Announcements
• Events
• Tasks
• And many more

10. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
• Lots of columns
• Doesn’t fit well in
small sections
Our Generic List

11. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Why would we want to change it?
• Takes up too much space
on the page.
• Want a new look and feel
• Adds visual indicators to a
user about functionality.

12. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Without altering the template

13. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
You can only
use one script
per type of list
on a page.

14. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
WHAT IS JSLINK?

15. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Gives us the ability to
override the default list
template to create amazing
experiences

16. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
The jsLink field is found in
the edit-mode menu for
the web part.
~sitecollection/SiteAssets/announcement.js

17. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Where to store files

18. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Where are the Display Templates?
Located in
_catalogs/masterpage

19. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Also used in connection with Display Templates

20. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
THE CODE

21. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
What does the js look like?

22. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Overriding the List Template

23. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.

24. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
DEMO

25. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
REFERENCES

26. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
Examples of ideas
List template IDs
References

27. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.
QUESTION & ANSWER

28. © AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the prior written consent of AvePoint, Inc.