How do I use api.registerTopicFooterButton?

NateDhaliwal · January 11, 2025, 2:42pm

As mentioned in:

app/assets/javascripts/discourse/app/lib/plugin-api.gjs

88a4a7f4f


      
           * Register a button to display at the bottom of a topic
           *
           * ```javascript
           * api.registerTopicFooterButton({
           *   id: "flag",
           *   icon: "flag",
           *   action(context) { console.log(context.get("topic.id")) },
           * });
           * ```
           **/
          registerTopicFooterButton(buttonOptions) {
            registerTopicFooterButton(buttonOptions);
          }
          
          /**
           * Register a dropdown to display at the bottom of a topic, desktop only
           *
           * ```javascript
           * api.registerTopicFooterDropdown({
           *   id: "my-button",
           *   content() { return [{id: 1, name: "foo"}] },

What do I put in action, if I wish to register a DButton there, that perhaps does an action as specified in the DButton’s @action?

pfaffman · January 11, 2025, 7:16pm

Clone GitHub - discourse/all-the-themes

run ./reset-all-repos

grep -r registerTopicFooterButton

Find these examples:

official/discourse-custom-topic-button-component/common/head_tag.html:  api.registerTopicFooterButton({
official/discourse-quick-whisper/javascripts/discourse/initializers/discourse-quick-whisper.js:      api.registerTopicFooterButton({
official/discourse-topic-group-button-component/javascripts/discourse/api-initializers/topic-group-button.js:  api.registerTopicFooterButton({

What do you want to happen when they click the button?

NateDhaliwal · January 12, 2025, 12:40am

Let’s say, redirect the user to /about?
Wait: do I put the @action I specified into there? So if I have an action called redirectUserToAbout, I put action: action(context) { this.redirectUserToAbout() }?

Edit: Looks like we have a great example here:

github.com/discourse/discourse-custom-topic-button-component

common/head_tag.html

main

<script type="text/discourse-plugin" version="0.8">
  const currentUser = api.getCurrentUser();

  api.registerTopicFooterButton({
    id: "discourse-custom-topic-button",
    priority: 0,
    icon() {
      if (settings.custom_topic_button_icon.length) {
        return settings.custom_topic_button_icon;
      }
    },
    translatedLabel() {
      return settings.custom_topic_button_title;
    },
    translatedTitle() {
      return settings.custom_topic_button_label;
    },
    action() {
      const topicButtonUrl = settings.custom_topic_button_url;
      let url = topicButtonUrl

This file has been truncated. show original

Topic		Replies	Views
Topic footer button API Announcements plugin-api	1	1427	December 1, 2023
How do we add buttons next to the "New Topic" button? Support	3	1358	April 26, 2019
Topic Footer Buttons Theme component official , topic-footer-buttons	4	1988	January 16, 2025
Want to display topic category name and tags above the topic-footer-buttons Dev	5	469	September 5, 2022
Add logout button to top menu Dev	7	2579	April 15, 2020

How do I use api.registerTopicFooterButton?

Related topics