SPFx Reading a Variable in from a SharePoint list

New Contributor

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:

mpsmith_0-1659556193344.png

 

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:

mpsmith_1-1659556240906.png

 

 

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

 

 

1 Reply

@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.