Americo Perez
Jun 12, 2018Iron Contributor
How to add a counter to a SPFX app?
Hi,
I have being working with a web part in SPFX that get the events in a calendar and show them in a page. Right now I am available to show the comming events and are sorted by EventDate. What I need to do now is add a counter so I can control how many events will show.
This is my render method:
private _renderList(items: ISPList[]): void {
let toDay = moment().format("L");
let html: string = '<div class="ms-Grid">';
let sorted = arraySort(items, 'EventDate', { reverse: false });
items.forEach((item: ISPList) => {
let date: any = moment(item.EventDate).format("L");
if (toDay < date) {
let description: any = item.Description;
let eventMonth: any = moment(date).format("MMMM");
let eventDay: any = moment(date).format("D");
let eventDate: any = moment(date).format("dddd, MMMM D YYYY");
let StrippedDescription = description.replace(/(<([^>]+)>)/ig, "");
if (StrippedDescription == null) {
StrippedDescription = 'Ingen beskrivning';
} else {
StrippedDescription = StrippedDescription.substring(0, 100) + '...';
}
html += `
<a class="eventLinkBox" href="${this.context.pageContext.web.absoluteUrl}/_layouts/15/Event.aspx?ListGuid=${escape(this.properties.calendarID)}&ItemId=${item.Id}" target="_blank">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-sm6 ms-md4 ms-lg2 eventBoxSingleDay">
<span class="eventMonthName">${eventMonth.substring(0, 3)}</span><br />
<span class="eventDayName">${eventDay}</span>
</div>
<div class="ms-Grid-col ms-sm6 ms-md8 ms-lg10">
<h3 class="eventTitle" >${item.Title}</h3>
<p class="description">${StrippedDescription}</p>
<p class="ms-font-s">${eventDate}, ${item.Category}</p>
</div>
</div>
</a>
`;
}
});
html += '</div>';
const listContainer: Element = this.domElement.querySelector('#eventItems');
listContainer.innerHTML = html;
}
How can I implement a counter? I already have a property in my propert pane called "NumberOfItems" whis is getting the number of items from the user.
Best regards
Americo