Conditional rendering of navigation items.

  • 9
  • Idea
  • Updated 2 years ago
  • Implemented
Would be super-helpful!
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 3 years ago

  • 9
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Yup.  I can see that. 
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
I know you probably hate this question...

any idea when Planned might become Implemented?
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Looks like Matt beat me to the punch on this one - Conditional Rendering of menu items would eliminate a lot of custom code that we currently have written to manage our menu system.  

Please please please :)  and thank you!
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Yeah, this is a no-brainer. Working on it!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Awesome news, thanks Ben!
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Working on it to be part of a patch?
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Bugs are first priority, then it's on to these things!
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Yup. As Ben says, "no-brainer".
Photo of Joseph Ort

Joseph Ort

  • 80 Points 75 badge 2x thumb
This looks implemented but I see empty spaces where those items "would be".  I have different rep types and render a group of Nav Items for 1 and a different one for the other. The nav bar breaks up or has empty spaces when logged in as someone with sections not meeting render criteria.
Photo of Joe Ort

Joe Ort

  • 2,256 Points 2k badge 2x thumb
Acknowledged?



That shows all of the blank spaces and a Nav item going to another row when there's plenty of room to slide into the first row.
Photo of Emily Davis

Emily Davis, Employee

  • 3,502 Points 3k badge 2x thumb
Joe, I just submitted this to our dev team. So, yes, Acknowledged. Thanks for the bug report!
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Hello, Would there be any ETA for this bug to be fixed?

I'm wondering , as right now it's affecting us as well, and would like not to have to create a Different navigation menu for each role...

Thx
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Sorry this is still outstanding.  The conditional rendering works,  but there is evidence of the hidden piece remaining behind that looks weird.. 
(Edited)
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Hey Rob ... did this bug fix get a guernsey for Rockaway?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
This reply was created from a merged topic originally titled unrendered nav component items cause wrapping/css problems.

I thought I saw another thread about this a while ago, but I couldn't find it again. Sorry if this is a repeat.

This seems like a pretty simple fix, guys. Right?
Photo of Amy Dewaal

Amy Dewaal, Official Rep

  • 8,200 Points 5k badge 2x thumb
Matt,

Thanks for pointing this out. Our devs are aware of this and we'll let you know when this is fixed in a future release.

Thanks!
Amy
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Hey friends, since Skuid is taking it's time to get a fix out for the conditional rendering bug, you can use this inline script:

(function(skuid){
    var $ = skuid.$;
$(document.body).one('pageload',function(){ $('#MyNavComponentId').children(':empty').remove(); }); })(skuid);

 Just be sure to change MyNavComponentId to the unique id of your nav component. Alternatively, you could use something like
 $('.sk-navigation').children(':empty').remove(); 
to handle all navigation components instead of a specific one.
(Edited)
Photo of Craig Rosenbaum

Craig Rosenbaum

  • 4,776 Points 4k badge 2x thumb
Thanks Matt! I just wrote something for this yesterday, although mine was much less efficient. I used an $.each loop and 'this.getAttribute("data-rendered") == "false"'.
Photo of Karen Waldschmitt

Karen Waldschmitt, Official Rep

  • 8,240 Points 5k badge 2x thumb
Thanks for sharing this workaround Matt! 

Karen
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Matt/Craig -

In general, removing DOM elements that Skuid adds could lead to undesired behavior in some situations. In this case, you should be OK since it's a DOM element inside of the component itself.

With that said, rather than use Javascript for this, you should be able to accomplish the workaround with pure CSS.

Try one of the following:

1) To hide all empty DIVs with any navigation component
.sk-navigation div:empty {
display:none;
}

2) To hide all empty DIVs within a specific navigation component (Specify a unique Id on your Nav component - in this case its called myNav)
#myNav div:empty {
display: none;
}
Photo of Craig Rosenbaum

Craig Rosenbaum

  • 4,776 Points 4k badge 2x thumb
Thanks for the information Barry. My JS snippet actually added a CSS class that has display:none in it. A much less eloquent solution than yours - but it did the job :)
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
This issue has been incorporated into Rockaway Iteration 13 and is now available from the Skuid Releases page at http://www.skuid.com/skuidreleases. As a reminder, Salesforce does not allow reverting back to prior versions of managed packages. Skuid always recommends installing new versions in a non-business critical sandbox environment to test all mission critical functionality before installing into a production environment.

Thank you for your patience while we worked to implement this. 

Mark