Sharepoint framework spfx > get weburl

%3CLINGO-SUB%20id%3D%22lingo-sub-77770%22%20slang%3D%22en-US%22%3ESharepoint%20framework%20spfx%20%26gt%3B%20get%20weburl%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-77770%22%20slang%3D%22en-US%22%3E%3CP%3E%22In%20the%20old%20days%22%20I%20would%20use%20something%20like%3A%3C%2FP%3E%3CPRE%3Evar%20url%20%3D%20_spPageContextInfo.webServerRelativeUrl%3B%3C%2FPRE%3E%3CP%3ETo%20get%20the%20URL%20of%20my%20SharePoint%20site.%3C%2FP%3E%3CP%3ENow%20I%20try%20to%20do%20the%20same%20thing%20in%20SPFX%20like%3A%3C%2FP%3E%3CPRE%3Ethis.context.pageContext.site.absoluteUrl%3C%2FPRE%3E%3CP%3EBut%20the%20property%20%22context%22%20seems%20not%20to%20exist%20at%20all.%20Even%20if%20I%20run%20it%20within%20the%20%24(document).ready.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhat%20I%20try%20to%20do%20is%20get%20the%20URL%20of%20a%20sharepoint%20site%20and%20create%20a%20query%20string%20from%20it%20to%20use%20in%20the%20search%20api.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%2C%20Mike%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-77770%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-78928%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20framework%20spfx%20%26gt%3B%20get%20weburl%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-78928%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F2387%22%20target%3D%22_blank%22%3E%40Pieter%20Veenstra%3C%2FA%3E%26nbsp%3BI%20did%20that.Must%20be%20a%20problem%20with%20my%20references%20because%20it%20does%20not%20seem%20to%20find%20my%20function.%3C%2FP%3E%3CP%3EI'll%20check%20my%20code%20again.%20Guess%20have%20taken%26nbsp%3Ba%20too%20complex%20example%20for%20my%20first%20project%20%3B)%3C%2Fimg%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-78860%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20framework%20spfx%20%26gt%3B%20get%20weburl%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-78860%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%2F3085%22%20target%3D%22_blank%22%3E%40Mike%20Jansen%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhy%20wouldn't%20you%20pass%20the%20parameters%20in%20like%20you%20would%20do%20with%20functions%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3EfunctionName(parameter1%2C%20parameter2%2C%20parameter3)%20%7B%0A%26nbsp%3B%26nbsp%3B%26nbsp%3B%20code%20to%20be%20executed%0A%7D%3C%2FPRE%3E%3CDIV%20class%3D%22w3-main%20w3-light-grey%22%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-78805%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20framework%20spfx%20%26gt%3B%20get%20weburl%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-78805%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F2387%22%20target%3D%22_blank%22%3E%40Pieter%20Veenstra%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAnother%20newbie%20question.%20Now%20I%20have%20my%20url%20available%20within%20the%20.ts%20file.%20I%20do%20need%20it%20in%20my%20blabla.js%20file.%3C%2FP%3E%3CP%3EHow%20can%20I%20pass%20the%20value%20to%20my%20.js%20file%3F%20Is%20there%20some%20kind%20of%20export%20function%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%2C%20Mike%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-77995%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20framework%20spfx%20%26gt%3B%20get%20weburl%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-77995%22%20slang%3D%22en-US%22%3E%3CP%3Ehi%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F2387%22%20target%3D%22_blank%22%3E%40Pieter%20Veenstra%3C%2FA%3E.%3C%2FP%3E%3CP%3EThanks%20again%2C%20I%20will%20dive%20into%20this.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-77773%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20framework%20spfx%20%26gt%3B%20get%20weburl%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-77773%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%2F3085%22%20target%3D%22_blank%22%3E%40Mike%20Jansen%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3Ethis.context.pageContext.web.absoluteUrl%3C%2FPRE%3E%3CP%3E%26nbsp%3Bis%20the%20right%20way%20%2Cbut%20%26nbsp%3Bdocument.ready%20is%20not%20the%20right%20way%20%3B)%3C%2Fimg%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eyou%20can%20simply%20call%20whatever%20you%20need%20within%20the%20render%20method.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20will%20have%20to%20use%20methods%20with%20a%20promise%20like%20this%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3E%20%20public%20_getListDataUsers()%3A%20Promise%26lt%3BUsers%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20return%20this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl%20%2B%20%60%2F_api%2Fweb%2Fsiteusers%60%2C%20SPHttpClient.configurations.v1)%0A%20%20%20%20%20%20%20%20%20%20%20%20.then((response%3A%20SPHttpClientResponse)%20%3D%26gt%3B%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20response.json()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%3C%2FPRE%3E%3CP%3EThe%20above%20example%20will%20work%20within%20a%20render%20method%20as%20the%20context%20will%20be%20alive.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20you%20for%20example%20run%20the%20method%20from%20a%20document%20ready%20then%20you%20will%20get%20some%20errors%20as%20you%20are%20experiencing.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20will%20need%20roughly%20something%20like%20this%20if%20you%20want%20an%20onclick%20event%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3Evar%20myElement%3A%20Element%20%3D%20document.querySelector(%60%23myElement%60)%3B%20%20%20%20%20%20%20%20%0AmyElement.addEventListener('click'%2C%20(evt%3A%20Event)%20%3D%26gt%3B%20%7B%20%0A%20%20%20%20this._getListDataUsers%0A%7D%2C%20false)%3B%0A%0A%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Regular Contributor

"In the old days" I would use something like:

var url = _spPageContextInfo.webServerRelativeUrl;

To get the URL of my SharePoint site.

Now I try to do the same thing in SPFX like:

this.context.pageContext.site.absoluteUrl

But the property "context" seems not to exist at all. Even if I run it within the $(document).ready.

 

What I try to do is get the URL of a sharepoint site and create a query string from it to use in the search api.

 

Thanks, Mike

5 Replies
Highlighted

Hi @Mike Jansen,

 

 

this.context.pageContext.web.absoluteUrl

 is the right way ,but  document.ready is not the right way ;)

 

you can simply call whatever you need within the render method.

 

 

 

You will have to use methods with a promise like this:

 

 

  public _getListDataUsers(): Promise<Users> {
        return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/siteusers`, SPHttpClient.configurations.v1)
            .then((response: SPHttpClientResponse) => {                
                return response.json();
            });
    }

The above example will work within a render method as the context will be alive.

 

 

If you for example run the method from a document ready then you will get some errors as you are experiencing.

 

You will need roughly something like this if you want an onclick event:

 

var myElement: Element = document.querySelector(`#myElement`);        
myElement.addEventListener('click', (evt: Event) => { 
    this._getListDataUsers
}, false);

 

 

 

 

 

Highlighted

hi @Pieter Veenstra.

Thanks again, I will dive into this.

Highlighted

Hi @Pieter Veenstra,

 

Another newbie question. Now I have my url available within the .ts file. I do need it in my blabla.js file.

How can I pass the value to my .js file? Is there some kind of export function?

 

Thanks, Mike

Highlighted

Hi @Mike Jansen,

 

Why wouldn't you pass the parameters in like you would do with functions?

 

functionName(parameter1, parameter2, parameter3) {
    code to be executed
}
 
Highlighted

@Pieter Veenstra I did that.Must be a problem with my references because it does not seem to find my function.

I'll check my code again. Guess have taken a too complex example for my first project ;)