Displaying Tables on the UI Builder from a JSON response

[Joseph Testa]

Hello, I have a JSON response from an API call that I want to display in a table format using the ServiceNow UI Builder. Is there any way to iterate through my data set and display a table? It seems like the Simple List and other table type components only display tables that are already in ServiceNow but don't allow for a custom input. Is there a way to do this or will there be in future releases? I also looked into remote tables a bit but I could not find a way to take inputs from the UI side and use them on the API call.

[Tom Sienkiewicz · Accepted solution]

I'm not sure if there is an existing component in the UI Builder that does that, but for sure you could develop a custom component that will render the input whichever way you like.

I know this adds a lot of overhead though, so it might not be the perfect solution. Hopefully there is an easier way.

I wonder if repeaters could be a solution for you:

https://docs.servicenow.com/bundle/sandiego-application-development/page/administer/ui-builder/task/...

[Joseph Testa]

Hi Tomasz, thanks for the response. It looks like custom components are what we will need. Hopefully we can make a simple component that takes a JSON input and displays it. I will also look into repeaters thanks for the suggestion

[pavan_yakkala1]

Hi Tom,

Can you please let me know if you could find any component does this in UI builder? to evaluate and display the records in rows, columns

[Joseph Testa]

Hi Tomasz, I'm not looking for a component as much as a way to save several state parameters within a JSON object. On a complex page there can be a lot of state parameters and it would help to organize them by using objects to combine related parameters. I found that doing something like this seems to work but I don't know why it works or if it is correct practice. My current solution below seems like the object's variable needs to be set twice for it to actually take the value.

var tempObject = api.state.myObject;

tempObject.default_search_criteria = "test123";

api.setState('myObject.default_search_criteria', "test123");