Utah Geek Events Big Mountain Data Mastering Oracle Interactive Grids

TH Technology
Mastering
APEX
Interactive
Grids
Karen Cannell
kcannell@thtechnology.com
TH Technology

TH TechnologyTH Technology
Master Interactive Grids
• Review the Essentials
• Learn Interactive Grid New and
Lesser-Known Features
Alt Edit Options ~ Alt Views ~ Charts ~ 18.1 New Features ~
Key APIs ~ Customizations
• Questions

Thanks to our Sponsors!
Partners
Premier
Logo:

About Me …
• TH Technology – Oracle Consulting Services, APEX Focus
• 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,18 suite of tools
• Editor Emeritus, ODTUG Technical Journal
• Oracle Ace
• APress Author
• ODTUG Director

About You …
• Oracle Technology ?
• Years w APEX ?
• APEX Versions ?
• Interactive Reports and Tabular Forms ?
• Customizations ?
Biggest Gripes?

Agenda – Master Interactive Grids
• Review the Essentials
• Learn Interactive Grid New Feature
and Extras
Alt Edit Options ~ Alt Views ~ Charts ~ 18.1 New Features ~ Key APIs ~
Customizations
• Questions

In the Sandbox …

Out of the Sandbox

Interactive Grid == Better Sandbox

TH Technology
Interactive
Grid:
to BuildEssentials
Background
Build/Upgrade
Features Oddities

Interactive Grid
(Interactive Report or Tabular Form)
+ <All the Features You Ever Wanted>
(Thank You APEX Team!)
-----------------------------------------
Interactive Grid

Direction
Interactive Report
Tabular Form
Interactive Grid
Now
Future

TH Technology
Interactive
Grid:
to Build
Quick Demo

IGrid Architecture
Interactive Grid – Under the Hood
J Snyders
http://hardlikesoftware.com/weblog/201
6/06/08/interactive-grid-under-the-hood/

TH Technology
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

TH Technology
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
• Add image here – looks pretty
much the same

Editable Interactive Grid

Editable

What Is Editable
Columns
• Query Only
Rows
• Allowed Row Operations
• Set Column to Control Which Rows
Are Editable
• ‘U’ or ‘UD’ or NULL

Who Can Edit (Authorizations)

If Editable, Must
• Set a PK
• Set Reload on Submit
→ Only On Success

Edit: Set One Column as a Primary Key

Edit: Page Reload on Submit

TH Technology
Interactive
Grid:
to BuildIcon and Detail
Views

Icon View
• Show → Yes
• Include Icon in Query

Detail View
• Detail Show -> Yes
• Complete Before Row, Row and
After Row CSS

Extreme Detail View

TH Technology
Interactive
Grid:
to BuildAlternate
Save Options
Region Source
Table or View
PL/SQL Code

Save Interactive Grid DataAlternate Processing Options

Region Source

Table/View
• Can Be a DIFFERENT Table or
View w INSTEAD OF Triggers
• Ex: Display a View
• Save Using a Table
• Be Sure to Set Non-Updateable Cols
Query Only Yes

PL/SQL Code
• Any PL/SQL Process
• Called For Each Submitted Row
• Cols are :BIND_VARIABLES

Custom PL/SQL Process
• Beyond C U D
• PL/SQL Process –Copy Data to APEX
Collection
• Called For Each Submitted Row
• Cols are :BIND_VARIABLES
• Custom DML – Whatever Needed –
via the APEX Collection

Custom PL/SQL
• Image of the example process

TH Technology
Upgrading
to Grid:
to Build
IR to Grid,
Tabular Form
to Grid

Upgrade Tabular Forms?
• Upgrade Utility
• May Need Rework
• Standard ➔ YES
• Non-Standard
• Maintain vs Rebuild
• Rebuild is Relatively Quick
• Rebuild is Cleaner
HOW
WHEN

• Converting Tabular Forms to
Grids
• Roger Richardson
• 2:00 – 3:00pm

What Will Upgrade?
• Keys Off ApplyMRU, ApplyMRD
• Tries!
• Custom Embedded Javascript
• Custom Processes

TH Technology
Interactive
Grid:
to BuildCharts
Declarative Oracle
JET Charts
For End Users

• Know Your Data
• Know Your Users
• Know What Your Users Do
With The Data

Data Tells A Story …

Oracle JET

Oracle JET
• JavaScript Extension Toolkit
• Client-Side Apps
• Open Source + Oracle JS Libraries
• Components
https://www.oracle.com/webfolder/technetwork/jet/index.html

Oracle JET Charts

APEX JET Charts
• Subset of JET Charts
• SQL Query – Table – Web Service
• Declarative Attributes
• Adjust Attributes As Needed

JET Charts in IR and IGrid
• Subset (IR/Grid JET Charts)
of the Subset (APEX JET Charts)
• Developer Must Supply Required Data
in Source
• Train End Users
• Ex: Grid Bubble,
• Ex: No Chart, JS Error

Interactive Grid Charts
• More Options
• No Declarative Way to Limit
Chart Options
• Train End Users!

TH Technology
Interactive
Grid:
to Build18.1 New
Features
Declarative Oracle JET
Charts
For End Users

I-Grid 18.1 New Features
• Cell Selection – Toggle Cell/Row
• Copy Down, Copy To Clipboard
• NoStretch
• Dynamic Action Events

Cell/Row Selection and Copy

Column Stretch

Dynamic Action Events
• New Component Events
Specifally for Interactive Grids

Mode Change
• Edit Mode On/Off

Page Change
• Pagination
Report Change
• Primary to Alternate to Private
Selection Change
• Cell to Row Selection

Row Initialization
• Add Row
View Change
• Grid to Chart to Icon to Detail
Save
→ Obvious

TH Technology
Interactive
Grid:
to BuildAPIs
18.1 and 18.2
Documented
JS APIs

APEX 18.2 JavaScript APIs
https://docs.oracle.com/database/apex-
18.2/AEXJS/index.html
Note: This doc does not yet have the new stuff:
https://docs.oracle.com/database/apex-
18.2/AEAPI/JavaScript-APIs.htm#AEAPI266

• Pic of grid API
• Pic of interactiveGrid API
• One common use

Accessing the Data (“Model”)
• apex.item – Within Row
• apex.model –Across Rows

JS: Access Grid, Model, Record…

Access the Model …

TH Technology
Interactive
Grid:
to Build
Customizations
JS Customizations
for Menus, Toolbars
and More

Customization Options
• Same For Editable/Non-Editable
• Toolbar
• Action Menu
• Column Heading Menu
• Row Actions Menu

Customizations
• Advanced → JavaScript Code
• Grid → Grid Menus
• Column → Column Menu
(Most of the Time…)
• Read Widget JS Files to Learn What is Possible
• Read Hardlikesoftware.com
No Longer PL/SQL Collections ~
Now JavaScript

Grid Plugins
• Extend IG Toolbar
https://apex.oracle.com/pls/apex/f?p=
apexbyg:extendigtoolbar

So What (Else) Can I Do ?
From the JavaScript console type:
apex.region(“igrid_id").widget().interactiveGrid("option","config")

…

Customization Examples
• Change Toolbar
• Change Column Heading Menu
• Change RowAction Menu
• Change Toolbar Actions Menu
• “Global” Settings

Customized Row Actions, Action
Menu

Change Toolbar

Change Toolbar Goes in Grid
Advanced →
JavaScript

Combine Stuff

Change Column Heading Menu

Change Column Heading Menu
Goes in Column
Advanced →
JavaScript

Change RowAction Menu

Change RowAction Menu
Goes in Page
JavaScript

Change Toolbar Actions Menu

Change Toolbar Actions Menu
Goes in Grid
Advanced →
JavaScript

“Global” Settings
• JS Function in JS File
• Include File
• Reference JS Function in
Advanced → JavaScript Code
• Add Classes on Grids

• << code example>>
• << Demo app w common
settings >>

gReport.search Equivalent

TH Technology
Editable
Grid:
Wrapup
to Build
Pros, Cons,
Discussion

TH Technology
Recap
• Reviewed Essentials
• Icon and Detail Views
• Charts
• 18.1+ New Features
• Dyn Action Grid Events
• Documented APIs

Challenge
• Sample Interactive Grid App
• IG Cookbook 18.2 Version
http://www.hardlikesoftware.com
• Read the JS APIs
PLAY
Homework

TH Technology
Comments?
Questions?
Thank You!
Karen Cannell
kcannell@thtechnology.com
@thtechnology

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/
• 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/
• Interactive Grid Cheat Sheet
https://github.com/mgoricki/orclapex-ig-cheat-sheet

Resources, cont’d
• APEX Client-Side Validation
http://hardlikesoftware.com/weblog/2017/05/10/apex-client-side-
validation/#more-615
• Interactive Grid Extend Toolbar Plugin
https://github.com/mgoricki/apex-plugin-extend-ig-toolbar
• APEX Grid Preventing Lost Updates
http://www.explorer.uk.com/apex-interactive-grid-preventing-lost-
updates-record-locking/
• Editable Grid, PL/SQL Process
https://apex.oracle.com/pls/apex/germancommunities/apexcommunity
/tipp/6361/index-en.html

Validations (Overview!)
• :COLUMN_NAME References
• Similar to 4.2 Tab Form
• On Submit
• Dynamic Actions
• Column Option
• HTML5 Form Validation
• Required
• Pattern – Min, Max (Numbers)
• In Custom Attributes

TH Technology
Validation – Dyn Action JS

TH Technology
footer
id
validity
attribute

ids
validity
attribute

Row Selector

Working w the Row Selector
• JavaScript

APEX$ROW_SELECTOR – PL/SQL
• Same as Tab Form:
BEGIN
IF :APEX$ROW_SELECTOR = ‘X’ THEN
-- your processing goes here
DELETE FROM EMP WHERE EMPNO = :ID;
END IF;
END;

Row Action Menu

Utah Geek Events Big Mountain Data Mastering Oracle Interactive Grids

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Similar to Utah Geek Events Big Mountain Data Mastering Oracle Interactive Grids

Similar to Utah Geek Events Big Mountain Data Mastering Oracle Interactive Grids (20)

More from Karen Cannell

More from Karen Cannell (7)

Recently uploaded

Recently uploaded (20)

Utah Geek Events Big Mountain Data Mastering Oracle Interactive Grids