Forum Discussion

cstone's avatar
cstone
Ace
8 years ago

Customize message-list component

I am currently working on customizing our communities Forum Page, and notice a build-in module entitled "message-list". It appears that this component can be customized although I have been unable to uncover any documentation that touches on this built in component.

 

When comparing our existing 'message-list' component against other lithium communities, I notice some variance in order/content listed. It is not that content has been moved or hidden via CSS, the module itself seems to render different DOM elements on different communities.

 

Any documentation on this would be quite helpful. 

  • ChiaraS's avatar
    ChiaraS
    8 years ago

    Lithium Professional Services team can customize the "columns" behind the message-list component, rearranging the order, removing columns or adding new columns pointing to a custom component.

  • TariqHussain's avatar
    TariqHussain
    8 years ago

    cstone- As ChiaraS said you will need to contact lithium support to get this done. They can add extra field, they will provide custom componenta for every field. You can do custom coding on those components.

     

    Give kudos if you find my posts helpful or mark solution if it answers your query

    Tariq

  • TariqHussain's avatar
    TariqHussain
    Boss
    8 years ago

    cstone-

    This is out of box component, this is why this component only can be customized using the CSS.  However, if you want to fully customize the component, you can go for custom-component and replace with message-list.

     

    Give kudos if you find my posts helpful or mark solution if it answers your query

    Tariq

    • cstone's avatar
      cstone
      Ace
      8 years ago

      TariqHussain Thank you for your reply, although this doesn't answer my question. I understand that message-list is an out of the box component. Upon viewing a few communities built with Lithium, it appears that this out of the box component can be configured in some way. I have been unable to find any documentation related to this component.

       

      Here is an example of some mark up generated by the message-list component that I striped down:

       

      Our community:

      <tr class="lia-list-row lia-row-odd lia-js-data-messageUid-18717 lia-js-data-messageRevision-1 t-first">
  <td class="cMessageAuthorAvatarColumn lia-data-cell-secondary lia-data-cell-icon">
  <td class="cThreadInfoColumn lia-data-cell-primary lia-data-cell-text">        
  <td class="cRepliesCountColumn lia-data-cell-secondary lia-data-cell-integer">
  <td class="cViewsCountColumn lia-data-cell-secondary lia-data-cell-integer">
  <td class="triangletop lia-data-cell-secondary lia-data-cell-icon">
</tr>

       

      Another community:

      <tr class="lia-list-row lia-row-odd  forum lia-js-data-messageUid-225595 t-first">
  <td class="messageicons lia-data-cell-secondary lia-data-cell-icon">
  <td class="cThreadInfoColumn lia-data-cell-primary lia-data-cell-text">
  <td class="cViewsCountColumn lia-data-cell-secondary lia-data-cell-integer">
  <td class="cRepliesCountColumn lia-data-cell-secondary lia-data-cell-integer">
</tr>

      The information in each row is not equivalent, which led me to believe that this component could be configured or customized short of rebuilding the component myself.


      It appears that other out of the box components work along-side message-list, for example "paging". I was unable to find documentation on how these components work together as well.

      Links to documentation, if it exists, would be appreciated.  Thanks!

      • cstone's avatar
        cstone
        Ace
        8 years ago

        Here is another example of yet another slightly different message-list component:

        <tr class="lia-list-row lia-list-row-float lia-js-data-messageUid-1559888 lia-js-data-messageRevision-2 t-first">
  <td class="customTopicIconColumn lia-data-cell-secondary lia-data-cell-text">
  <td class="threadSubjectColumn lia-data-cell-primary lia-data-cell-text">
  <td class="latestPostDateColumn lia-data-cell-secondary lia-data-cell-text">
  <td class="repliesCountColumn lia-data-cell-secondary lia-data-cell-text">
</tr>



        How is this customization achieved?