Going to the
Grid:
What the APEX 5.1
Interactive Grid
Means or You
and Your Users
Karen Cannell
kcannell@thtechnology.com
TH Technology
TH Technology
Note to Early Slide Downloaders:
I edit my slides frequently up to
the day of the presentation.
Please check back for the latest
slides and references.
TH Technology
It was the best of times,
it was the worst of times …
Dickens
in Tale of Two Cities
TH Technology
It was the best of features,
it was the worst of features …
Anonymous APEX Developer
re Tabular Forms
TH Technology
About Me …
• Mechanical/SW Engineer - Analyzed, designed,
developed, converted, upgraded, enhanced legacy &
database applications for 30+ years
• Building Web/APEX applications for government, medical,
engineering industries since HTMLDB beginnings
• Leveraging Oracle 10g,11g,12c suite of tools
• Editor Emeritus, ODTUG Technical Journal
• Oracle Ace Associate
• APress Author
• ODTUG Director
TH Technology
About You …
• Oracle Technology ?
• Years w APEX ?
• APEX Versions ?
• Interactive Reports and Tabular Forms ?
• Customizations ?
Biggest Gripes?
TH Technology
Goals
• Understand Interactive Grid
(I-Grid) Features
• How to Build, Upgrade to and
Work With an Interactive Grid
• Pros / Cons of Replacing Legacy
IRs/Tab Forms w Interactive-Grid
TH Technology
Agenda – Interactive Grid
• Introducing Interactive Grid
• How To Build
• How To Upgrade
• Validations
• Advanced
• JavaScript Customizations
• Pros/Cons ~ Discussion ~ Questions
TH Technology
Evolution: Interactive Reports
• APEX 4.0
• The New Big Thing
• APEX 4.1
• More Column Types
• Improved Group By, Add PIVOT
• APEX 5.0
• Reengineered – CSS and JS, Widgets
• APEX 5.1
• Interactive Grid – JQuery Widgets
 Shift to Widgets
 All Widgets
TH Technology
Evolution: Tabular Forms
• APEX 3 – Bare Bones
• APEX 4.0
• RadioGroup, PopUp LOV, Simple CB
• Declarative Validations
• APEX 4.1
• :COLUMN References
• Improved Error Handling
• APEX 4.2, 5.0
• No Major TF enhancements
• Major IR Rewrite
• APEX 5.1
• Editable Interactive Grid (a Plugin)
 Beginning of Shift
 All Widgets
TH Technology
NOTE: APEX 5.1.1 Patch
John Snyders Interactive Grid API Improvements
http://hardlikesoftware.com/weblog/2017/03/28/ap
ex-interactive-grid-api-improvements-in-5-1-1/
• Toolbar
• Model
• IG Widget
• IG Configuration
TH Technology
Beware
APEX 5.1.1 IGrid APIS are
DIFFERENT
from APEX 5.1.0 IGrid APIs …
You Will Have To Upgrade < 5.1.1
IGrid Customizations
TH Technology
In the Sandbox …
TH Technology
Out of the Sandbox
TH Technology
Interactive Grid == Better Sandbox
TH Technology
Interactive Grid
(Interactive Report or Tab Form)
+ <All the Features You Ever Wanted>
(Thank You APEX Team!)
-----------------------------------------
Interactive Grid
TH Technology
Direction
Interactive Report
Tabular Form
Interactive Grid
Now
Future
TH Technology
IGrid Architecture
Interactive Grid – Under the Hood
J Snyders
http://hardlikesoftware.com/weblog/201
6/06/08/interactive-grid-under-the-hood/
Interactive Report
• Generates HTML on
Server, part of Page
• Data Returned w UI
Markup
• One Big JS Module
Interactive Grid
• HTML Renders on
Client
• Data/Edits from
Server via JSON
• Collection of
Widgets
Interactive Report
• Collections
(pre 5.0)
• Browser Decides
Column Width
table-layout: auto;
Interactive Grid
• Model
• Each Column is an
Item
• Fixed Table
Layout
Interactive
Grid:
to Build
How to Build
TH Technology
Interactive Report – Still There
TH Technology
Tabular Forms == Legacy
TH Technology
Editing an Interactive Grid
• Editing Enabled => Yes
• Row Selector
• Actions Menu Column
• PK Hidden by Default
• Edit, Save Buttons
• I-Grid Auto Row Processing Process
• Developer has to
• Add Headings
• Set Column Types, Static Ids
• Set a PK Column (If one not Already Set)
• Set Page “Reload on Submit” to “Only on Success”
TH Technology
TH Technology
Edit: Column: Set One as a Primary Key
TH Technology
TH Technology
Edit: Page Reload on Submit
TH Technology
Interactive Grid
• Add image here – looks pretty
much the same
TH Technology
Editable Interactive Grid
TH Technology
Grid Menu
TH Technology
Customized Toolbar Menu
TH Technology
Editable Cells Floating Popups
• Radio Group
• Text Areas (one liner …)
• Item Plugins
• Anything that dos not fit in cell
• CTRL-F6 collapse/expand popup
Editable
Grid:
to Build
Row Height,
Column Width,
(No)Stretch,
Master-Detail,
Casc. LOV
TH Technology
re Fixed Row Height
• IF Change Height of a Row
• Ex: Add Icon or Textarea
• Need To Adjust on Both Sides …
• Frozen and Unfrozen
• cellTemplate property
TH Technology
TH Technology
TH Technology
Column Widths
• Appearance  “Width” Property Does Not
Set Column Width
• Drag and Drop then Report  Save
• Columns
• Resize
• Reorder
• Minimum Width
• Min Width vs Current Width
APEX 5.1 Interactive Grid: What it Means for You and Your Users
TH Technology
NoStretch – APEX 5.1.1
• JS to Set Per Column
In Advanced  JavaScript for the Column
function(config) {
config.defaultGridColumnOptions = {
noStretch: true
};
return config;
}
TH Technology
NoStretch – APEX 5.1.1
• JS to Set Per Grid (All Columns)
In Advanced  JavaScript for the Grid
Declarable in
APEX 5.2 ?
TH Technology
Declarable in
APEX 5.2 ?
TH Technology
Master-Detail
• Create Master Grid
• Create Detail Grid
• Set PKs for Both
• Link via Master Region on Detail
Grid
• Disable Detail Grid Save Button
TH Technology
Cascading LOV
• Just Like Page Item to Page Item
SELECT
apex_item.checkbox (30,
seq_id,
'onclick="highlight_row(this,' || seq_id || ')"',
NULL,
':',
'f30_' || LPAD (seq_id, 4, '0') ) delete_checkbox,
apex_item.hidden (31, seq_id)
|| apex_item.select_list_from_query
(32,
c001,
'SELECT dname d, ' || 'deptno r FROM
eba_demo_tf_dept',
'style="width:220px" '
|| 'onchange="f_set_casc_sel_list_item(this,'
|| 'f33_'
|| LPAD (seq_id, 4, '0')
|| ')"',
'YES',
'0',
'- Select Department -',
'f32_' || LPAD (seq_id, 4, '0'),
NULL,
'NO' ) deptno,
apex_item.select_list_from_query (33,
c002,
'SELECT ename d, '
|| 'empno r FROM eba_demo_tf_emp '
|| 'WHERE deptno = '
|| c001,
'style="width:220px"',
'YES',
'0',
'- Select Employee ('
|| (SELECT COUNT (*)
FROM eba_demo_tf_emp
WHERE deptno = c001)
|| ') -',
'f33_' || LPAD (seq_id, 4, '0'),
NULL,
'NO' ) employee
FROM apex_collections
WHERE collection_name = 'DEPT_EMP'
UNION ALL
SELECT apex_item.checkbox
(30,
NULL,
'onclick="highlight_row(this,'
|| TO_NUMBER (9900 + LEVEL)
|| ')"',
NULL,
':',
'f30_' || LPAD (9900 + LEVEL, 4, '0') ) delete_checkbox,
apex_item.hidden (31, NULL)
|| apex_item.select_list_from_query
(32,
0,
'SELECT dname d, ' || 'deptno r FROM eba_demo_tf_dept',
'style="width:220px" '
|| 'onchange="f_set_casc_sel_list_item(this,'
|| 'f33_'
|| LPAD (9900 + LEVEL, 4, '0')
|| ')"',
'YES',
'0',
'- Select Department -',
'f32_' || LPAD (9900 + LEVEL, 4, '0'),
NULL,
'NO' ) deptno,
apex_item.select_list_from_query
(33,
NULL,
'SELECT ename d, '
|| 'empno r FROM eba_demo_tf_emp '
|| 'WHERE deptno = '
|| 0,
'style="width:220px"',
'YES',
'0',
'- Select Employee (0) -',
'f33_'
|| LPAD (9900 + LEVEL, 4, '0'),
NULL,
'NO'
) employee
FROM DUAL
WHERE :request = 'ADD_ROWS'
CONNECT BY LEVEL = 2
Before (APEX 4.2)
After (APEX 5.1+)
TH Technology
32K Row Limit
footer
TH Technology
Dynamic Action
• Just Like On a Page Item
• Conditions/Action Reference
Any Column In Row
• Cannot Reference Element in
Other Rows
TH Technology
Validations
• Just Like 4.2 Tab Form
• :COLUMN_NAME References
• Dynamic Actions
• Column Option
• APEX 5.1.1 Patch
Interactive
Grid:
to Build
End User
Perspective
TH Technology
User Perspective: Interactive Grid
Interactive Report
– Pivot
-- Drills
+ Edit Capability (if enabled)
-----------------------------------------------------
Interactive Grids
TH Technology
Edit Mode Navigation
• Tab or Shift Tab – Next/Previous Cells
(right/left within a row)
• Enter or Shift-Enter – Up/Down
Column
So-so for Data Entry Users But > Nothing!
Arrow Keys Do Not Work Here
TH Technology
• All Edits Stored Locally til Save
• Warning for Unsaved Changes
• Pagination OK
Interactive
Grid:
to Build
How to Upgrade
an Existing IR or
Tabular Form to
Interactive Grid
TH Technology
• Standard Will Upgrade
• Non-Standard Will Not Upgrade
• Any Custom Code
• APEX_ITEM Calls
Rebuild (Most Often)
Takes Less Time
TH Technology
Upgrade Interactive Reports?
• Change Region Type
• Standard, No Frills Users  YES
• Considerations
• Pivot
• Customized Logic
• Drills To IRs
HOW
WHEN
HOW
WHEN
TH Technology
Upgrade Tabular Forms?
• Upgrade Utility
• May Need Rework
• Standard  YES
• Non-Standard
• Maintain vs Rebuild
• Rebuild is Relatively Quick
HOW
WHEN
Interactive
Grid:
to Build
How to
Customize
Menus, Toolbars
and More
TH Technology
Customizations
• JavaScript
• Advanced  JavaScript Code
• Read Widget JS Files to Learn What is
Possible
• Hardlikesoftware.com
No Longer PL/SQL Collections – Now
JavaScript
TH Technology
I-Grid Customizations
• Much More Flexible
• Beyond Declarative
• Attributes  JavaScript Code
Region
• Grid  Grid Menus
• Column  Column Menu
(Most of the Time…)
APEX 5.1 Interactive Grid: What it Means for You and Your Users
TH Technology
So What (Else) Can I Do ?
From the JavaScript console type:
apex.region(“igrid_id").widget().interactiveGrid("option","config")
TH Technology
…
TH Technology
Customization Examples
• Change Toolbar
• Change Grid Menus
• Access Data Model
• Change Action Menu
• “Global” Settings
TH Technology
Change Toolbar Goes in Grid
Advanced 
JavaScript
TH Technology
Change Toolbar
TH Technology
Change Column Menu
Goes in Column
Advanced 
JavaScript
TH Technology
Change Column Menu
TH Technology
Change Grid Menu Goes in Page
JavaScript
TH Technology
Goes in Page
JavaScript
TH Technology
Change Grid Menu
TH Technology
Access the Model …
TH Technology
Change Action Menu
Goes in Grid
Advanced 
JavaScript
TH Technology
Change Action Menu
TH Technology
Access Grid, Model, Record…
TH Technology
“Global” Settings
• JS Function in JS File
• Include File
• Reference JS Function in
Advanced  JavaScript Code
• Add Classes on Grids
TH Technology
• << code example>>
• << Demo app w common
settings >>
APEX 5.1 Interactive Grid: What it Means for You and Your Users
TH Technology
TH Technology
gReport.search Equivalent
Interactive
Grid:
to Build
Pros, Cons,
Discussion
TH Technology
Upgrade or Not?
• IR Considerations
• Pivot
• Customized Logic
• Drills To IRs
• Tabular Form Considerations
• Customizations
TH Technology
Best to Rebuild When …
• Low/Reasonable Volume of
IRs/Tabular Forms to Upgrade
• All Features Have a Declarative
Equivalent in Interactive Grid
No Sense to Upgrade to Make
Extensive Customizations
TH Technology
Prototype !
What Interactive Grid Means …
Developers
• Bigger Sandbox
• THINK Before Build or
Upgrade
• Brush Up on JavaScript
• jQuery Widgets
• JavaScript
Customizations
End Users
• Cleaner Interface
• Improved Loading,
Pagination
• Tab/Enter Navigation
• Inline Edits
• More is Possible –
Less Work
TH Technology
TH Technology
There is Much More ….
• Pagination Options
• Client-Side Validation
• Protected Rows
• Icon View
• Detail View
• More Coming!
TH Technology
Challenge
• Sample Interactive Grid App
• http://www.hardlikesoftware.com
• Read the JS Widget Code
<apex_install_dir>/images/libraries/apex
• PLAY
Homework
Comments?
Questions?
Karen Cannell
kcannell@thtechnology.com
TH Technology
Resources
• Sample Interactive Grids
APEX 5.1 Sample Application, Editing section
• Interactive Grids Under the Hood
http://hardlikesoftware.com/weblog/2016/06/08/interactive-grid-under-the-
hood/
• Interactive Grid Column Widths
http://hardlikesoftware.com/weblog/2017/01/06/interactive-grid-column-
widths/
• How to Hack Interactive Grids, Parts I thru IV
http://hardlikesoftware.com/weblog/2017/01/18/how-to-hack-apex-interactive-grid-
part-1/
• APEX: Updating Interactive Grid Cells
https://ruepprich.wordpress.com/2017/03/09/apex-updating-interactive-grid-cells/
TH Technology
Resources, cont’d
• APEX Client-Side Validation
http://hardlikesoftware.com/weblog/2017/05/10/apex-client-side-
validation/#more-615
• Interactive Grid Column Widths
http://hardlikesoftware.com/weblog/2017/01/06/interactive-grid-column-
widths/
• How to Hack Interactive Grids, Parts I thru IV
http://hardlikesoftware.com/weblog/2017/01/18/how-to-hack-apex-interactive-grid-
part-1/
• APEX: Updating Interactive Grid Cells
https://ruepprich.wordpress.com/2017/03/09/apex-updating-interactive-grid-cells/
TH Technology
Thank You
Evaluations Please!
Session#286
Karen Cannell
kcannell@thtechnology.com
TH Technology
Advanced Client Validation
• APEX 5.1.1
• Validate Comm
• JS Using API
• Validate Comm Limit Example
• Row Level – no HTML5
• Fire on apexendrecordedit Event
• apexendrecordedit Event
• When Edit ends
TH Technology
Advanced Client Validation
• Validate Comm Limit
• Row-level Validation (no HTML5)
• Use JavaScript model API
• Set Record Validity
APEX 5.1.1
TH Technology
APEX 5.1.1
TH Technology
Validate Comm
APEX 5.1.1

More Related Content

PDF
Going to the Grid: Tabular Form Edition (Oracle APEX Editable Interactive Grids)
PDF
Utah Geek Events Big Mountain Data Mastering Oracle Interactive Grids
PDF
East Coast Oracle 2018 APEX Charts - Data Viz Now
PDF
APEX Interactive Grids: Essentials and Then Some, Part 1
PDF
Oracle APEX Cheat Sheet
PDF
APEX 18 Interactive Grids: And Them Some, Part 2
PDF
APEX 5 IR Guts and Performance
PDF
RMOUG Training Days 2019 Oracle JET Charts in APEX: Data Viz Now!
Going to the Grid: Tabular Form Edition (Oracle APEX Editable Interactive Grids)
Utah Geek Events Big Mountain Data Mastering Oracle Interactive Grids
East Coast Oracle 2018 APEX Charts - Data Viz Now
APEX Interactive Grids: Essentials and Then Some, Part 1
Oracle APEX Cheat Sheet
APEX 18 Interactive Grids: And Them Some, Part 2
APEX 5 IR Guts and Performance
RMOUG Training Days 2019 Oracle JET Charts in APEX: Data Viz Now!

What's hot (19)

PPTX
APEX 5 Interactive Reports: Guts and PErformance
PDF
Oracle APEX Interactive Grid Essentials
PDF
APEX JET Charts: Data Viz now!
PDF
RMOUG Training Days 2019 Analytic Views for Mortals: Worth A Look?
PDF
Validate Your Validations: Both Sides Now
PDF
UTOUG Training Days 2019 Voyage to Visual Builder Cloud Service
PDF
UTOUG Training Days 2019 APEX Interactive Grids: API Essentials, the Stuff Yo...
PDF
APEX Interactive Grids: Standardize for Sanity
PDF
APEX Grids: Standardize for Productivity and Sanity
PDF
APEX Interactive Grid API Essentials: The Stuff You Will Really Use
PDF
Migrate BI to APEX 5
PDF
APEX 5 Interactive Reports: Deep Dive and Upgrade Advice
PDF
Boston APEX Meetup ~ Standardize Your Grids
PDF
Oracle Low Code Lowdown: APEX vs VBCS
PPTX
Low Code Lowdown: APEX vs Visual Builder: Which is For You?
PDF
Advanced Reporting And Charting With Oracle Application Express 4.0
PDF
Balancing Automation and Explanation in Machine Learning
PPTX
Incremental Queries and Transformations for Engineering Critical Systems
PPTX
Model visualization made easy: Incremental query-driven views in modeling tools
APEX 5 Interactive Reports: Guts and PErformance
Oracle APEX Interactive Grid Essentials
APEX JET Charts: Data Viz now!
RMOUG Training Days 2019 Analytic Views for Mortals: Worth A Look?
Validate Your Validations: Both Sides Now
UTOUG Training Days 2019 Voyage to Visual Builder Cloud Service
UTOUG Training Days 2019 APEX Interactive Grids: API Essentials, the Stuff Yo...
APEX Interactive Grids: Standardize for Sanity
APEX Grids: Standardize for Productivity and Sanity
APEX Interactive Grid API Essentials: The Stuff You Will Really Use
Migrate BI to APEX 5
APEX 5 Interactive Reports: Deep Dive and Upgrade Advice
Boston APEX Meetup ~ Standardize Your Grids
Oracle Low Code Lowdown: APEX vs VBCS
Low Code Lowdown: APEX vs Visual Builder: Which is For You?
Advanced Reporting And Charting With Oracle Application Express 4.0
Balancing Automation and Explanation in Machine Learning
Incremental Queries and Transformations for Engineering Critical Systems
Model visualization made easy: Incremental query-driven views in modeling tools
Ad

Similar to APEX 5.1 Interactive Grid: What it Means for You and Your Users (20)

PPTX
APEX Office Hours Interactive Grid Deep Dive
PDF
APEX 5 IR: Guts & Performance
PDF
Interactive Grid shortcodes - Ontoor blogs.pdf
PDF
20100604 unyoug apex40_bauser
PPTX
JavaScript: Why Should I Care?
PDF
Apex 4.0 @ ODTUG 2009
PDF
Tweaking the interactive grid
PPT
Web Development In Oracle APEX
PPT
Intro to Application Express
PPTX
Oracle application express
PPTX
Oracle application express ppt
PDF
Alt tab - better apex tabs
DOCX
Grid view control
PDF
Migrate BI to APEX 5: Are We There Yet?
PDF
How to Load Data, Revisited, UTOUG
PDF
How to Load Data, Revisited
PDF
770_0629.pdf dump for oracle cloud interface
PDF
MOUG17: How to Build Multi-Client APEX Applications
PPTX
Oracle APEX India Office Hours - Dashboard Cards Using OJT & UT
PDF
Mastering universal theme
APEX Office Hours Interactive Grid Deep Dive
APEX 5 IR: Guts & Performance
Interactive Grid shortcodes - Ontoor blogs.pdf
20100604 unyoug apex40_bauser
JavaScript: Why Should I Care?
Apex 4.0 @ ODTUG 2009
Tweaking the interactive grid
Web Development In Oracle APEX
Intro to Application Express
Oracle application express
Oracle application express ppt
Alt tab - better apex tabs
Grid view control
Migrate BI to APEX 5: Are We There Yet?
How to Load Data, Revisited, UTOUG
How to Load Data, Revisited
770_0629.pdf dump for oracle cloud interface
MOUG17: How to Build Multi-Client APEX Applications
Oracle APEX India Office Hours - Dashboard Cards Using OJT & UT
Mastering universal theme
Ad

Recently uploaded (20)

PDF
How AI/LLM recommend to you ? GDG meetup 16 Aug by Fariman Guliev
PDF
DuckDuckGo Private Browser Premium APK for Android Crack Latest 2025
PDF
MCP Security Tutorial - Beginner to Advanced
PPTX
CNN LeNet5 Architecture: Neural Networks
PPTX
Computer Software - Technology and Livelihood Education
PDF
E-Commerce Website Development Companyin india
PPTX
Full-Stack Developer Courses That Actually Land You Jobs
PPTX
Cybersecurity: Protecting the Digital World
PDF
AI-Powered Threat Modeling: The Future of Cybersecurity by Arun Kumar Elengov...
PPTX
Airline CRS | Airline CRS Systems | CRS System
PDF
Wondershare Recoverit Full Crack New Version (Latest 2025)
PDF
EaseUS PDF Editor Pro 6.2.0.2 Crack with License Key 2025
PPTX
Download Adobe Photoshop Crack 2025 Free
PDF
AI Guide for Business Growth - Arna Softech
PPTX
"Secure File Sharing Solutions on AWS".pptx
PPTX
GSA Content Generator Crack (2025 Latest)
PDF
Guide to Food Delivery App Development.pdf
PDF
Top 10 Software Development Trends to Watch in 2025 🚀.pdf
PPTX
Introduction to Windows Operating System
PDF
Ableton Live Suite for MacOS Crack Full Download (Latest 2025)
How AI/LLM recommend to you ? GDG meetup 16 Aug by Fariman Guliev
DuckDuckGo Private Browser Premium APK for Android Crack Latest 2025
MCP Security Tutorial - Beginner to Advanced
CNN LeNet5 Architecture: Neural Networks
Computer Software - Technology and Livelihood Education
E-Commerce Website Development Companyin india
Full-Stack Developer Courses That Actually Land You Jobs
Cybersecurity: Protecting the Digital World
AI-Powered Threat Modeling: The Future of Cybersecurity by Arun Kumar Elengov...
Airline CRS | Airline CRS Systems | CRS System
Wondershare Recoverit Full Crack New Version (Latest 2025)
EaseUS PDF Editor Pro 6.2.0.2 Crack with License Key 2025
Download Adobe Photoshop Crack 2025 Free
AI Guide for Business Growth - Arna Softech
"Secure File Sharing Solutions on AWS".pptx
GSA Content Generator Crack (2025 Latest)
Guide to Food Delivery App Development.pdf
Top 10 Software Development Trends to Watch in 2025 🚀.pdf
Introduction to Windows Operating System
Ableton Live Suite for MacOS Crack Full Download (Latest 2025)

APEX 5.1 Interactive Grid: What it Means for You and Your Users