1

I'm new here and looking for some guidance if possible. I have been following the hello world MS SPFx framework walkthrough. I have been playing the page placeholder walkthrough to add a custom footer to SharePoint 2019 on prem.

However I wanted to add one extra thing and well. I'm stuck. I'm trying to put the Title in a variable or string so I can use it further down in my code. I just can't get it to work

The complete page with the edits from your help

export default class HelloWorldApplicationCustomizer
  extends BaseApplicationCustomizer<IHelloWorldApplicationCustomizerProperties> {
    private _topPlaceholder: PlaceholderContent | undefined;
    private _bottomPlaceholder: PlaceholderContent | undefined;

  @override
  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

    // Wait for the placeholders to be created (or handle them being changed) and then
    // render.
    this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);

    return Promise.resolve<void>();

  }

private siteOwner: string = "";

private _renderPlaceHolders(): void {
    console.log("HelloWorldApplicationCustomizer._renderPlaceHolders()");
    console.log(
      "Available placeholders: ",
      this.context.placeholderProvider.placeholderNames
        .map(name => PlaceholderName[name])
        .join(", ")
    );

    // Pull user groups

this.context.spHttpClient.get(`${this.context.pageContext.web.absoluteUrl}/_api/site/owner`,  
          SPHttpClient.configurations.v1)  
          .then((response: SPHttpClientResponse) => {  
            response.json().then((responseJSON: any) => {  
              console.log(responseJSON.Title); 
              this.siteOwner = responseJSON.Title;
            });  
          });
0

Follow these steps:

  1. Open the ./src/extensions/helloWorld/HelloWorldApplicationCustomizer.ts file
  2. Add private property to class like:
private siteOwner: string = "";
  1. Inside API call response, set its value to site owner name:
this.stringOwner = responseJSON.Title;
  1. Then you can use this class property (this.stringOwner) anywhere inside the class to access the site owner name.

Also check below SPFx extension samples to see how others in community are using SPFx extensions:

SPFx extension samples


Update from comments:

Update your _renderPlaceHolders() method like below:

private async _renderPlaceHolders() {
    console.log("HelloWorldApplicationCustomizer._renderPlaceHolders()");
    console.log(
      "Available placeholders: ",
      this.context.placeholderProvider.placeholderNames
        .map(name => PlaceholderName[name])
        .join(", ")
    );

    // Pull site owner
    const response = await this.context.spHttpClient.get(`${this.context.pageContext.web.absoluteUrl}/_api/site/owner`, SPHttpClient.configurations.v1);
    
    const userData: any = await response.json();
    this.siteOwner = userData ? userData.Title : "";

    console.log(this.siteOwner);
}
8
  • Omg almost there.. I have added it and now the result has gone from undefined to empty. But the console still writes out the correct data.. I have no errors in Vscode?? – Joel H Apr 23 at 3:30
  • Where are you getting empty result? You should call above api in onInit method. Also, you can make it sync call so that you will get site owner name in class property before everything else in class executes. – Ganesh Sanap Apr 23 at 3:37
  • So now the API call looks like this this.context.spHttpClient.get(${this.context.pageContext.web.absoluteUrl}/_api/site/owner, SPHttpClient.configurations.v1) .then((response: SPHttpClientResponse) => { response.json().then((responseJSON: any) => { console.log(responseJSON.Title); this.siteOwner = responseJSON.Title; }); }); – Joel H Apr 23 at 3:38
  • Can you please edit your existing question & add complete code inside your class ? That will help to answer your question more precisely. – Ganesh Sanap Apr 23 at 3:43
  • I'm struggling to paste the code wthout all the extra rendering. Ill try to cut that out and then paste – Joel H Apr 23 at 3:49

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.