Show custom HTML in header to member of a specific group

Development

AI-generated summary

The discussion revolves around showing custom HTML in the header to members of a specific group in Discourse. jord8on initiates the conversation, seeking a solution to display certain buttons only to members of specific groups. jord8on finds a similar article for the Zendesk platform, which seems relevant.

smtreey provides a JavaScript code snippet that uses the api.getCurrentUser() function to retrieve the user’s groups and conditionally add classes to the #after-header element. This allows for CSS-only changes to be made based on the user’s group membership.

Falco suggests installing a component that adds the current user’s groups as classes to the page body, making it easier to make CSS-only changes.

Paracelsus shares a code snippet from ChatGPT that demonstrates how to exclude specific groups from script execution. The code uses the api.getCurrentUser() function and checks if the user belongs to any excluded groups before running the custom script logic.

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 :folded_hands:

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!

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(() => { .

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

5

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

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?