Category: SPFx

Pexels Thisisengineering 3861972 0

Testing SharePoint Framework (SPFx) Components with Jest and React Testing Library

Introduction Testing is a crucial aspect of any software development process, including SharePoint Framework (SPFx) development. Here are some reasons why testing is important: Testing is an essential part of SPFx development. It helps ensure the quality, reliability, and performance of your components, leading to a better end product and a smoother user experience. How to test? First, we need...

Pexels Sora Shimazaki 5926380 0

Consume Lookup Multi Select Fields SPFx with Models and Hooks

First when you set up lookup columns in a list or library, Microsoft restricts you to 12 columns of that type in a single view. The reason behind this limitation is that lookup columns retrieve data from another list or source. If you surpass this limit and try to add a 13th column, you’ll encounter an error message. It seems that 13 isn’t a...

Pexels Andrea Piacquadio 3822850 0

SPFx IPropertyPaneDropdownOption[] get Unique Options (Duplicates) Cascade

When designing the property pane for your SharePoint client-side web parts, you may have one web part property that displays its options based on the value selected in another property. This scenario typically occurs when implementing cascading dropdown controls. I’m assuming in this Article/Fix you are getting all lists excluding the hidden ones. Let’s Start from the beginning, you have...

Pexels Andrea Piacquadio 3822850 0

PnPJs SPFx orderBy() not working?

In the PnPJs Agnostic Framework Some fields are not sortable, let’s assume this call is using a MODEL where TrainingAreaPosition is a number column without decimal places: I’m using a Custom React Hook, fix by comparing the field name, where Position is a property of the Model to Map

Pexels Andrea Piacquadio 3822850 0

Using SPFx React Controls Context in version 1.17.3

Since React 17 was introduced in version 1.16.0, the problems has began with some PnP Projects. In version 1.17.3 you will get this error when installing the PnP React Controls, so you must wait for the Repo be updated. In version 1.16.1 to use the PeoplePicker Control the workaround was give context as any in your Webpart.ts Now if you...

Pexels Christina Morillo 1181263 0

Working with Models in SPFx and Consume Some Field Types

This article will give you some insights to work with models in the SharePoint Framework SPFx and consume information from some Field Types FIELDS Why to use Models? TypeScript is a superset of JavaScript that adds optional static typing and other features to JavaScript. It provides a way to catch errors early through static type checking and can help you...

Pexels Pixabay 270348 0

Building a Timeline Component with the SPFx SharePoint Framework

Let’s get you a Timeline component you can use for several use cases, in a chronologic way to represent information or just another way you want to represent items from a SharePoint List that makes sense to you. I’m using in this sample Class Components because at the time of this post there is no native Functional Components in the...

Photo By Lukas 0

SPFx Class Components Challenge

In fact this is a topic that has been talked about often. Hooks were added to React in version 16.8. Hooks allow function components to have access to state and other React features. Because of this, class components are generally no longer needed, yes in fact, but let’s see what we have at the time of this post. So in...