CUI Components

ace-app-nav-list

Overview

It will list down all the objects and web tabs which are configured in users tab preferences.
Selector: <ace-app-nav-list>
Use the following code to render the component:

<ace-app-nav-list></ace-app-nav-list>

API

Following attribute is available for ace-app-nav-list tag.

Attribute	Description
css-classlist	It helps to specify css class(es) for the tag. Use whitespace to separate Multiple css classes.

Following events are dispatched by the ace-app-tabs-list tag:

Event	Description
selectionchange	Event dispatched on clicking a row.
load	Event dispatched on loading the component. This provides the list of objects for the active application.

---

Sample code

<a id="selection-change"></a>

selectionchange

html
<ace-app-nav-list id="appTabsInstance"></ace-app-nav-list>

javascript
const appTabsIns = document.querySelector('#appTabsInstance');
appTabsIns.addEventListener('selectionchange', function (event) {
 //Perform your action here
 const tabData = event['detail'];
 console.log(tabData);
});

Response

javascript
{
    canAdd: "${true/false}",
    id: "${id}",
    title: "${title}",
    uri: "${uri}", // for webtabs
    webtabname: "${webtab name}", // for webtabs
}

<a id="load"></a>

load

html
<ace-app-nav-list id="appTabs"></ace-app-nav-list>

javascript
document.querySelector('#appTabs').addEventListener('load', (event) => {console.log(event['detail'])});

Response

javascript
[
	{
		id: "cases"
		title: "Cases"
		singularTitle: "Case"
		canAdd: true
		type: "object"
	},
	{....},
	{....}
	
]

Important Note: Only the properties mentioned here are supported.

---

ace-bookmark-list

This displays the bookmarked item corresponding to the user as a custom component.

Selector: <ace-bookmark-list>

Use the following code to render the component:

html
<ace-bookmark-list></ace-bookmark-list>