Forum Discussion

Akenefick's avatar
Akenefick
Genius
2 years ago

Trying to add "message-list" to custom component

Hi Everyone

Basically, I'm trying to make a tabbed menu on the forum page that will display the OOB message list when the first tab is selected. I am adding the message-list component with this:

<@component id="message-list"/>
 
Usually, the list looks like this.

 

But when I add it in my custom component it looks like this

 

Anyone know why this is happening? Hoping there is some easy fix. It looks like the HTML is different. This isn't just a CSS thing.

Thanks!

FreeMarker
UI & Design
  • Akenefick's avatar
    Akenefick
    Genius
    2 years ago

    I found a good work around for anyone else that might run into a similar problem. For some reason adding the message-list to a custom component breaks it for me, so I added my logic to an override component for the message-list like so:

    <#assign activeTab = http.request.parameters.name.get("tab", "all") />

<#if activeTab == "all">
    <@delegate/>
</#if>

     

    And left the message-list added directly to my custom Forum Page quilt. <@delegate> doesn't break the message-list.

    One problem with this approach is that I am only adding filter tabs to a custom Forum Page that we won't be using for every forum. By overriding the message-list I will also be affecting the default forum page. However, since the default behavior is to show the message list if there is no "?tab=" parameter in the URL this shouldn't be an issue. It will just behave normally on the default forum page.

  • luk's avatar
    luk
    Boss
    2 years ago

    Have a look at the XML version of the quilt (that little switch on the top right), some components come with XML attributes for configuration, I don't know by heart if message-list is one of them, but I could imagine. The quilt should be ForumPage. Then copy the component code with attributes from the quilt XML and insert an @ when you include it in FreeMarker, does that change anything?

    Second factor could, as you already stated, be the CSS, the context in particular. Check the wrapper structure & classnames of the original page. Maybe you have to replicate that outer div structure in your tabbed component so the default styles are properly applied.

    • Akenefick's avatar
      Akenefick
      Genius
      2 years ago

      Thanks, I thought it might be something like that because it almost looks like a "slim" version of the message list or something, but it has no attributes added.

      • luk's avatar
        luk
        Boss
        2 years ago

        Hm, and you can't find that avatar markup at all when you include it in your custom component?

        I know there are some custom configs we as mortal devs have no access to, but Khoros support does, so maybe it's such a case (they can basically move around the individual table-cells of one of those message-list items and or add new ones)?

        but I'm not entirely sure why that would then not translate to you using the same component elsewhere... so inspect the output and check if everything is the same (can even do a diff to make it easier) in terms of HTML and the only difference are styles. If so, try to recreate the HTML wrapping structure of the original page in your custom component (you have to dig into the CSS to figure out what is basically the "scope" for those native styles).

  • MattV's avatar
    MattV
    Khoros Staff
    2 years ago

    Hm, I feel like I've seen this before... message lists do get a little funny when you try to include more than one on a page, or include it in a custom component. 

    You might have a little bit better luck using the forums.widget.message-list-panel component instead.

    • Akenefick's avatar
      Akenefick
      Genius
      2 years ago

      Is there any documentation anywhere on that forums.widget.message-list-panel

      That sounds promising but I've never used it before.

      • Akenefick's avatar
        Akenefick
        Genius
        2 years ago

        I looked at some examples from other posts and got the forums.widget.message-list-panel working, but it is missing a lot, like views, replies, avatar, and icons for solved etc. Also, I want to be able to do batch processing and the associated actions from the options menu. Maybe there is some way to configure this with all of that in mind, but it seems unlikely. So, I would prefer to be able to use the message-list if possible. 

        Thanks for all the help. I will keep playing with it but would appreciate any other suggestions.