Forum Discussion

Americo Perez's avatar
Americo Perez
Iron Contributor
Jun 12, 2018

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 

developer
  • cprothero's avatar
    cprothero
    Iron Contributor
    Jun 13, 2018

    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);

    }
    • Americo Perez's avatar
      Americo Perez
      Iron Contributor
      Jun 13, 2018

      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

      • cprothero's avatar
        cprothero
        Iron Contributor
        Jun 14, 2018

        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.

Resources