Show custom HTML in header to member of a specific group

Dev
1

Hello Discourse Fam! I’m hoping that there’s an easy solution for this! I feel like the answer is that I need to use some Javascript.

We have 4 buttons in the “after header” section of our admin CSS/HTML settings.

image
image1189×397 98 KB

We would like to have some buttons only visible to members of specific groups, with the rest of the buttons visible to all users.

e.g. Let’s say we want those main 4 buttons for everyone, but we want another button to only be visible to the members of a particular GROUP.

I don’t know JS so if it’s really simple and someone could help provide a snippet or something, that would be so helpful :pray:

4 Likes
2

I found this article which seems very similar, for the Zendesk platform, but I think that’s the type of functionality we’re looking for!

1 Like
3 
<div id="after-header">Stuff</div>

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        let currentUser = api.getCurrentUser();
        var groups = currentUser.groups;
        const isInGroup1 = groups.some(g => g.name === 'group1');
        const isInGroup2 = groups.some(g => g.name === 'group2');
        const isInGroup3 = groups.some(g => g.name === 'group3');
        if (isInGroup1) { 
            $("#after-header").addClass("group1");
         }
        if (isInGroup2) { 
            $("#after-header").addClass("group2");
         }
        if (isInGroup3) { 
            $("#after-header").addClass("group3");
         }         
    });
</script>

.button-a,
.button-b {
    display: none;
}
#after-header.group1 .button-a {
    display: block
}
#after-header.group2 .button-b {
    display: block
}

It also seems to work if you replace
api.onPageChange(() => {
with
$( document ).ready(function() {
and then the script won’t load on every page, but I never know for sure where I need api.onPageChange(() => { .

5 Likes
4

If you install this component, all groups of the current user will be added as classes in the page body, making it easy for CSS only further changes.

https://github.com/discourse/discourse-groups-css-classes-in-body

7 Likes
5

haha, that was going to be the next thing I tried to figure out

1 Like
7

Hi,

I’ve been looking for something similar, but excluding some groups, so I gave it a try with ChatGPT, and the answer was:

To create an HTML theme in Discourse that triggers a script excluding specific groups, you’ll need to use Discourse’s theme customization options along with JavaScript to handle group exclusions. Discourse provides api.getCurrentUser() to retrieve user details, including their groups, which can be useful to conditionally trigger your script.

Here’s an example of how you might implement this in the </head> section of your theme or component:

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        // Retrieve current user details
        const currentUser = api.getCurrentUser();

        if (currentUser) {
            // List of group names you want to exclude from script execution
            const excludedGroups = ['group1', 'group2'];

            // Get the user's groups
            const userGroups = currentUser.groups.map(group => group.name);

            // Check if the user belongs to any excluded group
            const isExcluded = excludedGroups.some(group => userGroups.includes(group));

            if (!isExcluded) {
                // Your custom script logic here
                console.log('Script is executed for this user.');
                // Example: trigger any custom logic for non-excluded users
                // customScriptFunction();
            } else {
                console.log('User is in an excluded group, script not executed.');
            }
        }
    });
</script>

Explanation:

  1. api.onPageChange(): Runs the script whenever the page changes.
  2. api.getCurrentUser(): Fetches the currently logged-in user’s details.
  3. excludedGroups: List the groups you want to exclude.
  4. userGroups.includes(group): Checks whether the user belongs to any excluded group.
  5. Conditional script execution: The script will only run if the user is not part of any excluded group.

You can replace the customScriptFunction(); with whatever script you need to run. Let me know if you need any further adjustments!

I mean, my mind is completely blown away by this :exploding_head:. I haven’t tried it yet, but is the ChatGPT code correct?