Skip to main content

SPFX create custom library and how to use the functions in our webparts

 Since we will be deploying in our office 365 tenant environment, I am selecting "Yes"

and choosing "Library".













note that library is a class that has functions we are utilizing now.

Step 1: In MyNewCustomLibrary class, I have create a function as below

public getCurrentDateTime(): string{
    let currentDate:Date;
    let strstring;
    currentDate = new Date();
    str = "<br>Today Date is: "+currentDate.toDateString();
    str+="</br>Time is: "+currentDate.toTimeString();
    return str;
  }

In package.json,

we can find the library name and customlibrary.ts is our class name MynewcustomlibraryLibrary. Version, dev dependencies are common.

We can do gulp build and make sure no errors.

Now we have to create a webpart and that makes to talk to the library class functions which we created now.


Step 2: npm link

To make it available for my local machine for testing we have to link the library and webpart which I am going to create now.
npm link
Once npm link is created, then this library can be used to the rest of our webpart solutions.
It will create link of library to our project folder C:A:SPFX folder with other webparts.

Step 3:Create a webpart

1. now open new cmd prompt and create a new webpart.
2. make sure O365 tenant deploy - select yes, and this time, choose webpart.

3. open with VS code.

4. Now we have link our webpart with the library.
npm link <yourlibraryname>. Note: here library name means you folder name of the library.
example: A drive > SPFX> createcustomlibrary (whic is the folder name).
So this webpart will be linked with our library.

5. We need to import our library in our webpart ts file

import * as mylibrary from 'createcustomlibrary';

6. Now we need to create an object that refers to our library in render method

const myInstance = new mylibrary.MynewcustomlibraryLibrary();

7. Now in the html of render method 

<p>Calling the function resides in our library</p> <p>${myInstance.getCurrentDateTime()}</p>


8. We can now test it.

gulp serve.








Deployment

9. In order to deploy in O365, First build and package your solution of createcustom library solution and upload the sppkg file to App Catalog.

Now, Go to your webpart project, open package.json file.
Under dependencies add one more line
"createcustomlibrary":"0.0.1"

Note: In order to find your version, In your library project, open package.json, you can see the library name and version number. Same can be copy and past it here in the webpart project package.json file.


OutPut:






Create Library full code for reference purpose:

MyNewCustomWebpart.ts

export class MynewcustomlibraryLibrary {
  public name(): string {
    return 'MynewcustomlibraryLibrary';
  }

  public getCurrentDateTime(): string{
    let currentDate:Date;
    let strstring;
    currentDate = new Date();
    str = "<br>Today Date is: "+currentDate.toDateString();
    str+="</br>Time is: "+currentDate.toTimeString();
    return str;
  }
}

index.html

export { MynewcustomlibraryLibrary } from './libraries/mynewcustomlibrary/MynewcustomlibraryLibrary';


Webpart full code for reference purpose:

import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
  
import styles from './TestmynewwebpartwithcustomlibraryWebPart.module.scss';
import * as strings from 'TestmynewwebpartwithcustomlibraryWebPartStrings';

import * as mylibrary from 'createcustomlibrary';

export interface ITestmynewwebpartwithcustomlibraryWebPartProps {
  descriptionstring;
}

export default class TestmynewwebpartwithcustomlibraryWebPart extends BaseClientSideWebPart<ITestmynewwebpartwithcustomlibraryWebPartProps> {

  public render(): void {
    const myInstance = new mylibrary.MynewcustomlibraryLibrary();

    this.domElement.innerHTML = `
      <div class="${ styles.testmynewwebpartwithcustomlibrary }">
        <p>Calling the function resides in our library</p>
        <p>${myInstance.getCurrentDateTime()}</p>
      </div>`;
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

----------------------------------------------------------------------------------------------------------------------------

Implementation URL:


Comments

Popular posts from this blog

Powerapps overcome 2000 item limit from any datasource

First go through delegation concept https://tejasadventure.blogspot.com/2020/05/power-apps-understanding.html In powerapps, we observe by default 500 item limit has set with in the app level for any data source. In order to overcome, we have option to set the limit of 2000 item limit maximum in the app. Now using code, MaximoFacility is my data source name contains 3000 items. ColFacilityDropdown is the collection storing the count of items from data source. We expect to see more than 2000 items. Based on StartWith function filtering the data with respective to the charectors and numbers as mentioned below. Code: Place the below code in a button on select property. Add label with code CountRows(ColFacilityDropdown) ClearCollect(ColFacilityDropdown,Filter(Filter(MaximoFacility, Status = "ACTIVE"), StartsWith( Title, "A" ))); Collect(ColFacilityDropdown,Filter(Filter(MaximoFacility, Status = "ACTIVE"), StartsWith( Title, "B" ))); Collect(ColFacilit...

Power Apps Understanding

https://tejasadventure.blogspot.com/2019/10/power-apps-we-have-1.html https://tejasadventure.blogspot.com/2019/11/power-apps-how-to-configure-using-blank.html   https://tejasadventure.blogspot.com/2019/11/power-apps-field-controls.html Report We can use people picker fields, look up fields  file attachment back next save cancel download the report and this report can be used in other system of powerapp. Add new report button - asks add from existing report Report all item view can design in the way like sharepoint list views for example. we can group it Group AND or Group OR by apply filters Canvas apps: Arrange user experience and interface design allow creativity and business use case guide how the way app wants to look like. Sources can be around 200+ ways. Majorly SharePOint, Power BI From data, From Sample From CDS From blank canvas via appSource Model driven apps: Model driven apps uses power of CDS rapidly to configure your for...

PowerApps multiselect cascading dropdown and save an item to SharePoint List

 I have one scenario as below List 1: Division List has title field List 2: District List has Title and Division Field(LookUp from Division List) List 3: Facility List has Title, District Field(LookUp field from District List) List 4: County List has Title, Facility Field(LookUp field from Facility List) Main List: Spill Report is the main list  Division Field( Look up from Division List) District Field(Look up field from District List) Facility Field(Look up field from Facility List) County Field(Look up field from County List) List Screenshots provided below can be refered for clarification. ----------------------------------------------------------------------------------------------------- PowerApps Canvas Apps In Power Apps Canvas App, We need to first design the app with the 4 respective fields Since those fields are multiselect, then it is to combo box. Generally power apps are not supported for multiselect cascasding dropdown. Refere microsoft documentation, Know Limit...