9 Answer(s)
-
0
To hide the "Idle Session Timeout" tab from the Settings page for all users (host and tenant) in an ABP Angular application, you need to remove or hide the related setting from the UI. The ABP Framework does not provide a direct configuration to hide individual settings tabs out-of-the-box, so you must customize the Angular UI.
The recommended approach is to override or customize the Angular settings component to exclude the "Idle Session Timeout" tab. Here are the general steps:
- Locate the settings module/component in your Angular project (commonly under
src/app/proxy/account/settings
or similar). - Find the code that defines the tabs for the Account settings.
- Remove or comment out the entry for the "Idle Session Timeout" tab, or add a condition to hide it for all users.
If you want to ensure the setting is not available at the backend level as well, you can also override the related setting definition in your application layer to set
isVisibleToClients: false
for the idle session timeout setting. This will prevent it from being sent to the client.Example (in your module's
SettingDefinitionProvider
):context.Add( new SettingDefinition( AccountSettingNames.IdleSessionTimeout, defaultValue: "60", isVisibleToClients: false // Hide from all clients ) );
After making these changes, rebuild and redeploy your application. The "Idle Session Timeout" tab should no longer appear in the settings UI for any user.
Sources:
This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.
- Locate the settings module/component in your Angular project (commonly under
-
0
AI agent answer does not work
-
0
hi
Do you mean you don't need this Idle feature and want to disable/hide it completely?
Thanks,
-
0
you can hide it visually by adding the following CSS
#IdleSessionTimeoutTab-tab { display: none; }
- for MVC there's a global styling file =>
global-styles.css
in thewwwroot
folder. - for Angular
styles.scss
in theangular/src
folder.
- for MVC there's a global styling file =>
-
0
[maliming] said: hi
Do you mean you don't need this Idle feature and want to disable/hide it completely?
Thanks,
yes, we want to disable and hide this feature completely.
-
0
[alper] said: you can hide it visually by adding the following CSS
#IdleSessionTimeoutTab-tab { display: none; }
- for MVC there's a global styling file =>
global-styles.css
in thewwwroot
folder. - for Angular
styles.scss
in theangular/src
folder.
i tried your solution inside root and outside in styles.scss, but i can still see the tab and its content.
- for MVC there's a global styling file =>
-
0
hi
I will ask our Angular team.
Thanks.
-
0
Hello,
I can suggest you to hide the tab programmatically inside your
app.component.ts
//app.component.ts ngOnInit() { // Hide idle session timeout tab specifically const hideIdleTab = () => { const tabs = document.querySelectorAll('.nav-link'); tabs.forEach(tab => { if (tab.textContent?.toLowerCase().includes('idle session timeout')) { tab.closest('.nav-item')?.remove(); } }); }; hideIdleTab(); // Watch for dynamic content new MutationObserver(hideIdleTab).observe(document.body, { childList: true, subtree: true }); }
You can let us know if you need further assistance. Thank you for your cooperation.
-
0
[sumeyye.kurtulus] said: Hello,
I can suggest you to hide the tab programmatically inside your
app.component.ts
//app.component.ts ngOnInit() { // Hide idle session timeout tab specifically const hideIdleTab = () => { const tabs = document.querySelectorAll('.nav-link'); tabs.forEach(tab => { if (tab.textContent?.toLowerCase().includes('idle session timeout')) { tab.closest('.nav-item')?.remove(); } }); }; hideIdleTab(); // Watch for dynamic content new MutationObserver(hideIdleTab).observe(document.body, { childList: true, subtree: true }); }
You can let us know if you need further assistance. Thank you for your cooperation.
Hello,
Your solution worked. Thank you so much for you quick assistance.