42

APEX Plugin – jQuery Menu

I’m releasing my first publicly available region plugin. It’s based on the jQuery Menu produced by the Filament Group. You can create a menu based on existing APEX lists, attach a menu to a breadcrumb or your page tabs, or create a menu based on the contents of a custom table.

It comes with 10 configurable options and requires the definition of a single SQL query for the menu contents in the form of:

SELECT id
,      pid
,      text
,      url
,      display_seq
FROM   [TABLE NAME]

Here’s an example based on an existing APEX list (my recommendation) with authorisation and condition support.

SELECT list_entry_id         id
,      list_entry_parent_id  pid
,      entry_text            text
,      entry_target          url
,      display_sequence      display_seq
FROM   apex_application_list_entries
WHERE  application_id       = :APP_ID
AND    list_name IN ('[List Name(s)]')
AND    auth_condition_check
       ( p_condition_type        => condition_type
       , p_condition_expression1 => condition_expression1
       , p_condition_expression2 => condition_expression2
       , p_authorization_scheme  => authorization_scheme
       ) = 0

Here’s the link to the demo, documentation, and download.

And here’s a YouTube demo of it in action….

  1. Omar Sawalhah says:

    Hi –
    It seems that I am the only one commenting this plug-in.I had a chance to use your plug-in, seems great, but I am facing a problem when using with custom theme based on jQuery also, http://www.apex-themes.com (delta theme). when click on the menu I don’t get it expanded, after hours of diagnosis, I see it is shown but behind any object in the theme, when the following code generated to show the menu items contents, using Firebug, it is behind the logo div. I had to put ” z-index:2″ to force it to appear in the front.

    my question is, where can I put the named attribute, and is there any better solution.

    Regards,
    Omar

  2. Jon says:

    Really like the plugin. Easy to install and deploy.
    However, I have found a couple of issues:
    1) logger.log is still referenced in your PL/SQL block, you have commented most of them out but you left one in.
    2) The menus don’t allow you to use ORDER BY, they always default to alpabetical. You probably need some way to ORDER SIBLINGS BY.

    Great first release though.

    Jon

    • mnolan says:

      Thanks Jon for letting me know, I’m making the required fix. I now know to watch out for that next time as logger is in all my environments, hence why I missed it :)

      As for the ordering good point, I’ll add an extra display_seq allowed column in the query and will swap out one of the options for choosing the column to order by which hopefully should resolve it.

      I’ll aim to do that in the next day or two when time permits.

      Thanks again for your feedback, much appreciated.

    • mnolan says:

      Hi Jon

      I’ve added in the extra support for ordering the menu items by. Hopefully you can test it out and let me know how it goes.

      Cheers
      Matt

  3. tony miller says:

    Re: Delta theme issue with your menu..

    For the pages in question, go into the page html header and add the following code:

    .fg-menu-container { z-index:2; }

    Love the menu and will talk with you again!!

    Thank you,

    Tony Miller
    LuvMuffin Software
    Webster, TX

    • tony miller says:

      Whoops, you can add it to the region header of the menu, thus it will carry over to the pages it is used in, I have it set for page 0 and WOW!!!

      Thank you,

      Tony Miller
      LuvMuffin Software

  4. Hey Tony,

    Developing a commercial app where I can definitely use this capability. The only thing I noticed is that the root menu only activates after a mouse-click, but the sub-menus appear on hover. Is there a way to make them all activate on hover?

    • mnolan says:

      Hi Jeff

      It’s actually Matt not Tony :) You’ll have to jump into the javascript/jQuery to solve that one yourself, but it should be possible.

      Cheers
      Matt

  5. Bruce Clark says:

    Hi:

    Thanks. I have it all working. However, how can I change the colour(s) for the button (fg-button) that it creates on the menu. I need to have this match the look and feel of my app.

    I wyould appreciate your help.

    Thanks.
    Bruce

    • mnolan says:

      Hi Bruce

      The color scheme is controlled by jQuery UI. You can change the colors of the backgrounds by rolling your own jQuery UI theme. See http://jqueryui.com/themeroller/

      Cheers
      Matt

      • Tony Miller says:

        Matt,
        Still using this plug-in, but running into a small nitpicky issue.. Using Theme 13 (I know, I know an IE 6 theme…) Is there a way I can have the text menu items be updated to standout more?

        I know the menu is using the theme’s css to display the buttons, but the text is hard to read with this theme, and the customer I have is REALLY hard to convince that change is good on occasion…

        Thank you,

        Tony Miller
        Dallas, TX

        • mnolan says:

          Hi Tony

          I’d recommend that you use firebug to inspect the CSS applied to the HTML elements in question, then change on the fly according to your requirements. Then add these new style references after the theme definition to override them or using the big !important stick :)

          Cheers
          Matt

  6. Harjeet says:

    I have a question about the display_seq. I’m trying to create the menu but I don’t know what to use as the display_seq value, can it be anything? is it an order by clause? I’m fairly inexperienced with APEX , but have been going through sites like this and the “Beginning Oracle APEX 4″ book to learn about APEX. Your help would be much appreciated.

    Thank you
    Harjeet

    • mnolan says:

      Hi Harjeet

      Your are correct, it’s just a column to determine the ordering of the menu items and can be a varchar or number, if you are happy with ordering by the menu item text just set it to NULL, or 1

      e.g.

      SELECT …
      , 1 display_seq

      FROM

      Cheers
      Matt

  7. Stephen says:

    When using the script:
    SELECT list_entry_id id
    , list_entry_parent_id pid
    , entry_text text
    , entry_target url
    , display_sequence display_seq
    FROM apex_application_list_entries
    WHERE application_id = :APP_ID
    AND list_name IN (‘[List Name(s)]‘)
    AND auth_condition_check
    ( p_condition_type => condition_type
    , p_condition_expression1 => condition_expression1
    , p_condition_expression2 => condition_expression2
    , p_authorization_scheme => authorization_scheme
    ) = 0

    I get the following error:

    Error at Command Line:10 Colum:33
    Error report:
    SQL Error: ORA-00907: missing right parenthesis

    Any suggestions?

    • mnolan says:

      Hi Stephen

      It’s either some funny quotes around MAIN_MENU or you need to remove the parameters from the procedure

      apex_stemco.auth_condition_check
      ( condition_type,
      condition_expression1,
      condition_expression2,
      authorization_scheme
      ) = 0

      Hope that helps.

      Cheers
      Matt

  8. fateh says:

    Dear Matt,

    I tried to apply Authentication on your Jquery menu long time ago, but I could not do it. But now I really need it.

    If you could just tell me What are:

    &&APEX_SCHEMA..wwv_flow_conditions

    &&YOUR_APP_SCHEMA_..wwv_flow_conditions_

    _..wwv_flow_conditions_

    Best Regards,
    Fateh

    • mnolan says:

      Hi Fateh

      Apologies for the delay in replying.

      &&APEX_SCHEMA..wwv_flow_conditions

      &&YOUR_APP_SCHEMA_..wwv_flow_conditions_

      The above refrer to the granting of a privilege on the wwv_flow_conditions package from the APEX schema to your application schema. It is required since wwv_flow_conditions is not a public available package. The authorization/condition function which I wrote is just a wrapper around both to perform the checks in SQL when writing custom APEX components/code which query the apex data dictionary. Basically anything that fails this validation in the query is omitted.

      Hope that helps.

      Cheers
      Matt

  9. fateh says:

    Dear Matt,

    Apparently, the code I posted in my previous thread does not show up. I am just confused where to add the code elaborated in
    PAGE TAB TEMPLATE CHANGES
    to
    Standard Tab Attributes
    in order to do Page Tabs Transform.

    Best Regards,

  10. D Grobler says:

    Thanks, it works perfectly!
    Dawie

  11. red6t6 says:

    Hi Matt,

    I don’t find the is_component_used function in apex_plugin_util. How can I change this function?

    10x,
    red6t6

    • mnolan says:

      Hi

      It appears you’re using an older version of APEX 4.0. I’ve checked the documentation and that function was introduced in 4.0.2. If you check out the jQeury Menu plugin documentation you’ll see a section “Conditions & Authorisations (Part 2)” which shows you an alternative function to make it work for you.

      Cheers
      Matt

  12. tconte says:

    Hi Matt,

    The menu plugin is great. I have it working well as long as a menu does go beyond one sub menu. When I get to an entry that is three down that menu goes up on the screen and hides the entries that are at the top of the list.

    I have set up a demo of it at http://apex.oracle.com/pls/apex/f?p=32575. You can login as demo/demo.

    Click on maintenance menu item then hover over lookup tables and either a-l or m-z. They both push the entries in those items up off the screen.

    Any thoughts on how to correct this would be appreciated.

    Tom

    • mnolan says:

      Hi Tom

      The menu positions up when there is not enough space in the page to position it down.

      This is a feature/bug with the javascipt, unfortunately I’m not the author of the javascript and it’s not being maintained anymore. I will log this issue and aim to invesigate the javascript when I have some free time.

      In the interim try increasing the height of the page and I think the menu will position correctly. e.g. body { min-height:800px; }

      Cheers
      Matt

      • tconte says:

        Matt,

        I appreciate your time in responding to my question. I have one more though. Were would I put the min-height declaration?

        Tom

        • mnolan says:

          Hi Tom

          You could edit your theme CSS file or, add it between a STYLE tag in your page template.

          Also note: min-height is not valid for IE6, but hopefully you’re not using this version.

          Cheers
          Matt

  13. Omar Sawalhah says:

    Hi
    Did you tried your authentication function against 4.1, It was working fine in 4.0.2 but after upgrade I find the auth function not working, I am not sure if the APIs has changed or something else, your input is highly appreciated.

    Omar

    • mnolan says:

      Hi Omar

      That would be because there are missing grants on the wwv_flow_conditions package to your application schema. You can either reapply the grants that are required or switch to the new authentication function defined in the documentation for 4.1 under the “General Usage -> Conditions and Authorisations” section.

      Cheers
      Matt

  14. Omar Sawalhah says:

    Hi -
    I am using your menu plugin, but facing a problem with authorization function you have, after upgrading to 4.1 the auth function does not seem to work properly, anyone has the same issue.

    Regards,
    Omar

  15. Omar Sawalhah says:

    Hi Matt,
    Your plugin works perfectly. I just maintained the authorization as per instruction I have to get privs from 4.1 after upgrade.
    Now I have an issue regarding RTL support. You have in the region attribute
    posOpts
    {
    “posX”: “left”,
    “posY”: “bottom”,
    “offsetX”: 0,
    “offsetX”: 0,
    “directionH”: “right”,
    “directionV”: “down”,
    “detectH”: true,
    “detectV”: true,
    “linkToFront”: false
    }

    I have an application that I have to have it bilingual (RTL, LTR), now when the application is RTL, I need to have the menu options flies left -> down, and for the LTR it will be right->down
    Please advice to solve this issue.

    Regards,
    Omar

  16. Fateh says:

    Hello Matt,

    I hope that you are doing well these days…
    Since last year, I have tried many times to attach your menu to “Tabs” ; but could not do it …
    Can you please spare 3 minutes and check it for me …
    http://theexecutivetowers.info:8282/apex
    work space: test
    User: test
    pwd: test
    * I applied your instruction for attaching the menu to the tab on Sample Application….

    Best Regards,
    Fateh

  17. Giedrius says:

    Hello,

    This plugin is amazing. Thank you.

    Giedrius

  18. Saverio says:

    Hi Matt,,
    I would like to use a custom function in the where conditions;
    something like this …

    SELECT list_entry_id id
    , list_entry_parent_id pid
    , entry_text text
    , entry_target url
    , display_sequence display_seq
    FROM apex_application_list_entries
    WHERE application_id = :APP_ID
    AND list_name IN (‘[List Name(s)]‘)
    AND my_function(entry_target) =1

    Is this possible ?

    thanks
    regards
    Saverio

    • mnolan says:

      Hi Saverio

      Apologies for the delay in replying, what you propose looks fine. If you have any pararmeters to the function you can use application/page items as bind variables for the parameters if needed.

      Cheers
      Matt

  19. Raoul says:

    Great plugin, great guide on how to use the plugin.

  20. mnolan says:

    Hi SK

    Apologies for the late reply. Did you adjust you bredcrumb template as per the documentation? If so the issue you might be facing is that your first breadrumb entry contains spaces which is not allowed. If you can provide a demo on apex.oracle.com then I might be able to troubleshoot for you.

    Cheers
    Matt

  21. mnolan says:

    Hi Jas

    Apologies for the delay in replying, it sounds like you need to set a fixed width on your region in the region sttributes setting e.g. style=”width:600px”. Otherwise if it does not have a region template then you will need to set the styling via CSS

    e.g.

    .fg-toolbar { width: 600px; }

  22. D Grobler says:

    Hi

    Firstly thank you for this plug-in. We find it very useful. We started to use Apex checksum security feature and can’t find a way to generate a checksum to open the menu target page.

    Is this possible using your menu plug-in?

    Any suggestions will be highly appreciated.
    Regards
    Dawie Grobler

  23. mnolan says:

    Hi

    That has been an oversight on my behalf if you try changing the following line in the package body, should be on about line 127


    --sys.htp.prn ( ' <a href="'||APEX_APPLICATION.DO_SUBSTITUTIONS(nvl(l_row_set(p_url_column)(row),'#'))||'" rel="nofollow">' ) ;
    sys.htp.prn ( ' <a href="'||APEX_UTIL.PREPARE_URL(APEX_APPLICATION.DO_SUBSTITUTIONS(nvl(l_row_set(p_url_column)(row),'#')))||'" rel="nofollow">' ) ;

    Hopefully that should do the trick.

    Cheers
    Matt