Sharepoint framework spfx > get weburl

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 ;)