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>
