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

The pages should list all of the pages currently in your experience. So my immediate first guess here is you don't have a simple list page in your experience yet. You should be able to create a new list page if that is the case.

There a few ways to do this, perhaps for you the most simple way would be to create page from the simple list template legacy template. In the process of doing so you will need to create the same required and optional params as you see in SOW workspace

Screenshot 2024-10-05 at 1.41.15 PM.png


Alternatively you could create your own blank page from scratch and put the list page on it, but you will still need similar params in that case, and you will need to point the list controller to those params.

Hi Kevin, 

Thanks for trying to help me out in here. I created a simple list legacy template page for my Service Operations Workspace

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

but, that page, like any other page of my experience (except overview page) isn't unfortunately available when selecting link to destination in event mapping. 

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



Edit / partly solution (still some mysteries): 

Found the solution why simple list wasn't showing in event mapping. Since these SOW components what I'm configuring is located in Sub-page of Service Operations Workspace experience, I needed to create a simple list page to there, not to root of SOW experience. 

To here: https://instancename.service-now.com/now/builder/ui/experience/aa881cad73c4301045216238edf6a716/para...

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

 

Now we can see that page I just created is available for destination: 

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

What's strage tho. Any template options were not available when creating a new page to sub-page, like they were when creating a new page straight to experience. To here: https://instancename.service-now.com/now/builder/ui/experience/aa881cad73c4301045216238edf6a716

So the only option is to create a blank page and manually do the configurations.

Also one large problem. 

There used to be options in event mapping to bind dynamic data to destinations. That seems to dissappear somewhere. Is this some Xanadu related stuff or what am I missing here?

It used to look like this (behold my illusrtation made with Paint): 

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

Kevin83
ServiceNow Employee
ServiceNow Employee

Thanks for the extra context. Didn't realize you were already in SOW.

UI Builder doesn't do a great job of navigation when you are within a subpage. All the templates today are for top-level pages so it isn't surprising to me that there are no templates for subpages.

I think what you can do is this as a workaround, choose script on the event form:

Screenshot 2024-10-07 at 8.28.47 AM.png

And then fill it out like this:

Screenshot 2024-10-07 at 8.32.02 AM.png


So here you are not creating a new page but navigating to the existing simple list page for SOW

Thanks Kevin, I tried couple of ways but didn't work for me. 

First way: 

1. I click events in UiB, mode: form, select destination

Näyttökuva 2024-10-07 215900.png


2. Select destination -> external url (only location what has any configuring options available) -> click bind data icon

Näyttökuva 2024-10-07 220327.png

 

3. Here script option is disabled from every data type (maybe because destination is external)

Näyttökuva 2024-10-07 220435.png

 

Second way:

 

1. Events -> link to destination -> select mode: Script 

Näyttökuva 2024-10-07 220623.png

 2. Write this script: 

Näyttökuva 2024-10-07 220809.png

/**
 * @Param {params} params
 * @Param {api} params.api
 * @Param {any} params.event
 */
function evaluateEvent({
    api,
    event
}) {
    return {
        route: 'simple-list'
        fields: {
            table: event.payload.table
        },
        params: {
            query: event.payload.query,
            listTitle: event.payload.listTitle
        },
        redirect: null,
        passiveNavigation: null,
        title: null,
        multiInstField: null,
        targetRoute: null,
        external: null,
        navigationOptions: null
    };
}


Cleared cache couple of times, but still nothing happens when I click this test data visualization what I have added to SOW overview sub-page. So now I have data visualization but I can't open the data inside it = data visualization is good for nothing. 

Näyttökuva 2024-10-07 220907.png


Well at least I got these working fine in "root-pages", instead of sub-pages (There was also some wild stuff, since ServiceNow's documentation was not updated correctly related to event mappings in Xanadu. I spent couple of extra hours because of that, seems like other developers too.)

But yeah lets think about quite realistic hypothetical use case about these sub pages.
1. Client has SOW
2. Client wants new component to SOW overview sub page, next to those OOB components what are in carousel container.
3. Developer adds new data visualization component there 

How to make that data visualization work as it should be, so when client clicks data visualization, it actually shows the records related to that data?

That's a question what almost keeps me awake at night.

Best, 
Miikka