Using TypeScript global variable with SharePoint functions

Question

Using TypeScript and Angular, I have created a function named getTasks() that I want to fire when a modal is closed. This is the function:

getTasks() {
 this.http.get(`https://example.com/_api/web/lists/getbytitle('Tasks')/items`).subscribe(data => {
  console.log(data['value'])
  this.tasks = data['value']
 })
}

I can successfully create my modal with the following:

newTask() {
  var options = {
    url: `https://example.com/divisions/dev/lists/Tasks/NewForm.aspx?itemParent=${this.itemID}`,
    dialogReturnValueCallback: Function['createDelegate'](null, this.newTaskClosed)
  }
  window.parent['SP'].UI.ModalDialog.showModalDialog(options);
}

This is my callback function that successfully logs when the modal has been closed:

newTaskClosed(result, value) {
  console.log(result, value)
  this.getTasks(); // Thinks that 'this' is null
}

Running this gives me the following error:

Uncaught TypeError: Cannot read property 'getTasks' of null

How can I solve this?

what is Function['createDelegate'](null, this.newTaskClosed) doing? — ABOS
– ABOS, Commented Feb 6, 2019 at 20:45
@ABOS It fires the newTaskClosed function when the modal has been closed. — cfoster5
– cfoster5, Commented Feb 6, 2019 at 20:49

Lee · Accepted Answer · 2019-02-07 02:43:38Z

1

I didn't get the error when I test in my environment.

Test demo:

private newTask= (): void =>{
    var options = {
      url: this.props.context.pageContext.web.absoluteUrl+`/lists/ParentA/NewForm.aspx`,
      dialogReturnValueCallback: Function['createDelegate'](null, this.newTaskClosed)
    }    
    window.parent['SP'].UI.ModalDialog.showModalDialog(options);
  }
  private newTaskClosed= (result, value): void => {
    console.log(result, value);    
    this.getTasks(); // Thinks that 'this' is null
  }
  private getTasks= (): void => {
    alert('getTasks function')
   }

In Render function, call the dialog.

return (     
      <div >  
        <Button text="NewTask" onClick={this.newTask} />

answered Feb 7, 2019 at 2:43

Lee

5,5211 gold badge9 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cfoster5 · Accepted Answer · 2019-02-08 14:38:21Z

I solved this by using this answer as a starting point. By using an arrow function for the dialogReturnValueCallback property, I was able to keep the correct context of this. I also had success with referencing this.getTasks() through a variable that binds this.

Changing the options object to:

let options = {
  url: `https://portal.oldnational.com/divisions/it/iDemand/lists/Tasks/NewForm.aspx?itemParent=${this.itemID}`,
  dialogReturnValueCallback: () => this.getTasks()
}

or by using

let boundFunction = (function() {
  this.getTasks();
}).bind(this);

let options = {
  url: `https://portal.oldnational.com/divisions/it/iDemand/lists/Tasks/NewForm.aspx?itemParent=${this.itemID}`,
  dialogReturnValueCallback: boundFunction
}

worked for me.

Collectives™ on Stack Overflow

Using TypeScript global variable with SharePoint functions

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related