web part transformers – more than meets the eye

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

Darce.Hess@avepoint.com

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.