Forum Discussion

mpsmith's avatar
mpsmith
Copper Contributor
Aug 03, 2022

SPFx Reading a Variable in from a SharePoint list

Hello - I'm creating a custom SPfx Webpart. I'd like to read in some data from a Sharepoint list - I can do that. Issue I am running into is that some of that data includes variables. When it gets loaded it's being interpreted as literal strings.

For example if I hardcode this into my ts file it works fine, the ${styles.*} get loaded from the .scss file and it all works :

 

public render(): void {
    this.domElement.innerHTML = `<div class="${ styles.domsopTable }" id="myTable">
    <table id="${ styles.sopMenu }">
    <tr class="${ styles.sopR1 }">....</tr></table></div>`;}

 

The html generated looks like this:

 

When I change to read the table in from a SharePoint List it doesn't treat any of the variables ($styles.domsopTable}, ${styles.sopR1}) as variables - it just outputs them as strings.

 

   private _renderListAsync(): void {    
      if (Environment.type == EnvironmentType.SharePoint || 
               Environment.type == EnvironmentType.ClassicSharePoint) {
       this._getListData()
         .then((response) => {
           this._renderList(response.value);
         });
     }
   }
    private _renderList(items: ISPList[]): void {
      let html: string = '';
      items.forEach((item: ISPList) => {
        html += `${item.Data}`;
      });
  
      const listContainer: Element = this.domElement.querySelector('#myTable');
      listContainer.innerHTML = html;
    }
      
  public render(): void {
        this.domElement.innerHTML = `<div class="${ styles.domsopTable }" id="myTable">Loading Data...</div>`;
      this._renderListAsync();
  }

And the html code generated looks like this:

 

 

I used this tutorial to load the data in from SharePoint List: https://www.spguides.com/retrieve-sharepoint-list-items-using-sharepoint-framework/

 

 

  • mpsmith Check the answer given on your below thread, it should help you: 

    SPFx Reading a Variable in from a SharePoint list 


    Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Resources