APEX 18 Interactive Grids: And Them Some, Part 2
1 like828 views
This document provides an overview of interactive grids in Oracle Application Express (APEX) beyond basic features. It discusses lesser-known features like icon, detail, and chart views. It also covers 18 new features in APEX 18.1 and 18.2 like no stretch columns, cell selection, and dynamic action events. Finally, it demonstrates how to build customizations to interactive grids using JavaScript APIs and functions.
APEX 18 Interactive Grids: And Them Some, Part 2
- 1. TH Technology Interactive Grids: … and Then Some Karen Cannell kcannell@thtechnology.com TH Technology
- 2. TH TechnologyTH Technology Grids: Beyond the Basics • Lesser-Known Features Icon ~ Detail ~ Charts • 18.+ New Features NoStretch ~ Select/Copy ~ Events • APIs and Customizations Key APIs ~ Customizations
- 3. TH TechnologyTH Technology About Me … • TH Technology – Oracle Consulting Services, APEX Focus • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications for 30+ years • APEX Since Project Marvel/HTMLDB Beginnings • Leveraging Oracle 10g,11g,12c,18c+ Suite of tools • Editor Emeritus, ODTUG Technical Journal • Oracle Ace • APress Author • ODTUG Director
- 5. TH TechnologyTH Technology About You … • Oracle Technology ? • Years w APEX ? • APEX Versions ? • Interactive Reports and Tabular Forms ? • Customizations ? Biggest Gripes?
- 6. TH TechnologyTH Technology Agenda: Grids Beyond Basics … • Lesser-Known Features Icon ~ Detail ~ Charts • 18.+ New Features NoStretch ~ Select/Copy Down ~ Events • APIs and Customizations Key APIs ~ Customizations
- 7. TH TechnologyTH Technology Interactive Grid == Better Sandbox
- 8. TH TechnologyTH Technology IGrid Architecture Interactive Grid – Under the Hood J Snyders http://hardlikesoftware.com/weblog/201 6/06/08/interactive-grid-under-the-hood/
- 9. 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
- 10. 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
- 11. TH Technology Interactive Grid to BuildAlternate Views: Icon ~ Detail Chart
- 12. TH TechnologyTH Technology Icon View - Declarative • Show → Yes • Include Icon in Query
- 13. TH TechnologyTH Technology Icon View Query
- 15. TH TechnologyTH Technology Detail View - HTML • Detail Show -> Yes • Complete Before Row, Row and After Row CSS
- 16. TH TechnologyTH Technology Extreme Detail View
- 18. TH Technology Interactive Grid: to BuildCharts Declarative Oracle JET Charts For End Users
- 19. TH TechnologyTH Technology • Know Your Data • Know Your Users • Know What Your Users Do With The Data
- 20. TH TechnologyTH Technology Data Tells A Story …
- 21. TH TechnologyTH Technology Data Tells A Story …
- 22. TH TechnologyTH Technology Data Tells A Story …
- 23. TH TechnologyTH Technology Data Tells A Story …
- 24. TH TechnologyTH Technology Data Tells A Story …
- 26. TH TechnologyTH Technology Oracle JET Charts
- 27. TH TechnologyTH Technology APEX JET Charts • Replace AnyCharts • Subset of JET Charts • SQL Query – Table – Web Service • Declarative Attributes • Adjust Attributes As Needed
- 28. TH TechnologyTH Technology JET Charts in IR and IGrid • Subset (IR/Grid JET Charts) of the APEX JET Subset • Developer Must Supply Required Data Elements • Train End Users • Ex: Grid Bubble, • Ex: No Chart, JS Error
- 29. TH TechnologyTH Technology Interactive Grid Charts • More Options • No Declarative Way to Limit Chart Options • Train End Users!
- 30. TH Technology Interactive Grid: to Build18.+ New Features Stability ~ Nostretch Declarative JET Charts Events ~ APIs
- 31. TH TechnologyTH Technology Stability: 22 Bug Fixes • APEX 18.1 Release Notes https://docs.oracle.com/database/apex- 18.2/HTMRN/toc.htm#HTMRN-GUID-540B73CB-08A7-4422- B6BF-CC785EC47694
- 33. TH TechnologyTH Technology I-Grid 18.+ New Features • Cell Selection – Toggle Cell/Row • Copy Down, Copy To Clipboard • Declarative NoStretch • Dynamic Action Events
- 34. TH TechnologyTH Technology Cell/Row Selection and Copy
- 35. TH TechnologyTH Technology Column Stretch
- 36. TH TechnologyTH Technology Dynamic Action Events • New Component Events Specifically for Interactive Grids
- 37. TH TechnologyTH Technology Mode Change • Edit Mode On/Off
- 38. TH TechnologyTH Technology Page Change • Pagination Report Change • Primary to Alternate to Private Selection Change • Cell to Row Selection
- 39. TH TechnologyTH Technology Row Initialization • Add Row View Change • Grid to Chart to Icon to Detail Save → Obvious
- 40. TH Technology Interactive Grid: to BuildAPIs 18.1 and 18.2 Documented JS APIs
- 41. TH TechnologyTH Technology 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
- 43. TH TechnologyTH Technology • Pic of grid API • Pic of interactiveGrid API • One common use
- 45. TH TechnologyTH Technology Accessing the Data (“Model”) • apex.item – Within Row • apex.model –Across Rows
- 46. TH TechnologyTH Technology JS: Access Grid, Model, Record…
- 47. TH TechnologyTH Technology Access the Model …
- 48. TH Technology Interactive Grid: to Build Customizations JS Customizations for Menus, Toolbars and More GOTO 85 94
- 49. TH TechnologyTH Technology 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 • Read Documented JavaScript APIs No Longer PL/SQL Collections ~ Now JavaScript
- 50. TH TechnologyTH Technology There’s A Plugin for That! • Extend IG Toolbar A Plugin for Grid Customizations https://apex.oracle.com/pls/apex/f?p= apexbyg:extendigtoolbar
- 51. TH Technology
- 52. TH Technology
- 53. TH TechnologyTH Technology Customization Examples • Change Toolbar • Change Column Heading Menu • Change RowAction Menu • Change Toolbar Actions Menu • “Global” Settings GOTO 66 GLOBAL
- 54. TH TechnologyTH Technology Change Toolbar
- 55. TH TechnologyTH Technology Change Toolbar Goes in Grid Advanced → JavaScript
- 56. TH TechnologyTH Technology Combine Stuff
- 57. TH TechnologyTH Technology Change Toolbar
- 58. TH TechnologyTH Technology Change Column Heading Menu
- 59. TH TechnologyTH Technology Change Column Heading Menu Goes in Column Advanced → JavaScript
- 60. TH TechnologyTH Technology Change Column Heading Menu
- 61. TH TechnologyTH Technology Change RowAction Menu
- 62. TH TechnologyTH Technology Change RowAction Menu Goes in Page JavaScript
- 63. TH TechnologyTH Technology Access the Model …
- 64. TH TechnologyTH Technology Change Toolbar Actions Menu
- 65. TH TechnologyTH Technology Change Toolbar Actions Menu Goes in Grid Advanced → JavaScript
- 66. TH TechnologyTH Technology “Global” Settings • Global JS Function in JS File • Include File in User Interface -> Theme -> JavaScript • Reference JS Function in Advanced → JavaScript Code • Add Classes on Grids CSS Classes
- 67. TH TechnologyTH Technology • << code example>> • << Demo app w common settings >>
- 69. TH TechnologyTH Technology Global Settings • Add JS Function in Advanced→ JavaScript Initialization Code of the Grid • Add classes to the CSS Classes of the Grid
- 70. TH TechnologyTH Technology If There Is A Mistake ….
- 71. TH TechnologyTH Technology gReport.search EquivalentDynamically Search
- 72. TH TechnologyTH Technology Refresh a Grid
- 73. TH Technology Grids .. .And Then Some: Wrapup to Build
- 74. TH Technology Recap • Grid Architecture, Essentials • Icon, Detail, Chart Views • 18.1+ New Features • Stability • Select/Copy • Dyn Action Grid Events • Documented APIs
- 76. TH TechnologyTH Technology Challenge • Sample Interactive Grid App • IG Cookbook 18.2 Version http://www.hardlikesoftware.com • Read the JS APIs PLAY Homework
- 77. TH Technology Comments? Questions? Thank You! Karen Cannell kcannell@thtechnology.com @thtechnology
- 78. TH TechnologyTH Technology Resources • Sample Interactive Grids APEX 5.1 Sample Application, Editing section • IG Cookbook • 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/ • Interactive Grid Cheat Sheet https://github.com/mgoricki/orclapex-ig-cheat-sheet
- 79. TH TechnologyTH Technology 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
- 80. TH TechnologyTH Technology So What (Else) Can I Do ? From the JavaScript console type: apex.region(“igrid_id").widget().interactiveGrid("option","config")