Open Closed

Hide Idle Session Timeout for all users(Host/Tenant) #9769


User avatar
0
Pallabi created

ABP Framework version: v9.1

UI Type: Angular

Database System: EF Core (SQL Server)

Hello ,

We need to hide the tab Idle Session Timeout from Settings . What is the best way to do that ?


9 Answer(s)
  • User Avatar
    0
    AI-Bot created
    Support Team ABP Agent

    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:

    1. Locate the settings module/component in your Angular project (commonly under src/app/proxy/account/settings or similar).
    2. Find the code that defines the tabs for the Account settings.
    3. 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.

  • User Avatar
    0
    Pallabi created

    AI agent answer does not work

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Do you mean you don't need this Idle feature and want to disable/hide it completely?

    Thanks,

  • User Avatar
    0
    alper created
    Support Team Director

    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 the wwwroot folder.
    • for Angular styles.scss in the angular/src folder.
  • User Avatar
    0
    Pallabi created

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

  • User Avatar
    0
    Pallabi created

    [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 the wwwroot folder.
    • for Angular styles.scss in the angular/src folder.

    i tried your solution inside root and outside in styles.scss, but i can still see the tab and its content.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    I will ask our Angular team.

    Thanks.

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    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.

  • User Avatar
    0
    Pallabi created

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

Learn More, Pay Less
33% OFF
All Trainings!
Get Your Deal
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.0.0-preview. Updated on September 08, 2025, 09:55