Difference between revisions of "CUI Components"

From AgileApps Support Wiki
Line 31: Line 31:


<hr>
<hr>
===Sample code===
<code><a id="selection-change"></a></code>
====selectionchange====
<pre>
html
<ace-app-nav-list id="appTabsInstance"></ace-app-nav-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-nav-list id="appTabs"></ace-app-nav-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>
'''Important Note''':Only the properties mentioned here are supported.

Revision as of 05:35, 18 October 2023

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.