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: 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'), ]) ]) ]); } });

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?

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.

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 = ; api.headerIcons.add("calculator", iconComponent, { before: "search" }); }); calculator is a unique name iconComponent refers to an inline glimmer 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: The glimmer syntax won’t work using the UI. You will need to create a theme component with separate files. To generate a TC quickly, you can use Discourse CLI and dev with it super easily with your code editor. I highly recommend it You can also use the template on Github: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes · GitHub. To use a glimmer component, the file extension must be .gjs. Let me know if you need further help!

Hi @Arkshine , Thank you so much for the detailed write-up. I tried injecting the code in but is not seeing the icon show up. What did I do wrong? 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); console.log("url: " + url) const iconComponent = ; api.headerIcons.add("calculator", iconComponent, { before: "search" }); });

@littleviolette Hi, it can’t be run in the Admin UI here. Using the Theme CLI, you can easily create a theme component on your computer. Then, you edit the file with a text editor of your choice (like vscode) and add the code in the initializer. You make a file in /javascripts/discourse/api-initializers/my-header-icon.gjs and you paste the code in it. You can also change the default values in about.json. [image] The next step to install the component on your production forum: you can either put the component on Github and in the Admin UI, use the repository link to install; or you zip the directory on your computer, and in the Admin UI, you install it from the device. Give it a shot and let me know if you have any issues!

Updated Custom Header Icon: Post Data via URL

Development

Arkshine September 5, 2024, 7:34pm 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:

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

Topic		Replies	Views
Is there a recommended way to get the current username from a post? Development	3	958	February 3, 2021
How to get username and make an URL with that? Product Support	5	2377	July 28, 2018
Add button in header for logged in users Development	4	977	August 26, 2023
Adding a custom Link/Icon to the discourse header Product Support	3	3868	January 21, 2019
Upcoming Header Changes - Preparing Themes and Plugins Development dev-news	36	4692	September 8, 2024

Updated Custom Header Icon: Post Data via URL

Related topics