Difference between revisions of "CUI Components"
From AgileApps Support Wiki
Wikidevuser (talk | contribs) |
Wikidevuser (talk | contribs) |
||
Line 7: | Line 7: | ||
<ace-app-nav-list></ace-app-nav-list> | <ace-app-nav-list></ace-app-nav-list> | ||
</pre> | </pre> | ||
< | <br> | ||
<br> | |||
===API=== | ===API=== | ||
Line 89: | Line 90: | ||
'''Important Note''': Only the properties mentioned here are supported. | '''Important Note''': Only the properties mentioned here are supported. | ||
<hr> | <hr> | ||
==ace-bookmark-list== | ==ace-bookmark-list== | ||
:This displays the bookmarked item corresponding to the user as a custom component. | :This displays the bookmarked item corresponding to the user as a custom component. |
Revision as of 05:42, 18 October 2023
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
- 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>