Thursday, May 21, 2015

Fixing Super LOV in Universal Theme

When you migrate to APEX 5.0 and the Universal Theme you might see that some plugins are not behaving correctly anymore. In this post I'll discuss the Enkitec Modal LOV plugin.

When I ran the plugin in my APEX 5.0 app with the Universal Theme it looked like this:


There's too much space in the search bar and the close button is not showing up with an icon.

Here're the steps I did to fix it. First you need to download the css file of the style you use and the js file from the plugin in Shared Components. I use the smoothness.css style most of the times, so I'll use that as an example.

To fix the close icon, add !important to the png:

.ek-ml .ui-state-default .ui-icon {
background-image: url(ui-icons_888888_256x240.png) !important;
}

Note: you can do that for all those png on line 467 till 489.

To fix the height, add following css to smoothness.css:

.superlov-button-container {
  height:50px;
}

And finally in enkitec_modal_lov.min.js change the height of the searchContainer from a dynamic height (r) to 0px:

$searchContainer.css("height","0px")

Next upload those files again to the plugin.

When you run the plugin it should give you this result:


Now the bigger question is; do we still need that plugin? In APEX 5.0 there're native Modal Pages, so you could create an Interactive Report and set the page as a Modal Page. Next you can hook that up to a button or link and you've just build your own Modal LOV.

I still like to use the plugin at the moment (as it's just one item on the page), but it could use a refresh to make it look nicer and more inline with Universal Theme.

Wonder what you think - would you build your own Modal LOV in APEX 5.0 or would you still prefer to use a plugin? 

4 comments:

Karen said...

Depends ... on the cost (resource-wise) of the change in the app when upgrading. In apps where I have extensive use of the Super LOV plug-in, I would fix the plugin and continue use it as opposed to refactoring. For new development, I would build my own Modal LOV.

Scott Wesley said...

I had an issue with what apepars a very similar plugin (Skillbuilders Super LOV), but in this case it was referring to browser.msie. Including jQuery migrate files in the user interface attributes helped, but as an answer to your question - I'd go native where possible. Plugins hindered us the most during the APEX5 upgrade, so less moving/foreign parts going forward would be great.

Unknown said...

The modified plugin worked normaly into Apex 5.0 but does'nt work into Apex 5.1 . Mouse not respond. Any suggestions ?

Thanks.

Anonymous said...

I am having the same issue. mouse does not respond to the clicks. were you able to figure out the issue?