Last updated on Saturday, March 30, 2019
[Update 30-Mar-2019 there is a new version of IG Cookbook here]
Last week I presented Interactive a Grid Deep Dive for APEX Office Hours where I demonstrated a new version of the IG Cookbook.
The video and slides are now available. The presentation covered important aspects of the Interactive Grid architecture. As promised I’m making the latest IG Cookbook (release 4.0) for APEX 18.2 available for download. As always make sure you install the Sample Interactive Grids app first because it creates some needed tables.
There are many exciting additions and improvements.
New sample pages added:
- Column Help: This page shows how to display the column help in a tooltip on the column header. Example of an async tooltip including caching. Also shows a trick for getting the current focused column.
- Wide Report: This examples shows how to deal with the issue of having to scroll to the bottom of a page to access the horizontal scroll bar.
- Master Detail: This page demonstrates how to put an Interactive Grid into an Inline Dialog region and how to disassociate the detail region from the master so that the detail model instance is only set on demand. It also demonstrates how to deal with the IG master detail limitation where it is not clear which details have been edited and if there is a validation error in any of the detail record edits the user has no idea which one it is. There are two versions of this page one that saves changes when the detail dialog closes and one that saves all detail edits with the master.
- Lazy Tabs: This shows how to make interactive grid not load and render any data until the tab it is in is activated. This helps improve page load time when there are many interactive grids on the page. There are two versions of this page. One scrolls the whole page and the other has a fixed size page and each tab has its own scrollbar.
- Tabbed Record Editing: This page shows how the model can be used independently of the Interactive Grid UI. It allows editing any number of employee records each in their own tab.
Summary of changes:
- Many fixes and improvements were made to the Rich Text and Custom Popup page. The Custom Popup plug-in is updated. It now supports inline popup or inline dialog region templates. It supports multiple inputs and outputs. Search is improved in the popup that contains an Interactive Grid. There is a separate demo page for the Custom Popup plug-in.
- The Tasks page now supports Alt+Up and Alt+Down keyboard shortcuts to reorder selected rows. Previously the grid widget was blocking those keys.
- The Tasks page has a number of fixes and improvements including a checkbox column. This is something people have been asking for since Interactive Grid first came out. The checkbox works in both edit and navigation mode.
- Most of the code for the Tasks page has been moved to files tasks.js and tasks.css. Because this page became a more complete and compelling example of multiple techniques the code grew larger than would fit in the declarative JavaScript code attributes.
- The IG Cards page has improvements to the way search is handled. Each search replaces the previous one rather than add a new filter. The report settings area is only shown if there are other filters.
- A number of pages that update an inline modal dialog or popup have been updated to use the new (not yet documented) apex.theme openRegion and closeRegion methods.
- The Windows List View Style page had some CSS rules updated because the hover checkbox broke due to changes in markup for grid widget pseudo selection checkboxes.
- Copy Down page was changed to use the grid widget methods rather than custom code to go direct to the model.
- The Spinner page needed to have the jQuery UI file path updated for new jQuery UI version.
- The Update Selection page has a minor improvement to Increase Salary inline dialog region. How dialogs are opened and closed is updated.
- The Custom Row Height page needed a CSS fix so that the column items would be vertically centered in the tall cell. Also updated to reflect the new automatic handling of heading height.
- The Variable Height Rows page is updated to change the way the Notes column is truncated. This works now because a hidden column with Value Protected = No can be updated in the model without getting a server error.
- Cell Style Based On Data was updated because the grid widget now responds to highlight metadata changes. The refresh is no longer needed.
- A number of fixes were made to the Double Grid page.
- Made the left side nav wider using Theme Roller.
- Added new updated template for inline popup region.
- Added new region template for jQuery UI Tabs.
- There is an install validation to check that the needed tables exist. Hopefully this will catch people that install this app without installing Sample Interactive Grids first.
You can read about and download the previous IG Cookbook version here.
Feel free to discus the techniques shown in this app or issue with this app on the APEX Discussion Forum. This is not an officially supported sample but I’ll reply if possible and you can all help each other as well.
@Alex I think your question would be good to ask on the forums https://community.oracle.com/community/groundbreakers/database/developer-tools/application_express. IG will always add its own where clause but you can include your own and it can reference other page items. This lets you do additional filtering such as on a publication. Just include the page item in page items to submit.
Regards
Hi John,
First of all, thank you for your valuable publications!
I would like to ask you to provide a little bit more info regarding the IG search component. Let say that I need to extend the standard IG search on EMP table with ability to find all employees that are listed as authors of some publications in PUB table. I see 3 standard solutions:
– Join between EMP and PUB tables with DISTINCT – it has performance problems
– Using separate IGs for PUB and EMP – not comfortable for user: two filters in different regions, with different look and fill
– Disable standard IG filter and create entirely custom filter based on another IG
Before I select the third one, I would like to ask you: is it possible to customize the standard IG filtering functionality for the above mentioned scenario? I may implement part of the solution without customizations:
– add dummy column (e.g. Publication) and enable filtering for it (e.g. simple text)
– select standard filter condition, e.g. C, EQ, IN, etc.
– populate single or list of ISBN numbers (e.g. ISBN1, ISBN2) and press GO
What I don’t know is how to replace generation of standard where clause “Publication in (ISBN1, ISBN2)” with:
emp_id in ( select emp_id form PUB where ISBN in (ISBN1, ISBN2) )
I appreciate any suggestion on this,
Best regards
Alex
Sorry, John, you can drop my question – the problem is not connected to the IG reordering (I took the code from your Task ordering example), but to the NLS settings conflict between APEX and DB. Maybe, IG has nothing to do with it. I am investigating further.
Hi John
I have a problem with IG lines reordering. The site works in German, French and Italic. I have created a page on http://www.apex.com that reproduces the error..
Initially, everything works OK (no NLS settings). Then, I set german NLS on “Application definition attributes”, “Globalization” tab, to German, and the fun begins.
When I move a line between two others and the order field value becomes fractional (1.5, ot another decimal fraction), the fractional value is shown correctly with a dot, but owhile saving, I get the error: “Sort soll numerisch sein” (the column Sort must be a number).
I have added a column in my IG with session’s NLS_NUMERIC_CHARACTERS parameter. It shows “,.”
Then, I try to set the NLS in the application’s Security section (executed at the start of each page):
BEGIN
EXECUTE IMMEDIATE ‘alter session set NLS_NUMERIC_CHARACTERS = “.””‘; — dot as decimal separator and apostrophe as thousands separator.
END;
After this, after saving, decimal values loose their decimal separator and become integer (no truncation, no rounding – just vanishing dot). So, this is not a solution.
So, my question is, how to set correct NLS parameters for the IG validation?