Hierarchical Viewer Menu

Les Girvan asked on May 24, 2021 15:42

Hi Guys,

I am trying to complete my mobile menu using the Hierarchical Viewer, but struggling to get it working correct. I have setup the desktop version using the Hierarchical Viewer, but cannot figure out where I am going wrong for the mobile menu.

My individual transformations are:

MhMenu1.xml (header transformtion, level 0 )

<li>
<a href="javascript:void(0)">
  <span class="{%GetDocumentUrl()%}">{%HTMLEncode(DocumentName)%}</span>
 <span class="toggle-sub-menu"></span>
</a>

MhMenu3.xml (header transformation level 1 apply to all sublevels )

<ul class="sub-menu">

MhMenu4.xml (item transformation, level -1 apply to all sublevels )

<li><a href="{%GetDocumentUrl()%}">{%HTMLEncode(DocumentName)%}</a>{^SubLevelPlaceHolder^}</li>

MhMenu6.xml (footer transformation, level -1 apply to all sublevels ) </li>

This is the way the HTML should render:

<li>
    <a href="javascript:void(0)">
        <span class="#">Parent 1</span>
        <span class="toggle-sub-menu"> </span>
    </a>
    <ul class="sub-menu">
        <li><a href="~/wvd">Child Page 1</a></li>
        <li><a href="~/free-trial">Child Page 2</a></li>
        <li><a href="~/questionnaire">Child Page 3</a></li>
    </ul>
</li>
<li>
    <a href="javascript:void(0)">
        <span class="#">Parent 2</span>
        <span class="toggle-sub-menu"> </span>
    </a>
    <ul class="sub-menu">
        <li><a href="~/optimize">Child Page 4</a></li>
        <li><a href="~/wvdwhat">Child Page 5</a></li>
        <li><a href="~/wvduserex">Child Page 5</a></li>
        <li><a href="~/wvdscaling">Child Page 5</a></li>

    </ul>
</li>

But its not working like this, you can see example of how its working here <...>

I've tried every combination of settings, levels, apply/not apply to sublevels, with no joy, can you suggest advise of changes I should be making ?

Recent Answers

David te Kloese answered on May 25, 2021 12:22

Hi,

FYI - this is a public form so not sure you want to link to none production environments.

anyway is it correct you have 2 menus? As it seems to list Home twice... but only the first one seems your HTML as above. Meaning we should ignore the 2nd "home" and "ecommerce website" part?

Secondly what is the selection for the Hierarchical Viewer? As it seems to only list Home.

Any page types, max items or where or other conditions set?

0 votesVote for this answer Mark as a Correct answer

Les Girvan answered on May 25, 2021 13:55

Hi David,

Thanks for your feedback, and take your point about the url, have tried to edit but the page is throwing an error [Error loading the control 'wEQR', check event log for more details]

Anyway to answer the questions, I have set the path and it should show 6 parent pages, all 'PageMenu' Types with three of these having sub pages, 'e-commerce website' is one of them. the settings for the Hierarchical viewe is: Image Text

Currently its only rendering the 1st Category, but not its sub pages, then it repeats the 1st parent again, with the subpages, which are not listed and not other parent pages:

Image Text

And this is the HTML being rendered, I have highlighted the repeated Parent and its sub pages. Image Text

Many thanks Les

0 votesVote for this answer Mark as a Correct answer

David te Kloese answered on May 25, 2021 14:10 (last edited on May 25, 2021 14:10)

I see... (I removed the url for you)

The repeating is because you have the following 2:

  • MhMenu1.xml (header transformtion, level 0 )
  • MhMenu4.xml (item transformation, level -1 apply to all sublevels )

I think you need to combine those. As they now both get fired for the same level 0

0 votesVote for this answer Mark as a Correct answer

Les Girvan answered on May 25, 2021 14:25

Hi David,

Thanks for that, so are you saying create one transformation, combining MhMenu1 & MhMenu4 as the item transformation?

Cheers Les

0 votesVote for this answer Mark as a Correct answer

David te Kloese answered on May 25, 2021 14:40 (last edited on May 25, 2021 14:44)

If you only have 2 levels deep max you could break it down to something like:

nope this was wrong ^_^

Might want to include some logic to only render the toggle span if there are sub-items

0 votesVote for this answer Mark as a Correct answer

David te Kloese answered on May 25, 2021 14:53

something like this...

Header 0 <ul>

Footer 0 </ul>

item 0: 

  • <a href="javascript:void(0)">
    <span class="#">Parent 1</span>
    <span class="toggle-sub-menu"> </span>
</a>
 **SUBPLACEHOLDER**
</li>

    1- header <ul class="sub-menu">

    1 - footer: </ul>

    1 - item: <li><a href="~/wvd">Child Page 1</a></li>

    • 0 votesVote for this answer Mark as a Correct answer

    Les Girvan answered on May 25, 2021 15:42

    Hi David,

    Thanks for that, I am however, working with menu structure, so have to stick to what it was created as.

    To update you, I have made some progress by changing a header to a first item transformation, and have removed the first <li> and last </li> and put them in the content before and content end within the web part. so the footer is now just the closing for the header <ul class="sub-menu">

    Image Text

    The menu is rendering,

    Image Text

    although the submenu items are not showing, despite being in the HTML:

    Image Text

    So I am close and assume this is now down to the header transformation, although I have tried the levels and the sublevels checkbox?

    0 votesVote for this answer Mark as a Correct answer

    David te Kloese answered on May 25, 2021 16:28

    You currently miss the <span class="toggle-sub-menu"> </span> in your top link. That renders your toggle

    0 votesVote for this answer Mark as a Correct answer

    Les Girvan answered on May 25, 2021 18:07 (last edited on May 25, 2021 19:01)

    Hi David,

    I have that in the 'First Item Transformation:

    Image Text Should this be in a transformation of its own, and if so, set as a header/item/footer?

    0 votesVote for this answer Mark as a Correct answer

       Please, sign in to be able to submit a new answer.