How to add a counter to a SPFX app?

%3CLINGO-SUB%20id%3D%22lingo-sub-203521%22%20slang%3D%22en-US%22%3EHow%20to%20add%20a%20counter%20to%20a%20SPFX%20app%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-203521%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20being%20working%20with%26nbsp%3B%20a%20web%20part%20in%20SPFX%20that%20get%20the%20events%20in%20a%20calendar%20and%20show%20them%20in%20a%20page.%20Right%20now%20I%20am%20available%20to%20show%20the%20comming%20events%20and%20are%20sorted%20by%20EventDate.%20What%20I%20need%20to%20do%20now%20is%20add%20a%20counter%20so%20I%20can%20control%20how%20many%20events%20will%20show.%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20is%20my%20render%20method%3A%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3Eprivate%3C%2FSPAN%3E%3CSPAN%3E%20_renderList(items%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%20ISPList%5B%5D)%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%20void%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Elet%3C%2FSPAN%3E%3CSPAN%3E%20toDay%20%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20moment().format(%3C%2FSPAN%3E%3CSPAN%3E%22L%22%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Elet%3C%2FSPAN%3E%3CSPAN%3E%20html%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%20string%20%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3E'%3CDIV%20class%3D%22ms-Grid%22%3E'%3C%2FDIV%3E%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Elet%3C%2FSPAN%3E%3CSPAN%3E%20sorted%20%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20arraySort(items%2C%20%3C%2FSPAN%3E%3CSPAN%3E'EventDate'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%7B%20reverse%3A%20%3C%2FSPAN%3E%3CSPAN%3Efalse%3C%2FSPAN%3E%3CSPAN%3E%20%7D)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20items.forEach((item%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%20ISPList)%20%3C%2FSPAN%3E%3CSPAN%3E%3D%26gt%3B%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Elet%3C%2FSPAN%3E%3CSPAN%3E%20date%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%20any%20%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20moment(item.EventDate).format(%3C%2FSPAN%3E%3CSPAN%3E%22L%22%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Eif%3C%2FSPAN%3E%3CSPAN%3E%20(toDay%20%3C%2FSPAN%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3E%20date)%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Elet%3C%2FSPAN%3E%3CSPAN%3E%20description%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%20any%20%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20item.Description%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Elet%3C%2FSPAN%3E%3CSPAN%3E%20eventMonth%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%20any%20%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20moment(date).format(%3C%2FSPAN%3E%3CSPAN%3E%22MMMM%22%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Elet%3C%2FSPAN%3E%3CSPAN%3E%20eventDay%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%20any%20%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20moment(date).format(%3C%2FSPAN%3E%3CSPAN%3E%22D%22%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Elet%3C%2FSPAN%3E%3CSPAN%3E%20eventDate%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%20any%20%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20moment(date).format(%3C%2FSPAN%3E%3CSPAN%3E%22dddd%2C%20MMMM%20D%20YYYY%22%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Elet%3C%2FSPAN%3E%3CSPAN%3E%20StrippedDescription%20%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20description.replace(%3C%2FSPAN%3E%3CSPAN%3E%2F(%26lt%3B(%5B%3C%2FSPAN%3E%3CSPAN%3E%5E%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%5D%3C%2FSPAN%3E%3CSPAN%3E%2B%3C%2FSPAN%3E%3CSPAN%3E)%26gt%3B)%2F%3C%2FSPAN%3E%3CSPAN%3Eig%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3E%22%22%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Eif%3C%2FSPAN%3E%3CSPAN%3E%20(StrippedDescription%20%3C%2FSPAN%3E%3CSPAN%3E%3D%3D%3C%2FSPAN%3E%20%3CSPAN%3Enull%3C%2FSPAN%3E%3CSPAN%3E)%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20StrippedDescription%20%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3E'Ingen%20beskrivning'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7D%20%3C%2FSPAN%3E%3CSPAN%3Eelse%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20StrippedDescription%20%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20StrippedDescription.substring(%3C%2FSPAN%3E%3CSPAN%3E0%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3E100%3C%2FSPAN%3E%3CSPAN%3E)%20%3C%2FSPAN%3E%3CSPAN%3E%2B%3C%2FSPAN%3E%20%3CSPAN%3E'...'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20html%20%3C%2FSPAN%3E%3CSPAN%3E%2B%3D%3C%2FSPAN%3E%20%3CSPAN%3E%60%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CA%20class%3D%22eventLinkBox%22%20href%3D%22%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%24%7B%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3Bthis%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B.context.pageContext.web.absoluteUrl%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%7D%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%2F_layouts%2F15%2FEvent.aspx%3FListGuid%3D%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%24%7B%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3Bescape(%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3Bthis%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B.properties.calendarID)%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%7D%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%26amp%3BItemId%3D%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%24%7B%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3Bitem.Id%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%7D%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3E%3C%2FA%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CDIV%20class%3D%22ms-Grid-row%22%3E%3C%2FDIV%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CDIV%20class%3D%22ms-Grid-col%20ms-sm6%20ms-md4%20ms-lg2%20eventBoxSingleDay%22%3E%3C%2FDIV%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CSPAN%20class%3D%22eventMonthName%22%3E%3C%2FSPAN%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%3CSPAN%3EeventMonth.substring(%3C%2FSPAN%3E%3CSPAN%3E0%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3E3%3C%2FSPAN%3E%3CSPAN%3E)%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CSPAN%20class%3D%22eventDayName%22%3E%3C%2FSPAN%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%3CSPAN%3EeventDay%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3C%2FSPAN%3E%3C%2FPRE%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CDIV%20class%3D%22ms-Grid-col%20ms-sm6%20ms-md8%20ms-lg10%22%3E%3C%2FDIV%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CH3%20class%3D%22eventTitle%22%20id%3D%22toc-hId-2140862057%22%3E%3C%2FH3%3E%3C%2FSPAN%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%3CSPAN%3Eitem.Title%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CP%20class%3D%22description%22%3E%3C%2FP%3E%3C%2FSPAN%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%3CSPAN%3EStrippedDescription%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%3CP%3E%3C%2FP%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CP%20class%3D%22ms-font-s%22%3E%3C%2FP%3E%3C%2FSPAN%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%3CSPAN%3EeventDate%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%3CSPAN%3Eitem.Category%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%3CP%3E%3C%2FP%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%60%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7D)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20html%20%3C%2FSPAN%3E%3CSPAN%3E%2B%3D%3C%2FSPAN%3E%20%3CSPAN%3E''%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3Econst%3C%2FSPAN%3E%3CSPAN%3E%20listContainer%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%20Element%20%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.domElement.querySelector(%3C%2FSPAN%3E%3CSPAN%3E'%23eventItems'%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20listContainer.innerHTML%20%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%20html%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7D%3C%2FSPAN%3E%3CP%3EHow%20can%20I%20implement%20a%20counter%3F%20I%20already%20have%20a%20property%20in%20my%20propert%20pane%20called%20%22NumberOfItems%22%20whis%20is%20getting%20the%20number%20of%20items%20from%20the%20user.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBest%20regards%3C%2FP%3E%3CP%3EAmerico%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-203521%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-204300%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20add%20a%20counter%20to%20a%20SPFX%20app%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-204300%22%20slang%3D%22en-US%22%3E%3CP%3EI%20have%20a%20very%20similar%20query.%26nbsp%3BI%20have%20to%20use%20.toISOString()%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3E%24filter%3DEventDate%20ge%20datetime'%3C%2FSPAN%3E%3CSPAN%3E'%3C%2FSPAN%3E%3CSPAN%3E'%3C%2FSPAN%3E%20%3CSPAN%3E%2B%3C%2FSPAN%3E%20%3CSPAN%3Etoday%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EtoISOString%3C%2FSPAN%3E%3CSPAN%3E()%20%3C%2FSPAN%3E%3CSPAN%3E%2B%3C%2FSPAN%3E%20%3CSPAN%3E%22'%3C%2FSPAN%3E%3CSPAN%3E%26amp%3B%24orderby%3DEventDate%26amp%3B%24top%3D10%3C%2FSPAN%3E%3C%2FPRE%3E%3CP%3EOtherwise%20seems%20good.%20You%20can%20put%20that%20whole%20URL%20directly%20into%20a%20browser%20window%20to%20help%20tweak%20and%20see%20more%20specific%20error%20messages.%3C%2FP%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-204038%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20add%20a%20counter%20to%20a%20SPFX%20app%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-204038%22%20slang%3D%22en-US%22%3E%3CP%3EThanks!!%3C%2FP%3E%3CP%3EI%20am%20getting%20closer!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20was%20thinking%20that%20if%20I%20can%20use%20orderby%20%3D%20EventDate%20asc%20to%20sort%20the%20list%2C%20it%20would%20be%20possible%20to%20filter%20by%20EventDate%20so%20I%20can%20eliminate%20the%20if-sat%20to%20get%20the%20comming%20events%20only%2C%20so%20I%20tried%20this%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3Eprivate%3C%2FSPAN%3E%3CSPAN%3E%20_getListData()%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%20Promise%3CISPLISTS%3E%20%7B%3C%2FISPLISTS%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSTRONG%3E%20%20%20let%20toDay%20%3D%20moment().format(%22L%22)%3B%3C%2FSTRONG%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20return%3C%2FSPAN%3E%20%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.context.spHttpClient.get(%3C%2FSPAN%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.context.pageContext.web.absoluteUrl%20%3C%2FSPAN%3E%3CSPAN%3E%2B%3C%2FSPAN%3E%20%3CSPAN%3E%60%2F_api%2Fweb%2Flists%2FGetByTitle('%3C%2FSPAN%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.properties.calendarName%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E')%2FItems%3F%3CSTRONG%3E%24filter%3DEventDate%20ge%20datetime'%22%20%2B%20toDay%20%2B%20%22'%3C%2FSTRONG%3E%24orderby%3D%20EventDate%20asc%60%3C%2FSPAN%3E%3CSPAN%3E%2C%20SPHttpClient.configurations.v1)%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20.then((response%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%3CSPAN%3E%20SPHttpClientResponse)%20%3C%2FSPAN%3E%3CSPAN%3E%3D%26gt%3B%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%3C%2FSPAN%3E%3CSPAN%3E%20response.json()%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%7D%3C%2FSPAN%3E%3C%2FPRE%3E%3CP%3EBut%20it%20seems%20that%20I%20am%20doing%20it%20wrong%20because%20nothing%20get%20filtered%2C%20I%20am%20getting%20all%20the%20events%20(both%20the%20old%20ones%20and%20the%20comming%20ones).%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHow%20should%20I%20use%20the%20filter%3F%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBest%20regards%3C%2FP%3E%3CP%3EAmerico%3C%2FP%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-203745%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20add%20a%20counter%20to%20a%20SPFX%20app%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-203745%22%20slang%3D%22en-US%22%3E%3CP%3EI%20would%20do%20it%20at%20the%20time%20that%20you%20do%20the%20query%20to%20fill%20ISPList%5B%5D%20.%20Are%20you%20using%20REST%20to%20get%20the%20events%3F%20If%20so%2C%20you%20can%20add%20%24top%20to%20the%20query%20(and%20also%20do%20the%20sort%20at%20that%20point).%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20not%2C%20you%20can%20do%20a%20for%20loop%2C%20instead%20of%20foreach.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3E%3CSPAN%20class%3D%22hljs-keyword%22%3Efor%3C%2FSPAN%3E%3CSPAN%3E%20(%3C%2FSPAN%3E%3CSPAN%20class%3D%22hljs-keyword%22%3Evar%3C%2FSPAN%3E%3CSPAN%3E%20i%20%3D%20%3C%2FSPAN%3E%3CSPAN%20class%3D%22hljs-number%22%3E0%3C%2FSPAN%3E%3CSPAN%3E%3B%20i%20%26lt%3B%20COUNTER%3B%20i%2B%2B)%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%20%20%20%20%20%20console.log(items%5Bi%5D.EventDate)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FPRE%3E%3C%2FLINGO-BODY%3E
Regular Contributor

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 

3 Replies

I would do it at the time that you do the query to fill ISPList[] . Are you using REST to get the events? If so, you can add $top to the query (and also do the sort at that point). 

 

If not, you can do a for loop, instead of foreach. 

 

for (var i = 0; i < COUNTER; i++) {

console.log(items[i].EventDate);

}

Thanks!!

I am getting closer!

 

I was thinking that if I can use orderby = EventDate asc to sort the list, it would be possible to filter by EventDate so I can eliminate the if-sat to get the comming events only, so I tried this:

 

private _getListData(): Promise<ISPLists> {
let toDay = moment().format("L");
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/GetByTitle('${this.properties.calendarName}')/Items?$filter=EventDate ge datetime'" + toDay + "'$orderby= EventDate asc`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}

But it seems that I am doing it wrong because nothing get filtered, I am getting all the events (both the old ones and the comming ones).

 

How should I use the filter? 

 

Best regards

Americo

I have a very similar query. I have to use .toISOString();

 

$filter=EventDate ge datetime''' + today.toISOString() + "'&$orderby=EventDate&$top=10

Otherwise seems good. You can put that whole URL directly into a browser window to help tweak and see more specific error messages.