Previously, I have table header values contained inside div element in HTML.
Example:
<div title="quarter1Month1">February2020</div>
<div title="quarter1Month2">March2020</div>
<div title="quarter1Month3">April2020</div>
//and so on...
But I would like those contents dynamic based on the title attribute value per div element, so I used switch statement in javascript to manage such requirement and called this function through onload
event. But upon deploying, it does not work. As per checking, value
, label
, or even name
attributes are not valid in div
element.
Meanwhile, here's what I've come up so far:
periodLWC.html
<template>
<div class="filters">
<lightning-combobox
class="slds-m-bottom_small slds-m-left_small"
name="fiscalYear"
label="Fiscal Year"
value={yearValue}
placeholder="--None--"
options={yearOptions}
onchange={findOrgFYData}>
</lightning-combobox>
</div>
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered slds-table_row-bordered">
<thead>
<tr class="slds-line-height_reset">
<th scope="col">
<center><div class="slds-truncate" title="quarter1Month1" onload={findOrgFYData}></div></center>
</th>
<th scope="col">
<center><div class="slds-truncate" title="quarter1Month2" onload={findOrgFYData}></div></center>
</th>
<th scope="col">
<center><div class="slds-truncate" title="quarter1Month3" onload={findOrgFYData}></div></center>
</th>
<th scope="col">
<center><div class="slds-truncate" title="quarter2Month1" onload={findOrgFYData}></div></center>
</th>
<th scope="col">
<center><div class="slds-truncate" title="quarter2Month2" onload={findOrgFYData}></div></center>
</th>
<th scope="col">
<center><div class="slds-truncate" title="quarter2Month3" onload={findOrgFYData}></div></center>
</th>
<th scope="col">
<center><div class="slds-truncate" title="quarter3Month1" onload={findOrgFYData}></div></center>
</th>
<th scope="col">
<center><div class="slds-truncate" title="quarter3Month2" onload={findOrgFYData}></div></center>
</th>
<th scope="col">
<center><div class="slds-truncate" title="quarter3Month3" onload={findOrgFYData}></div></center>
</th>
<th scope="col">
<center><div class="slds-truncate" title="quarter4Month1" onload={findOrgFYData}></div></center>
</th>
<th scope="col">
<center><div class="slds-truncate" title="quarter4Month2" onload={findOrgFYData}></div></center>
</th>
<th scope="col">
<center><div class="slds-truncate" title="quarter4Month3" onload={findOrgFYData}></div></center>
</th>
</tr>
</thead>
</table>
</template>
periodLWC.js
import { LightningElement, track} from 'lwc';
import getFYOrgData '@salesforce/apex/PeriodController.getFYOrgData';
export default class periodLWC extends LightningElement {
@track periodData = [];
@track startFY;
@track endFY;
@track error;
@track fyValue = '--None--';
@track fyOptions = [
{value: 'FY2019', label: 'FY2019'},
{value: 'FY2020', label: 'FY2020'},
{value: 'FY2021', label: 'FY2021'}
];
findOrgFYData(event) {
const orgFY = event.target.value;
var orgFYstart = orgFY.substring(2);
var orgFYstartInt = parseInt(orgFYstart, 10);
var startFYInt;
var endFYInt;
if(orgFYstartInt) {
getFYOrgData({orgFYstartInt})
.then(result => {
if(result) {
var divTitle = this.template.querySelector('title').value;
this.orgFYData = result;
this.startFY = result[0];
startFYInt = this.startFY;
this.endFY = result[1];
endFYInt = this.endFY;
switch(divTitle) {
case "quarter1Month1":
this.template.querySelector('div').innerHTML = 'February'.concat(startFYInt);
break;
case "quarter1Month2":
this.template.querySelector('div').innerHTML='March'.concat(startFYInt);
break;
case "quarter1Month3":
this.template.querySelector('div').innerHTML='April'.concat(startFYInt);
break;
case "quarter2Month1":
this.template.querySelector('div').innerHTML='May'.concat(startFYInt);
break;
case "quarter2Month2":
this.template.querySelector('div').innerHTML='June'.concat(startFYInt);
break;
case "quarter2Month3":
this.template.querySelector('div').innerHTML='July'.concat(startFYInt);
break;
case "quarter3Month1":
this.template.querySelector('div').innerHTML='August'.concat(startFYInt);
break;
case "quarter3Month2":
this.template.querySelector('div').innerHTML='September'.concat(startFYInt);
break;
case "quarter3Month3":
this.template.querySelector('div').innerHTML='October'.concat(startFYInt);
break;
case "quarter4Month1":
this.template.querySelector('div').innerHTML='November'.concat(endFYInt);
break;
case "quarter4Month2":
this.template.querySelector('div').innerHTML='December'.concat(endFYInt);
break;
case "quarter4Month3":
this.template.querySelector('div').innerHTML='January'.concat(endFYInt);
break;
}
}
})
.catch(error => {
this.error = error;
})
}
}
}