AgileApps Support Wiki Pre Release

CUI Components

From AgileApps Support Wiki
Revision as of 09:22, 20 November 2023 by Wikidevuser (talk | contribs) (→‎login)

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.

Notepad.png

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'.

    Notepad.png

    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.

    Notepad.png

    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'.

    Notepad.png

    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"></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.
    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.

    Notepad.png

    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.

    Notepad.png

    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

    Notepad.png

    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.



    Retrieved from "https://agileappscloud.info/aadev-src/index.php?title=CUI_Components&oldid=30364"