Leveraging TypeScript global variables in SharePoint operations

Question

Leveraging TypeScript global variables in SharePoint operations

In TypeScript and Angular, I've developed a function called getTasks() that should run when a modal is closed. Here's the code for 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'm able to create my modal successfully using 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 the callback function that logs when the modal is closed:

newTaskClosed(result, value) {
  console.log(result, value)
  this.getTasks(); // 'this' appears as null here
}

But executing this code results in the error:

Uncaught TypeError: Cannot read property 'getTasks' of null

Any ideas on how to fix this issue?

angular typescript sharepoint

Answer 1

Answer №1

Testing in my environment did not result in any errors.

https://i.sstatic.net/naEkt.png

Here is a demo of the test:

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(); // 'this' might be null here
  }
  
  private getTasks= (): void => {
    alert('getTasks function')
   }

To call the dialog in the Render function:

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

Answer 2

Testing in my environment did not result in any errors.

https://i.sstatic.net/naEkt.png

Here is a demo of the test:

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(); // 'this' might be null here
  }
  
  private getTasks= (): void => {
    alert('getTasks function')
   }

To call the dialog in the Render function:

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

Answer 3

Answer №2

My solution originated from utilizing this posted answer as a reference point. By implementing an arrow function for the dialogReturnValueCallback attribute, I was able to preserve the proper context of this. Additionally, I achieved success by accessing this.getTasks() through a variable that binds this.

The modification made to the options object was:

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

Alternatively, I also had success with:

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
}

This approach proved effective in my scenario.

Answer 4

My solution originated from utilizing this posted answer as a reference point. By implementing an arrow function for the dialogReturnValueCallback attribute, I was able to preserve the proper context of this. Additionally, I achieved success by accessing this.getTasks() through a variable that binds this.

The modification made to the options object was:

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

Alternatively, I also had success with:

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
}

This approach proved effective in my scenario.

Leveraging TypeScript global variables in SharePoint operations

Answer №1

Answer №2

Similar questions

Executing npm prepublish on a complete project

Simulating NestJS Injected Connection Imported from Another Module

What are the guidelines for utilizing square brackets [ ] in directives like @Inputs?

Identify and handle errors effectively using TypeScript

The index declaration file has not been uploaded to NPM

The FullCalendar does not appear as expected on Angular version 16

Steps for setting up the 'node_modules' folder in an older Angular project using the 'npm install' command

What is the best way to fetch all Firebase database IDs using Angular?

The animation fails to retain its final state and reverts back to its initial state

The input type "number" does not seem to be compatible with the currency pipe feature

How to Place a Button Halfway Out of an Angular 5 Material Dialog

How can I extract an object from an array by using a string key in either Observable or lodash?

React with Typescript allows us to refine the callback type depending on the presence of an optional boolean prop

What is the process for creating static pages that can access local data within a NextJS 13 application?

Warning: The attribute 'EyeDropper' is not recognized within the context of 'Window & typeof globalThis'

Exploring the benefits of integrating Apache Thrift with TypeScript

I want to know the most effective way to showcase particular information on a separate page using Angular

Guide to making a Typescript interface by combining elements from two separate interfaces without utilizing inheritance

Error TS2393 in Typescript: Multiple function declarations found within a Node/Express application

Developing React component libraries with TypeScript compared to Babel compiler