Jump to content
Introducing AI-Powered GPT Connect!

Conditionally display navbar based on user role in datapage

AdminNWRussian
 Share

Recommended Posts

AdminNWRussian Newbie

AdminNWRussian

Posted
Posted

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>

Link to comment
Share on other sites
  • 2 weeks later...
cheonsa Community Regular

cheonsa

Posted
Posted
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/

:) 

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing
×
×
  • Create New...