Blog

Creating MyDocument and MyDocumentCollection models extending Item and Items PnP JS Core classes

image

This is a blog post in the series about working with Custom Business Objects, Parsers and TypeScript decorators in PnP JS Core:

  1. Introduction to Why do we should use Custom Business Objects (Models) in PnP JS Core
  2. Creating select and expand TypeScript Property Decorators to be used in PnP JS Core
  3. Creating MyDocument and MyDocumentCollection models extending Item and Items PnP JS Core classes (this article)
  4. Create Custom Parser and Array Parser to isolate select and property names
  5. How to consume our decorators, models and parsers from SPFx, the winning combination
  6. Github project! Please remember to “star” if you liked it!

Introduction

In the previous posts of this series we explained why we should use Custom Business Objects in PnP JS Core and we implemented TypeScript decorators to help us to have more generic and maintainable code. In this article, we will see how to implement Custom Business Objects inheriting from Item and Items PnP JS Core generic classes and using the previously created TypeScript decorators internally.

What is the difference between Item and Items PnP JS Core classes?

Let’s do the comparison with Client Object Model, Item is ListItem and Items is ListItemCollection. PnP Core JS expose these two different classes Item and Items with different methods within them. For example, you can see different Item Methods and Items methods.

Imagine we are trying to get specific Item or Document from SharePoint using PnP Core JS then we will use this code (with no custom objects):

clip_image001

And similarly, to get Items or Document Collection we will use:

Here the result:

clip_image002

Now, we already know the difference between Item and Items from PnP JS Core. Let’s implement our two custom classes inheriting both of them and combining TypeScript decorators.

Custom classes implementation inheriting from Item and Items

We are going to create two new classes called “MyDocument” and “MyDocumentCollection“.

MyDocument

MyDocumentCollection

Note you can see the full code in this github project.

Ideally we will create a folder in our solution to create all our models:

clip_image003

How to use MyDocument Custom Business Object from our PnP JS Core code

We can easily use the class with the following code:

How to consume MyDocument:

clip_image004

How to use MyDocumentCollection:

clip_image005

We can notice how both custom objects and decorators work well because queries to SP only brings the right dataTitle, FileLeafRef and File/Length“, but still we need a parser in order to correctly do the mapping between the query properties into our TypeScript objectsTitle, Name and Size” properties.

In the next post we are going to implement a custom Parser and Array Parser to solve this specific issue.

Remember this is a post series about working with Custom Business Objects, Parsers and TypeScript decorators in PnP JS Core:

  1. Introduction to Why do we should use Custom Business Objects (Models) in PnP JS Core
  2. Creating select and expand TypeScript Property Decorators to be used in PnP JS Core
  3. Creating MyDocument and MyDocumentCollection models extending Item and Items PnP JS Core classes (this article)
  4. Create Custom Parser and Array Parser to isolate select and property names
  5. How to consume our decorators, models and parsers from SPFx, the winning combination
  6. Github project! Please remember to “star” if you liked it!

Enjoy it!

@jquintozamora

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

Post Navigation