In this blog article, I am going to describe all the steps required to get SharePoint list field values by using SharePoint Framework model which is SPFx.

If you are already familiar with SPFx then you might have a better understanding on SPFx application customizer.

If you are new to SPFx then please go through this below-mentioned link from where you can get a better understanding on SPFx model.

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview

In this below-mentioned code example, I have taken application customizer of SPFx. I have also used PnP JavaScript library. The Patterns and Practices JavaScript Core Library was created to help developers by simplifying common operations within SharePoint and the SharePoint Framework.

To get more detailed information about PnP javascript library, please follow this link,

https://github.com/SharePoint/PnP-JS-Core.

This below-mentioned code example is very simple and straight forward. At first, you have to import ‘sp-pnp-js’ namespace, then you can use PnP library in code to retrieve SharePoint list and its field values.

This code snippet will help you to retrieve any column values of all list items present under a particular list. You just have to provide your list title and list field/column internal name in the following line,

pnp.sp.web.lists.getByTitle(“My List”).items.select(“Title”, “Id”, “CustomField_1”, “CustomField_2”).getPaged()

In the above piece of code “My list” is SP list title and “Title”, “Id”, “CustomField_1”, “CustomField_2” are list field/column internal names.

Accordingly you can change these values on your end,

    import { override } from '@microsoft/decorators';  
    import { Log } from '@microsoft/sp-core-library';  
    import {  
    BaseApplicationCustomizer  
    }  
    from '@microsoft/sp-application-base';  
    import {  
        Dialog  
    } from '@microsoft/sp-dialog';  
    require('mutationobserver-shim');  
    import * as strings from 'HelloWorldApplicationCustomizerStrings';  
    const LOG_SOURCE: string = 'HelloWorldApplicationCustomizer';  
    /** 
     * If your command set uses the ClientSideComponentProperties JSON input, 
     * it will be deserialized into the BaseExtension.properties object. 
     * You can define an interface to describe it. 
     */  
    export interface IHelloWorldApplicationCustomizerProperties {  
        // This is an example; replace with your own property  
        testMessage: string;  
    }  
    let _observer: MutationObserver;  
    /** A Custom Action which can be run during execution of a Client Side Application */  
    export default class HelloWorldApplicationCustomizer  
    extends BaseApplicationCustomizer < IHelloWorldApplicationCustomizerProperties > {  
        @override  
        public onInit(): Promise < void > {  
            Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);  
            let message: string = this.properties.testMessage;  
            if (!message) {  
                message = '(No properties were provided.)';  
            }  
            this.context.placeholderProvider.changedEvent.add(this, this.renderObserver);  
            return Promise.resolve();  
        }  
        private async renderObserver(): Promise < void > {  
            if (!_observer) {  
                // Register observable  
                let config = {  
                    childList: true,  
                    subtree: true  
                };  
                _observer = new MutationObserver(this.addMyCustomMenu);  
                _observer.observe(document, config);  
            }  
        }  
        private addMyCustomMenu(mutationsList) {  
            var o365Menus = document.querySelectorAll("*[class^=\"o365cs-mfp-linklist o365cs-segoeRegular o365cs-text-align-left\"]");  
            if (o365Menus.length > 0) {  
                for (var i in o365Menus) {  
                    try {  
                        var menuItem = o365Menus[i];  
                        var innerhtml = menuItem.innerHTML;  
                        var newhtml = '<div class="ms-fcl-tp o365cs-nfd-normal-lineheight"><a class="ms-fcl-tp o365button" role="link"';  
                        newhtml += 'href="javascript:alert(\"Hello\");" id="O365_SubLink_CustomMenu"';  
                        newhtml += 'aria-labelledby="_ariaId_9"><span class="_fc_3 owaimg" style="display: none;"></span>';  
                        newhtml += '<span class="_fc_4 o365buttonLabel" id="_ariaId_9">My Custom Menu</span></a></div>';  
                        menuItem.innerHTML = innerhtml.concat(newhtml);  
                    } catch (e) {}  
                }  
            }  
        }  
        private _onDispose(): void {  
            if (_observer) {  
                _observer.disconnect();  
            }  
            console.log('[HelloWorldApplicationCustomizer._onDispose] Disposed custom.');  
        }  
    }

import { override } from '@microsoft/decorators';

import { Log } from '@microsoft/sp-core-library';

import {

BaseApplicationCustomizer

}

from '@microsoft/sp-application-base';

import {

Dialog

} from '@microsoft/sp-dialog';

require('mutationobserver-shim');

import * as strings from 'HelloWorldApplicationCustomizerStrings';

const LOG_SOURCE: string = 'HelloWorldApplicationCustomizer';

/**

* If your command set uses the ClientSideComponentProperties JSON input,

* it will be deserialized into the BaseExtension.properties object.

* You can define an interface to describe it.

export interface IHelloWorldApplicationCustomizerProperties {

// This is an example; replace with your own property

testMessage: string;

}

let _observer: MutationObserver;

/** A Custom Action which can be run during execution of a Client Side Application */

export default class HelloWorldApplicationCustomizer

extends BaseApplicationCustomizer < IHelloWorldApplicationCustomizerProperties > {

@override

public onInit(): Promise < void > {

Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

let message: string = this.properties.testMessage;

if (!message) {

message = '(No properties were provided.)';

}

this.context.placeholderProvider.changedEvent.add(this, this.renderObserver);

return Promise.resolve();

}

private async renderObserver(): Promise < void > {

if (!_observer) {

// Register observable

let config = {

childList: true,

subtree: true

};

_observer = new MutationObserver(this.addMyCustomMenu);

_observer.observe(document, config);

}

private addMyCustomMenu(mutationsList) {

var o365Menus = document.querySelectorAll("*[class^=\"o365cs-mfp-linklist o365cs-segoeRegular o365cs-text-align-left\"]");

if (o365Menus.length > 0) {

for (var i in o365Menus) {

try {

var menuItem = o365Menus[i];

var innerhtml = menuItem.innerHTML;

var newhtml = '<div class="ms-fcl-tp o365cs-nfd-normal-lineheight"><a class="ms-fcl-tp o365button" role="link"';

newhtml += 'href="javascript:alert(\"Hello\");" id="O365_SubLink_CustomMenu"';

newhtml += 'aria-labelledby="_ariaId_9"><span class="_fc_3 owaimg" style="display: none;"></span>';

newhtml += '<span class="_fc_4 o365buttonLabel" id="_ariaId_9">My Custom Menu</span></a></div>';

menuItem.innerHTML = innerhtml.concat(newhtml);

} catch (e) {}

}

private _onDispose(): void {

if (_observer) {

_observer.disconnect();

}

console.log('[HelloWorldApplicationCustomizer._onDispose] Disposed custom.');

}

SharePoint 2013 Hosting Recommendation

HostForLIFE.eu’s SharePoint 2013 Hosting solution offers a comprehensive feature set that is easy-to-use for new users, yet powerful enough for the most demanding web developer expert. Hosted SharePoint Foundation 2013 is the premiere web-based collaboration and productivity enhancement tool on the market today. With SharePoint 2013 Foundation, you can quickly access and manage documents and information anytime, anywhere though a Web browser in a secure and user friendly way. SharePoint hosting services start at only at €9.99/mo, allowing you to take advantage of the robust feature set for a small business price. HostForLIFE.eu offers a variety of hosted SharePoint Foundation 2013 plans as well as dedicated SharePoint 2013 Foundation options

Sharepoint 2013 Hosting – HostForLIFE.eu :: Retrieve SP List Item’s Column Value In SPFx Application Customizer Using PNP

SharePoint 2013 Hosting Recommendation

BLOGROLL

Featured On

Sharepoint 2013 Hosting – HostForLIFE.eu :: Retrieve SP List Item’s Column Value In SPFx Application Customizer Using PNP

SharePoint 2013 Hosting Recommendation

BLOGROLL

Featured On

Tags