How to build auto refresh into UI Components

ArtturiP · ‎02-10-2022

I'm building a component and I'm having hard time figuring out auto refresh.

The requirement is this:

Component should be refreshed if there hasn't been user interaction for a set time
If user interacts (changes the content that is shown), the refresh counter should reset

Currently the component takes in data via API call directly from the component (yes I know, not the ideal way, however the data fetching requires some intense heavy lifting, and it needs to be handled in scripted rest api).

What I have tried so far:

Get the data via data resource (does not help, using data resource itself does not autorefresh)
Connecting setTimeout to component's state, and clearing it in case of user interaction
--> This was my favourite route, but due to reason I don't understand, I can't use dispatch function asynchronously. It leads to error "dispatch is not a function". Screenshot attached.

@Brad Tilton , I feel no shame in tagging you here, as you seem to be the one who leads the community in this area =).

ArtturiP · ‎02-12-2022

Was able to solve it. I was on the right track, but the problem was my insufficient understanding of async javascript technicalities. One can not directly pass the parameters into callback function when setting setTimeout; they should be included as additional parameters into setTimeout -function.

This solves the trick:

function timeOutFunction(disptachFunction, dispatchParm1, dispatchParm2) {

console.log("timeout triggered");

disptachFunction(dispatchParm1, dispatchParm2)

}

And to actionhandlers:

TIMELINE_DATA_RECEIVED: ({ state, properties, action, updateState, dispatch }) => {

updateState({

items:action.payload.result,

showLoading:false,

timeOut:

setTimeout(timeOutFunction, 5000,dispatch,'REFRESH_VIEW',{

date_diff:properties.dateDifference

})

},

I'll do a proper blog post about this later.

View solution in original post

ArtturiP · ‎02-16-2022

Available here 😃
https://community.servicenow.com/community?id=community_article&sys_id=023906771b6d49100ccc85176e4bcb4e