Updated Custom Header Icon: Post Data via URL

Dev
1

Discourse has recently deprecated api.decorateWidget, which I used to insert custom header icons and post the current user’s username via a URL.

I was wondering how I can post the user’s current username via HTTP with the new headerIcons API. I couldn’t find any documentation or examples on how to implement this. I couldn’t find a way to do it via the Customer Header Link plugin either.

Appreciate your help! Below is my current code using the decorateWidget API to post the username:

<script type="text/discourse-plugin" version="0.12">
    const { iconNode } = require("discourse-common/lib/icon-library");

    let icon = iconNode('calculator');

    var currentUser = api.getCurrentUser();
    var username = currentUser.username;

    api.decorateWidget('header-icons:before', helper => {
        const showExtraInfo = helper.attrs.minimized;
            if(!showExtraInfo) {
                return helper.h('li#calculator', [
                    helper.h('form#header-calculator.icon', {
                        action:'https://example.com/',
                        method:'post'
                    }, [
                        helper.h('button', {name:'u', value: username},[
                            iconNode('calculator'),
                        ])

                    ])
                ]);

            }
    });


</script>
2

Hey,

I will help you, but can you explain what you’re trying to do before that?

Is it to display a menu with a form inside?

Like for example:
This image appears to be a screenshot of a webpage, showcasing a chat function named "Chat Sidebar Preferences." (Captioned by AI)

Or is it just a button with the username as label, and it redirects to some URL?

3

It’s to click the header icon >> post the user’s username to a specified URL.

No form is actually displayed. Only the header icon is displayed. The post action is performed behind the scene. Sorry for the confusion. Let me remove “form” from the title of my post.

4

Okay, so a redirection to an external URL that contains the username.

Here is a basic example on how you can do, using the new API:

import { apiInitializer } from "discourse/lib/api";
import DButton from "discourse/components/d-button";

export default apiInitializer("1.8.0", (api) => {
  const currentUser = api.getCurrentUser();

  if (!currentUser) {
    return;
  }

  const url =
    "https://example.com/?u=" + encodeURIComponent(currentUser.username);

  const iconComponent = <template>
    <li class="calculator">
      <DButton
        @href={{url}}
        @icon="calculator"
        class="icon btn-flat"
        title="Calculator"
        target="_blank"
      />
    </li>
  </template>;

  api.headerIcons.add("calculator", iconComponent, { before: "search" });
});
  • calculator is a unique name
  • iconComponent refers to an inline glimmer <template> as you see here, but it can also refer to a glimmer class component you create in the components directory.
  • You can choose where to place your icon by using before or after followed by the header icon’s unique name.

NVIDIA_Share_rvsjetCtUy

Feel free to adjust!

Note:

Let me know if you need further help!

2 Likes