OrangeScape Developer Community

A community for Application Developers on OrangeScape's Platform-as-a-Service

Theming your applications - Customizing Menus

So, you have created your application, applied Themes, the look and feel is cool.  But, that menu, why is there in the Horizontal, weren’t you thinking of keeping it in the Left hand side of the screen, one below the other?!  or, how about having something like the Windows Explorer, where the folders are listed as a tree.  or, Wait, how about an application without menus?!! 


Menus!

In Orangescape, the menu data is constructed in the usual way of Un-ordered lists (<ul><li> structure).  The default menu UI is being handled by, jqueryslidemenu javascript library.  Which means, yes! you guessed it, you can change it to whatever library you want to and have the desired menus, and effects.  It’s as easy as that...  really. 

(ok. you may have to make some small changes to get that perfect finish in some cases, but for the rest, it really works out of the box)

 

How to do that?

Get the menu library that you have decided upon (should be a single js file in most of the cases).  place the js library in orangescape/common/scripts folder in the theme pack.  and place any corresponding style sheets(.css files) in orangescape/common/css.  


Now to make sure that these files are getting loaded when the application is called, open import.html in the templates folder of your theme pack. import the js library and css files. (you can refer to the first two lines of import.html, which calls the jqueryslidemenu.js and jqueryslidemenu.css to see how to do it).  A little further below in import.html you can find a function called loadMenu(url, common_static_path).  Inside the function there you can find this function call, 

jqueryslidemenu.buildmenu(“myslidemenu”,arrowimages)

This is the function call used by jqueryslidemenu library to create the menu UI which comes by default.  replace this function call with the one which calls the function corresponding to you library, to build the menu UI.


And, that’s it. now you should have your custom menu UI on screen instead of the default menu UI. Maybe, based on the menu, that you have decided upon, there may be other files to be changed. If you want to do a vertical menu, then you will have to consider editing header.html and theme.html for proper positioning of the menu.


I don’t want to have a menu bar.

That’s even more easier.  Don’t do any of the things mentioned above.  Just open import.html and then, comment out the line which calls the loadMenu function (not the function declaration line), should be 8th or 9th line. (Type // in front of the line to comment it out).  that is, search for the following line and comment it 

loadMenu("/$metadata.getApplication().getSheetId()/1/menu?sessionId=$context.getUser().getValue('UserLoginModel')","$common_static_path");

for default theme files ref to blog post Theming your applications

Views: 227

Comment

You need to be a member of OrangeScape Developer Community to add comments!

Join OrangeScape Developer Community

Comment by Kamal.S on March 27, 2014 at 3:09pm

© 2018   Created by OrangeScape Technologies.   Powered by

Badges  |  Report an Issue  |  Terms of Service