Difference between revisions of "CUI Components"

Latest revision as of 06:18, 17 May 2024

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

Overview

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>

API

Following attributes are available for the ace-records-table-view tag.

Attribute	Description
object-id *	Provide the object ID.
view-id *	Provide the view ID.
css-classlist	It helps to specify css class(es) for the tag. Use whitespace to separate multiple css classes.
sorting	Enable or disable sorting by setting a value for this attribute. Possible values: 'true'; 'false'. Default value: 'true'.
sort-by	Provide the field name as value to this attribute to sort the record table. Default value: 'date_modified' Available values: ${field_name}.
sort-order	Provide the order by setting this attribute as (asc/desc). Available Values: 'asc'; 'desc' Default value: 'desc'.
selection-column-title	The value you provide here is shown as the name for the Record Locator column heading title in the table. Default value: "".
hide-selection-column	Use this parameter to hide the Record Locator column. When you hide this column, the entire row acts as a Record Locator. Available Values: 'true'; 'false' Default value: 'false'.

Note: * indicates required attributes.

Following events are dispatched by the ace-records-table-view tag:

Event	Description
selectrecord	Event dispatched on clicking the record locator link for a record or selecting View details from the Actions menu.
selectrecords	Event dispatched on selecting the checkbox for the record(s). Applicable only for Task and Case Type objects.
load	Event dispatched on loading the component. This provides the list of records of the corresponding view for a particular object.

Following is a tag instance method:

Method	Description
reload()	This method reloads the component.

Sample code

Events

<a id="selectrecord"></a>

selectrecord

html
<ace-records-table-view id="viewInstance" object-id="cases" view-id="c8b87852af5f4828977ab6c9c8bec8fc">
</ace-records-table-view>

javascript
const recordTableViewInstance = document.querySelector('#viewInstance');
recordTableViewInstance.addEventListener('selectrecord', function (event) {
    // Perform your action here.
    const recordData = event['detail'];
    console.log('Record data:', recordData);
});

Response

javascript
{
    objectId: "value",
    recordId: "value",
    row :listOfRecordSelected: [{
        field_name1: "field_value",
		field_name2: "field_value",
        ....       : ....
        ....       : ....
    }]
}

<a id="selectrecords"></a>

selectrecords

html
<ace-records-table-view id="viewInstance" object-id="cases" view-id="c8b87852af5f4828977ab6c9c8bec8fc">
</ace-records-table-view>

javascript
const recordTableViewInstance = document.querySelector('#viewInstance');
recordTableViewInstance.addEventListener('selectrecords', function (event) {
    // Perform your action here.
    const recordData = event['detail'];
    console.log('Record data:', recordData);
});

Response

javascript
{
    isAllSelected: false,
    listOfRecordSelected: [{
        field_name1: "field_value",
		field_name2: "field_value",
        ....       : ....
        ....       : ....
    }],
    numberOfRecordsSelected: 1
}

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

load

html
<ace-records-table-view id="recordsTableView" object-id="xxx" view-id="xxx"></ace-records-table-view>

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

Response

javascript
{
    	modified_id: {name: "john john", id: "4f4fed76497d4591924b4f8edaec225a"}
		owner_id: {name: "john john", id: "4f4fed76497d4591924b4f8edaec225a"}
		priority_value: "3"
		priority: "P3"
		from_name: "john john"
		object_id: "cases"
		_graph: {priority: "P3", number: "000068", header_css: "case_new case_id_box", tab_css: "grey_menu"}
		date_modified: "12 days ago"
		record_locator: "000068"
		case_number: "000068"
		submitter_photo_id: "fd317c1c10a64a56883e937663605cde"
		id: "1234052308"
		date_modified_v: "03.10.2020 10:08 PM"
		notifications: []
		status: "New"
}

Component Instance Method

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

reload()

html
<button onclick="reloadRecordView()">Reload record view table</button>
<ace-records-table-view id="recordsTableView" object-id="xxx" view-id="xxx"></ace-records-table-view>

javascript
function reloadRecordView() {
	document.querySelector('#recordsTableView').reload();
}

Note: Only the properties mentioned here are supported.

ace-record-task-view

Overview

Use this component to create a task related for a record, where you can create the following:

Single step task
Multi step task
Task form

Single step task and each step of the multi-step task are like a quick card of the task form, where you can add minimal information and create the tasks. However, a task form shows all the fields of the task object form. You can complete, approve, or reject a task using this component.

Selector: <ace-record-task-view>

Use the following code to render the component:

html
<ace-record-task-view object-id="cases" record-id="23232234" [safeFlag]="'true'"></ace-record-task-view>

API

Following attributes are available for the ace-record-task-view component:

Attribute	Description
object-id *	Provide the object ID.
record-id *	Provide the record ID.
[safeFlag]	Use this parameter to complete or approve any task depending on the user role. Available Types: 'true'; 'false' Default value: 'false'
hide-header	Use this parameter to hide the Task Header which includes the + icon. Available Types: 'true'; 'false' Default value: 'false'
css-classlist	It helps to specify css class(es) for the tag. Use whitespace to separate multiple css classes.

Note: * indicates required attributes.

Following events are dispatched for the ace-record-task-view component:

Event	Description
taskstatuschange	Event dispatched upon success or failure of a task which is completed, approved, or rejected.
opentaskrecord	Event dispatched upon clicking a task record.
load	Event dispatched on loading the component. This provides the list of tasks for a particular record.

Following is a tag instance method:

Method	Description
reload()	This method reloads the component.

Sample code

Events

<a id="taskstatuschange"></a>

taskstatuschange

html
<ace-record-task-view id="recordTaskView" object-id="cases" record-id="407302262"></ace-record-task-view>

javascript
const taskComponent = document.querySelector('#recordTaskView');
taskComponent.addEventListener('taskstatuschange', function (eventData) {
	const saveData = eventData['detail'];
})

Response

javascript
{
    "message": "Task completed successfully.", "data": {...}
}

<a id="opentaskrecord"></a>

opentaskrecord

html
<ace-record-task-view id="recordTaskView" object-id="cases" record-id="407302262"></ace-record-task-view>

javascript
const taskComponent = document.querySelector('#recordTaskView');
taskComponent.addEventListener('opentaskrecord', function (eventData) {
	const taskDetailObj = eventData['detail'];
})

Response

javascript
{
    objectId: "tasks",
    recordId: "758312596"
}

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

load

html
<ace-record-task-view id="recordTaskViewRef" object-id="cases" record-id="xxxx"></ace-record-task-view>

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

Response

javascript
{
	myTasks: [],
	otherTasks: [
		{
			owner_id: {name: "Open Ownership", id: "4"}
			_canDoTaskActions: "true"
			subject: "ajslkajslak"
			date_completed: ""
			_cmt_reqd: "0"
			sla_id: ""
			overdue_flag: "false"
			type: ""
			description: ""
			form_id: ""
			id: "1743974231"
			actionExpanded: false
			completeFocusIndex: 0
		}
	],
	completedTasks: []
}

Component Instance Method

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

reload()

html
<button onclick="reloadTask()">Reload Task Component</button>
<ace-record-task-view id="recordTaskViewRef" object-id="cases" record-id="610149483"></ace-record-task-view>

javascript
function reloadTask() {
	document.getElementById('recordTaskViewRef').reload();
}

Note: Only the properties mentioned here are supported.

activity-history

Overview

Activity history allows you to show the activities performed on a record. Each entry in the activity history provides details about who performed which action and when. The history shows:

Emails sent by the platform user or by the user.
Messages received through the Email Channel (generally as a reply to a message that was sent).
Private notes added to the record.
For Cases, all fields are audited by default. For example, any change to the Status or Priority of a case record, or any other field in the record, is automatically recorded in the case history. You must explicitly enable 'Field Audit' for the non-case Objects, and specific fields are selected for audit.

Selector: <ace-activity-history>

Use the following code to render the component:

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

API

Following attributes are available for ace-activity-history 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 activities for a related record on loading the component.

Following is a tag instance method:

Method	Description
reload()	This method reloads the component.

Note: Only the properties mentioned here are supported.

Sample code

Event

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

load

html
<ace-activity-history object-id="xxx" record-id="xxx" id="activityHistoryRef"></ace-activity-history>

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

Response

javascript
{
	activityList:
		[
			{
				date: "03.23.2020",	
				data: [
			{
		
				userName: "john john"
				title: "john john opened this case"
				description: "000068"
				viewHTMLLink: 0
				subjectIcon: ""
				photoID: "fd317c1c10a64a56883e937663605cde"
				visibleToCustomer: "0"
				isDescContainHTMLTags: false
				id: "1104963726"
				relativeDate: "12 days ago"
				activityDate: "03.10.2020"
				activityTime: "10:08 PM"
				attachmentArray: ""
				imageType: "userImage"
			}	
		]
		
	}
	
	],
	
		isMoreActivityPresent: false

}

Component Instance Method

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

reload()

html
<button onclick="reloadActivityHistory()">Reload Activity History</button>
<ace-activity-history object-id="xxx" record-id="xxx" id="activityHistoryRef"></ace-activity-history>

javascript
const ahElem = document.querySelector('#activityHistoryRef');
function reloadActivityHistory() {
   document.getElementById('activityHistoryRef').reload();
}

Note: Only the properties mentioned here are supported.

app tabs list

Overview

It will list down all the objects and web tabs which are configured in users tab preferences.

Selector: <ace-app-tabs-list>

Use below code to render the component:

html
<ace-app-tabs-list></ace-app-tabs-list>

API

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

Attribute	Description
css-classlist	It helps to specify css class(es) for the tag. Multiple css classes should be separated by white space.

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

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

Sample code

Event

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

selectionChange

html
<ace-app-tabs-list id="appTabsInstance"></ace-app-tabs-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-tabs-list id="appTabs"></ace-app-tabs-list>

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

Response

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

Note: Only the properties mentioned here are supported.

article-component

Overview

Use this tag to create an article for any object record.

This tag maps with the following fields of a record:

Article Title
Created date
Author of the article
Content of the article

Note: All these fields can be dynamic or static.

Selector: <ace-article\>

Use the following code to render the component:

html
<ace-article object-id="cases" record-id="973489109" 
content-map="title:subject@author:created_id@date:created_date@content:cases_test_rta_423691479"></ace-article>

API

Following attributes are available for the ace-article tag:

Attribute	Description
object-id *	Provide the object id.
record-id *	Provide the record id.
content-map *	Provide the list of fields separate with '@'. Usage:title:field_name/static_data@author:field_name/static_data@date:field_name/static_data@content:field_name/static_data

Note: * indicates required attributes.

API description

<a id="content-map"></a>

content-map

Provide the list of fields separated with '@'. If author and date mapping is not present, the application displays empty values with labels.

html

<ace-article content-map="title:field_name/static_data@author:field_name/static_data@date:field_name/static_data@content:field_name/static_data"></ace-article>

Example:

title:subject@author:created_id@date:created_date@content:cases_test_rta_423691479
title:My Article@author:John doe@date:01/01/2020@content:cases_test_rta_423691479

Note:

If the content is mapped to a field other than Rich text area, then user can also set html content to it. For example, if content is mapped to a text area or a text field and its content is <i\>my text\</i\>, then the content appears with html encoded content like my text.
Only the properties mentioned here are supported.

login

Overview

You can use the Login Form component for AgileApps tenant login page. You can write your own logic using the success or failure handlers of this component.

Selector: <ace-login-form\>

Use the following code to render the component:

html
<ace-login-form css-classlist="ace-bg-white"></ace-login-form>

API

Following attribute is available for ace-login-form 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
loginSuccess	Event dispatched upon successful login. Logged in user information is available as an object.
loginError	Event dispatched upon login failure with an error message.

Sample code

<a id="login-success-event"></a>

loginSuccess

html
<ace-login-form id="LoginForm"></ace-login-form>

javascript
document.querySelector('#LoginForm').addEventListener('loginSuccess', function (event) {
  // Perform your action here.
  const loggedInUserInfo = event.detail;
  console.log('login Success', loggedInUserInfo);
});

Response

javascript
{
   "id": "${userId}",
   "profile": {...},
   "preferences": {...},
}

<a id="login-failure-event"></a>

loginError

html
<ace-login-form id="LoginForm"></ace-login-form>

javascript
document.querySelector('#LoginForm').addEventListener('loginError', function (event) {
   // perform login error action here.
   const loginErrorInfo = event.detail;
   const loginErrorMesssage = loginErrorInfo['__exception_msg__'];
   console.log('login Error:', loginErrorMesssage); 
});

Response

javascript
{
   __exception_msg__: "${Login error message}"
}

Note: Only the properties mentioned here are supported.

Logout

Overview

Use the Logout component to get the logout functionality from the current login account. This component has the following features:

It is like a placeholder with certain functionality.
You can inject elements into this component to get customized content.
It fits as per the inside content.

Selector: <ace-logout\>

Use the following code to render the component:

html
<ace-logout>
	<button>Logout</button>
</ace-logout>

API

Following event is dispatched by the ace-logout tag:

Event	Description
logoutEvent	Event dispatch on logout.

Sample code

<a id="logout-event"></a>

logoutEvent

html
<ace-logout id="acelogoutTag">
    <button type="buttton">Logout</button>
</ace-logout>

javascript
var logoutElement = document.querySelector('#acelogoutTag');
logoutElement.addEventListener('logoutEvent', function (event){
	// perform any action on trigger of this event.
});

Response

javascript
{
	status: "success" | "failure"
}

Note: Only the properties mentioned here are supported.

notes editor

Overview

Notes editor may be Private notes or Email messages. You can create these when you view a case record, or some other record.

The differences are:

A Private Note does not result in an email being sent to anyone.
When internal users (normal users who log into the platform) view a record, they can see all email messages and notes recorded in the history. Their privileges and team memberships may or may not allow them to see the record. However, if they can see it, they have access to its entire history).
- For the Case object, email responses are stored in the history, as well as sent messages.
- For other objects, only sent messages are recorded.
When external users (users accessing records using the Service Portal) view a record, they see only those messages in the record history in which they were a sender or a recipient.

Selector: <ace-notes-editor\>

Use the following code to render the component:

html
<ace-notes-editor object-id="cases" record-id="23334543"></ace-notes-editor>

API

Following attributes are available for ace-notes-editor tag:

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-notes-editor tag:

Event	Description
saveNote	This provides the success or failure message with data object on saving the notes.

Sample code

<a id="save-note-event"></a>

saveNote

html
<ace-notes-editor id="noteseditor" object-id="cases" record-id="23334543"></ace-notes-editor>

javascript
    const notesEditor = document.querySelector('#noteseditor');
    notesEditor.addEventListener('saveNote', function (event) {
        // Perform action after save a note.
        const saveNoteData = event['detail'];
    });

Response

javascript
{
	message: "success",
	data: {
        objectId: "cases",
        recordId: "1234567890",
        noteType: "Private Note",
        attachedFileName: [],
        emailRecipients: [],
        noteSubject: "",
        noteText: "<p>Abcdef</p>"
    }
}

Note: Only the properties mentioned here are supported.

object views list

Overview

Use this component to list all the views inside an object with record count.

Selector: <ace-object-views-list\>

Use the following code to render the component:

html
<ace-object-views-list object-id="cases"></ace-object-views-list>

API

Following attributes are available for ace-object-views-list tag:

Attribute	Description
object-id *	Provide the object 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 events are dispatched by ace-object-views-list tag:

Event	Description
selectionChange	Event dispatched on view selection.
load	Event dispatched on loading the component. This provides you the list of views for the related object.

Following is a tag instance method:

Method	Description
reload	This method reloads the component.

Sample code

Events

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

selectionChange

html
<ace-object-views-list object-id="cases" id="listOfViews"></ace-object-views-list>

javascript
	const objectViewList = document.querySelector('#listOfViews');
	objectViewList.addEventListener('selectionChange', function(event){
		// Perform action on selection
		const recordData = event['detail'];
	});

Response

javascript
{
	count: "12",
	default: "0",
	id: "cases",
	name: "All Active Cases",
	sortBy: "last_activity",
	sortOrder: "desc"
}

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

load

html
<ace-object-views-list object-id="cases" id="objectViewsRef"></ace-object-views-list>

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

Response

javascript
[
	{
	default: "0"
	id: "00d76e74f7754a8881608cf935fd54e7"
	name: "All Active Cases"
	sortBy: "last_activity"
	sortOrder: "desc"
	count: "5"
	},
	{
	default: "1"
	id: "5d5032e48c8041348e2b8fc0a1a1ddf2"
	name: "All Cases"
	sortBy: "date_modified"
	sortOrder: "desc"
	count: "6"
	}
]

Component Instance Method

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

reload()=

html
<button onclick="reloadObjectView()">Reload Object View</button>
<ace-object-views-list object-id="xxxx" id="objectViewsRef"></ace-object-views-list>

javascript
function reloadObjectView() {
	document.getElementById('objectViewsRef').reload();
}

Note: Only the properties mentioned here are supported.

owner assignment

Overview

Use this component to assign a record to a user or a team or to assign the record to yourself. It auto suggests the names while typing in the Assignee field. The Assign to me link assigns the record to the logged-in (current) user.

Selector: <ace-change-ownership\>

Use the following code to render the component

html
<ace-change-ownership object-id="cases" record-id="1554361346"></ace-change-ownership>

API

Events

Following attributes are available for ace-change-ownership tag:

Attribute	Description
object-id *	Provide the object id.
record-id *	Provide the record id.
show-users	It decides whether to show the users list or not. Available values: 'true'; 'false'. Default value: 'true'
show-teams	It decides whether to show the list of teams or not. Available values: 'true'; 'false'. Default value: 'true'
show-claim	It decides whether to show the Assign to me link or not. Available values: 'true'; 'false'. Default value: 'true'
css-classlist	It helps to specify css class(es) for the tag. Use whitespace to separate multiple css classes.

Note: * indicates required attributes.

Following events are dispatched by the ace-change-ownership tag:

Event	Description
assignrecord	Event dispatched on owner change.
load	Event dispatched on loading the component. This event provides the user with the details of the assigned user for the particular record.

Sample code

Events

<a id="assignrecord"></a>

assignrecord

html
<ace-change-ownership id="ownerAssign" object-id="cases" record-id="1554361346" show-users="true" show-claim="true"></ace-change-ownership>

javascript
const ownerComponent = document.querySelector('#ownerAssign');
ownerComponent.addEventListener('assignrecord', function (event) {
    // perform the action after assign record.
    console.log(event['detail']);
});

Response

javascript
{
    message: "Record assigned successfully.", 
    data: "${recordId}"
}

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

load

html
<ace-change-ownership id="ownerAssignRef" object-id="xxxx" record-id="xxxx"></ace-change-ownership>

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

Response

javascript
{
	name: "john john"
	thumb_photo_id: "fd317c1c10a64a56883e937663605cde"
	id: "4f4fed76497d4591924b4f8edaec225a"
	owner_type: "U"
	email: "johnjohn@softwareag.com"

}

Note: Only the properties mentioned here are supported.

record actions

Overview

Use this component to list all the record actions such as Basic (Delete, Merge, and Print), Macros and Custom Form Actions (CFA).

Selector: <ace-record-actions\>

Use the following code to render the component:

html
<ace-record-actions object-id="cases" record-id="810599828"></ace-record-actions>

API

Following attributes are available for ace-record-actions tag:

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.
types	Use this parameter to display the various action types in a group. Available types: "BASIC"; "MACRO"; "CFA" Default value: All types are listed by default.
hide-actions	Provide the actions IDs that you want to hide from the list of actions. Use comma separated values while specifying the IDs. IDs for basic actions are as follows: > Delete: 1 > Merge: 3 > Print: 12 For example, hide-actions = "1, 3"
confirm-actions	Provide the actions IDs for which you want to show the confirmation dialog box. By default, it is always enabled for the Delete action. This is applicable for the following types of actions: > Macro > Custom Form Actions excluding Invoke page.

Note: * indicates required attributes.

Following events are dispatched by the ace-record-actions tag:

Event	Description
executedaction	Event dispatched on executing the action. This provides the JSON object with status information for the executed action.
load	Event dispatched on loading the component. This provides the list of actions for the corresponding record.

Sample code

Events <a id="executedaction"></a>

executedaction

html
<ace-record-actions id="recordActionsRef" object-id="cases" record-id="810599828"></ace-record-actions>

javascript
	const recordActions= document.querySelector('#recordActionsRef');
	recordActions.addEventListener('executedaction', function (event) {
	// perform the event after execute form action
    console.log(event['detail']);
});

Response

javascript
{
	id: "6090657b58ca4766a2e500964eceb6c9",
	name: "Macro Send Email",
	status: "Success"
}

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

load

html
<ace-record-actions id="actionsRef" object-id="xxxx" record-id="xxxx"></ace-record-actions>

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

Response

javascript
{
	standard: [
	{name: "delete", type: "standard", title: "Delete", id: "1"},
	{name: "merge", type: "standard", title: "Merge", id: "3"},
	{name: "print", title: "Print", type: "standard", id: "12"}
	],
	macros: [],
	CFA: []
}

Note: Only the properties mentioned here are supported.

record form

Overview

Use the Record Form tag to create or update a record for a supported object in the AgileApps application.

Selector: <ace-record-form\>

Use the following code to render the component:

html
<ace-record-form object-id="cases" record-id="43334342"></ace-record-form>

API

Following attributes are available for the ace-record-form tag.

Attribute	Description
object-id *	Provide the object ID.
record-id *	Provide the record ID. In case of a new record use "-1"
css-classlist	It helps to specify css class(es) for the tag. Use whitespace to separate multiple css classes.
layout-type	Display mode for form sections Available values: 'accordion'; 'tab'. Default value: 'tab'
layout-id	This is the layout ID for a form. You can obtain the form layout from the Designer screen. To view the form layout, go to Settings > Customization > Objects > {object} > Forms > {form}.
is-readonly	When this value is set to "true", the form appears in the read-only mode. If set to "false", then the form is editable. Default value: 'false'

Note: * indicates required attributes.

Following events are dispatched by the ace-record-form tag:

Event	Description
load	Event dispatched on loading a form.
save	Event dispatched on saving a form.
reset	Event dispatched on resetting a form.
openlookuprecord	Event dispatched on clicking the lookup field navigation link.

Following are the tag instance methods:

Method	Description
saveRecord()	Performs the save action for the form instance.
resetRecord()	Performs the reset action for the form instance.
getRecordData()	Gets the record data from the form instance.
setRecordData(object)	Sets the record data to the form instance.
isValid()	Checks if the record form is valid or not.

Sample code

Events

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

load

html
<ace-record-form object-id="cases" record-id="43334342" id="recordFormId">
</ace-record-form>

javascript
const rfEle = document.querySelector('#recordFormId');
rfEle.addEventListener('load', function (eventData) {
 const onLoadData = eventData['detail'];
 })

Response

javascript
{
	id: "${record_id}",
	field_name: "field_value",
	field_name1: "field_value",
	...       :  ...
	...       :  ...
}

<a id="save"></a>

save

html
<ace-record-form object-id="cases" record-id="43334342" id="recordFormId">
</ace-record-form>

javascript
const rfEle = document.querySelector('#recordFormId');
rfEle.addEventListener('save', function (eventData) {
 const onSaveData = eventData['detail'];
 })

Response

javascript
{
	status: "success",
	data   :  {
    	id: "${record_id}",
	    field_name: "field_value",
	    field_name1: "field_value",
	    ...       :  ...
	    ...       :  ...
    }
}

<a id="reset"></a>

reset

html
<ace-record-form object-id="cases" record-id="43334342" id="recordFormId">
</ace-record-form>

javascript
const rfEle = document.querySelector('#recordFormId');
rfEle.addEventListener('reset', function (eventData) {
 const onResetData = eventData['detail'];
 })

Response

javascript
{
	id: "${record_id}",
	field_name: "field_value",
	field_name1: "field_value",
	field_name2: "field_value",
	...       :  ...
	...       :  ...
}

<a id="openlookuprecord"></a>

openlookuprecord

html
<ace-record-form object-id="cases" record-id="43334342" id="recordFormId">
</ace-record-form>

javascript
const rfEle = document.querySelector('#recordFormId');
rfEleme.addEventListener('openlookuprecord', function (eventData) {
       const lookupRecordInfo = eventData['detail'];
});

Response

javascript
{
objectId: "${object_id}",
recordId: "${record_id}",
row: {
        id: "${record_id}",
        field_name: "field_value",
        field_name1: "field_value",
        ...       :  ...
        ...       :  ...
    }
}

Component Instance Methods

<a id="save-record-method"></a>

saveRecord()

html
<button onclick="saveRecordFormInstance()">Save Form</button>
<ace-record-form object-id="cases" record-id="-1" id="formInstance"></ace-record-form>

javascript
const recordFormIns = document.querySelector('#formInstance');
function saveRecordFormInstance(){
	recordFormIns.saveRecord();
}

<a id="reset-record-method"></a>

resetRecord()

html
<button type="button" onclick="cancelChanges()">Reset</button>
<ace-record-form object-id="cases" record-id="1026401569" id="formInstance"></ace-record-form>

javascript
function cancelChanges(){
	const recordFormIns = document.querySelector('#formInstance');
	recordFormIns.resetRecord();
}

<a id="get-record-data"></a>

getRecordData()

html
<button type="button" class="btn" onclick="getRecordDataFromFormInstance()">Get Data</button>
<ace-record-form object-id="cases" record-id="1026401569" id="newformInstance"></ace-record-form>

javascript
 const recordFormIns = document.querySelector('#newformInstance');
 function getRecordDataFromFormInstance(){
    const sourceObject = recordFormIns.getRecordData();
 }

<a id="set-record-data"></a>

setRecordData(object)

html
<button type="button" onclick="setRecordDataToFormInstance()">Set record data</button>
<ace-record-form object-id="cases" record-id="1026401569" id="newformInstance"></ace-record-form>

javascript
const recordFormIns = document.querySelector('#newformInstance');
function setRecordDataToFormInstance(){
    const sourceObject = recordFormIns.getRecordData();
    recordFormIns.setRecordData(sourceObject);
 }

Input Object

javascript
{
	id: "${record_id}",
	field_name: "field_value",
	field_name1: "field_value",
	...       :  ...
	...       :  ...
}

<a id="is-valid"></a>

isValid()

html
<button type="button" onclick="saveRecord()">Save</button>
<ace-record-form object-id="cases" record-id="-1" id="rfId">
</ace-record-form>

javascript
const rfId = document.querySelector('#rfId');
 function saveRecord(){
// submit the record when it does not have errors.     
 if(rfId.isValid(){
    rfId.saveRecord();
 }
}

Note: Only the properties mentioned here are supported.

related info

Overview

A related record is a record which is linked to the current record through a lookup field. While viewing a record, you can see the related records associated with it. You can add more related records by using this tag.

Selector: <ace-related-info\>

Use the following code to render the component:

html
<ace-related-info object-id="cases" record-id="801173855"></ace-related-info>

API

Following attributes are available for ace-related-info tag.

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. Multiple css classes should be separated by white space.

Note: * indicates required attributes.

Event	Description
selectrecord	Event dispatched on selecting a record. This will give the selected record information from related records table.
load	Event dispatched on loading a component. This provides the list of related information for a particular record.

Sample code

Events

<a id="selectrecord"></a>

selectrecord

html
<ace-related-info id="relatedObj" object-id="cases" record-id="131054879" css-classlist="ace-bg-white"></ace-related-info>

javascript
const relatedObjElem = document.querySelector('#relatedObj');
relatedObjElem.addEventListener('selectrecord', function (eventData) {
const currentRecord = eventData['detail'];
});

Response

javascript
{
relatedObjectId: "a024f93ebd53447fa80dc5d0ed958057",
rowId: "1559589289",
rowInfo: {
	subject: "sub276",
	text_field: "",
	 id: "1559589289"
	}
}

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

load

html
<ace-related-info id="relatedObj" object-id="cases" record-id="xxxx"></ace-related-info>

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

Response

javascript
	[
		{
		city: ""
		phone: ""
		description: ""
		id: "1784450029"
		object_id: {name: "accounts", id: "accounts"}
		},
		{
		id: "1048688946"
		test1: "dsj"
		emailf: ""
		object_id: {name: "Object_1", id: "487ceddfe6644751a6fdfe90e281d477"}
		}
	]

Note: Only the properties mentioned here are supported.

role switcher

Overview

Use this component to list all the roles configured for the application users to switch their role.

Selector: <ace-role-switcher\>

Use the following code to render the component:

html
<ace-role-switcher></ace-role-switcher>

API

Following attributes are available for the ace-role-switcher component.

Attribute	Description
type	Use this parameter to set how you want to display the user roles. Pass this value inside the component. Available types: "list"; "dropdown" Defaut value: "list"
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-role-switcher tag:

Event	Description
rolechange	Event dispatched upon role change.
load	Event dispatched on loading the component. This event provides you the list of roles of an active user.

Sample code

Events

<a id="rolechange"></a>

rolechange

html
<ace-role-switcher id="roleSwitcherIns"></ace-role-switcher>

javascript
const roleSwitcher = document.querySelector('#roleSwitcherIns');
roleSwitcher.addEventListener('rolechange', function (event) { 
   // Perform your action here.
   const currentRoleInfo = event['detail']; 
   console.log('User role is changed', currentRoleInfo);
});

Response

javascript
{
   roleId: "49a47b32804c4932a252c7c36c95999e",
   roleName: "Manager"
}

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

load

html
<ace-role-switcher id="roleSwitch" display-type="list"></ace-role-switcher>

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

Response

javascript
{
	activeRole: {name: 'Agent', id: 'XXXXXXXXXXXXXXXXXXX'},
	roleList: [
		{name: 'Agent', id: 'XXXXXXXXXXXXXXXXXXX'},
		{name: 'Manager', id: 'XXXXXXXXXXXXXXXXX'},
		{name: 'Admin', id: 'XXXXXXXXXXXXXXXXXXX'},
		{name: 'My Role', id: 'XXXXXXXXXXXXXXXXXX'}
	]
}

Note: Only the properties mentioned here are supported.

table grid

Overview

Use this component to display the list of object records in a table. Some aspects of this table grid component are as follows:

It initially has 25 records. You can configure this value.
It supports pagination.
It has filters where you can provide an input.
You can sort the grid headers with or without a filter.
When you search without providing any input, it resets the grid result.

Selector: <ace-table-grid\>

Use the following code to render the component:

html
<ace-table-grid object-id="cases"></ace-table-grid>

API

Following attributes are available for ace-table-grid tag:

Attribute	Description
object-id *	Provide the object ID.
column-meta	@' in the following manner. Format: field1_name:field1_Label:field_type:IsSortable:isHidden@\\|@field2_name:field2_Labe2:field_type:isSortable:isHidden Usage: subject:Subject:STRING:true:false@\\|@description:Description:STRING:false:true@\\|@status:Status:PICK_LIST:false:true Here, you can sort the subject column and is not hidden. The description column is hidden.
css-classlist	It helps to specify css class(es) for the tag. Use whitespace to separate the multiple css classes.
page-size	Provide the number of records to display per page. The value of page-size attribute should be a positive integer. Default value: 25
page-index	This parameters allows you to set the page index which defines which group of records are to be shown in the table. For example, if you provide a value of 2 for page-index, the user will see the 3rd page of records as the page-index value starts from 0. The value of page-index attribute should be a positive integer. Default value: 0
display-search	This allows the user to provide a filter (search) functionality for the grid data. Available values: true; false Default value: false
display-macros	When this value is set to "true", you can show the extra column in the table which is the Action column. In this column, you can run the macro action assigned to the record in a particular row. Available values: true; false Default value: false
expandable-row	When this value is set to "true", you can provide an expansion for a row to show more details for any record. At any time, you can expand only one table row. Available values: true; false Default value: false
hide-selection-column	When this value is set to "true", you can hide the record locator column from the table. By default, the record locator column is displayed on the table.
selection-column-title	This parameter allows you to change the name of the record locator column in the table.
pagination	This allows the user to show or hide the paginator. Available values: true; false Default value: true
sort-by	This sorts the data based on the field name you provide. Default value: date_modified
sort-order	It sets the sorting order for the fields you provide. Available values: asc; desc Default value: desc
filter-query	This is used to set a filter initially. Usage: filter-query="subject equals account" This shows all the records whose subject field value matches the "account"
paginator-position	This sets the pagination position to either the top or the bottom of the table. Available values: top; bottom Default value: top
multi-select	User can select multiple records. Available values: true; false Default value: false

Note: * indicates required attributes.

Following events are dispatched by the ace-table-grid tag:

Event	Description
selectrecord	Event dispatched on selecting a record using a record locator.
selectrecords	Event dispatched on selecting multiple records using a check box.
pagesortchange	Event dispatched on sorting of a column or a page change.
togglerow	Event dispatched on expanding or collapsing a row.
macroexecution	Event dispatched on executing a macro action for a record.
load	Event dispatched on loading a component.

Following is a tag instance method:

Method	Description
reload()	This method reloads the component.

Sample code

Events

<a id="selectrecord"></a>

selectrecord

html
<ace-table-grid id="tableGridId" object-id="cases"
column-meta="subject:Subject:STRING:true@|@description:Description:true:false">
</ace-table-grid>

javascript
const tableGridElem = document.querySelector('#tableGridId');
tableGridElem.addEventListener('selectrecord', function (data) {
const selectionData = data.detail;
if (selectionData.length) {
console.log(selectionData);
          }
    });

Response

javascript
[
	{ 
		id: "${record_id}", 
		field_name: "field_value",
		field_name1: "field_value",
		... : ...,
		... : ... 
	}
]

<a id="selectrecords"></a>

selectrecords

html
<ace-table-grid id="tableGridId" object-id="cases"
	column-meta="subject:Subject:STRING:true@|@description:Description:true:false"
	multi-select="true"></ace-table-grid>

javascript
const tableGridElem = document.querySelector('#tableGridId');
tableGridElem.addEventListener('selectrecords', function (data) {
	const selectionData = data.detail;
	if (selectionData.length) {
	console.log(selectionData);
	}
});

Response

javascript
[
	{ 
		id: "${record_id}", 
		field_name: "field_value",
		field_name1: "field_value",
		... : ...,
		... : ... 
	},
	{ 
		id: "${record_id}",
        field_name: "field_value",
     	field_name1: "field_value",
    	... : ...,
    	... : ... 
	}
]

<a id="pagesortchange"></a>

pagesortchange

html
<ace-table-grid id="tableGridId" object-id="cases"
page-size="7"  pagination="true" sort-by="subject" sort-order="asc">
</ace-table-grid>

javascript
const tableGridElem = document.querySelector('#tableGridId');
tableGridElem.addEventListener('pagesortchange', function (data) {
      const selectionData = data.detail;
     });

Response

javascript
{
	pageIndex: 0,
	pageSize: 7,
	pageTotalLength: 37,
	sortActive: "subject",
	sortDirection: "desc"
}

<a id="togglerow"></a>

togglerow

html
<ace-table-grid id="tableGridId" object-id="cases"
column-meta="subject:Subject:STRING:true@|@description:Description:true:false"
expandable-row="true"></ace-table-grid>

javascript
const tableGridElem = document.querySelector('#tableGridId');
tableGridElem.addEventListener('togglerow', function (data) {
const toggleRowEventData = data.detail;
if (toggleRowEventData.toggleType == 'expand') {
  console.log("On row expansion");
}else{
console.log("On row collapse");
    }
});

Response

javascript
{
	toggleType: ToggleType, rowDetails: object,
}

<a id="macroexecution"></a>

macroexecution

html
<ace-table-grid id="tableGridId" object-id="cases"
column-meta="subject:Subject:STRING:true@|@description:Description:true:false"
display-macros="true"></ace-table-grid>

javascript
const tableGridElem = document.querySelector('#tableGridId');
tableGridElem.addEventListener('macroexecution', function (data) {
const macroExecutionEventData = data.detail;
if (macroExecutionEventData.type == 'Successful') {
  console.log("Macro successfully executed.");
}else if(macroExecutionEventData.type == 'Failed'){
console.log("Failed while executing macro action.");
    }
});

Response

javascript
{
	type: 'Successful' || 'Failed',
	apiRes: object; 
	recordDetails: object;
}

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

load

html
<ace-table-grid id="tableGridId" object-id="xxx" column-meta="xxx"></ace-table-grid>

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

Response

javascript
{
	data: [
	    {
	        description: "Agileapp demo"
	        id: "662499464"
	        record_locator: "000058"
	        subject: "Agileapp demo"
	    }
	],
	totalRecordCount: 1
}
// type is either 'Successful' or 'Failed',

Component Instance Method

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

reload()

html
<button class="btn btn-primary" onclick="tableGridReload()">Reload Table Grid</button>
<ace-table-grid id="tableGridId" object-id="xxx" column-meta="xxx"></ace-table-grid>

javascript
function tableGridReload() {
      document.getElementById('tableGridId').reload();
	}
}

Note: Only the properties mentioned here are supported.

user profile

Overview

Use this component to get the basic information of the logged in user. Basic information includes profile picture, user name, and user role.

This component has the following features:

It is a read-only component. Only the details related to user profile picture, user name, and user role are available with this component.
Using certain tag values, you can modify the display property of all these components.
It inherits the size (height and width) attributes from the parent.

Selector: <ace-user-profile\>

Use the following code to render the component:

html
<ace-user-profile></ace-user-profile>

API

Following are the input attributes for ace-user-profile component:

Attribute	Description
profile-picture	Displays the profile picture of the logged in user. If you want to hide the image, set this attribute value to false. Available values: true; false Default value: true
name	Displays the user name of the logged in user. If you want to hide the user name, set this attribute value to false. Available values: true; false Default value: true
active-role	Displays the active role name for the logged in user. If you want to hide the role name, set this attribute value to false. Available values: true; false Default value: true

Following event is dispatched by the ace-user-profile tag:

Event	Description
load	Event dispatched on loading the component. This event provides you the basic details of the active user.

Sample code

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

load

html
<ace-user-profile id="userProfileRef"></ace-user-profile>

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

Response

javascript
{
	name: "john john",
	imgId: "xxxxxxxxxxxxxxxxx",
	role: "CaseDeny"
	}

Note: Only the properties mentioned here are supported.

view configuration

Overview

Use this component to configure a new view or to edit an existing view of an object.

Selector: <ace-view-configuration\>

Use the following code to render the component:

html
<ace-view-configuration object-id="cases" view-id='-1'></ace-view-configuration>

API

Following attributes are available for the ace-view-configuration component.

Attribute	Description
object-id *	Provide the object ID.
view-id *	Provide the view ID. In case of a new view, use "-1".
css-classlist	It helps to specify css class(es) for the tag. Use whitespaces to separate multiple css classes.

Note: * indicates required attributes.

Following event is dispatched by the ace-view-configuration tag:

Event	Description
saveView	Event dispatched upon success or failure of view creation.

Following are the instance methods:

Method	Description
submitViewData()	Performs the save action for the view instance.
saveAsNewView()	Performs the save action for the existing view instance.

Sample code

<a id="save-view-event"></a>

saveView

html
<ace-view-configuration id="viewConfigIns" object-id="cases" view-id='-1'></ace-view-configuration>

javascript
var viewConfigInstance = document.querySelector('#viewConfigIns')
viewConfigInstance.addEventListener('saveView', function (event) {
    // Perform your action here.
    const viewInfo = event['detail'];
    console.log("view saved successfully", viewInfo) 
});

Response

javascript
{
    data: {...},
    Message: "${id} of the view saved view."
}

<a id="submit-view-data"></a>

submitViewData()

html
<button type="button" id="create-view">Create View</button>
<ace-view-configuration id="viewConfigIns" object-id="cases" view-id='-1'></ace-view-configuration>

javascript
const viewConfigInstance= document.querySelector('#viewConfigIns');
const createViewButton = document.querySelector('#create-view');
createViewButton.addEventListener('click', function() {
    viewConfigInstance.submitViewData();
});

<a id="save-new-view"></a>

saveAsNewView()

html
<button id="save-as-new">Save as new View</button>
<ace-view-configuration id="viewConfigIns" object-id="cases" view-id='${view-id}'></ace-view-configuration>

javascript
const viewConfigInstance= document.querySelector('#viewConfigIns');
const saveAsNewButton = document.querySelector('#save-as-new');
saveAsNewButton.addEventListener('click', function() {
    viewConfigInstance.saveAsNewView();
});

Note: Only the properties mentioned here are supported.

@@ Line 146: / Line 146: @@
 |}
-==Sample code==
+===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:
+<code>aceLib.bookmark.addGroup({id:'test',displayTitle:'Group 1'});</code>
+Following are the methods available in the bookmark library:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Methods !! | Description
+|-
+| addGroup || Add a new group in the list.</br> <li>'''Syntax''': <code>addGroup({id, displayTitle})</code></li><li>'''id''':  Group ID where the user wants to add the item. This value is '''Mandatory'''.</li><li>'''displayTitle''': Displays the value of the group</li>
+|-
+| updateGroup || Update the group information.</br> <li>'''Syntax''': <code>updateGroup({id, displayTitle})</code></li><li>'''id''': Group ID where the user wants to update the item. This value is '''Mandatory'''.</li><li>'''displayTitle''': Displays the value of the group</li>
+|-
+| removeGroup || Removes the group from the list by passing the group ID.</br> <li>'''Syntax''': <code>removeGroup(id)</code></li><li>'''id''': Group ID where the user wants to remove the item. This value is '''Mandatory'''.</li>
+|-
+| addItem || Add an item to the bookmark list corresponding to a group ID.</br> <li>'''Syntax''': <code>addItem({groupId, id, displayTitle, category, value})</code></li><li>'''id''': item ID. This value is '''Mandatory'''.</li><li>'''groupId''':  Group ID where the user wants to add the item. This value is '''Mandatory'''.</li><li>'''displayTitle''': Displays the value of the item.</li><li>'''category''': Type of item. It can be Record, Report or user-defined type.</li><li>'''value''': Value of the item.</li>
+|-
+| updateItem || Update the bookmark list item. </br> <li>'''Syntax''': <code>updateItem({groupId, id, displayTitle, category, value})</code></li><li>'''id''': item ID. This value is '''Mandatory'''.</li><li>'''groupId''':  Group ID where the user wants to add the item. This value is '''Mandatory'''.</li><li>'''displayTitle''': Displays the value of the item.</li><li>'''category''': Type of item. It can be Record, Report or user-defined type.</li><li>'''value''': Value of the item.</li>
+|-
+| removeItem || Remove an item from the bookmark list corresponding to the group ID. </br> <li>'''Syntax''': <code>removeItem(groupId, id)</code></li><li>'''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.</li><li>'''id''': ID of the item to delete. This value is '''Mandatory'''.</li>
+|-
+| refresh || Refresh the bookmark list. </br> <li>'''Syntax''': <code>aceLib.bookmark.refresh();</code></li>
+|}
+'''Note''': Some considerations are as follows:</br>
+:* 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===
 <code><a id="selection-change"></a>	</code>
-===selectionchange===
+====selectionchange====
 <pre>html
@@ Line 164: / Line 198: @@
-===Response===
+====Response====
 <pre>javascript
 {
@@ Line 176: / Line 210: @@
 <code><a id="load"></a></code>
-===load===
+====load====
 <pre>html
@@ Line 188: / Line 222: @@
 </pre>
-#### Response:
+====Response====
-```javascript
+<pre>javascript
 [
      {
@@ Line 207: / Line 241: @@
      {...}
 ]
-```
+</pre>
-<a id="clear-all-method"></a>
+<code><a id="clear-all-method"></a></code>
-### clearAll
+====clearAll====
-```html
+<pre>html
 <button type="button" onclick="clearAllHandler()">Clear all</button>
 <ace-bookmark-list id="aceBookmarksList"></ace-bookmark-list>
-```
+</pre>
-```javascript
+<pre>javascript
 function clearAllHandler(){
 	const bookmarkListIns = document.querySelector('#aceBookmarksList');
 	bookmarkListIns.clearAll();
 }
-```
+</pre>
-<a id="set-group-order-method"></a>
+<code><a id="set-group-order-method"></a></code>
-### setGroupOrder
+====setGroupOrder====
-```html
+<pre>html
 <button type="button" onclick="setGroupOrderHandler()">Set Group Order</button>
 <ace-bookmark-list id="aceBookmarksList"></ace-bookmark-list>
-```
+</pre>
-```javascript
+<pre>javascript
 function setGroupOrderHandler(){
 	const bookmarkListIns = document.querySelector('#aceBookmarksList');
@@ Line 233: / Line 267: @@
 	bookmarkListIns.setGroupOrder(listOfGroupIds);
 }
-```
+</pre>
-<a id="remove-item-method"></a>
+<code><a id="remove-item-method"></a></code>
-### removeItem
+====removeItem====
-```html
+<pre>html
 <button type="button" onclick="removeItemHandler()">Remove Item</button>
 <ace-bookmark-list id="aceBookmarksList"></ace-bookmark-list>
-```
+</pre>
-```javascript
+<pre>javascript
 function removeItemHandler(){
 	const bookmarkListIns = document.querySelector('#aceBookmarksList');
 	bookmarkListIns.removeItem('caseRecord','recordId');
 }
-```
+</pre>
-<a id="remove-group-method"></a>
+<code><a id="remove-group-method"></a></code>
-### removeGroup
+====removeGroup====
-```html
+<pre>html
 <button type="button" onclick="removeGroupHandler()">Remove Group</button>
 <ace-bookmark-list id="aceBookmarksList"></ace-bookmark-list>
-```
+</pre>
-```javascript
+<pre>javascript
 function removeGroupHandler(){
 	const bookmarkListIns = document.querySelector('#aceBookmarksList');
 	bookmarkListIns.removeGroup('caseRecord');
 }
-```
+</pre>
-<a id="get-list-data-method"></a>
+<code><a id="get-list-data-method"></a></code>
-### getListData
+====getListData====
-```html
+<pre>html
 <button type="button" onclick="getListDataHandler()">Get bookmark list data</button>
 <ace-bookmark-list id="aceBookmarksList"></ace-bookmark-list>
-```
+</pre>
-```javascript
+<pre>javascript
 function getListDataHandler(){
 	const bookmarkListIns = document.querySelector('#aceBookmarksList');
 	bookmarkListIns.getListData();
 }
-```
+</pre>
-<a id="reload-method"></a>
+<code><a id="reload-method"></a></code>
-### reload
+====reload====
-```html
+<pre>html
 <button type="button" onclick="reloadHandler()">Reload list</button>
 <ace-bookmark-list id="aceBookmarksList"></ace-bookmark-list>
-```
+</pre>
-```javascript
+<pre>javascript
 function reloadHandler(){
 	const bookmarkListIns = document.querySelector('#aceBookmarksList');
 	bookmarkListIns.reload();
 }
-```
+</pre>
-<a id="is-item-present"></a>
+<code><a id="is-item-present"></a></code>
-### isItemPresent
+====isItemPresent====
-```html
+<pre>html
 <button type="button" onclick="isItemPresentHandler()">Is Item Present</button>
 <ace-bookmark-list id="aceBookmarksList"></ace-bookmark-list>
-```
+</pre>
-```javascript
+<pre>javascript
 function isItemPresentHandler(){
 	const bookmarkListIns = document.querySelector('#aceBookmarksList');
 	const isItemPresent = bookmarkListIns.isItemPresentHandler('caseRecord','recordId');
 }
-```
+</pre>
-<a id="registerService"></a>
+<code><a id="registerService"></a></code>
-### registerService
+====registerService====
-```javascript
+<pre>javascript
 //Add Group data
 const addGroupInfo = {
@@ Line 342: / Line 376: @@
 //remove group
 aceLib.bookmark.removeGroup('caseRecord');
-```
+</pre>
 '''Important Note''': Only the properties mentioned here are supported.
@@ Line 348: / Line 382: @@
 <br>
+==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.<br>
+'''Selector''': <code><ace-record-attachment></code><br>
+Use the following code to render the component:
+<pre>html
+<ace-record-attachment id="recordAttachmentRef" object-id="cases" record-id="23232234">
+</ace-record-attachment>
+</pre>
+===API===
+Following are the input attributes for ace-record-attachment component:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Attribute !! | Description
+|-
+| object-id <span class="mandatory">*</span> || Provide the object ID. You can obtain the Object ID from Application Tab list.
+|-
+| record-id <span class="mandatory">*</span> || 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. <BR>Available values: 'true'; 'false'. <BR>Default value: 'false'.
+|}
+{{Note| * indicates required attributes.}}
+Following event is dispatched by the ace-record-attachment tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! 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
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Method !! | Description
+|-
+| addNewAttachment() || This method allows you to add an attachment to a corresponding record.
+|}
+===Sample code===
+'''Event'''
+<code><a id="load"></a></code>
+====load====
+<pre>html
+<ace-record-attachment id="attachment" object-id="xxxxx" record-id="xxxxx"></ace-record-attachment>
+</pre>
+<pre>javascript
+ document.querySelector('#attachment').addEventListener('load', (event) => {console.log(event['detail'])});
+</pre>
+====Response====
+<pre>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"
+	}
+]
+</pre>
+'''Component Instance Methods'''
+<code><a id="addNewAttachment"></a></code>
+====addNewAttachment()====
+<pre>html
+<button onclick="openDialog()">Open Attachment Dialog</button>
+<ace-record-attachment id="attachment" object-id="cases"
+    record-id="12455689">
+</ace-record-attachment>
+</pre>
+<pre>javascript
+const recordAttachment = document.querySelector('#attachment');
+function openDialog() {
+    recordAttachment.openAttachDialog();
+}
+</pre>
+<code><a id="deleteattachment"></a></code>
+====deleteAttachment(index)====
+<pre>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>
+</pre>
+<pre>javascript
+	const recordAttachment = document.querySelector('#attachment');
+	function deleteAttachment() {
+     recordAttachment.deleteAttachment(0);
+}
+</pre>
+'''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''': <code><ace-record-process></code>
+Use the following code to render the component:
+<pre>html
+<ace-record-process object-id="cases" record-id="23232234"></ace-record-process>
+</pre>
+===API===
+Following are the input attributes for ace-record-process component:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Attribute !! | Description
+|-
+| object-id <span class="mandatory">*</span> || Provide the object ID.
+|-
+| record-id <span class="mandatory">*</span> || 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:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! 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:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Method!! | Description
+|-
+| reload() || This method reloads the component.
+|}
+===Sample code===
+'''Event'''
+<code><a id="load"></a></code>
+====load====
+<pre>html
+<ace-record-process id="recordProcessRef" object-id="xxx" record-id="xxx"></ace-record-process>
+</pre>
+<pre>javascript
+document.querySelector('#recordProcessRef').addEventListener('load', (event) => {console.log(event['detail'])});
+</pre>
+====Response====
+<pre>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
+		}
+	]
+</pre>
+'''Component Instance Method'''
+<code><a id="reload"></a></code>
+====reload()====
+<pre>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>
+</pre>
+<pre>javascript
+function reloadProcess() {
+	document.getElementById('recordProcessRef').reload();
+}
+</pre>
+'''Note''': Only the properties mentioned here are supported.
+==ace-records-table-view==
+===Overview===
+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''': <code><ace-records-table-view></code>
+Use the following code to render the component:
+<pre>html
+<ace-records-table-view object-id="cases" view-id="c8b87852af5f4828977ab6c9c8bec8fc"></ace-records-table-view>
+</pre>
+===API===
+Following attributes are available for the ace-records-table-view tag.
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Attribute !! | Description
+|-
+| object-id <span class="mandatory">*</span> || Provide the object ID.
+|-
+| view-id <span class="mandatory">*</span> || Provide the view ID.
+|-
+| css-classlist || It helps to specify css class(es) for the tag. Use whitespace to separate multiple css classes.
+|-
+| sorting || Enable or disable sorting by setting a value for this attribute.</br>Possible values: 'true'; 'false'.</br>Default value: 'true'.
+|-
+| sort-by || Provide the field name as value to this attribute to sort the record table. </br>Default value: 'date_modified' </br>Available values: ${field_name}.
+|-
+| sort-order || Provide the order by setting this attribute as (asc/desc).</br>Available Values: 'asc'; 'desc'</br>Default value: 'desc'.
+|-
+| selection-column-title || The value you provide here is shown as the name for the Record Locator column heading title in the table.</br>Default value: "".
+|-
+| hide-selection-column || Use this parameter to hide the Record Locator column. When you hide this column, the entire row acts as a Record Locator.</br>Available Values: 'true'; 'false'</br>Default value: 'false'.
+|}
+{{Note| * indicates required attributes.}}
+Following events are dispatched by the ace-records-table-view tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Event !! | Description
+|-
+| selectrecord || Event dispatched on clicking the record locator link for a record or selecting <b>View details</b> from the Actions menu.
+|-
+| selectrecords || Event dispatched on selecting the checkbox for the record(s). Applicable only for Task and Case Type objects.
+|-
+| load || Event dispatched on loading the component. This provides the list of records of the corresponding view for a particular object.
+|}
+<!-- | total-count            				    | Provide the records count of the view. If the count is more than 25, the paginator will be enabled to move to next or previous set of records, else it will be disabled. In absence of this attribute pagination will be disabled and 'Load More' Option will be enabled. |	 -->
+Following is a tag instance method:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Method !! | Description
+|-
+| reload() || This method reloads the component.
+|}
+===Sample code===
+'''Events'''
+<code><a id="selectrecord"></a></code>
+====selectrecord====
+<pre>html
+<ace-records-table-view id="viewInstance" object-id="cases" view-id="c8b87852af5f4828977ab6c9c8bec8fc">
+</ace-records-table-view>
+</pre>
+<pre>javascript
+const recordTableViewInstance = document.querySelector('#viewInstance');
+recordTableViewInstance.addEventListener('selectrecord', function (event) {
+    // Perform your action here.
+    const recordData = event['detail'];
+    console.log('Record data:', recordData);
+});
+</pre>
+====Response====
+<pre>javascript
+{
+    objectId: "value",
+    recordId: "value",
+    row :listOfRecordSelected: [{
+        field_name1: "field_value",
+		field_name2: "field_value",
+        ....       : ....
+        ....       : ....
+    }]
+}
+</pre>
+<code><a id="selectrecords"></a></code>
+====selectrecords====
+<pre>html
+<ace-records-table-view id="viewInstance" object-id="cases" view-id="c8b87852af5f4828977ab6c9c8bec8fc">
+</ace-records-table-view>
+</pre>
+<pre>javascript
+const recordTableViewInstance = document.querySelector('#viewInstance');
+recordTableViewInstance.addEventListener('selectrecords', function (event) {
+    // Perform your action here.
+    const recordData = event['detail'];
+    console.log('Record data:', recordData);
+});
+</pre>
+====Response====
+<pre>javascript
+{
+    isAllSelected: false,
+    listOfRecordSelected: [{
+        field_name1: "field_value",
+		field_name2: "field_value",
+        ....       : ....
+        ....       : ....
+    }],
+    numberOfRecordsSelected: 1
+}
+</pre>
+<code><a id="load"></a></code>
+====load====
+<pre>html
+<ace-records-table-view id="recordsTableView" object-id="xxx" view-id="xxx"></ace-records-table-view>
+</pre>
+<pre>javascript
+document.querySelector('#recordsTableView').addEventListener('load', (event) => {console.log(event['detail'])});
+</pre>
+====Response====
+<pre>javascript
+{
+    	modified_id: {name: "john john", id: "4f4fed76497d4591924b4f8edaec225a"}
+		owner_id: {name: "john john", id: "4f4fed76497d4591924b4f8edaec225a"}
+		priority_value: "3"
+		priority: "P3"
+		from_name: "john john"
+		object_id: "cases"
+		_graph: {priority: "P3", number: "000068", header_css: "case_new case_id_box", tab_css: "grey_menu"}
+		date_modified: "12 days ago"
+		record_locator: "000068"
+		case_number: "000068"
+		submitter_photo_id: "fd317c1c10a64a56883e937663605cde"
+		id: "1234052308"
+		date_modified_v: "03.10.2020 10:08 PM"
+		notifications: []
+		status: "New"
+}
+</pre>
+'''Component Instance Method'''
+<code><a id="reload"></a></code>
+====reload()====
+<pre>html
+<button onclick="reloadRecordView()">Reload record view table</button>
+<ace-records-table-view id="recordsTableView" object-id="xxx" view-id="xxx"></ace-records-table-view>
+</pre>
+<pre>javascript
+function reloadRecordView() {
+	document.querySelector('#recordsTableView').reload();
+}
+</pre>
+'''Note''': Only the properties mentioned here are supported.
+==ace-record-task-view==
+===Overview===
+Use this component to create a task related for a record, where you can create the following:
+* Single step task
+* Multi step task
+* Task form
+Single step task and each step of the multi-step task are like a quick card of the task form, where you can add minimal information and create the tasks. However, a task form shows all the fields of the task object form. You can complete, approve, or reject a task using this component.
+'''Selector''': <code><ace-record-task-view></code>
+Use the following code to render the component:
+<pre>html
+<ace-record-task-view object-id="cases" record-id="23232234" [safeFlag]="'true'"></ace-record-task-view>
+</pre>
+===API===
+Following attributes are available for the ace-record-task-view component:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Attribute !! | Description
+|-
+| object-id <span class="mandatory">*</span> || Provide the object ID.
+|-
+| record-id <span class="mandatory">*</span> || Provide the record ID.
+|-
+| [safeFlag] || Use this parameter to complete or approve any task depending on the user role. </br>Available Types: 'true'; 'false'</br>Default value: 'false'
+|-
+| hide-header || Use this parameter to hide the Task Header which includes the + icon. </br>Available Types: 'true'; 'false'</br>Default value: 'false'
+|-
+| css-classlist || It helps to specify css class(es) for the tag. Use whitespace to separate multiple css classes.
+|}
+{{Note| * indicates required attributes.}}
+Following events are dispatched for the ace-record-task-view component:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Event !! | Description
+|-
+| taskstatuschange || Event dispatched upon success or failure of a task which is completed, approved, or rejected.
+|-
+| opentaskrecord || Event dispatched upon clicking a task record.
+|-
+| load || Event dispatched on loading the component. This provides the list of tasks for a particular record.
+|}
+Following is a tag instance method:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Method !! | Description
+|-
+| reload() || This method reloads the component.
+|}
+<!-- | show-task-header        				    | Show or hide the task header by setting this attribute. </br> **Possible value:** "true" \| "false".</br>**Default value:** "true"| -->
+===Sample code===
+'''Events'''
+<code><a id="taskstatuschange"></a></code>
+====taskstatuschange====
+<pre>html
+<ace-record-task-view id="recordTaskView" object-id="cases" record-id="407302262"></ace-record-task-view>
+</pre>
+<pre>javascript
+const taskComponent = document.querySelector('#recordTaskView');
+taskComponent.addEventListener('taskstatuschange', function (eventData) {
+	const saveData = eventData['detail'];
+})
+</pre>
+====Response====
+<pre>javascript
+{
+    "message": "Task completed successfully.", "data": {...}
+}
+</pre>
+<code><a id="opentaskrecord"></a></code>
+====opentaskrecord====
+<pre>html
+<ace-record-task-view id="recordTaskView" object-id="cases" record-id="407302262"></ace-record-task-view>
+</pre>
+<pre>javascript
+const taskComponent = document.querySelector('#recordTaskView');
+taskComponent.addEventListener('opentaskrecord', function (eventData) {
+	const taskDetailObj = eventData['detail'];
+})
+</pre>
+====Response====
+<pre>javascript
+{
+    objectId: "tasks",
+    recordId: "758312596"
+}
+</pre>
+<code><a id="load"></a></code>
+====load====
+<pre>html
+<ace-record-task-view id="recordTaskViewRef" object-id="cases" record-id="xxxx"></ace-record-task-view>
+</pre>
+<pre>javascript
+document.querySelector('#recordTaskViewRef').addEventListener('load', (event) => {console.log(event['detail'])});
+</pre>
+====Response====
+<pre>javascript
+{
+	myTasks: [],
+	otherTasks: [
+		{
+			owner_id: {name: "Open Ownership", id: "4"}
+			_canDoTaskActions: "true"
+			subject: "ajslkajslak"
+			date_completed: ""
+			_cmt_reqd: "0"
+			sla_id: ""
+			overdue_flag: "false"
+			type: ""
+			description: ""
+			form_id: ""
+			id: "1743974231"
+			actionExpanded: false
+			completeFocusIndex: 0
+		}
+	],
+	completedTasks: []
+}
+</pre>
+'''Component Instance Method'''
+<code><a id="reload"></a></code>
+====reload()====
+<pre>html
+<button onclick="reloadTask()">Reload Task Component</button>
+<ace-record-task-view id="recordTaskViewRef" object-id="cases" record-id="610149483"></ace-record-task-view>
+</pre>
+<pre>javascript
+function reloadTask() {
+	document.getElementById('recordTaskViewRef').reload();
+}
+</pre>
+'''Note''': Only the properties mentioned here are supported.
+==activity-history==
+===Overview===
+Activity history allows you to show the activities performed on a record. Each entry in the activity history provides details about who performed which action and when. The history shows:
+* Emails sent by the platform user or by the user.
+* Messages received through the Email Channel (generally as a reply to a message that was sent).
+* Private notes added to the record.
+* For Cases, all fields are audited by default. For example, any change to the Status or Priority of a case record, or any other field in the record, is automatically recorded in the case history. You must explicitly enable 'Field Audit' for the non-case Objects, and specific fields are selected for audit.
+'''Selector''': <code><ace-activity-history></code>
+Use the following code to render the component:
+<pre>html
+<ace-activity-history object-id="cases" record-id="23232234"></ace-activity-history>
+</pre>
+===API===
+Following attributes are available for ace-activity-history component:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Attribute !! | Description
+|-
+| object-id <span class="mandatory">*</span> || Provide the object id.
+|-
+| record-id <span class="mandatory">*</span> || 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:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Event !! | Description
+|-
+| load || Event dispatched on loading the component. This provides the list of activities for a related record on loading the component.
+|}
+Following is a tag instance method:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Method !! | Description
+|-
+| reload() || This method reloads the component.
+|}
+'''Note''': Only the properties mentioned here are supported.
+<!-- | is-dropdown-available 				    | Possible values are true,false. If value is true, then it will provide a drop-down to filter the activity history. By default value is false.| -->
+===Sample code===
+'''Event'''
+<code><a id="load"></a></code>
+====load====
+<pre>html
+<ace-activity-history object-id="xxx" record-id="xxx" id="activityHistoryRef"></ace-activity-history>
+</pre>
+<pre>javascript
+document.querySelector('#activityHistoryRef').addEventListener('load', (event) => {console.log(event['detail'])});
+</pre>
+====Response====
+<pre>javascript
+{
+	activityList:
+		[
+			{
+				date: "03.23.2020",
+				data: [
+			{
+				userName: "john john"
+				title: "john john opened this case"
+				description: "000068"
+				viewHTMLLink: 0
+				subjectIcon: ""
+				photoID: "fd317c1c10a64a56883e937663605cde"
+				visibleToCustomer: "0"
+				isDescContainHTMLTags: false
+				id: "1104963726"
+				relativeDate: "12 days ago"
+				activityDate: "03.10.2020"
+				activityTime: "10:08 PM"
+				attachmentArray: ""
+				imageType: "userImage"
+			}
+		]
+	}
+	],
+		isMoreActivityPresent: false
+}
+</pre>
+'''Component Instance Method'''
+<code><a id="reload"></a></code>
+====reload()====
+<pre>html
+<button onclick="reloadActivityHistory()">Reload Activity History</button>
+<ace-activity-history object-id="xxx" record-id="xxx" id="activityHistoryRef"></ace-activity-history>
+</pre>
+<pre>javascript
+const ahElem = document.querySelector('#activityHistoryRef');
+function reloadActivityHistory() {
+   document.getElementById('activityHistoryRef').reload();
+}
+</pre>
+'''Note''': Only the properties mentioned here are supported.
+==app tabs list==
+===Overview===
+It will list down all the objects and web tabs which are configured in users tab preferences.
+'''Selector''': <code><ace-app-tabs-list></code>
+Use below code to render the component:
+<pre>html
+<ace-app-tabs-list></ace-app-tabs-list>
+</pre>
+===API===
+Following attribute is available for ace-app-tabs-list tag.
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Attribute !! | Description
+|-
+| css-classlist || It helps to specify css class(es) for the tag. Multiple css classes should be separated by white space.
+|}
+Following events are dispatched by the ace-app-tabs-list tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Event !! | Description
+|-
+| selectionChange || Dispatch event upon clicking a row.
+|-
+| load || Event dispatched on loading the component. This provides the list of objects for the active application.
+|}
+===Sample code===
+'''Event'''
+<code><a id="selection-change"></a></code>
+====selectionChange====
+<pre>html
+<ace-app-tabs-list id="appTabsInstance"></ace-app-tabs-list>
+</pre>
+<pre>javascript
+const appTabsIns = document.querySelector('#appTabsInstance');
+appTabsIns.addEventListener('selectionChange', function (event) {
+ //Perform your action here
+ const tabData = event['detail'];
+ console.log(tabData);
+});
+</pre>
+====Response====
+<pre>javascript
+{
+    canAdd: "${true/false}",
+    id: "${id}",
+    title: "${title}",
+    uri: "${uri}", // for webtabs
+    webtabname: "${webtab name}", // for webtabs
+}
+</pre>
+<code><a id="load"></a></code>
+====load====
+<pre>html
+<ace-app-tabs-list id="appTabs"></ace-app-tabs-list>
+</pre>
+<pre>javascript
+document.querySelector('#appTabs').addEventListener('load', (event) => {console.log(event['detail'])});
+</pre>
+====Response====
+<pre>javascript
+[
+	{
+		id: "cases"
+		title: "Cases"
+		singularTitle: "Case"
+		canAdd: true
+		type: "object"
+	},
+	{....},
+	{....}
+]
+</pre>
+'''Note''': Only the properties mentioned here are supported.
+==article-component==
+===Overview===
+Use this tag to create an article for any object record.
+This tag maps with the following fields of a record:
+* Article Title
+* Created date
+* Author of the article
+* Content of the article
+<br>
+'''Note''': All these fields can be dynamic or static.
+'''Selector''': <code><ace-article\></code>
+Use the following code to render the component:
+<pre>html
+<ace-article object-id="cases" record-id="973489109"
+content-map="title:subject@author:created_id@date:created_date@content:cases_test_rta_423691479"></ace-article>
+</pre>
+===API===
+Following attributes are available for the ace-article tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Attribute !! | Description
+|-
+| object-id <span class="mandatory">*</span> || Provide the object id.
+|-
+| record-id <span class="mandatory">*</span> || Provide the record id.
+|-
+| content-map <span class="mandatory">*</span> || Provide the list of fields separate with '@'.<br><b>Usage:</b>title:field_name/static_data@author:field_name/static_data@date:field_name/static_data@content:field_name/static_data
+|}
+{{Note| * indicates required attributes.}}
+===API description===
+<code><a id="content-map"></a></code>
+====content-map====
+Provide the list of fields separated with '@'.
+If author and date mapping is not present, the application displays empty values with labels.
+<pre>html
+<ace-article content-map="title:field_name/static_data@author:field_name/static_data@date:field_name/static_data@content:field_name/static_data"></ace-article>
+</pre>
+'''Example''':
+* title:subject@author:created_id@date:created_date@content:cases_test_rta_423691479
+* title:My Article@author:John doe@date:01/01/2020@content:cases_test_rta_423691479
+'''Note''':
+* If the content is mapped to a field other than Rich text area, then user can also set html content to it. For example, if content is mapped to a text area or a text field and its content is <code><i\>my text\</i\></code>, then the content appears with html encoded content like <code><i>my text</i></code>.
+* Only the properties mentioned here are supported.
+==login==
+===Overview===
+You can use the Login Form component for AgileApps tenant login page. You can write your own logic using the success or failure handlers of this component.
+'''Selector''': <code><ace-login-form\></code>
+Use the following code to render the component:
+<pre>html
+<ace-login-form css-classlist="ace-bg-white"></ace-login-form>
+</pre>
+===API===
+Following attribute is available for ace-login-form tag.
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! 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:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Event !! | Description
+|-
+| loginSuccess || Event dispatched upon successful login. Logged in user information is available as an object.
+|-
+| loginError || Event dispatched upon login failure with an error message.
+|}
+===Sample code===
+<code><a id="login-success-event"></a></code>
+====loginSuccess====
+<pre>html
+<ace-login-form id="LoginForm"></ace-login-form>
+</pre>
+<pre>javascript
+document.querySelector('#LoginForm').addEventListener('loginSuccess', function (event) {
+  // Perform your action here.
+  const loggedInUserInfo = event.detail;
+  console.log('login Success', loggedInUserInfo);
+});
+</pre>
+====Response====
+<pre>javascript
+{
+   "id": "${userId}",
+   "profile": {...},
+   "preferences": {...},
+}
+</pre>
+<code><a id="login-failure-event"></a></code>
+====loginError====
+<pre>html
+<ace-login-form id="LoginForm"></ace-login-form>
+</pre>
+<pre>javascript
+document.querySelector('#LoginForm').addEventListener('loginError', function (event) {
+   // perform login error action here.
+   const loginErrorInfo = event.detail;
+   const loginErrorMesssage = loginErrorInfo['__exception_msg__'];
+   console.log('login Error:', loginErrorMesssage);
+});
+</pre>
+====Response====
+<pre>javascript
+{
+   __exception_msg__: "${Login error message}"
+}
+</pre>
+'''Note''': Only the properties mentioned here are supported.
+==Logout==
+===Overview===
+Use the Logout component to get the logout functionality from the current login account. This component has the following features:
+* It is like a placeholder with certain functionality.
+* You can inject elements into this component to get customized content.
+* It fits as per the inside content.
+'''Selector''': <code><ace-logout\></code>
+Use the following code to render the component:
+<pre>html
+<ace-logout>
+	<button>Logout</button>
+</ace-logout>
+</pre>
+===API===
+Following event is dispatched by the ace-logout tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Event !! | Description
+|-
+| logoutEvent || Event dispatch on logout.
+|}
+<!-- It can be subscribed for any additional action (but it does not provide any response object). -->
+===Sample code===
+<code><a id="logout-event"></a></code>
+====logoutEvent====
+<pre>html
+<ace-logout id="acelogoutTag">
+    <button type="buttton">Logout</button>
+</ace-logout>
+</pre>
+<pre>javascript
+var logoutElement = document.querySelector('#acelogoutTag');
+logoutElement.addEventListener('logoutEvent', function (event){
+	// perform any action on trigger of this event.
+});
+</pre>
+====Response====
+<pre>javascript
+{
+	status: "success" | "failure"
+}
+</pre>
+'''Note''': Only the properties mentioned here are supported.
+<!-- if(e['detail']['status'] === 'success') {
+	   // perform logout success action here
+	   console.log('Logout successful');
+	} else if(e['detail']['status'] === 'failure') {
+	   // perform logout error action here
+	   console.log('Logout failed');
+} -->
+==notes editor==
+===Overview===
+Notes editor may be Private notes or Email messages. You can create these when you view a case record, or some other record.
+The differences are:
+* A Private Note does not result in an email being sent to anyone.
+* When internal users (normal users who log into the platform) view a record, they can see all email messages and notes recorded in the history. Their privileges and team memberships may or may not allow them to see the record. However, if they can see it, they have access to its entire history).
+** For the Case object, email responses are stored in the history, as well as sent messages.
+** For other objects, only sent messages are recorded.
+* When external users (users accessing records using the Service Portal) view a record, they see only those messages in the record history in which they were a sender or a recipient.
+'''Selector''': <code><ace-notes-editor\></code>
+Use the following code to render the component:
+<pre>html
+<ace-notes-editor object-id="cases" record-id="23334543"></ace-notes-editor>
+</pre>
+===API===
+Following attributes are available for ace-notes-editor tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Attribute !! | Description
+|-
+| object-id <span class="mandatory">*</span> || Provide the object ID.
+|-
+| record-id <span class="mandatory">*</span> || 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-notes-editor tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Event !! | Description
+|-
+| saveNote || This provides the success or failure message with data object on saving the notes.
+|}
+<!-- Below are the methods provided by notes-editor:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Method !! | Description
+|-
+| saveNote() || This is used to save the notes editor changes.
+|-
+| resetNotes() || This is used to get the notes editor reset or reload or cancel.
+|}
+ -->
+<!-- | post-as || Indicates the notes is email type or private note type.
+|-
+| action-panel || This is the location for the action panel of the Notes Editor.
+|-
+| action-button || This is the location for the action button of the Notes Editor.
+|-
+| inputContent(noteObj) || This is used to save the record. Here, noteObj is a parameter of type object. It should have 2 properties 'subject' and 'content'.
+ -->
+<!--
+===API details===
+<code><a id="action-button"></a></code>
+====action-button====
+Indicates the position for the Notes-editor's action buttons. Default value: 'start'
+It has six states:
+* "start" = displays the SAVE and CANCEL button on the left side.
+* "center" = displays the SAVE and CANCEL button in the center.
+* "end" = displays the SAVE and CANCEL button on the right side.
+* "between" = displays the SAVE and CANCEL button between the left side and the right side.
+* "around" = displays the SAVE and CANCEL button with a space.
+* "evenly" = displays the SAVE and CANCEL button with equal space. -->
+===Sample code===
+<code><a id="save-note-event"></a></code>
+====saveNote====
+<pre>html
+<ace-notes-editor id="noteseditor" object-id="cases" record-id="23334543"></ace-notes-editor>
+</pre>
+<pre>javascript
+    const notesEditor = document.querySelector('#noteseditor');
+    notesEditor.addEventListener('saveNote', function (event) {
+        // Perform action after save a note.
+        const saveNoteData = event['detail'];
+    });
+</pre>
+====Response====
+<pre>javascript
+{
+	message: "success",
+	data: {
+        objectId: "cases",
+        recordId: "1234567890",
+        noteType: "Private Note",
+        attachedFileName: [],
+        emailRecipients: [],
+        noteSubject: "",
+        noteText: "<p>Abcdef</p>"
+    }
+}
+</pre>
+'''Note''': Only the properties mentioned here are supported.
+<!--
+<a id="input-content-method"></a>
+====inputContent(noteObj)====
+<pre>html
+<ace-notes-editor object-id="cases" record-id="12345" id="notesEditor"></ace-notes-editor>
+<button type="button" id="update-notes-editor">Update the field data</button>
+</pre>
+<pre>javascript
+    const notesEditor = document.querySelector('#notesEditor');
+    const upateButton = document.querySelector('#update-notes-editor');
+    updateButton.addEventListener('click', function() {
+        const noteObj = {
+            subject: 'My First Note',
+            content: 'Hello world !!!'
+        };
+        notesEditor.inputContent(noteObj);
+    });
+</pre>
+<a id="save-note-method"></a>
+====saveNote()====
+<pre>html
+<button id="save-notes-button">SAVE</button>
+<ace-notes-editor id="notes-editor" object-id="cases" record-id="1026401569"></ace-notes-editor>
+</pre>
+<pre>javascript
+        const notesEditorElement = document.querySelector('#notes-editor');
+        const noteSaveButton = document.querySelector('#save-notes-button');
+        noteSaveButton.addEventListener('click', function() {
+            notesEditorElement.saveNotes();
+        });
+</pre>
+<a id="cancel-note-method"></a>
+====cancelNote()====
+<pre>html
+<button type="button" id="cancel-notes-button">Cancel</button>
+<ace-notes-editor id="ace-notes-editor" object-id="cases" record-id="1233456" action-panel="hide" action-button="evenly"></ace-notes-editor>
+</pre>
+<pre>javascript
+    const notesEditorElement = document.querySelector('#ace-notes-editor');
+    const noteCancelButton = document.querySelector('#cancel-notes-button');
+     noteCancelButton.addEventListener('click', function() {
+        notesEditorElement.savresetNoteseNotes();
+    });
+</pre>
+-->
+==object views list==
+===Overview===
+Use this component to list all the views inside an object with record count.
+'''Selector''': <code><ace-object-views-list\></code>
+Use the following code to render the component:
+<pre>html
+<ace-object-views-list object-id="cases"></ace-object-views-list>
+</pre>
+===API===
+Following attributes are available for ace-object-views-list tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Attribute !! | Description
+|-
+| object-id <span class="mandatory">*</span> || Provide the object 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 events are dispatched by ace-object-views-list tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Event !! | Description
+|-
+| selectionChange || Event dispatched on view selection.
+|-
+| load || Event dispatched on loading the component. This provides you the list of views for the related object.
+|}
+Following is a tag instance method:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Method !! | Description
+|-
+| reload || This method reloads the component.
+|}
+===Sample code===
+'''Events'''
+<code><a id="selection-change"></a></code>
+====selectionChange====
+<pre>html
+<ace-object-views-list object-id="cases" id="listOfViews"></ace-object-views-list>
+</pre>
+<pre>javascript
+	const objectViewList = document.querySelector('#listOfViews');
+	objectViewList.addEventListener('selectionChange', function(event){
+		// Perform action on selection
+		const recordData = event['detail'];
+	});
+</pre>
+====Response====
+<pre>javascript
+{
+	count: "12",
+	default: "0",
+	id: "cases",
+	name: "All Active Cases",
+	sortBy: "last_activity",
+	sortOrder: "desc"
+}
+</pre>
+<code><a id="load"></a></code>
+====load====
+<pre>html
+<ace-object-views-list object-id="cases" id="objectViewsRef"></ace-object-views-list>
+</pre>
+<pre>javascript
+document.querySelector('#objectViewsRef').addEventListener('load', (event) => {console.log(event['detail'])});
+</pre>
+====Response====
+<pre>javascript
+[
+	{
+	default: "0"
+	id: "00d76e74f7754a8881608cf935fd54e7"
+	name: "All Active Cases"
+	sortBy: "last_activity"
+	sortOrder: "desc"
+	count: "5"
+	},
+	{
+	default: "1"
+	id: "5d5032e48c8041348e2b8fc0a1a1ddf2"
+	name: "All Cases"
+	sortBy: "date_modified"
+	sortOrder: "desc"
+	count: "6"
+	}
+]
+</pre>
+'''Component Instance Method'''
+<code><a id="reload"></a></code>
+===reload()====
+<pre>html
+<button onclick="reloadObjectView()">Reload Object View</button>
+<ace-object-views-list object-id="xxxx" id="objectViewsRef"></ace-object-views-list>
+</pre>
+<pre>javascript
+function reloadObjectView() {
+	document.getElementById('objectViewsRef').reload();
+}
+</pre>
+'''Note''': Only the properties mentioned here are supported.
+==owner assignment==
+===Overview===
+Use this component to assign a record to a user or a team or to assign the record to yourself. It auto suggests the names while typing in the Assignee field. The <b>Assign to me</b> link assigns the record to the logged-in (current) user.
+'''Selector''': <code><ace-change-ownership\></code>
+Use the following code to render the component
+<pre>html
+<ace-change-ownership object-id="cases" record-id="1554361346"></ace-change-ownership>
+</pre>
+===API===
+'''Events'''
+Following attributes are available for ace-change-ownership tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Attribute !! | Description
+|-
+| object-id <span class="mandatory">*</span> || Provide the object id.
+|-
+| record-id <span class="mandatory">*</span> || Provide the record id.
+|-
+| show-users || It decides whether to show the users list or not. <br>Available values: 'true'; 'false'. <br>Default value: 'true'
+|-
+| show-teams || It decides whether to show the list of teams or not. <br>Available values: 'true'; 'false'. <br>Default value: 'true'
+|-
+| show-claim || It decides whether to show the ''Assign to me'' link or not. <br>Available values: 'true'; 'false'. <br>Default value: 'true'
+|-
+| css-classlist || It helps to specify css class(es) for the tag. Use whitespace to separate multiple css classes.
+|}
+{{Note| * indicates required attributes.}}
+Following events are dispatched by the ace-change-ownership tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Event !! | Description
+|-
+| assignrecord || Event dispatched on owner change.
+|-
+| load || Event dispatched on loading the component. This event provides the user with the details of the assigned user for the particular record.
+|}
+<!-- Following are the tag instance methods:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Method !! | Description
+|-
+| assignRecord() || Use this method to assign the record to a user or a team only.
+|-
+| claimRecord() || Use this method to claim the record to the currently active user.
+|} -->
+===Sample code===
+'''Events'''
+<code><a id="assignrecord"></a></code>
+====assignrecord====
+<pre>html
+<ace-change-ownership id="ownerAssign" object-id="cases" record-id="1554361346" show-users="true" show-claim="true"></ace-change-ownership>
+</pre>
+<pre>javascript
+const ownerComponent = document.querySelector('#ownerAssign');
+ownerComponent.addEventListener('assignrecord', function (event) {
+    // perform the action after assign record.
+    console.log(event['detail']);
+});
+</pre>
+====Response====
+<pre>javascript
+{
+    message: "Record assigned successfully.",
+    data: "${recordId}"
+}
+</pre>
+<code><a id="load"></a></code>
+====load====
+<pre>html
+<ace-change-ownership id="ownerAssignRef" object-id="xxxx" record-id="xxxx"></ace-change-ownership>
+</pre>
+<pre>javascript
+document.getElementById('ownerAssignRef').addEventListener('load', (event) => {console.log(event['detail']);
+});
+</pre>
+====Response====
+<pre>javascript
+{
+	name: "john john"
+	thumb_photo_id: "fd317c1c10a64a56883e937663605cde"
+	id: "4f4fed76497d4591924b4f8edaec225a"
+	owner_type: "U"
+	email: "johnjohn@softwareag.com"
+}
+</pre>
+<!--**Component Instance Methods**
+<a id="assigned-record-method"></a>
+### assignRecord()
+```html
+<ace-owner-assign id="ownerAssign" object-id="cases" record-id="1554361346"></ace-owner-assign>
+<button id="assign-record">Assign</button>
+```
+```javascript
+		const assignButton = document.querySelector('#assign-record');
+		const ownerComponent = document.querySelector('#ownerAssign');
+		assignButton.addEventListener('click', function (event) {
+   		// Assign record.
+  		 ownerComponent.assignRecord()
+});
+```
+<a id="claim-record-method"></a>
+### claimRecord()
+```html
+<ace-owner-assign id="ownerAssign" object-id="cases" record-id="1554361346"></ace-owner-assign>
+<button id="claim-record">Claim</button>
+```
+```javascript
+const claimButton = document.querySelector('#claim-record');
+const ownerComponent = document.querySelector('#ownerAssign');
+claimButton.addEventListener('click', function (event) {
+	ownerComponent.claimRecord()
+});
+```
+-->
+'''Note''': Only the properties mentioned here are supported.
+==record actions==
+===Overview===
+Use this component to list all the record actions such as Basic (Delete, Merge, and Print), Macros and Custom Form Actions (CFA).
+'''Selector''': <code><ace-record-actions\></code>
+Use the following code to render the component:
+<pre>html
+<ace-record-actions object-id="cases" record-id="810599828"></ace-record-actions>
+</pre>
+===API===
+Following attributes are available for ace-record-actions tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Attribute !! | Description
+|-
+| object-id <span class="mandatory">*</span> || Provide the object ID.
+|-
+| record-id <span class="mandatory">*</span> || Provide the record ID.
+|-
+| css-classlist || It helps to specify css class(es) for the tag. Use whitespace to separate multiple css classes.
+|-
+| types || Use this parameter to display the various action types in a group.</br> Available types: "BASIC"; "MACRO"; "CFA"</br> Default value: All types are listed by default.
+|-
+| hide-actions || Provide the actions IDs that you want to hide from the list of actions. Use comma separated values while specifying the IDs. IDs for basic actions are as follows:</br> > Delete: 1 </br> > Merge: 3 </br> > Print: 12 </br>For example, hide-actions = "1, 3"
+|-
+| confirm-actions || Provide the actions IDs for which you want to show the confirmation dialog box. By default, it is always enabled for the '''Delete''' action. This is applicable for the following types of actions:</br> > Macro </br> > Custom Form Actions excluding Invoke page.
+|}
+{{Note| * indicates required attributes.}}
+Following events are dispatched by the ace-record-actions tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Event !! | Description
+|-
+| executedaction || Event dispatched on executing the action. This provides the JSON object with status information for the executed action.
+|-
+| load || Event dispatched on loading the component. This provides the list of actions for the corresponding record.
+|}
+<!-- | [hide-action-types](#hide-action-types) 	| Provide the action types which are to be hidden with comma separated values. </br><b>Available values:</b> 'Standard' \|'Macros'\|'CFA'.|
+| [hide-options](#hide-options)				| Provide the action display names that are to be hidden with comma separated values. |
+| [show-confirm-dialog](#show-confirm-dialog)| Show confirm dialog box before executing any action. </br><b>Available values:</b> 'true'\|'false''. </br><b>Default value:</b> 'false'.| -->
+===Sample code===
+'''Events'''
+<code><a id="executedaction"></a></code>
+====executedaction====
+<pre>html
+<ace-record-actions id="recordActionsRef" object-id="cases" record-id="810599828"></ace-record-actions>
+</pre>
+<pre>javascript
+	const recordActions= document.querySelector('#recordActionsRef');
+	recordActions.addEventListener('executedaction', function (event) {
+	// perform the event after execute form action
+    console.log(event['detail']);
+});
+</pre>
+====Response====
+<pre>javascript
+{
+	id: "6090657b58ca4766a2e500964eceb6c9",
+	name: "Macro Send Email",
+	status: "Success"
+}
+</pre>
+<code><a id="load"></a></code>
+====load====
+<pre>html
+<ace-record-actions id="actionsRef" object-id="xxxx" record-id="xxxx"></ace-record-actions>
+</pre>
+<pre>javascript
+ document.querySelector('#actionsRef').addEventListener('load', (event) => {console.log(event['detail'])});
+</pre>
+====Response====
+<pre>javascript
+{
+	standard: [
+	{name: "delete", type: "standard", title: "Delete", id: "1"},
+	{name: "merge", type: "standard", title: "Merge", id: "3"},
+	{name: "print", title: "Print", type: "standard", id: "12"}
+	],
+	macros: [],
+	CFA: []
+}
+</pre>
+'''Note''': Only the properties mentioned here are supported.
+==record form==
+===Overview===
+Use the Record Form tag to create or update a record for a supported object in the AgileApps application.
+'''Selector''': <code><ace-record-form\></code>
+Use the following code to render the component:
+<pre>html
+<ace-record-form object-id="cases" record-id="43334342"></ace-record-form>
+</pre>
+===API===
+Following attributes are available for the ace-record-form tag.
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Attribute !! | Description
+|-
+| object-id <span class="mandatory">*</span> || Provide the object ID.
+|-
+| record-id <span class="mandatory">*</span> || Provide the record ID. In case of a new record use "-1"
+|-
+| css-classlist || It helps to specify css class(es) for the tag. Use whitespace to separate multiple css classes.
+|-
+| layout-type || Display mode for form sections</br> Available values: 'accordion'; 'tab'. </br> Default value: 'tab'
+|-
+| layout-id	|| This is the layout ID for a form. You can obtain the form layout from the Designer screen. To view the form layout, go to '''Settings > Customization > Objects''' > {object} > '''Forms''' > {form}.
+|-
+| is-readonly || When this value is set to "true", the form appears in the read-only mode. If set to "false", then the form is editable.</br> Default value: 'false'
+|}
+{{Note| * indicates required attributes.}}
+Following events are dispatched by the ace-record-form tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Event !! | Description
+|-
+| load || Event dispatched on loading a form.
+|-
+| save || Event dispatched on saving a form.
+|-
+| reset || Event dispatched on resetting a form.
+|-
+| openlookuprecord || Event dispatched on clicking the lookup field navigation link.
+|}
+Following are the tag instance methods:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Method !! | Description
+|-
+| saveRecord() || Performs the save action for the form instance.
+|-
+| resetRecord() || Performs the reset action for the form instance.
+|-
+| getRecordData() || Gets the record data from the form instance.
+|-
+| setRecordData(object) || Sets the record data to the form instance.
+|-
+| isValid() || Checks if the record form is valid or not.
+|}
+<!-- | field-display-mode            			| These are the different display modes for the field. In view mode fields are not //editable. </br><b>Available values: </b> '' \|  'view'. </br><b>Default value: </b> ''|
+| form-display-mode						    | These are the different display modes for the form. In print mode display sections in expansion panel </br><b>Available values: </b> '' \| 'printmode'. </br><b>Default value:</b> ''|	|
+| show-spinner-on-load						| TIf value is true then It will show the spinner on load of the form. </br><b>Available values: </b> 'true' \| 'false'. </br><b>Default value:</b> 'false'|
+| record-form-extras	                    | Record form extras should be a string and will accept key value pairs seperated with colon (:) and properties will be seperate with comma. <br> **Usage**: record-form-extras=“skipLocationChange:true” <br> Here skipLocationChange is true is used to prevent the navigation of lookup field and it will give the information of selected record in the lookup field.| -->
+<!--
+| navigateToLookupRecord | On click on the lookup field navigation link will give the selected record information. record-form-extras input should have skipLocationChange:true  |[Sample code](#navigate-To-LookupRecord)|
+-->
+<!--
+| isRecordFormValid()    | This method is useful to verify whether the form can be submitted or not. This will return a Boolean value.  |[Sample code](#is-valid-form) |
+-->
+===Sample code===
+'''Events'''
+<code><a id="load"></a></code>
+====load====
+<pre>html
+<ace-record-form object-id="cases" record-id="43334342" id="recordFormId">
+</ace-record-form>
+</pre>
+<pre>javascript
+const rfEle = document.querySelector('#recordFormId');
+rfEle.addEventListener('load', function (eventData) {
+ const onLoadData = eventData['detail'];
+ })
+</pre>
+====Response====
+<pre>javascript
+{
+	id: "${record_id}",
+	field_name: "field_value",
+	field_name1: "field_value",
+	...       :  ...
+	...       :  ...
+}
+</pre>
+<code><a id="save"></a></code>
+====save====
+<pre>html
+<ace-record-form object-id="cases" record-id="43334342" id="recordFormId">
+</ace-record-form>
+</pre>
+<pre>javascript
+const rfEle = document.querySelector('#recordFormId');
+rfEle.addEventListener('save', function (eventData) {
+ const onSaveData = eventData['detail'];
+ })
+</pre>
+====Response====
+<pre>javascript
+{
+	status: "success",
+	data   :  {
+    	id: "${record_id}",
+	    field_name: "field_value",
+	    field_name1: "field_value",
+	    ...       :  ...
+	    ...       :  ...
+    }
+}
+</pre>
+<code><a id="reset"></a></code>
+====reset====
+<pre>html
+<ace-record-form object-id="cases" record-id="43334342" id="recordFormId">
+</ace-record-form>
+</pre>
+<pre>javascript
+const rfEle = document.querySelector('#recordFormId');
+rfEle.addEventListener('reset', function (eventData) {
+ const onResetData = eventData['detail'];
+ })
+</pre>
+====Response====
+<pre>javascript
+{
+	id: "${record_id}",
+	field_name: "field_value",
+	field_name1: "field_value",
+	field_name2: "field_value",
+	...       :  ...
+	...       :  ...
+}
+</pre>
+<code><a id="openlookuprecord"></a></code>
+====openlookuprecord====
+<pre>html
+<ace-record-form object-id="cases" record-id="43334342" id="recordFormId">
+</ace-record-form>
+</pre>
+<pre>javascript
+const rfEle = document.querySelector('#recordFormId');
+rfEleme.addEventListener('openlookuprecord', function (eventData) {
+       const lookupRecordInfo = eventData['detail'];
+});
+</pre>
+====Response====
+<pre>javascript
+{
+objectId: "${object_id}",
+recordId: "${record_id}",
+row: {
+        id: "${record_id}",
+        field_name: "field_value",
+        field_name1: "field_value",
+        ...       :  ...
+        ...       :  ...
+    }
+}
+</pre>
+'''Component Instance Methods'''
+<code><a id="save-record-method"></a></code>
+====saveRecord()====
+<pre>html
+<button onclick="saveRecordFormInstance()">Save Form</button>
+<ace-record-form object-id="cases" record-id="-1" id="formInstance"></ace-record-form>
+</pre>
+<pre>javascript
+const recordFormIns = document.querySelector('#formInstance');
+function saveRecordFormInstance(){
+	recordFormIns.saveRecord();
+}
+</pre>
+<code><a id="reset-record-method"></a></code>
+====resetRecord()====
+<pre>html
+<button type="button" onclick="cancelChanges()">Reset</button>
+<ace-record-form object-id="cases" record-id="1026401569" id="formInstance"></ace-record-form>
+</pre>
+<pre>javascript
+function cancelChanges(){
+	const recordFormIns = document.querySelector('#formInstance');
+	recordFormIns.resetRecord();
+}
+</pre>
+<code><a id="get-record-data"></a></code>
+====getRecordData()====
+<pre>html
+<button type="button" class="btn" onclick="getRecordDataFromFormInstance()">Get Data</button>
+<ace-record-form object-id="cases" record-id="1026401569" id="newformInstance"></ace-record-form>
+</pre>
+<pre>javascript
+ const recordFormIns = document.querySelector('#newformInstance');
+ function getRecordDataFromFormInstance(){
+    const sourceObject = recordFormIns.getRecordData();
+ }
+</pre>
+<code><a id="set-record-data"></a></code>
+====setRecordData(object)====
+<pre>html
+<button type="button" onclick="setRecordDataToFormInstance()">Set record data</button>
+<ace-record-form object-id="cases" record-id="1026401569" id="newformInstance"></ace-record-form>
+</pre>
+<pre>javascript
+const recordFormIns = document.querySelector('#newformInstance');
+function setRecordDataToFormInstance(){
+    const sourceObject = recordFormIns.getRecordData();
+    recordFormIns.setRecordData(sourceObject);
+ }
+</pre>
+====Input Object====
+<pre>javascript
+{
+	id: "${record_id}",
+	field_name: "field_value",
+	field_name1: "field_value",
+	...       :  ...
+	...       :  ...
+}
+</pre>
+<code><a id="is-valid"></a></code>
+====isValid()====
+<pre>html
+<button type="button" onclick="saveRecord()">Save</button>
+<ace-record-form object-id="cases" record-id="-1" id="rfId">
+</ace-record-form>
+</pre>
+<pre>javascript
+const rfId = document.querySelector('#rfId');
+ function saveRecord(){
+// submit the record when it does not have errors.
+ if(rfId.isValid(){
+    rfId.saveRecord();
+ }
+}
+</pre>
+'''Note''': Only the properties mentioned here are supported.
+<!--
+<a id="navigate-To-LookupRecord"></a>
+### navigateToLookupRecord
+```html
+<ace-record-form object-id="cases" record-id="43334342" id="formInstance"></ace-record-form>
+```
+```javascript
+const rfEle = document.querySelector('#formInstance');
+rfEleme.addEventListener('navigateToLookupRecord', function (event) {
+	// Perform your action here.
+    const lookupRecordInfo = event['detail'];
+	console.log('login Success', loggedInUserInfo);
+});
+```
+#### Response:
+```javascript
+{
+	ObjectId: "cases",
+	RecordId: "${recordID}",
+	Row: {
+        field_name: "field_value",
+	    ...       :  ...
+	    ...       :  ...
+    }
+}
+```
+<a id="is-valid-form"></a>
+### isRecordFormValid()
+```html
+<button type="button" class="btn" onclick="saveRecordFormInstance()">Save</button>
+<ace-record-form object-id="cases" record-id="-1" id="rfId"></ace-record-form>
+```
+```javascript
+const rfId = document.querySelector('#rfId');
+ function saveRecordFormInstance() {
+    if(rfId.isRecordFormValid(){
+    // submit the record when it does not have errors.
+    rfId.saveRecord();
+ }
+}
+```
+-->
+==related info==
+===Overview===
+A related record is a record which is linked to the current record through a lookup field. While viewing a record, you can see the related records associated with it. You can add more related records by using this tag.
+'''Selector''': <code><ace-related-info\></code>
+Use the following code to render the component:
+<pre>html
+<ace-related-info object-id="cases" record-id="801173855"></ace-related-info>
+</pre>
+===API===
+Following attributes are available for ace-related-info tag.
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Attribute !! | Description
+|-
+| object-id <span class="mandatory">*</span> || Provide the object id.
+|-
+| record-id <span class="mandatory">*</span> || Provide the record id.
+|-
+| css-classlist || It helps to specify css class(es) for the tag. Multiple css classes should be separated by white space.
+|}
+{{Note| * indicates required attributes.}}
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Event !! | Description
+|-
+| selectrecord || Event dispatched on selecting a record. This will give the selected record information from related records table.
+|-
+| load || Event dispatched on loading a component. This provides the list of related information for a particular record.
+|}
+===Sample code===
+'''Events'''
+<code><a id="selectrecord"></a></code>
+====selectrecord====
+<pre>html
+<ace-related-info id="relatedObj" object-id="cases" record-id="131054879" css-classlist="ace-bg-white"></ace-related-info>
+</pre>
+<pre>javascript
+const relatedObjElem = document.querySelector('#relatedObj');
+relatedObjElem.addEventListener('selectrecord', function (eventData) {
+const currentRecord = eventData['detail'];
+});
+</pre>
+====Response====
+<pre>javascript
+{
+relatedObjectId: "a024f93ebd53447fa80dc5d0ed958057",
+rowId: "1559589289",
+rowInfo: {
+	subject: "sub276",
+	text_field: "",
+	 id: "1559589289"
+	}
+}
+</pre>
+<code><a id="load"></a></code>
+====load====
+<pre>html
+<ace-related-info id="relatedObj" object-id="cases" record-id="xxxx"></ace-related-info>
+</pre>
+<pre>javascript
+document.querySelector('#relatedObj').addEventListener('load', (event) => {console.log(event['detail'])});
+</pre>
+====Response====
+<pre>javascript
+	[
+		{
+		city: ""
+		phone: ""
+		description: ""
+		id: "1784450029"
+		object_id: {name: "accounts", id: "accounts"}
+		},
+		{
+		id: "1048688946"
+		test1: "dsj"
+		emailf: ""
+		object_id: {name: "Object_1", id: "487ceddfe6644751a6fdfe90e281d477"}
+		}
+	]
+</pre>
+'''Note''': Only the properties mentioned here are supported.
+==role switcher==
+===Overview===
+Use this component to list all the roles configured for the application users to switch their role.
+'''Selector''': <code><ace-role-switcher\></code>
+Use the following code to render the component:
+<pre>html
+<ace-role-switcher></ace-role-switcher>
+</pre>
+===API===
+Following attributes are available for the ace-role-switcher component.
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Attribute !! | Description
+|-
+| type || Use this parameter to set how you want to display the user roles. Pass this value inside the component.</br> Available types: "list"; "dropdown"</br> Defaut value: "list"
+|-
+| css-classlist || It helps to specify css class(es) for the tag. Use whitespace to separate multiple css classes.
+|}
+<!-- **Note: <span class="mandatory">*</span> indicates as required attributes** -->
+Following events are dispatched by the ace-role-switcher tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Event !! | Description
+|-
+| rolechange || Event dispatched upon role change.
+|-
+| load || Event dispatched on loading the component. This event provides you the list of roles of an active user.
+|}
+<!-- | display-type								| Display mode for listing user roles.<br><b>Available values:</b> 'list' \| 'dropdown'<br><b>Default value:</b> 'list'| -->
+===Sample code===
+'''Events'''
+<code><a id="rolechange"></a></code>
+====rolechange====
+<pre>html
+<ace-role-switcher id="roleSwitcherIns"></ace-role-switcher>
+</pre>
+<pre>javascript
+const roleSwitcher = document.querySelector('#roleSwitcherIns');
+roleSwitcher.addEventListener('rolechange', function (event) {
+   // Perform your action here.
+   const currentRoleInfo = event['detail'];
+   console.log('User role is changed', currentRoleInfo);
+});
+</pre>
+====Response====
+<pre>javascript
+{
+   roleId: "49a47b32804c4932a252c7c36c95999e",
+   roleName: "Manager"
+}
+</pre>
+<code><a id="load"></a></code>
+====load====
+<pre>html
+<ace-role-switcher id="roleSwitch" display-type="list"></ace-role-switcher>
+</pre>
+<pre>javascript
+ document.querySelector('#roleSwitch').addEventListener('load', (event) => {console.log(event['detail'])});
+</pre>
+====Response====
+<pre>javascript
+{
+	activeRole: {name: 'Agent', id: 'XXXXXXXXXXXXXXXXXXX'},
+	roleList: [
+		{name: 'Agent', id: 'XXXXXXXXXXXXXXXXXXX'},
+		{name: 'Manager', id: 'XXXXXXXXXXXXXXXXX'},
+		{name: 'Admin', id: 'XXXXXXXXXXXXXXXXXXX'},
+		{name: 'My Role', id: 'XXXXXXXXXXXXXXXXXX'}
+	]
+}
+</pre>
+'''Note''': Only the properties mentioned here are supported.
+==table grid==
+===Overview===
+Use this component to display the list of object records in a table. Some aspects of this table grid component are as follows:
+*	It initially has 25 records. You can configure this value.
+*	It supports pagination.
+*	It has filters where you can provide an input.
+*	You can sort the grid headers with or without a filter.
+*	When you search without providing any input, it resets the grid result.
+'''Selector''': <code><ace-table-grid\></code>
+Use the following code to render the component:
+<pre>html
+<ace-table-grid object-id="cases"></ace-table-grid>
+</pre>
+===API===
+Following attributes are available for ace-table-grid tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Attribute !! | Description
+|-
+| object-id <span class="mandatory">*</span> || Provide the object ID.
+|-
+| column-meta || Provide the information for the list of columns. The field metadata is separated by '@\|@' in the following manner.<br>Format: field1_name:field1_Label:field_type:IsSortable:isHidden@\|@field2_name:field2_Labe2:field_type:isSortable:isHidden<br>Usage: subject:Subject:STRING:true:false@\|@description:Description:STRING:false:true@\|@status:Status:PICK_LIST:false:true<br>Here, you can sort the subject column and is not hidden. The description column is hidden.
+|-
+| css-classlist || It helps to specify css class(es) for the tag. Use whitespace to separate the multiple css classes.
+|-
+| page-size || Provide the number of records to display per page. The value of page-size attribute should be a positive integer.<br>Default value: 25
+|-
+| page-index || This parameters allows you to set the page index which defines which group of records are to be shown in the table. For example, if you provide a value of 2 for page-index, the user will see the 3rd page of records as the page-index value starts from 0. The value of page-index attribute should be a positive integer.<br> Default value: 0
+|-
+| display-search || This allows the user to provide a filter (search) functionality for the grid data.<br> Available values: true; false<br>Default value: false
+|-
+| display-macros || When this value is set to "true", you can show the extra column in the table which is the Action column. In this column, you can run the macro action assigned to the record in a particular row.<br>Available values: true; false<br> Default value: false
+|-
+| expandable-row || When this value is set to "true", you can provide an expansion for a row to show more details for any record. At any time, you can expand only one table row.<br> Available values: true; false<br> Default value: false
+|-
+| hide-selection-column || When this value is set to "true", you can hide the record locator column from the table. By default, the record locator column is displayed on the table.
+|-
+| selection-column-title || This parameter allows you to change the name of the record locator column in the table.
+|-
+| pagination || This allows the user to show or hide the paginator.<br> Available values: true; false<br> Default value: true
+|-
+| sort-by || This sorts the data based on the field name you provide.<br> Default value: date_modified
+|-
+| sort-order || It sets the sorting order for the fields you provide.<br> Available values: asc; desc<br> Default value: desc
+|-
+| filter-query || This is used to set a filter initially.<br> Usage: filter-query="subject equals account"<br>This shows all the records whose subject field value matches the "account"
+|-
+| paginator-position || This sets the pagination position to either the top or the bottom of the table.<br> Available values: top; bottom<br> Default value: top
+|-
+| multi-select || User can select multiple records.<br> Available values: true; false<br> Default value: false
+|}
+{{Note| * indicates required attributes.}}
+Following events are dispatched by the ace-table-grid tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Event !! | Description
+|-
+| selectrecord || Event dispatched on selecting a record using a record locator.
+|-
+| selectrecords || Event dispatched on selecting multiple records using a check box.
+|-
+| pagesortchange || Event dispatched on sorting of a column or a page change.
+|-
+| togglerow || Event dispatched on expanding or collapsing a row.
+|-
+| macroexecution || Event dispatched on executing a macro action for a record.
+|-
+| load || Event dispatched on loading a component.
+|}
+Following is a tag instance method:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Method !! | Description
+|-
+| reload() || This method reloads the component.
+|}
+<!--
+|is-macro-action-shown						| This will show the extra column in table i.e. Action column. where user can run the macros which are applied for that record.<br><b>Available values:</b> true \| false<br><b>Default value:</b> false|
+|is-toggle-row								| This will provide the expansion of the selected row to show more details.<br><b>Available values:</b> true \| false<br><b>Default value:</b> false|
+|hide-record-locator						| This will hide the record locator column from the table.<br><b>Available values:</b> true \| false<br><b>Default value:</b> false|
+| toggleRowEvent  | On expansion/collapse of row it will give information of the row.|[Sample Code](#toggleRowEvent) |
+| macroExecutionEvent  | This will provides the information of macro execution whether it is success or not along with record details.|[Sample Code](#macroExecutionEvent) |
+-->
+<!-- | input-filter								| It provides the filter(search) functionality for grid data.<br><b>Available values:</b> true \| false<br><b>Default value:</b> true| -->
+===Sample code===
+'''Events'''
+<code><a id="selectrecord"></a></code>
+====selectrecord====
+<pre>html
+<ace-table-grid id="tableGridId" object-id="cases"
+column-meta="subject:Subject:STRING:true@|@description:Description:true:false">
+</ace-table-grid>
+</pre>
+<pre>javascript
+const tableGridElem = document.querySelector('#tableGridId');
+tableGridElem.addEventListener('selectrecord', function (data) {
+const selectionData = data.detail;
+if (selectionData.length) {
+console.log(selectionData);
+          }
+    });
+</pre>
+====Response====
+<pre>javascript
+[
+	{
+		id: "${record_id}",
+		field_name: "field_value",
+		field_name1: "field_value",
+		... : ...,
+		... : ...
+	}
+]
+</pre>
+<code><a id="selectrecords"></a></code>
+====selectrecords====
+<pre>html
+<ace-table-grid id="tableGridId" object-id="cases"
+	column-meta="subject:Subject:STRING:true@|@description:Description:true:false"
+	multi-select="true"></ace-table-grid>
+</pre>
+<pre>javascript
+const tableGridElem = document.querySelector('#tableGridId');
+tableGridElem.addEventListener('selectrecords', function (data) {
+	const selectionData = data.detail;
+	if (selectionData.length) {
+	console.log(selectionData);
+	}
+});
+</pre>
+====Response====
+<pre>javascript
+[
+	{
+		id: "${record_id}",
+		field_name: "field_value",
+		field_name1: "field_value",
+		... : ...,
+		... : ...
+	},
+	{
+		id: "${record_id}",
+        field_name: "field_value",
+     	field_name1: "field_value",
+    	... : ...,
+    	... : ...
+	}
+]
+</pre>
+<code><a id="pagesortchange"></a></code>
+====pagesortchange====
+<pre>html
+<ace-table-grid id="tableGridId" object-id="cases"
+page-size="7"  pagination="true" sort-by="subject" sort-order="asc">
+</ace-table-grid>
+</pre>
+<pre>javascript
+const tableGridElem = document.querySelector('#tableGridId');
+tableGridElem.addEventListener('pagesortchange', function (data) {
+      const selectionData = data.detail;
+     });
+</pre>
+====Response====
+<pre>javascript
+{
+	pageIndex: 0,
+	pageSize: 7,
+	pageTotalLength: 37,
+	sortActive: "subject",
+	sortDirection: "desc"
+}
+</pre>
+<code><a id="togglerow"></a></code>
+====togglerow====
+<pre>html
+<ace-table-grid id="tableGridId" object-id="cases"
+column-meta="subject:Subject:STRING:true@|@description:Description:true:false"
+expandable-row="true"></ace-table-grid>
+</pre>
+<pre>javascript
+const tableGridElem = document.querySelector('#tableGridId');
+tableGridElem.addEventListener('togglerow', function (data) {
+const toggleRowEventData = data.detail;
+if (toggleRowEventData.toggleType == 'expand') {
+  console.log("On row expansion");
+}else{
+console.log("On row collapse");
+    }
+});
+</pre>
+====Response====
+<pre>javascript
+{
+	toggleType: ToggleType, rowDetails: object,
+}
+</pre>
+<code><a id="macroexecution"></a></code>
+====macroexecution====
+<pre>html
+<ace-table-grid id="tableGridId" object-id="cases"
+column-meta="subject:Subject:STRING:true@|@description:Description:true:false"
+display-macros="true"></ace-table-grid>
+</pre>
+<pre>javascript
+const tableGridElem = document.querySelector('#tableGridId');
+tableGridElem.addEventListener('macroexecution', function (data) {
+const macroExecutionEventData = data.detail;
+if (macroExecutionEventData.type == 'Successful') {
+  console.log("Macro successfully executed.");
+}else if(macroExecutionEventData.type == 'Failed'){
+console.log("Failed while executing macro action.");
+    }
+});
+</pre>
+====Response====
+<pre>javascript
+{
+	type: 'Successful' || 'Failed',
+	apiRes: object;
+	recordDetails: object;
+}
+</pre>
+<code><a id="load"></a></code>
+====load====
+<pre>html
+<ace-table-grid id="tableGridId" object-id="xxx" column-meta="xxx"></ace-table-grid>
+</pre>
+<pre>javascript
+document.querySelector('#tableGridId').addEventListener('load', (event) =>
+	{console.log(event['detail'])});
+</pre>
+====Response====
+<pre>javascript
+{
+	data: [
+	    {
+	        description: "Agileapp demo"
+	        id: "662499464"
+	        record_locator: "000058"
+	        subject: "Agileapp demo"
+	    }
+	],
+	totalRecordCount: 1
+}
+// type is either 'Successful' or 'Failed',
+</pre>
+'''Component Instance Method'''
+<code><a id="reload"></a></code>
+====reload()====
+<pre>html
+<button class="btn btn-primary" onclick="tableGridReload()">Reload Table Grid</button>
+<ace-table-grid id="tableGridId" object-id="xxx" column-meta="xxx"></ace-table-grid>
+</pre>
+<pre>javascript
+function tableGridReload() {
+      document.getElementById('tableGridId').reload();
+	}
+}
+</pre>
+'''Note''': Only the properties mentioned here are supported.
+<!--
+<a id="toggleRowEvent"></a>
+### toggleRowEvent
+```html
+<ace-table-grid id="tableGridId" object-id="cases"
+column-meta="subject:Subject:STRING:true@|@description:Description:true:false"
+is-toggle-row="true"></ace-table-grid>
+```
+```javascript
+const tableGridElem = document.querySelector('#tableGridId');
+tableGridElem.addEventListener('toggleRowEvent', function (data) {
+    const toggleRowEventData = data.detail;
+	if(toggleRowEventData['toggleType'] === "expand"){
+		// perform the actions on expand
+	} else if(toggleRowEventData['toggleType'] === "collapse") {
+		// perform the actions on collapse
+	}
+});
+```
+#### Response:
+```javascript
+{
+toggleType: "expand",
+rowDetails: {
+	description: "Change the status to new",
+	id: "1534793829",
+	record_locator: "000997 - Change the status to new",
+	subject: "Change the status to new"
+	},
+}
+// toggleType is either 'expand' or 'collapse'
+```
+-->
+==user profile==
+===Overview===
+Use this component to get the basic information of the logged in user. Basic information includes profile picture, user name, and user role.
+This component has the following features:
+*	It is a read-only component. Only the details related to user profile picture, user name, and user role are available with this component.
+*	Using certain tag values, you can modify the display property of all these components.
+*	It inherits the size (height and width) attributes from the parent.
+'''Selector''': <code><ace-user-profile\></code>
+Use the following code to render the component:
+<pre>html
+<ace-user-profile></ace-user-profile>
+</pre>
+===API===
+Following are the input attributes for ace-user-profile component:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Attribute !! | Description
+|-
+| profile-picture || Displays the profile picture of the logged in user. If you want to hide the image, set this attribute value to false.<br> Available values: true; false<br> Default value: true
+|-
+| name || Displays the user name of the logged in user. If you want to hide the user name, set this attribute value to false.<br>Available values: true; false<br> Default value: true
+|-
+| active-role || Displays the active role name for the logged in user. If you want to hide the role name, set this attribute value to false.<br>Available values: true; false<br> Default value: true
+|}
+Following event is dispatched by the ace-user-profile tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Event !! | Description
+|-
+| load || Event dispatched on loading the component. This event provides you the basic details of the active user.
+|}
+===Sample code===
+<code><a id="load"></a></code>
+====load====
+<pre>html
+<ace-user-profile id="userProfileRef"></ace-user-profile>
+</pre>
+<pre>javascript
+   document.getElementById('userProfileRef').addEventListener('load', (event) => {
+console.log(event['detail']);
+});
+</pre>
+====Response====
+<pre>javascript
+{
+	name: "john john",
+	imgId: "xxxxxxxxxxxxxxxxx",
+	role: "CaseDeny"
+	}
+</pre>
+'''Note''': Only the properties mentioned here are supported.
+==view configuration==
+===Overview===
+Use this component to configure a new view or to edit an existing view of an object.
+'''Selector''': <code><ace-view-configuration\></code>
+Use the following code to render the component:
+<pre>html
+<ace-view-configuration object-id="cases" view-id='-1'></ace-view-configuration>
+</pre>
+===API===
+Following attributes are available for the ace-view-configuration component.
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Attribute !! | Description
+|-
+| object-id <span class="mandatory">*</span> || Provide the object ID.
+|-
+| view-id <span class="mandatory">*</span> || Provide the view ID. In case of a new view, use "-1".
+|-
+| css-classlist || It helps to specify css class(es) for the tag. Use whitespaces to separate multiple css classes.
+|}
+{{Note| * indicates required attributes.}}
+Following event is dispatched by the ace-view-configuration tag:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Event !! | Description
+|-
+| saveView || Event dispatched upon success or failure of view creation.
+|}
+Following are the instance methods:
+:{| border="1" cellpadding="5" cellspacing="1"|
+|- align="center"
+! Method !! | Description
+|-
+| submitViewData() || Performs the save action for the view instance.
+|-
+| saveAsNewView() || Performs the save action for the existing view instance.
+|}
+===Sample code===
+<code><a id="save-view-event"></a></code>
+====saveView====
+<pre>html
+<ace-view-configuration id="viewConfigIns" object-id="cases" view-id='-1'></ace-view-configuration>
+</pre>
+<pre>javascript
+var viewConfigInstance = document.querySelector('#viewConfigIns')
+viewConfigInstance.addEventListener('saveView', function (event) {
+    // Perform your action here.
+    const viewInfo = event['detail'];
+    console.log("view saved successfully", viewInfo)
+});
+</pre>
+====Response====
+<pre>javascript
+{
+    data: {...},
+    Message: "${id} of the view saved view."
+}
+</pre>
+<code><a id="submit-view-data"></a></code>
+====submitViewData()====
+<pre>html
+<button type="button" id="create-view">Create View</button>
+<ace-view-configuration id="viewConfigIns" object-id="cases" view-id='-1'></ace-view-configuration>
+</pre>
+<pre>javascript
+const viewConfigInstance= document.querySelector('#viewConfigIns');
+const createViewButton = document.querySelector('#create-view');
+createViewButton.addEventListener('click', function() {
+    viewConfigInstance.submitViewData();
+});
+</pre>
+<code><a id="save-new-view"></a></code>
+====saveAsNewView()====
+<pre>html
+<button id="save-as-new">Save as new View</button>
+<ace-view-configuration id="viewConfigIns" object-id="cases" view-id='${view-id}'></ace-view-configuration>
+</pre>
+<pre>javascript
+const viewConfigInstance= document.querySelector('#viewConfigIns');
+const saveAsNewButton = document.querySelector('#save-as-new');
+saveAsNewButton.addEventListener('click', function() {
+    viewConfigInstance.saveAsNewView();
+});
+</pre>
+'''Note''': Only the properties mentioned here are supported.