Forum Discussion

maxwelldhsu's avatar
maxwelldhsu
Guide
8 years ago

Dynamic navigation menu and next steps

I'm trying to create a dynamic menu based on categories. The categories will serve as main topics, which you can then click into to show the blog articles. 

 

First step, I know I need to use a REST api to call out the categories. I'm using the one below:

<assign# topics= rest("/categories/id/blog_topics/boards").messages />


Can someone explain to me what the .messages does? Or if I change to .title? - After this, 

I'm trying to get the categories title to display as links. Doing something like the below

 

<a href=“${category.message.@href}”> ${category.message.subject}</a>

This was an example I grabbed from here

 

This is the one I'm trying to semi-follow but can't seem to make it possible for my community. 

https://community.lithium.com/t5/Developer-Discussion/How-To-Create-a-Category-Based-Navigation-Like-Lithosphere/m-p/34261

 

And direction/tips would be great ! 

  • TariqHussain's avatar
    TariqHussain
    8 years ago

    maxwelldhsu - You are using the wrong call to fetch the categories. 

     

    To fetch the categories use the below calls. 

    <#assign Categories = rest("/categories/nested").categories/>

    https://community.lithium.com/restapi/vc/categories/nested

     

    <#assign topics= rest("/categories/id/blog_topics/boards").messages /> is key here which is returned in xml response and .title will not work there.  In the link you have mentioned, they are fethcing the messages for the boards call .messages will produce error. 

     

    <#assign boards = rest("/boards/nested").boards /> 

    https://community.lithium.com/restapi/vc/boards/nested

    e.g for the board call below is the response 

     
    <response status="success">
<boards>
  <board type="board" href="/blogs/id/socialmediablog">
  <interaction_style type="string">blog</interaction_style>
  <user_created type="boolean">false</user_created>
  <blog type="boolean">true</blog>
  <id type="string">socialmediablog</id>
  <owner type="user" null="true"/>
  <short_title type="string">Social Media Management Blog</short_title>
  <title type="string">Social Media Management Blog</title>
  <description type="string">
  Home to best practices, success stories and product roll-outs for Lithium Social Media Management.
  </description>
 </board>
  .....

    In order to access the title of the board, you have to loop through all the boards with #list. You can not access the title key directly. 

    <#assign boards = rest("/boards/nested").boards /> 

    <#list boards.board as board>

    ${board.title}

    </#list>

     
  • TariqHussain's avatar
    TariqHussain
    Boss
    8 years ago

    maxwelldhsu - You are using the wrong call to fetch the categories. 

     

    To fetch the categories use the below calls. 

    <#assign Categories = rest("/categories/nested").categories/>

    https://community.lithium.com/restapi/vc/categories/nested

     

    <#assign topics= rest("/categories/id/blog_topics/boards").messages /> is key here which is returned in xml response and .title will not work there.  In the link you have mentioned, they are fethcing the messages for the boards call .messages will produce error. 

     

    <#assign boards = rest("/boards/nested").boards /> 

    https://community.lithium.com/restapi/vc/boards/nested

    e.g for the board call below is the response 

     
    <response status="success">
<boards>
  <board type="board" href="/blogs/id/socialmediablog">
  <interaction_style type="string">blog</interaction_style>
  <user_created type="boolean">false</user_created>
  <blog type="boolean">true</blog>
  <id type="string">socialmediablog</id>
  <owner type="user" null="true"/>
  <short_title type="string">Social Media Management Blog</short_title>
  <title type="string">Social Media Management Blog</title>
  <description type="string">
  Home to best practices, success stories and product roll-outs for Lithium Social Media Management.
  </description>
 </board>
  .....

    In order to access the title of the board, you have to loop through all the boards with #list. You can not access the title key directly. 

    <#assign boards = rest("/boards/nested").boards /> 

    <#list boards.board as board>

    ${board.title}

    </#list>

     
    • maxwelldhsu's avatar
      maxwelldhsu
      Guide
      8 years ago
      Thank you very much for the detailed explanation. really do appreciate it!!
    • maxwelldhsu's avatar
      maxwelldhsu
      Guide
      8 years ago

      TariqHussain - A follow up question. 

       

      I was actually trying to retrieve certain boards in a category. Your reply showed me exactly how to do that. I'm using the below: 

       

      <#assign boards = rest("categories/id/travel_blog/boards/nested").boards /> 

<ul>
<#list boards.board as board>
<li><a href="${board.@view_href}">${board.title}</li>

</#list>
</ul>

       

      Which gives the output for example 

      • videos (boards with blog posts in them)
      • Places to visit  (boards with blog posts in them)
      • Places to drink  (boards with blog posts in them)

      My goal is to have these load across the top in tabs. Then if I click on a category, the blog titles within the categories will populate like a nav bar: List of blog titles. 

       

      NEXT QUESTION is. How can I make it so that when I click the menu tab  "Places to eat" - it will load all blog titles as links. Then if I click a blog title, it will load the blog body contents. (I wouldn't want to load as an iframe, but the just the blog contents) 

       

      I know I'll need to make another REST call   rest("boards/id/placestoeat/topics") 

      This returns <node_message_context>, which then I'm trying to select the subject (blog post titles) for. I use the below which I can successfully pull the links and titles: 

       

      <#assign blog = rest("boards/id/videos/topics").node_message_context />

<ul>
<#list blog.message as article>
<li><a href="${article.@view_href}">${article.subject}</li>

</#list>
</ul>

       

       

      How do I connect these two REST calls with clicks to show/hide the contents? Would I need to involve some jQuery now? Eg, using something like .click on title, then to load the div element of the blog contents? 

       

      • TariqHussain's avatar
        TariqHussain
        Boss
        8 years ago

        maxwelldhsu - Yes, you will need to use JQuery to perform the show and hide function.  Suggestion regarding your code,  you can use API V2 in the place of API V1, it will save you multiples calls. e.g 

        API V1

        <#assign blog = rest("boards/id/videos/topics").node_message_context />
<ul>
<#list blog.message as article>
        <#assign articleBody = rest("/messages/id/${article.id}/body").value />
<li>
          <a href="${article.@view_href}">${article.subject}</a>
          <p class="article-body">${articleBody}</p>
        </li>

</#list>
</ul>

        API V2

         

        <#assign blog = rest("2.0", "/search?q=" + "select id,view_href,subject,body from messages where board.id = 'videos' and depth = 0"?url).data.items![] />
        <ul>
        <#list blog as article>
        <li>
          <a href="${article.view_href}">${article.subject}</a> 
          <p class="article-body">${article.body}</p>
        </li>

        </#list>
        </ul>

        You can toggle the article-body by using jQuery and set it hidden on the page load.