UI Builder - Content Tree - Menu

martin9306
Tera Contributor

Hi everyone 🙂

 

I have a quick question about UI Builder, namely the Content Tree Menu.

You can see the menu in the screenshot.

I would like to link URLs to the menu options. So when you click on a new menu option, a new web page should open.

 

Unfortunately I can't find how to link an URL in the Content Tree Configurations.

But there is "Click Action Type". Do you guys  know if it would work in my case to open a web page when you click on a menu option. 

1 ACCEPTED SOLUTION

Kevin83
ServiceNow Employee
ServiceNow Employee

You could set the items of the content tree like so:

[
    {
        "id": "p1",
        "children": [
            {
                "id": "gotoservicenow",
                "label": "Go to Servicenow.com",
                "actionable": true
            },
            {
                "id": "gotogoogle",
                "label": "Go to google.com",
                "actionable": true
            },
            {
                "id": "stayhereandlogsomething",
                "label": "Stay Here and Log",
                "actionable": true
            }
        ]
    }
]

 

And then configure the "Content tree actionable item clicked" event on the content tree:

Screenshot 2024-12-02 at 11.45.50 AM.png



For me I called the following script which seems to work quite well:

/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.event
* @Param {any} params.imports
* @Param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
    console.log(event);

    if (event.payload.item.id === "gotoservicenow") {
        helpers.navigate.to(null, null, null, null, null, null, {
            url: "https://www.servicenow.com"
        });
    } else if (event.payload.item.id === "gotogoogle") {
        helpers.navigate.to(null, null, null, null, null, null, {
            url: "https://www.google.com"
        });
    } else {
        console.log("You choose to stay here!")
    }
}

 

 

View solution in original post

1 REPLY 1

Kevin83
ServiceNow Employee
ServiceNow Employee

You could set the items of the content tree like so:

[
    {
        "id": "p1",
        "children": [
            {
                "id": "gotoservicenow",
                "label": "Go to Servicenow.com",
                "actionable": true
            },
            {
                "id": "gotogoogle",
                "label": "Go to google.com",
                "actionable": true
            },
            {
                "id": "stayhereandlogsomething",
                "label": "Stay Here and Log",
                "actionable": true
            }
        ]
    }
]

 

And then configure the "Content tree actionable item clicked" event on the content tree:

Screenshot 2024-12-02 at 11.45.50 AM.png



For me I called the following script which seems to work quite well:

/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.event
* @Param {any} params.imports
* @Param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
    console.log(event);

    if (event.payload.item.id === "gotoservicenow") {
        helpers.navigate.to(null, null, null, null, null, null, {
            url: "https://www.servicenow.com"
        });
    } else if (event.payload.item.id === "gotogoogle") {
        helpers.navigate.to(null, null, null, null, null, null, {
            url: "https://www.google.com"
        });
    } else {
        console.log("You choose to stay here!")
    }
}