3

We all know that _spPageContextInfo is a very useful thing in Client side development. I need something equivalent of _spPageContextInfo in SPFX. Currently I am unable to use it directly from typescript. It gives error like

Can not find '_spPageContextInfo'

Finally, I have gone through the API documentation of SharePoint Framework and found PageContext. PageContext has dependence with ServiceScope. My qestion is: How to use PageContext? I need to use it my BaseService class. constructor of my class is:

constructor(private $http: ng.IHttpService, private $q: ng.IQService, serviceScope: ServiceScope) {
    serviceScope.whenFinished(() => {
      this.pageContext = new PageContext(serviceScope);
      console.log(this.pageContext);
    });
  }

Inside the constructor serviceScope is undefined. I know the reason: As I am not injecting/initialising serviceScope anywhere like other angular services. So what is the approach of injecting/initialising serviceScope in angular service class?

  • But window._spPageContextInfo is available in the Browser for Modern Experiences and Microsoft packed it with loads more goodies compared to the Classic _spPageContextInfo; So why would you want an alternative? – Danny '365CSI' Engelman Nov 4 '16 at 11:45
  • tried that already. gulp does not compile my code if I use it. Error: Property '_spPageContextInfo' does not exist on type 'Window' – Atish Dipongkor - MVP Nov 4 '16 at 11:48
  • 1
    Ah yes, the joys of TypeScript, You now have to write an Interface to the window object that is already there (and available as usual once TS is Transpiled to JS) But at least you are using a cool language and writing 8 more lines of code... Or go F* TS and try eval('window._spPageContextInfo') – Danny '365CSI' Engelman Nov 4 '16 at 12:04
  • Big YES!! Single line becomes multiple lines. CEWP vs SPFX – Atish Dipongkor - MVP Nov 4 '16 at 12:15
  • But SPFx is soooo cool... MVPs tell me I am a better Front-End Developer now. because (after 20 years) I no longer have to write 'roque' JavaScript. (Note: TypeScripts has its place in the stack, but it is HypeScript at the moment.. if you look at SPFx code in Github, 20% of it is plain stupid and bloated ECMAScript code inside a TS wrapper because 'MVPs' do not understand things like the map method of an Array and are still stuck in the for loop era of 15 years ago.) – Danny '365CSI' Engelman Nov 4 '16 at 12:36
4

Enjoyed reading the comments on this one (all good points, and I will add the level of abstraction it adds when you are trying to debug!) :-) Anyway, I believe this is what you are looking for*:

//import { IWebPartContext } from '@microsoft/sp-client-preview'; // Old dcumentation refers to this.
import { IWebPartContext} from '@microsoft/sp-webpart-base';

And then you can do (*assume the context has the stuff you are looking for in):

public context: IWebPartContext;

And then, for example:

url = this.context.pageContext.web.absoluteUrl + "/_api/web/lists/GetByTitle('SomeList')/
1

We are in the process of mapping the various properties on spPageContextInfo into a well typed collection of objects that will hang off the context. The start of this is accessible via this.context.pageContext in your webpart code.

Also - OnInit might be a better place to put initialization code rather than the constructor.

  • OnInit of what? I need it inside angular service class. – Atish Dipongkor - MVP Nov 4 '16 at 16:38
  • Are you running Angular 1 or 2? Note that you don't want to be the person creating the page context, the framework should be doing that and making it available. – PatMill_MSFT Nov 4 '16 at 17:13
  • I am using Angular 1.X – Atish Dipongkor - MVP Nov 4 '16 at 17:14
  • First - have you read Waldek's blog post on Angular 1 and SPFX - blog.mastykarz.nl/… ? Second, I imagine that you are trying to pass some context to a separate object. So wherever you are creating the target object should be outside your WebPart constructor. Lots of stuff doesn't exist at this point (like the context, the webpart properties, etc.). If you create the object later you can pass those context objects in, or if you store a reference at creation time, you can assign the context objects later (like onInit). – PatMill_MSFT Nov 4 '16 at 17:38
  • Here's another post on Angular 1 + SPFx. channel9.msdn.com/blogs/OfficeDevPnP/… – PatMill_MSFT Nov 4 '16 at 17:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.