Dropdown selection for navigation

Ryan Elliott asked on March 25, 2019 19:41

Currently have a Repeater web part that is building out a dropdown selection based on the children of a parent page. The repeater is using a transformation to display the child items as needed. I also have a JS webpart included in the same zone to handle the navigation to the selected child item.

My issue is pulling the ID for the specific child page in the dropdown, and then navigation the user to that specific URL for the child page.

Recent Answers

Rui Wang answered on March 25, 2019 19:59 (last edited on March 25, 2019 20:02)

Why do you need the ID instead of the NodeAlias of the page? Your transformation can generate options like this. Then your JS can direct to the NodeAlias URL.

<option value="{% NodeAlias %}">{% DocumentName %}</option> or <option value="{% GetDocumentUrl()%}">{% DocumentName %}</option>

0 votesVote for this answer Mark as a Correct answer

Ryan Elliott answered on March 25, 2019 20:17 (last edited on March 25, 2019 20:59)

This is what my transformation looks like to build the items (child pages) in the drop down:

HTML Before for the repeater:

<section class="bg-green p-3 text-center">
  <div class="dropdown">
    <button class="btn btn--secondary btn--natural dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% CurrentDocument %}</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

Transformation code:

<div class="dropdown-item" href="{% NodeAlias %}"> 
  <div class="media"><img class="mr-2" src="{% GetAbsoluteUrl(Thumbnail) %}" alt="">
    <div class="media-body">
      <p>{% DocumentName %}</p>
    </div>
  </div>
</div>

HTML after for the repeater:

    </div>
  </div>
</section>

The Path for the repeater is pointed to the parent page and set to only include sub-items.

0 votesVote for this answer Mark as a Correct answer

Rui Wang answered on March 25, 2019 20:55 (last edited on March 25, 2019 20:57)

So you have a dropdown item, not a dropdown list? Still not sure why you need the childID, but you can use macro {% DocumentNodeID %} to get the NodeID or {% DocumentID %} to get the page ID. You can still use the macros I mentioned above for the URL of the child page.

0 votesVote for this answer Mark as a Correct answer

Ryan Elliott answered on March 25, 2019 21:00

I've edited my previous response. I had pasted to wrong item in for the HTML Before for the repeater.

I've tried the macro's you've suggested, and they are all returning information for the Parent page item, nothing for the child pages

0 votesVote for this answer Mark as a Correct answer

Rui Wang answered on March 25, 2019 21:04

Is your repeater listing out child pages if you simply display {% DocumentName %} in the transformation? if not, is the path you have for the repeater set to /parnetpath/% to get all the child pages?

0 votesVote for this answer Mark as a Correct answer

Ryan Elliott answered on March 25, 2019 21:11

Yes, my path for the repeater is /ParentPage%

If I use {% DocumentName %}, the transformation displays the ParentPage (called Partners), but if I use {% Title %} in the transformation, the child page titles are displayed in the drop down.

0 votesVote for this answer Mark as a Correct answer

Rui Wang answered on March 25, 2019 21:15

If you use {% GetDocumentUrl() %}, does it display the URL of each child page? If so, you can direct the traffic there with your JS.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on March 25, 2019 22:25

If you want to get information about child pages based on the page being rendered, there is no direct macro for that without doing another query. Your macro would look like below (not tested):

Documents["/home"].Children

This will get all the names of the children. You can also test this macro with a valid path or NodeID in the System > Macros > Console app.

0 votesVote for this answer Mark as a Correct answer