Appian Community
Site
Search
Sign In/Register
Site
Search
User
DISCUSS
LEARN
SUCCESS
SUPPORT
Documentation
AppMarket
More
Cancel
I'm looking for ...
State
Not Answered
Replies
5 replies
Subscribers
7 subscribers
Views
2452 views
Users
0 members are here
Share
More
Cancel
Related Discussions
Home
»
Discussions
»
User Interface
Hi all, Is it possible to get the ID of the active tab on a form when
caz
A Score Level 1
over 11 years ago
Hi all,
Is it possible to get the ID of the active tab on a form when a button is pressed?
Thanks...
OriginalPostID-84157
OriginalPostID-84157
Discussion posts and replies are publicly visible
Parents
0
Eduardo Fuentes
Appian Employee
over 11 years ago
Here's how the example works:
You can use JQuery to add a click event handler to the ‘a’ that is used as the title of the tab. With this approach you can perform actions every time the tab is selected. If you use Firebug or IE Developer tools you will be able to realize that the main tabs container has an id formed by the "#fd_component_" + window.FormDesigner.runtimeNamespace prefix plus the given id through the interface, therefore, you can retrieve this container with JQuery and search for its ‘a’ children and add a click handler.
The following is a function that does that. Currently it will show an alert with the id of the selected tab, but you can remove the alert and add your logic there. I am retrieving the id of the clicked tab by parsing the href of the ‘a’ element that contains the title of the tab. This href is formed by the #tabWrapperContainerfd_component_JSON_TASK_NS prefix plus the tab id.
function addClickEventToTab(tabContainerID){
$('#fd_component_' + window.FormDesigner.runtimeNamespace + tabContainerID +' a').click(function() {
var selectedTabHref = $(this).attr('href');
var suffixOfTabHref = window.FormDesigner.runtimeNamespace;
var offsetForTabId = selectedTabHref.indexOf(suffixOfTabHref) + suffixOfTabHref.length;
var selectedTab = selectedTabHref.substring(offsetForTabId);
alert('The following tab was clicked: ' + selectedTab);
});
}
This example also shows how you can navigate through the tabs using a dropdown.
The dropdown has a change event which calls the jumpToTab(tabContainerID,tabNumber) function. This function retrieves the tab container:
var tabContainer = window.Build.util.getComponentContainer(tabContainerID, window.FormDesigner.runtimeNamespace)[0];
Once we have the tab container we can retrieve all the links that represent each tab and filter using the eq() JQuery selector to pick the number of the tab we want to display-navigate to:
$("#" + tabContainer.id + ' a:eq('+tabNumber+')').click();
The process model is called Tab Clicked under Process Models – Forums. The JS is under Temporary Documents – JS Libraries and its name is addClickEventToTab.js.
Cancel
Vote Up
0
Vote Down
Sign in to reply
Verify Answer
Cancel
Reply
0
Eduardo Fuentes
Appian Employee
over 11 years ago
Here's how the example works:
You can use JQuery to add a click event handler to the ‘a’ that is used as the title of the tab. With this approach you can perform actions every time the tab is selected. If you use Firebug or IE Developer tools you will be able to realize that the main tabs container has an id formed by the "#fd_component_" + window.FormDesigner.runtimeNamespace prefix plus the given id through the interface, therefore, you can retrieve this container with JQuery and search for its ‘a’ children and add a click handler.
The following is a function that does that. Currently it will show an alert with the id of the selected tab, but you can remove the alert and add your logic there. I am retrieving the id of the clicked tab by parsing the href of the ‘a’ element that contains the title of the tab. This href is formed by the #tabWrapperContainerfd_component_JSON_TASK_NS prefix plus the tab id.
function addClickEventToTab(tabContainerID){
$('#fd_component_' + window.FormDesigner.runtimeNamespace + tabContainerID +' a').click(function() {
var selectedTabHref = $(this).attr('href');
var suffixOfTabHref = window.FormDesigner.runtimeNamespace;
var offsetForTabId = selectedTabHref.indexOf(suffixOfTabHref) + suffixOfTabHref.length;
var selectedTab = selectedTabHref.substring(offsetForTabId);
alert('The following tab was clicked: ' + selectedTab);
});
}
This example also shows how you can navigate through the tabs using a dropdown.
The dropdown has a change event which calls the jumpToTab(tabContainerID,tabNumber) function. This function retrieves the tab container:
var tabContainer = window.Build.util.getComponentContainer(tabContainerID, window.FormDesigner.runtimeNamespace)[0];
Once we have the tab container we can retrieve all the links that represent each tab and filter using the eq() JQuery selector to pick the number of the tab we want to display-navigate to:
$("#" + tabContainer.id + ' a:eq('+tabNumber+')').click();
The process model is called Tab Clicked under Process Models – Forums. The JS is under Temporary Documents – JS Libraries and its name is addClickEventToTab.js.
Cancel
Vote Up
0
Vote Down
Sign in to reply
Verify Answer
Cancel
Children
No Data