AdminNWRussian Posted September 15 Report Share Posted September 15 I have created parameters that contain the css, html, and JavaScript for user specific navbars. I then included these parameters in an html page and they works great. User with role of Admin opens the page and see one navbar, user with role Cong opens the same page and see a different navbar. I want to use this same approach on a tabular results datapage so that when the user opens the html "Home" page and clicks on one of the buttons in the navbar it takes him to the results datapage and he will see the same navbar. However, when I insert the parameters into the header in the results datapage the navbars are not displaying dynamically. All navbars are always visible no matter what the user role is. I should add that the user roles are yes/no fields in the user table. I have also tried just pasting the code directly into the datapage header, but that didn't fix it either. Can anyone help me figure this out? Here is the code I am using in the parameters: Navbar 1: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Одобренные Волонтёры</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; } header { display: flex; justify-content: space-between; align-items: center; background-color: #78B098; padding: 20px; } #header-title { color: white !important; /* Force text to stay white */ font-size: 40px !important; /* Ensure the font size is 40px */ flex-grow: 1; z-index: 10; } .buttons { display: flex; gap: 20px; } .buttons button { background-color: white; color: #78B098; border: none; border-radius: 12px; padding: 10px 20px; cursor: pointer; font-size: 16px; transition: background-color 0.3s, color 0.3s; } .buttons button:hover { background-color: #6A7275; color: white; } </style> </head> <body> <header> <h1 id="header-title">Одобренные Волонтёры</h1> <div class="buttons"> <a href="your-admin-url-here"><button>Админ</button></a> <a href="your-volunteers-url-here"><button>Волонтёры</button></a> <a href="your-meetings-url-here"><button>Моё Собрание</button></a> <a href="your-departments-url-here"><button>Отделы</button></a> <!-- Changed from dropdown to button --> </div> </header> <script> // Ensure the session variable is properly captured as a string var isAdmin = '[@authfield:Admin^]'; // Check if the session variable is 'Да' (true) or 'Нет' (false) if (isAdmin.trim() === 'Да') { // If the user is an admin, display the Admin Header element document.getElementById('admin-header').style.display = 'block'; } else { // If the user is not an admin, hide the Admin Header element document.getElementById('admin-header').style.display = 'none'; } </script> </body> </html> ------------------------------------------------------------------------------------------------------- Navbar 2: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Одобренные Волонтёры</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; } header { display: flex; justify-content: space-between; align-items: center; background-color: #78B098; padding: 20px; } #header-title { color: white !important; /* Force text to stay white */ font-size: 40px !important; /* Ensure the font size is 40px */ flex-grow: 1; z-index: 10; } .buttons { display: flex; gap: 20px; } .buttons button { background-color: white; color: #78B098; border: none; border-radius: 12px; padding: 10px 20px; cursor: pointer; font-size: 16px; transition: background-color 0.3s, color 0.3s; } .buttons button:hover { background-color: #6A7275; color: white; } </style> </head> <body> <header> <h1 id="header-title">Одобренные Волонтёры</h1> <div class="buttons"> <a href="your-meetings-url-here"><button>Моё Собрание</button></a> <!-- Only this button remains --> </div> </header> <script> // Ensure the session variable is properly captured as a string var isCong = '[@authfield:Cong^]'; // Check if the session variable is 'Да' (true) or 'Нет' (false) if (isCong.trim() === 'Да') { // If the user is part of the congregation, display the Cong Header element document.getElementById('cong-header').style.display = 'block'; } else { // If the user is not part of the congregation, hide the Cong Header element document.getElementById('cong-header').style.display = 'none'; } </script> </body> </html> Quote Link to comment Share on other sites More sharing options...
cheonsa Posted September 26 Report Share Posted September 26 On 9/14/2024 at 8:33 PM, AdminNWRussian said: I have created parameters that contain the css, html, and JavaScript for user specific navbars. I then included these parameters in an html page and they works great. User with role of Admin opens the page and see one navbar, user with role Cong opens the same page and see a different navbar. I want to use this same approach on a tabular results datapage so that when the user opens the html "Home" page and clicks on one of the buttons in the navbar it takes him to the results datapage and he will see the same navbar. However, when I insert the parameters into the header in the results datapage the navbars are not displaying dynamically. All navbars are always visible no matter what the user role is. I should add that the user roles are yes/no fields in the user table. I have also tried just pasting the code directly into the datapage header, but that didn't fix it either. Can anyone help me figure this out? Here is the code I am using in the parameters: Navbar 1: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Одобренные Волонтёры</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; } header { display: flex; justify-content: space-between; align-items: center; background-color: #78B098; padding: 20px; } #header-title { color: white !important; /* Force text to stay white */ font-size: 40px !important; /* Ensure the font size is 40px */ flex-grow: 1; z-index: 10; } .buttons { display: flex; gap: 20px; } .buttons button { background-color: white; color: #78B098; border: none; border-radius: 12px; padding: 10px 20px; cursor: pointer; font-size: 16px; transition: background-color 0.3s, color 0.3s; } .buttons button:hover { background-color: #6A7275; color: white; } </style> </head> <body> <header> <h1 id="header-title">Одобренные Волонтёры</h1> <div class="buttons"> <a href="your-admin-url-here"><button>Админ</button></a> <a href="your-volunteers-url-here"><button>Волонтёры</button></a> <a href="your-meetings-url-here"><button>Моё Собрание</button></a> <a href="your-departments-url-here"><button>Отделы</button></a> <!-- Changed from dropdown to button --> </div> </header> <script> // Ensure the session variable is properly captured as a string var isAdmin = '[@authfield:Admin^]'; // Check if the session variable is 'Да' (true) or 'Нет' (false) if (isAdmin.trim() === 'Да') { // If the user is an admin, display the Admin Header element document.getElementById('admin-header').style.display = 'block'; } else { // If the user is not an admin, hide the Admin Header element document.getElementById('admin-header').style.display = 'none'; } </script> </body> </html> ------------------------------------------------------------------------------------------------------- Navbar 2: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Одобренные Волонтёры</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; } header { display: flex; justify-content: space-between; align-items: center; background-color: #78B098; padding: 20px; } #header-title { color: white !important; /* Force text to stay white */ font-size: 40px !important; /* Ensure the font size is 40px */ flex-grow: 1; z-index: 10; } .buttons { display: flex; gap: 20px; } .buttons button { background-color: white; color: #78B098; border: none; border-radius: 12px; padding: 10px 20px; cursor: pointer; font-size: 16px; transition: background-color 0.3s, color 0.3s; } .buttons button:hover { background-color: #6A7275; color: white; } </style> </head> <body> <header> <h1 id="header-title">Одобренные Волонтёры</h1> <div class="buttons"> <a href="your-meetings-url-here"><button>Моё Собрание</button></a> <!-- Only this button remains --> </div> </header> <script> // Ensure the session variable is properly captured as a string var isCong = '[@authfield:Cong^]'; // Check if the session variable is 'Да' (true) or 'Нет' (false) if (isCong.trim() === 'Да') { // If the user is part of the congregation, display the Cong Header element document.getElementById('cong-header').style.display = 'block'; } else { // If the user is not part of the congregation, hide the Cong Header element document.getElementById('cong-header').style.display = 'none'; } </script> </body> </html> Hi @AdminNWRussian, You may try the solution provided here: https://howto.caspio.com/tech-tips-and-articles/customizing-navigation-menu-based-on-user-roles/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.