c8yFor directive - customized load more button call

[Divya.Krishnamurthy]

Hello,
For c8yFor directive, I have set loadMore: show, When I click on the load more button some inventory call is happening but not able to call custom service as there is no option in the directive. How do I call the custom service call on click of the Load more button?

[Tristan_Bastian]

Hi Divya,

as documented here: ForOfDirective, the ForOfDirective is designed to be used with the IResultList interface that is returned by the @c8y/client services. The IResultList includes a paging object Paging, where next is being called by the ForOfDirective to load the next page.

If you would use the same interfaces, you could adjust the next method to call some other endpoint instead.

Regards,
Tristan

[Divya.Krishnamurthy]

Thanks Tristan for the response.

As you suggested in the reply I tried adding the .next() method, still not working. can you please suggest how can I make it work

async getData(type) {
    const filter = {
      pageSize: 10,
      withTotalPages: true,
    };
    const queryFilter = this.getQueryFilter();
    let response = await this.inventoryService.listQuery(queryFilter, filter);
     response.paging.next().then(async () => {
      response.data = await this.getDevices(response.data)
    })
  }

[Tristan_Bastian]

@Divya.Krishnamurthy

    let response = await this.inventoryService.listQuery(queryFilter, filter);
     response.paging.next().then(async () => {
      response.data = await this.getDevices(response.data)
    })

You should not call next(), you should replace it with your own implementation.

Please consider writing your own Service for this or extend the InventoryService and adjust the list method to your needs (e.g. making an additional request to another endpoint).

[sandeep.viswanatha (Sandeep V)]

Hi Bastian,
Can you share an example or sample code snippet on how we can extend inventory service and change according to our own service

[Jan_Hommes]

There is a good example on how to write your own service in our guides:
https://cumulocity.com/guides/web/tutorials/#4-bonus-write-a-servicets-abstraction

Actually, you can either extend the Service<T> interface or directly the InventoryService if you want to call the same endpoint. Then in the list you simply overwrite your next call with whatever is needed.