Dynamic Menus w/ JQuery

Dynamic Menus w/ JQuery

  
I have started putting together some widgets so that I can have dynamic drop down menus in my application.  I am able to read what the element is supposed to link to, but then I lose all of the outsystems functionality with the popup's and possibly other features.  Does someone have a better way to build the menu?

Note:  I have been trying to do this on the Horizontal Menus in my app.
Hi Rebecca,

I opened your eSpace to try to understand what you were trying to achieve, but it wasn't completely clear for me so I apologize in advance if I'm answering the wrong questions. :)

It will depend on how dynamic you want the menus to be, I guess, but there will always be some sort of compromise between the ease of using OutSystems features vs the control and flexibility you can get from pure JavaScript code.

If you want to minimize the impact of the hard-linking to webpages on JavaScript, my main suggestion will be to create entry points for the expected menu links, and use those URLs in the menus.

If you know what the menus - or some, at least - will contain beforehand, then you can always code them in pure OutSystems language, and the only JavaScript you would have to use would be the "onhover" hide or show the respective menu, and positioning it in the screen.

Does this make sense? Does it somewhat answer your question?

If not, do let us know in more detail what you're trying to achieve, and what your concerns are regarding building the menu.

Regards,

Paulo Tavares
I was hoping to do simliar code to what is being used in the Client Side tabs where you put containers inside of a wrapper and then sub-wrappers inside of this that contain the title to be shown on the menu and the links within this container would be shown as menu items.  The JQuery menu code that I found also allows for sub menu items as well but I haven't added this functionality to the code that is parsing the outsystems containers.
Hi Rebecca,

Well, I apologize for not having gotten back to this thread before.

Indeed, you had begun a very ambitious project, and last time you commented here you were having problems with using the Agile Platform capabilities alongside it.

I just published a component that exemplifies drop-down menus in the Agile Platform, and also has a web block that you can drag and drop to a Style Guide 5.1 (only 5.1, sorry) menu, and with 3 simple steps it will convert the menu to a drop-down menu in runtime.

I did not manage to get it to work in IE6, sadly, and I'm pretty sure that there will be other more obscure browsers that will also have issues with it. However, if anyone manages to get it to work on IE6, do let me know!

Also, because of that limitation - and because the menu is generated in runtime - I'm a bit wary of using it in production environments, for possible performance issues and, of course, the fact that IE6 is out of the equation :)

Let me know if this helps.

Regards,

Paulo Tavares
Cool!  Thanks for the component.  I haven't had a chance to get back either because of other projects.  I will defintely take a look.  Maybe after more experience with the agile platform I'll be able to figure out what I was doing.  B-)
Well, as I said, what you were doing was pretty ambitious, and from looking at your eSpace I thought it would take more time building on top of the one you had published than doing it another way, from scratch.

Your way is probably the best, though, since mine is just a quick proof of concept I put together. From the short time I looked into yours, however, I really couldn't figure out a way to evolve it while keeping it simple and still making it work properly.

If you do get back to it, let us know how it goes!

Regards, and have a great weekend!

Paulo Tavares
Hi,

I just created a webblock to use jQuery menus from this site http://apycom.com/
I will fix the webblock to work with menu entities from the styleguide.

Regards,
Joop