How to initialize a Navigation List

Question

Hello, I'm trying to build a navigation list in a widget so that it's mobile friendly. I see that the HTML structure of other components looks like: When it renders on mobile (and the user clicks on its UI control) I expect it to render a selection list from the bottom up, consistent with other components in Verint: However, when it renders it doesn't initialize properly, despite having the navigation-list and navigation-list-item classes. How can I initialize a navigation list correctly? Chris

Michael Monteleone · Accepted Answer

Hi chris.wilkinson . I'd recommend having a look at the links UI Component . This is the UI API which supports all of the collapsing lists of links in the UI, and it automatically renders overflowed links as a pop-up on desktop or sheet on mobile. The HTML structure you posted is close, but it's the output of the UI component, and not the source HTML it needs in order to initiate. That would closer to:

Three key things to note are the use of "ui-links" class, which triggers the ui component , as well as the "More" and "Cancel" links, which are rendered only when needed by the component. The use of other classes like navigation-list or navigation-list-item is completely arbitrary. It's also worth noting that this can render horizontally, vertically, or both. For example, the following with a configuration of horizontal and "data-maxlinks" constraint of 2 will render a horizontal list of "Foo", "Bar", "More", where "More" opens a pop-up (or sheet if on mobile) with "Baz", "Ham", "Eggs", and "Cancel".

And if the data-maxlinks and/or the horizontal space of the links takes up more space than is available on a layout (desktop or mobile) it will automatically collapse the remaining links behind "More" to show as a pop-up or sheet. Hope this helps!

Michael Monteleone · Answer

I agree that parameter could use more documentation. newLink can be an anchor DOM element, jQuery selection of an anchor, or even just a string representation of an anchor. Generally, whenever the client API accepts an element of any kind, that element can be an actual DOM element, jQuery selection, or string. So, in your example, you could dynamically append a link with: jQuery('#mobile-dashboard-ui-links').uilinks('add', 'New Link!');

Steven Heffner · Answer

Hey Chris, don't include the class as part of the selector. And if you're doing this from a widget, use $core_v2_widget.UniqueId to wrap the id and ensure uniqueness across the full page.

How to initialize a Navigation List

Top Replies