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.

Bookmark register service

Use this service to register the item or group for a bookmark component. User should be logged in to register an item in the bookmark.

Note: At the least any one of the CUI components should be present in the DOM to register the item in the bookmark list.

An example for registering a bookmark is as follows:

aceLib.bookmark.addGroup({id:'test',displayTitle:'Group 1'});

Following are the methods available in the bookmark library:

Methods	Description
addGroup	Add a new group in the list. Syntax: `addGroup({id, displayTitle})` id: Group ID where the user wants to add the item. This value is Mandatory. displayTitle: Displays the value of the group
updateGroup	Update the group information. Syntax: `updateGroup({id, displayTitle})` id: Group ID where the user wants to update the item. This value is Mandatory. displayTitle: Displays the value of the group
removeGroup	Removes the group from the list by passing the group ID. Syntax: `removeGroup(id)` id: Group ID where the user wants to remove the item. This value is Mandatory.
addItem	Add an item to the bookmark list corresponding to a group ID. Syntax: `addItem({groupId, id, displayTitle, category, value})` id: item ID. This value is Mandatory. groupId: Group ID where the user wants to add the item. This value is Mandatory. displayTitle: Displays the value of the item. category: Type of item. It can be Record, Report or user-defined type. value: Value of the item.
updateItem	Update the bookmark list item. Syntax: `updateItem({groupId, id, displayTitle, category, value})` id: item ID. This value is Mandatory. groupId: Group ID where the user wants to add the item. This value is Mandatory. displayTitle: Displays the value of the item. category: Type of item. It can be Record, Report or user-defined type. value: Value of the item.
removeItem	Remove an item from the bookmark list corresponding to the group ID. Syntax: `removeItem(groupId, id)` groupId: Group ID where the user wants to delete the item. This value is Mandatory. If the group ID is not a match with an existing group, then it throws an error message. id: ID of the item to delete. This value is Mandatory.
refresh	Refresh the bookmark list. Syntax: `aceLib.bookmark.refresh();`

Note: Some considerations are as follows:

Any white-spaces present are removed (trimmed) from groupIds and itemIds. For example, if you pass the ID as "Agile apps", then it is converted to "Agileapps".
All the IDs are considered as case-sensitive. For example, if you pass the ID as "agileapps" and "Agileapps", then both are considered as separate IDs.

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'])
});

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>

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>

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>

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>

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>

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>

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>

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>

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.

ace-record-attachment

Overview

This component allows you to add attachments to a record and to display the attached files. It also displays the list of files attached through the Notes Editor component.
Selector: <ace-record-attachment>
Use the following code to render the component:

html
<ace-record-attachment id="recordAttachmentRef" object-id="cases" record-id="23232234">
</ace-record-attachment>

API

Following are the input attributes for ace-record-attachment component:

Attribute	Description
object-id *	Provide the object ID. You can obtain the Object ID from Application Tab list.
record-id *	Provide the record id of the object in which user wants to see the attachment. You can obtain it from Records view.
css-classlist	Override the styling of attachment by passing the list of classes with space separator.
can-delete	Allows you to show or hide the attachment delete button. When set to 'true', you can see the attachment delete button. Available values: 'true'; 'false'. Default value: 'false'.

Note: * indicates required attributes.

Following event is dispatched by the ace-record-attachment tag:

Event	Description
load	Event dispatched on loading the component. This provides the list of attachments for a particular record.

Following are the component methods for ace-record-attachment component

Method	Description
addNewAttachment()	This method allows you to add an attachment to a corresponding record.

Sample code

Event

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

load

html
<ace-record-attachment id="attachment" object-id="xxxxx" record-id="xxxxx"></ace-record-attachment>

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

Response

javascript
[
	{
	date_created_v: "03.23.2020 06:20 AM"
	file_field: [{
	name: "download.png"
	id: "c6dcebe0cc2a470d90fd4dc0aeb28c90"
	type: "jpeg"
	}
]
	{
	date_created: "Uploaded a few moments ago by xxxx"
	creatorName: "xxxx"
	tag: "via Email"
	id: "799011377"
	title: "download.png"
	image: "image"
	}
]

Component Instance Methods

<a id="addNewAttachment"></a>

addNewAttachment()

html
<button onclick="openDialog()">Open Attachment Dialog</button>
<ace-record-attachment id="attachment" object-id="cases"
    record-id="12455689">
</ace-record-attachment>

javascript
const recordAttachment = document.querySelector('#attachment');
function openDialog() {
    recordAttachment.openAttachDialog();
}

<a id="deleteattachment"></a>

deleteAttachment(index)

html
<button onclick="deleteAttachment()">Delete Attachment</button>
<ace-record-attachment id="attachment" css-classlist="bg-white" object-id="cases" record-id="12455689">
</ace-record-attachment>

javascript
	const recordAttachment = document.querySelector('#attachment');
	function deleteAttachment() {
     recordAttachment.deleteAttachment(0);
}

Important Note: Only the properties mentioned here are supported.

ace-record-process

Overview

Use this component to show the list of processes associated with the respective records. Individual process can have respective action items like Start, Stop, and Remove if not completed.

Selector: <ace-record-process>

Use the following code to render the component:

html
<ace-record-process object-id="cases" record-id="23232234"></ace-record-process>

API

Following are the input attributes for ace-record-process component:

Attribute	Description
object-id *	Provide the object ID.
record-id *	Provide the record ID.
css-classlist	It helps to specify css class(es) for the tag. Use whitespace to separate multiple css classes.

Note: * indicates required attributes.

Following event is dispatched by the ace-records-table-view tag:

Event	Description
load	Event dispatched on loading the component. This provides the list of processes for a particular record.

Following is a tag instance method:

Method	Description
reload()	This method reloads the component.

Sample code

Event

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

load

html
<ace-record-process id="recordProcessRef" object-id="xxx" record-id="xxx"></ace-record-process>

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

Response

javascript
	[
		{
			process_id: "73e06a90b7fa4736a81509ef2cae1fe4"
			modified_id: ""
			_canDoProcessActions: "true"
			is_subprocess: "0"
			object_id: ""
			required: "0"
			enabled: "1"
			case_record_id: "1734412475"
			date_modified: ""
			duedate: ""
			parent_id: ""
			proc_inst_id: ""
			activity_id: "895a86615d214166b47efc813d4d24e4"
			name: "Test 3"
			date_completed: ""
			id: ""
			date_started: ""
			status: "Ready"
			dbo_process: false
		}
	]

Component Instance Method

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

reload()

html
<button class="btn btn-primary" onclick="reloadProcess()">Reload Process</button>
<ace-record-process id="recordProcessRef" object-id="xxx" record-id="xxx"></ace-record-process>

javascript
function reloadProcess() {
	document.getElementById('recordProcessRef').reload();
}

Note: Only the properties mentioned here are supported.

ace-records-table-view

Use this component to show the list of records that are displayed in a grid-like spreadsheet. You should specify the object-id and the view-id to render the list of records.

Selector: <ace-records-table-view>

Use the following code to render the component: ```html <ace-records-table-view object-id="cases" view-id="c8b87852af5f4828977ab6c9c8bec8fc"></ace-records-table-view> ```