Simple list option missing in UiB dynamic Event mapping

Miikka_M
Tera Guru

Disclaimer: All my reference pictures you see here, is from ServiceNow's labratory instance for training activities. This instance contains only demo data, not "real" client data. Therefore sensitive data is not censored in pictures.

Hi, 

I'm having issues with event mapping.

Simple task. When I click data visualization, I want that list view opens from the data I have clicked. For example if I click under unassigned incidents datavisualization value 3 - moderate, list view opens from all unassigned incidents which has priority 3.

Näyttökuva 2024-10-05 154359.png

Configuration used to work like this in Ui Builder: 
1. Click data visualization component active
2. Click events
3. Under "visualization clicked" -> Click "+ Add a new event handler"
4. Choose link to destination
5. Select destination
6. Choose Simple list
7. Enable dynamic data binding (by hovering mouse over specific database)
8. Add followings:
table: @payload.params.table
listTitle: @payload.title
query: @payload.params.query


But:
For some reason you can't select simple list anymore to destination. Only available destination is "overview" or "external url". What might be the issue? Simple list option has dissappeared somewhere.

Näyttökuva 2024-10-05 154253.png


I see that there was some topics about this same issue, but couldn't find any solution. If someone has documentation or knowledge, I'm curious to know. 

Thx

1 ACCEPTED SOLUTION

Miikka_M
Tera Guru

Thanks to Kevin's script I got this working. Strange we can't do event configurations to sub-pages components using "no-code" model, like in "root page" components. I put step by step guide here, how to add new components to SOW overview container and how to script event mapping for them:

 

1. Open SOW landing page in ui builder. You can dublicate the landing page variant, but in this case it is not necessary since we are configuring sub-page of this variant, and we will dublicate sub page of this variant. Click edit content from "overview" container. This leads to sub page. 

Näyttökuva 2024-10-08 111335.png

 

2. Sub pages can be found from here https://instancename.service-now.com/now/builder/ui/experience/aa881cad73c4301045216238edf6a716/para...

Näyttökuva 2024-10-08 111539.png
Dublicate variant from the OOB sub page and do configurations there. You can dublicate variant by hovering mouse over OOB variant name and choose three dots on the right side of screen. 

3. Add new component to place you want it. I wanted it next to other OOB components in carousel (fun fact, oob components in this SOW sub page carousel container can't be configured via UIbuilder (why...) but instead they can be configured from SOW admin center (less more options than in ui builder, no logic there in my opinion). My choice would be, delete all oob components in this carousel container and add new similar components via ui builder so it's easier to configure in the future. Every component configuration to workspaces should be done via ui builder in my opinion. There is literally no logic to hide some of the components configurations to other places (SOW admin center in this case). Anyways that being said. Lets configure events to this component we added.

Näyttökuva 2024-10-08 111712.png

4. On the right hand side of UiB click events, add event mapping, select visualization clicked 

Näyttökuva 2024-10-08 112226.png

5.  Let's do one exta step here and check if we are missing "no-code" configuration option for simple list. Click select destination.

Näyttökuva 2024-10-08 112308.png

6. Notice that we are indeed missing simple list configuration options from this window. Close the window.

Näyttökuva 2024-10-08 112501.png

7. Select script from previous window

Näyttökuva 2024-10-08 112542.png
8.  Add this Kevin's script (huge thanks to Kevin for that!!)

Näyttökuva 2024-10-08 112629.png

 Here is the script: 

/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.event
*/
function evaluateEvent({api, event}) {
	console.log(event)

	return {
		route: 'simplelist',
		fields: {
			"table": event.payload.params.table
		},
		params: {
			"query": event.payload.params.query
		},
		redirect: null,
		passiveNavigation: null,
		title: null,
		multiInstField: null,
		targetRoute: null,
		external: null,
		navigationOptions: null
	};
}

8. Click add and save. 

9. BTW in this point it's good to clear UiB cache. Burger icon in the top left of UiB, developer, clear ui builder cache

Näyttökuva 2024-10-08 112801.png


10. Open your Service Operations Workspace  And see that we are having a new data visualization component there. Which is yet quite ugly since I only wanted to try event routing and not spend time configuring that component. In real world we would ofc add there labels ect. This component is indicating requests at the moment, and they are sorted by state as we can see. 

Näyttökuva 2024-10-08 112851.png
Let's click blue part of that data visualization 

Näyttökuva 2024-10-08 113110.png

12. Rock and roll! Now we can see all data in list view related to that data visualization part what we clicked. 

Näyttökuva 2024-10-08 113133.png

Can I get a HALLELUJA. 

By the way, if you want to see more workspaces related step by step "how to" documentation with pictures, go check my profile. I'v been solving these mysteries since 2022.

May this also serve as example how we all should write instructions here on ServiceNow community. The way that everyone understands it, even after 5 years.

Big thanks to Kevin for all the help and big thanks to my wife for babysitting our son, while I spent whole weekend clicking around new mysteries of Workspaces.

View solution in original post

7 REPLIES 7

Kevin83
ServiceNow Employee
ServiceNow Employee

Hey I just test now and the script that seems to work is:

/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.event
*/
function evaluateEvent({api, event}) {
	console.log(event)

	return {
		route: 'simplelist',
		fields: {
			"table": event.payload.params.table
		},
		params: {
			"query": event.payload.params.query
		},
		redirect: null,
		passiveNavigation: null,
		title: null,
		multiInstField: null,
		targetRoute: null,
		external: null,
		navigationOptions: null
	};
}
I omitted params in my previous screenshot

Miikka_M
Tera Guru

Tried other ServiceNow's lab instance with demo data. Found out the same issue in components under SOW "overview" container. There is no simple list destination available / configurable under events. 

However, when configuring component which is added to SOW landing page outside of "overview" container -> simple list is availalbe and configurable as it has been.

Näyttökuva 2024-10-06 202457.png

Miikka_M
Tera Guru

Thanks to Kevin's script I got this working. Strange we can't do event configurations to sub-pages components using "no-code" model, like in "root page" components. I put step by step guide here, how to add new components to SOW overview container and how to script event mapping for them:

 

1. Open SOW landing page in ui builder. You can dublicate the landing page variant, but in this case it is not necessary since we are configuring sub-page of this variant, and we will dublicate sub page of this variant. Click edit content from "overview" container. This leads to sub page. 

Näyttökuva 2024-10-08 111335.png

 

2. Sub pages can be found from here https://instancename.service-now.com/now/builder/ui/experience/aa881cad73c4301045216238edf6a716/para...

Näyttökuva 2024-10-08 111539.png
Dublicate variant from the OOB sub page and do configurations there. You can dublicate variant by hovering mouse over OOB variant name and choose three dots on the right side of screen. 

3. Add new component to place you want it. I wanted it next to other OOB components in carousel (fun fact, oob components in this SOW sub page carousel container can't be configured via UIbuilder (why...) but instead they can be configured from SOW admin center (less more options than in ui builder, no logic there in my opinion). My choice would be, delete all oob components in this carousel container and add new similar components via ui builder so it's easier to configure in the future. Every component configuration to workspaces should be done via ui builder in my opinion. There is literally no logic to hide some of the components configurations to other places (SOW admin center in this case). Anyways that being said. Lets configure events to this component we added.

Näyttökuva 2024-10-08 111712.png

4. On the right hand side of UiB click events, add event mapping, select visualization clicked 

Näyttökuva 2024-10-08 112226.png

5.  Let's do one exta step here and check if we are missing "no-code" configuration option for simple list. Click select destination.

Näyttökuva 2024-10-08 112308.png

6. Notice that we are indeed missing simple list configuration options from this window. Close the window.

Näyttökuva 2024-10-08 112501.png

7. Select script from previous window

Näyttökuva 2024-10-08 112542.png
8.  Add this Kevin's script (huge thanks to Kevin for that!!)

Näyttökuva 2024-10-08 112629.png

 Here is the script: 

/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.event
*/
function evaluateEvent({api, event}) {
	console.log(event)

	return {
		route: 'simplelist',
		fields: {
			"table": event.payload.params.table
		},
		params: {
			"query": event.payload.params.query
		},
		redirect: null,
		passiveNavigation: null,
		title: null,
		multiInstField: null,
		targetRoute: null,
		external: null,
		navigationOptions: null
	};
}

8. Click add and save. 

9. BTW in this point it's good to clear UiB cache. Burger icon in the top left of UiB, developer, clear ui builder cache

Näyttökuva 2024-10-08 112801.png


10. Open your Service Operations Workspace  And see that we are having a new data visualization component there. Which is yet quite ugly since I only wanted to try event routing and not spend time configuring that component. In real world we would ofc add there labels ect. This component is indicating requests at the moment, and they are sorted by state as we can see. 

Näyttökuva 2024-10-08 112851.png
Let's click blue part of that data visualization 

Näyttökuva 2024-10-08 113110.png

12. Rock and roll! Now we can see all data in list view related to that data visualization part what we clicked. 

Näyttökuva 2024-10-08 113133.png

Can I get a HALLELUJA. 

By the way, if you want to see more workspaces related step by step "how to" documentation with pictures, go check my profile. I'v been solving these mysteries since 2022.

May this also serve as example how we all should write instructions here on ServiceNow community. The way that everyone understands it, even after 5 years.

Big thanks to Kevin for all the help and big thanks to my wife for babysitting our son, while I spent whole weekend clicking around new mysteries of Workspaces.