SOLVED

SPFx how to get the current page title?

%3CLINGO-SUB%20id%3D%22lingo-sub-359225%22%20slang%3D%22en-US%22%3ESPFx%20how%20to%20get%20the%20current%20page%20title%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-359225%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20trying%20to%20use%20SPFx%20and%26nbsp%3B%40pnp%2Fsp%20to%20get%20the%20title%20of%20the%20current%20news%20page%2C%20I%20mean%20when%20I%20open%20a%20news%20post%20I%20would%20like%20to%20retrieve%20the%20title%20of%20the%20news%20post.%20Actually%20the%20site%20pages%20library%20has%20one%20custom%20column%20called%20Tags%20showing%20tags%20applied%20to%20the%20news%20post%20(It%2C%20Economy%2C%20etc...).%20My%20goal%20is%20show%20the%20corresponding%20tags%20when%20I%20open%20a%20news%20post.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20tried%20with%20this%3A%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eprops%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Econtext%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EpageContext%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3ElistItem%3C%2FSPAN%3E%3CSPAN%3E%5B%3C%2FSPAN%3E%3CSPAN%3E'Tags'%3C%2FSPAN%3E%3CSPAN%3E%5D.%3C%2FSPAN%3E%3CSPAN%3Eget%3C%2FSPAN%3E%3CSPAN%3E().%3C%2FSPAN%3E%3CSPAN%3Ethen%3C%2FSPAN%3E%3CSPAN%3E((%3C%2FSPAN%3E%3CSPAN%3Eitems%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Eany%3C%2FSPAN%3E%3CSPAN%3E%5B%5D)%20%3C%2FSPAN%3E%3CSPAN%3E%3D%26gt%3B%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Econsole%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Elog%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Eitems%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7D)%3B%3C%2FSPAN%3E%3C%2FPRE%3E%3C%2FDIV%3E%3CP%3E%26nbsp%3Bthe%20context%20is%20webPartContext.%3C%2FP%3E%3CP%3Ebut%20in%20the%20console%20I%20get%20%22undefined%22%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHow%20should%20I%20use%20the%20pageContext%3F%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBest%20regards%3C%2FP%3E%3CP%3EAmerico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-359225%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EPnP%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-359434%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20how%20to%20get%20the%20current%20page%20title%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-359434%22%20slang%3D%22en-US%22%3E%3CP%3Ewelcome%20%3A)%3C%2Fimg%3E%3CBR%20%2F%3EFederico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-359415%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20how%20to%20get%20the%20current%20page%20title%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-359415%22%20slang%3D%22en-US%22%3E%3CP%3EI%20understand.%3C%2FP%3E%3CP%3EI%20did%20some%20changes%20and%20I%20am%20getting%20the%20corresponding%20tags.%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20for%20your%20help!!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERegards!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-359397%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20how%20to%20get%20the%20current%20page%20title%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-359397%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F117034%22%20target%3D%22_blank%22%3E%40Americo%20Perez%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3Elistitemid%20(number)%2C%20your%20this.props.context.pageContext.listItem.id%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECheers%3C%2FP%3E%3CP%3EFederico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-359396%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20how%20to%20get%20the%20current%20page%20title%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-359396%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20Federico%2C%3C%2FP%3E%3CP%3EWhat%20is%20the%2015%20in%20the%20getById%3F%26nbsp%3B%3C%2FP%3E%3CP%3ERight%20now%20I%20am%20getting%20an%20404%20error%20%3A(%3C%2Fimg%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERegards!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-359344%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20how%20to%20get%20the%20current%20page%20title%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-359344%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F117034%22%20target%3D%22_blank%22%3E%40Americo%20Perez%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20can%20try%20in%20this%20way%2C%20using%20pnpjs%20and%20listitemid%20(number)%3C%2FP%3E%3CPRE%3E%20%20%20var%20resultData%3A%20any%20%3D%20await%20sp.web.lists.getByTitle(%22Site%20Pages%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20.items.getById(15)%0A%20%20%20%20%20%20%20%20%20%20%20%20.select(%22Tags%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20.get()%3B%0A%0A%20%20%20%20%20%20%20%20return%20await%20resultData.Tags%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FPRE%3E%3CP%3ECheers%3C%2FP%3E%3CP%3EFederico%3C%2FP%3E%3C%2FLINGO-BODY%3E
Regular Contributor

Hi,

 

I am trying to use SPFx and @pnp/sp to get the title of the current news page, I mean when I open a news post I would like to retrieve the title of the news post. Actually the site pages library has one custom column called Tags showing tags applied to the news post (It, Economy, etc...). My goal is show the corresponding tags when I open a news post. 

 

I have tried with this: 

this.props.context.pageContext.listItem['Tags'].get().then((items: any[]) => {
console.log(items);
});

 the context is webPartContext.

but in the console I get "undefined" 

 

How should I use the pageContext? 

 

Best regards

Americo

5 Replies
best response confirmed by Americo Perez (Regular Contributor)
Solution

Hi @Americo Perez 

You can try in this way, using pnpjs and listitemid (number)

   var resultData: any = await sp.web.lists.getByTitle("Site Pages")
            .items.getById(15)
            .select("Tags")
            .get();

        return await resultData.Tags;
                

Cheers

Federico

Thanks Federico,

What is the 15 in the getById? 

Right now I am getting an 404 error :(

 

Regards!

Hi @Americo Perez 

listitemid (number), your this.props.context.pageContext.listItem.id

 

Cheers

Federico

I understand.

I did some changes and I am getting the corresponding tags. 

Thanks for your help!!

 

Regards!

welcome :)
Federico