Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Part Transformers – More than Meets the Eye

210 views

Published on

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

Published in: Technology
  • Be the first to comment

Web Part Transformers – More than Meets the Eye

  1. 1. Accessible content is available upon request. Web Part Transformers D’arce Hess
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.

×