How make your Now Experience UI components auto-refresh

[ArtturiP]

Has the component development gone too far?

No it has not. I love it. It's a good excuse for me to step up my javascript skills and continue towards mastery.

This requirement was surprisingly hard to resolve, and that's why I feel the need to share the solution here.

But ain't this provided by ServiceNow if you just do it right?

Nope. Data resources do not cause the component contents to update even if the source data changes.

At first I thought the problem was in my configuration choices; I was calling Scripted Rest API directly from the component. The usual way to pass data into component is to use data transformation methods in the UI Builder (data resources etc). However, in this case the data fetching and analysis required some heavy lifting, and I chose to abstract that away from UI specifications.

The solution

Nothing too fancy. Asynchronous javascript. I had troubles to pass parameters into the callback-function passed into setTimeout. The correct way was to pass the arguments directly into setTimeout function as additional arguments.

Note that the timeout needs to be defined as a property to state, because state persists between renders. And the reference to timeout function is needed, because it needs to be cancelled if user changes the state of the component.

So, do it like this:

function timeOutFunction(disptachFunction, dispatchParm1, dispatchParm2) {
    // dispatchParm1 is the name of the actionhandler to call
    // dispatchParm2 are the parameters to pass into actionhandler-function
    disptachFunction(dispatchParm1,dispatchParm2)
}

actionHandlers: {
    ...
    DATA_RECEIVED: ({ state, properties, action, updateState, dispatch }) => {
        /* Below row is needed, because if refresh happens due to user interaction, refresh should be cancelled */
        clearTimeout(state.timeOut) 
        
		updateState({
			data_for_your_component: action.payload.result,
			showLoading: false,
			timeOut:
				setTimeout(timeOutFunction, properties.timeOutDelay, dispatch,'REFRESH_DATA_ACTION_HANDLER',{
					parameter_of_interest: properties.current_value_of_parameter
				})
		})
	},
    ...
}

Till next time!

[Philippe Luickx]

FYI as of San Diego there are record watcher data resources that do exactly what was first required.

[Velma]

@Philippe Luickx, could you send a link for info about these record watcher data resources in SD? I can't find, and it would be really helpful to me.

[Philippe Luickx]

Hi @Velma ! Just spent some time looking for the docs but could indeed not find anything... I haven't had the need to implement this at the moment, but glancing at it I would assume that you need 1. to subscribe to it and 2. on the second tab do an event mapping on the "message received" event trigger. If you then create a client script where you just console.log the event, you should be able to see what gets passed when the watcher gets triggered.

As said, haven't tested this so these are assumptions. Hope it helps and let us all know if you got it to work!

[Velma]

Thanks, @Philippe Luickx. I tried but couldn't get anything out of it. Added it to a UI Builder page, configured, and attached a generic event handler to all five events. But none of them hit--so if it works I'd guess something needs to be turned on that is not in my PDI. Tried making modifications to the watched table in various ways and got nothing. But AMB channels are a whole other thing I have no idea about--possibly need to be configured.