SPFx component – Simplifying understanding of Service Locator Pattern – part 1 – Adding service/class to SPFx project structure and accessing in SPFx component

SPFx component - folder structure - added simple class "demoservice.ts" and simple method "showalert() which returns simple string
SPFx component - folder structure - added simple class "demoservice.ts" and simple method "showalert() which returns simple string

Hi All,

Greetings for the day !

As discussed in previous post , I started working on SPFx components. Learning REACT and SPFx components , best practices for implementations

One of my use case is I need to get the data from multiple lists from my SharePoint site either using Microsoft Graph APIs OR PnP. So while doing research I came across Service Locator Pattern. Started implementing and realise that it is bit complex at first stage to understand

So thought to sharing and starting with very simple demo where we have our SPFx component and one class having static method and calling the static method in our SPFx component.

In subsequent articles we will move ahead and will demonstrate and implement – Service Locator Pattern

Take away from this article :

  • Understanding the project structure for adding class / service
  • Calling static method from class in SPFx component

Creating a SPFx component :

SPFx - Demoapp - folder structure and render method from tsx file
fig : SPFx – Demoapp – folder structure and render method from tsx file

  • As in above fig we have very simple Demoapp SPFx component, I cleared Render() method as well
  • I executed following commands to deploy the component

gulp clean
gulp build
gulp bundle --ship
gulp package-solution --ship

  • On successful execution of above commands, I uploaded solution package in App Catalog sitesApps for SharePoint” library
  • Next step is to add the component on one of the page and it looks like as

SPFx - Demoapp - after successful deployment - adding the SPFx component on site page
fig : SPFx – Demoapp – after successful deployment – adding the SPFx component on site page
SPFx - Demoapp - after successful deployment of SPFx component - added on site page
fig : SPFx – Demoapp – after successful deployment of SPFx component – added on site page

  • Now, next step is to have class and access method in our SPFx component from the respective class
  • We will add “services” folder to have our classes like for operations on Lists, Taxonomy or other SharePoint features
  • Since those classes will be for all our SPFx components which we will implement, we will add this folder under “src” folder and parallel to our “webparts” folder as

SPFx component - folder structure - added service folder for reusable services / classes
fig : SPFx component – folder structure – added service folder for reusable services / classes

  • Here, please note our “webparts” folder contains multiple web parts
  • Next step is in our “services” folder, add very simple class and one method in it as

SPFx component - folder structure - added simple class "demoservice.ts" and simple method "showalert() which returns simple string
fig : SPFx component – folder structure – added simple class “demoservice.ts” and simple method “showalert() which returns simple string

  • Here please notice as in above fig we have added on demoservice.ts file having class demoservice and method “showalert()” which simply returns string

export default class demoservice {

    static showalert() {
        return "call from service";
    }//showalert

}//demoservice

  • Next step is to use this class in our SPFx component and call the method as

SPFx component - calling method from our custom class in our SPFx component
fig : SPFx component – calling method from our custom class in our SPFx component

  • Please note how we are calling method from our custom class – demoservice added under “services” folder
  • In tsx file of our component we are importing the class as

import demoservice from "../../../services/demoservice"

  • Next we are calling showalert() method and showing in JaveScript alert() as

 alert(demoservice.showalert());

  • On successful deployment, refresh the page and output will be – JavaScript alert

Thanks for reading ! This is first step towards implementing “Service Locator Pattern”.

Stay tuned for next steps !! Please feel to discuss in case require !

Prasham Sabadra

LIFE IS VERY BEAUTIFUL :) ENJOY THE WHOLE JOURNEY :) Founder of Knowledge Junction and live-beautiful-life.com, Author, Learner, Passionate Techie, avid reader. Certified Professional Workshop Facilitator / Public Speaker. Scrum Foundation Professional certificated. Motivational, Behavioral , Technical speaker. Speaks in various events including SharePoint Saturdays, Boot camps, Collages / Schools, local chapter. Can reach me for Microsoft 365, Azure, DevOps, SharePoint, Teams, Power Platform, JavaScript.

You may also like...

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: