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

Overview

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>

API

Following attributes are available for the ace-bookmark-list tag.

Attribute	Description
search	If the value is true, then it displays the search box for bookmark list. If the value is false, it hides the search input. Default value: 'true'
group-ids	Displays only the list of selected group ID items. User needs to pass comma separated group IDs.
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-bookmark-list tag:

Event	Description
selectionchange	Event dispatched on clicking a bookmark item.
load	Event dispatched on loading the component. This provides the list of bookmarked data.

Following are the tag instance methods:

Method	Description
clearAll()	Removes all the data present in the bookmarked list.
setGroupOrder(arrayofGroupIDs)	Sort the group by group IDs. Only the IDs mentioned in parameter are sorted and others will remain in the same order.
removeItem(groupId, itemId)	Removes the item mentioned from the specific group.
removeGroup(groupId)	Removes the specific group from the list by passing the group ID.
getListData()	Get bookmarked list data for the active user.
reload()	Does a refresh of the bookmarked list with updated bookmarked data.
isItemPresent(groupId, itemId)	Returns true if the item is present inside a group ID. If not, returns false.

Sample code

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

selectionchange

html
<ace-bookmark-list id="aceBookmarksList"></ace-bookmark-list>

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

Response

javascript
{
	id: string,
	groupId: string,
	displayTitle: string,
	category: string,
	value:string
}

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

load

html
<ace-bookmark-list id="aceBookmarksList"></ace-bookmark-list>

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

1. 1. 1. 1. Response:

```javascript [

   {
       displayTitle: "Case Records",
       groupId: "caseRecord",
       items: [{
           displayTitle: "Record name",
           id: "123456",

category: "record",

           value: "storted value data"
           },
           {...},
           {...}
       ]
   },
   {...},
   {...}

] ```

<a id="clear-all-method"></a>

1. 1. 1. clearAll

```html <button type="button" onclick="clearAllHandler()">Clear all</button> <ace-bookmark-list id="aceBookmarksList"></ace-bookmark-list> ``` ```javascript function clearAllHandler(){ const bookmarkListIns = document.querySelector('#aceBookmarksList'); bookmarkListIns.clearAll(); } ``` <a id="set-group-order-method"></a>

1. 1. 1. setGroupOrder

```html <button type="button" onclick="setGroupOrderHandler()">Set Group Order</button> <ace-bookmark-list id="aceBookmarksList"></ace-bookmark-list> ``` ```javascript function setGroupOrderHandler(){ const bookmarkListIns = document.querySelector('#aceBookmarksList'); const listOfGroupIds = ['caseRecord','reports','dashboard']; bookmarkListIns.setGroupOrder(listOfGroupIds); } ```

<a id="remove-item-method"></a>

1. 1. 1. removeItem

```html <button type="button" onclick="removeItemHandler()">Remove Item</button> <ace-bookmark-list id="aceBookmarksList"></ace-bookmark-list> ``` ```javascript function removeItemHandler(){ const bookmarkListIns = document.querySelector('#aceBookmarksList'); bookmarkListIns.removeItem('caseRecord','recordId'); } ```

<a id="remove-group-method"></a>

1. 1. 1. removeGroup

```html <button type="button" onclick="removeGroupHandler()">Remove Group</button> <ace-bookmark-list id="aceBookmarksList"></ace-bookmark-list> ``` ```javascript function removeGroupHandler(){ const bookmarkListIns = document.querySelector('#aceBookmarksList'); bookmarkListIns.removeGroup('caseRecord'); } ```

<a id="get-list-data-method"></a>

1. 1. 1. getListData

```html <button type="button" onclick="getListDataHandler()">Get bookmark list data</button> <ace-bookmark-list id="aceBookmarksList"></ace-bookmark-list> ``` ```javascript function getListDataHandler(){ const bookmarkListIns = document.querySelector('#aceBookmarksList'); bookmarkListIns.getListData(); } ```

<a id="reload-method"></a>

1. 1. 1. reload

```html <button type="button" onclick="reloadHandler()">Reload list</button> <ace-bookmark-list id="aceBookmarksList"></ace-bookmark-list> ``` ```javascript function reloadHandler(){ const bookmarkListIns = document.querySelector('#aceBookmarksList'); bookmarkListIns.reload(); } ```

<a id="is-item-present"></a>

1. 1. 1. isItemPresent

```html <button type="button" onclick="isItemPresentHandler()">Is Item Present</button> <ace-bookmark-list id="aceBookmarksList"></ace-bookmark-list> ``` ```javascript function isItemPresentHandler(){ const bookmarkListIns = document.querySelector('#aceBookmarksList'); const isItemPresent = bookmarkListIns.isItemPresentHandler('caseRecord','recordId'); } ```

<a id="registerService"></a>

1. 1. 1. registerService

```javascript //Add Group data const addGroupInfo = {

   id: 'caseRecord',
   displayTitle: 'Case Record'

}; aceLib.bookmark.addGroup(addGroupInfo);

//Update Group display title const updateGroupInfo = {

   id: 'caseRecord',
   displayTitle: 'Update Case Record'

}; aceLib.bookmark.updateGroup(updateGroupInfo);

// Add Item inside above group const addItemInfo = {

groupId: 'caseRecord',
id: 'recordId',
displayTitle: 'Record title',
category: 'record',
value: 'http://agileappscloud.info/'

}; aceLib.bookmark.addItem(addItemInfo);

// Update Item data const updateItemInfo = {

groupId: 'caseRecord',
id: 'recordId',
displayTitle: 'Update Record title'

}; aceLib.bookmark.updateItem(updateItemInfo);

// remove item from a group aceLib.bookmark.removeItem('caseRecord','recordId');

//remove group aceLib.bookmark.removeGroup('caseRecord'); ```

Important Note: Only the properties mentioned here are supported.