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/
