A common word is the opposite of what I want. I don’t want my search results to have EVERY ticket, I want a way to search for a specific ticket. That’s why topic ID would be ideal. They are automatically generated and unique.
No, I think the code I’m using was also awesomerobot’s originally, but I can’t seem to find it’s source anymore.
I prefer the placement of what I’m currently using better than that block under the text.
Well, I can’t do that. Maybe you can. <Liam Neeson voice>I have a certain set of skills. Coding isn't among them.</Liam Neeson voice>
You misunderstand me. I meant having a common word including the topic:id parameter, so that only results from that topic show up. The common word removes the need to change words like ‘hi’ and ‘hello’.
Thanks @NateDhaliwal, I appreciate the effort.
I created the component, pasted the code under the JS tab. Made sure it was active on my theme, but no love.
This is what my search page looks like:
Alright, so a summary of the situation as it currently stands:
We have a working solution. Although it’s slightly inelegant, it will suit my needs until such time as we can search for topic ID right in the standard search box.
The current code suggested by @awesomerobot appears to work, but triggers the warning I posted above.
2a. When I removed the original code I was using to display the topic ID, this warning went away…
When you choose a solution, the code to display the topic ID shows up both in the original post, and in the solution, is there a way to account for that and repress it from showing there?
I fancied up the CSS a little more, now I have a pill on every reply in every thread in the specified categories I’m using this in. I suppose the answer will be to un fancy it, but if anyone knows another way I’d rather keep it, I think it looks nice as is.
@awesomerobot
Your code works a treat, but it looks like any CSS decorations other than text show up on every post after the first as an empty space formatted however the CSS says.
Turn off inline block and you get a full width color bar.
Change background color and the pill changes color
etc…
Based on what you wrote it looks like you’ve told it to only show in the first post, but that only affects the text. Is there something else we can do to kill the element on all the additional posts?
Okay, as I said, I’m no coder, but I’m hella good at asking Grok questions. Here is code that takes care of both issues.
No more empty CSS bubbles in replies 2 thru X.
No more duplication of topic ID in quoted solutions.
Maybe no one else on the planet cares, but this seems like a good way to help track topics for those of us using Discourse as a ticketing system.
import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";
class TopicIdentifier extends Component {
get topicId() {
return this.args.post?.topic?.id;
}
get shouldShow() {
const firstPost = this.args.post?.post_number === 1; // first post in topic
const desiredCategories = [9, 23]; // a comma separated list of category IDs you want this to appear in
const isInCategory = desiredCategories.includes(
this.args.post?.topic.category.id
);
return firstPost && isInCategory;
}
<template>
{{#if this.shouldShow}}
<!-- you can edit the content below, {{this.topicId}} is where the topic ID will be filled -->
Issue Tracking # is
{{this.topicId}}
<!-- you can edit the content above -->
{{/if}}
</template>
}
export default apiInitializer("0.8.40", (api) => {
api.decorateCookedElement((element, helper) => {
```gjs
import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";
class TopicIdentifier extends Component {
get topicId() {
return this.args.post?.topic?.id;
}
get shouldShow() {
const firstPost = this.args.post?.post_number === 1; // first post in topic
const desiredCategories = [9, 23]; // a comma separated list of category IDs you want this to appear in
const isInCategory = desiredCategories.includes(
this.args.post?.topic.category.id
);
return firstPost && isInCategory;
}
<template>
{{#if this.shouldShow}}
<!-- you can edit the content below, {{this.topicId}} is where the topic ID will be filled -->
Issue Tracking # is
{{this.topicId}}
<!-- you can edit the content above -->
{{/if}}
</template>
}
export default apiInitializer("0.8.40", (api) => {
api.decorateCookedElement((element, helper) => {
// Only proceed if this is the first post and not inside a solution quote
// Only proceed if this is the first post, not in a quote, and in the desired category
const post = helper?.model;
const desiredCategories = [9, 23]; // Match the categories from TopicIdentifier
if (
if (
helper?.model?.post_number !== 1 ||
!post ||
post.post_number !== 1 ||
!desiredCategories.includes(post.topic?.category?.id) || // Check category
element.classList.contains("post__contents-cooked-quote") || // Check if the element itself is the quote content
element.closest("aside.accepted-answer") || // Check for solution/quote wrapper
element.closest(".quote") // Additional check for generic quotes
) {
return;
}
const wrapper = document.createElement("div");
wrapper.className = "tracking-id";
helper?.renderGlimmer(
wrapper,
<template><TopicIdentifier @post={{helper.model}} /></template>
);
element.appendChild(wrapper);
});
});
I know I can easily test it, but do you know offhand if this would work if I was to put this JS and CSS in it’s own component, or does it have to be in the theme itself?
I found another small anomaly. I was seeing the empty class bubbles in the first post of topics outside of the 2 I wanted them in so I had to update the code a little. Here’s the final product.
import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";
class TopicIdentifier extends Component {
get topicId() {
return this.args.post?.topic?.id;
}
get shouldShow() {
const firstPost = this.args.post?.post_number === 1; // first post in topic
const desiredCategories = [9, 23]; // a comma separated list of category IDs you want this to appear in
const isInCategory = desiredCategories.includes(
this.args.post?.topic.category.id
);
return firstPost && isInCategory;
}
<template>
{{#if this.shouldShow}}
<!-- you can edit the content below, {{this.topicId}} is where the topic ID will be filled -->
Issue Tracking # is
{{this.topicId}}
<!-- you can edit the content above -->
{{/if}}
</template>
}
export default apiInitializer("0.8.40", (api) => {
api.decorateCookedElement((element, helper) => {
// Only proceed if this is the first post and not inside a solution quote
// Only proceed if this is the first post, not in a quote, and in the desired category
const post = helper?.model;
const desiredCategories = [9, 23]; // Match the categories from TopicIdentifier
if (
if (
helper?.model?.post_number !== 1 ||
!post ||
post.post_number !== 1 ||
!desiredCategories.includes(post.topic?.category?.id) || // Check category
element.classList.contains("post__contents-cooked-quote") || // Check if the element itself is the quote content
element.closest("aside.accepted-answer") || // Check for solution/quote wrapper
element.closest(".quote") // Additional check for generic quotes
) {
return;
}
const wrapper = document.createElement("div");
wrapper.className = "tracking-id";
helper?.renderGlimmer(
wrapper,
<template><TopicIdentifier @post={{helper.model}} /></template>
);
element.appendChild(wrapper);
});
});
element.classList.contains("post__contents-cooked-quote") || // Check if the element itself is the quote content
element.closest("aside.accepted-answer") || // Check for solution/quote wrapper
element.closest(".quote") // Additional check for generic quotes
) {
return;
}
const wrapper = document.createElement("div");
wrapper.className = "tracking-id";
helper?.renderGlimmer(
wrapper,
<template><TopicIdentifier @post={{helper.model}} /></template>
);
element.appendChild(wrapper);
});
});
And to answer my own question, I moved all the code to a new theme component and it all still works fine.
. 
