web part transformers – more than meets the eye
TRANSCRIPT
Accessible content is available upon request.
Web Part Transformers
D’arce Hess
© 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
D’arce Hess
© 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
© 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
© 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
© 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!
© 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
© 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
© 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
© 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
© 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.
© 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
© 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.
© 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?
© 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
© 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
© 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
© 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
© 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
© 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
© 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?
© 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
© 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.
© 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
© 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
© 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
© 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
© 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.