Utah Geek Events Big Mountain Data Mastering Oracle Interactive Grids
0 likes85 views
The document discusses the features and functionalities of interactive grids in Apex, covering essentials, new features, customizations, and upgrades. It includes technical insights on implementing interactive grids, utilizing Oracle Jet charts, and leveraging JavaScript for further customization. Additionally, various resources and examples for working with interactive grids are provided throughout the text.
Utah Geek Events Big Mountain Data Mastering Oracle Interactive Grids
- 1. TH Technology Mastering APEX Interactive Grids Karen Cannell kcannell@thtechnology.com TH Technology
- 2. 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
- 3. Thanks to our Sponsors! Partners Premier Logo:
- 4. 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 ⢠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
- 6. TH TechnologyTH Technology About You ⌠⢠Oracle Technology ? ⢠Years w APEX ? ⢠APEX Versions ? ⢠Interactive Reports and Tabular Forms ? ⢠Customizations ? Biggest Gripes?
- 7. TH TechnologyTH Technology 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
- 8. TH TechnologyTH Technology In the Sandbox âŚ
- 9. TH TechnologyTH Technology Out of the Sandbox
- 10. TH TechnologyTH Technology Interactive Grid == Better Sandbox
- 12. TH TechnologyTH Technology Interactive Grid (Interactive Report or Tabular Form) + <All the Features You Ever Wanted> (Thank You APEX Team!) ----------------------------------------- Interactive Grid
- 13. TH TechnologyTH Technology Direction Interactive Report Tabular Form Interactive Grid Now Future
- 15. 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/
- 16. 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
- 17. 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
- 18. TH TechnologyTH Technology Interactive Grid ⢠Add image here â looks pretty much the same
- 19. TH TechnologyTH Technology Editable Interactive Grid
- 21. TH TechnologyTH Technology What Is Editable Columns ⢠Query Only Rows ⢠Allowed Row Operations ⢠Set Column to Control Which Rows Are Editable ⢠âUâ or âUDâ or NULL
- 22. TH TechnologyTH Technology Who Can Edit (Authorizations)
- 23. TH TechnologyTH Technology If Editable, Must ⢠Set a PK ⢠Set Reload on Submit â Only On Success
- 25. TH TechnologyTH Technology Edit: Set One Column as a Primary Key
- 27. TH TechnologyTH Technology Edit: Page Reload on Submit
- 28. TH Technology Interactive Grid: to BuildIcon and Detail Views
- 29. TH TechnologyTH Technology Icon View ⢠Show â Yes ⢠Include Icon in Query
- 30. TH TechnologyTH Technology Detail View ⢠Detail Show -> Yes ⢠Complete Before Row, Row and After Row CSS
- 31. TH TechnologyTH Technology Extreme Detail View
- 33. TH Technology Interactive Grid: to BuildAlternate Save Options Region Source Table or View PL/SQL Code
- 34. TH TechnologyTH Technology Save Interactive Grid DataAlternate Processing Options
- 36. TH TechnologyTH Technology Region Source
- 37. TH TechnologyTH Technology 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
- 38. TH TechnologyTH Technology PL/SQL Code ⢠Any PL/SQL Process ⢠Called For Each Submitted Row ⢠Cols are :BIND_VARIABLES
- 39. TH TechnologyTH Technology 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
- 40. TH TechnologyTH Technology Custom PL/SQL ⢠Image of the example process
- 41. TH Technology Upgrading to Grid: to Build IR to Grid, Tabular Form to Grid
- 42. TH TechnologyTH Technology Upgrade Tabular Forms? ⢠Upgrade Utility ⢠May Need Rework ⢠Standard â YES ⢠Non-Standard ⢠Maintain vs Rebuild ⢠Rebuild is Relatively Quick ⢠Rebuild is Cleaner HOW WHEN
- 43. TH TechnologyTH Technology ⢠Converting Tabular Forms to Grids ⢠Roger Richardson ⢠2:00 â 3:00pm
- 44. TH TechnologyTH Technology What Will Upgrade? ⢠Keys Off ApplyMRU, ApplyMRD ⢠Tries! ⢠Custom Embedded Javascript ⢠Custom Processes
- 45. TH Technology Interactive Grid: to BuildCharts Declarative Oracle JET Charts For End Users
- 46. TH TechnologyTH Technology ⢠Know Your Data ⢠Know Your Users ⢠Know What Your Users Do With The Data
- 47. TH TechnologyTH Technology Data Tells A Story âŚ
- 48. TH TechnologyTH Technology Data Tells A Story âŚ
- 49. TH TechnologyTH Technology Data Tells A Story âŚ
- 50. TH TechnologyTH Technology Data Tells A Story âŚ
- 51. TH TechnologyTH Technology Data Tells A Story âŚ
- 53. TH TechnologyTH Technology Oracle JET ⢠JavaScript Extension Toolkit ⢠Client-Side Apps ⢠Open Source + Oracle JS Libraries ⢠Components https://www.oracle.com/webfolder/technetwork/jet/index.html
- 54. TH TechnologyTH Technology Oracle JET Charts
- 55. TH TechnologyTH Technology APEX JET Charts ⢠Subset of JET Charts ⢠SQL Query â Table â Web Service ⢠Declarative Attributes ⢠Adjust Attributes As Needed
- 56. TH TechnologyTH Technology 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
- 57. TH TechnologyTH Technology Interactive Grid Charts ⢠More Options ⢠No Declarative Way to Limit Chart Options ⢠Train End Users!
- 58. TH Technology Interactive Grid: to Build18.1 New Features Declarative Oracle JET Charts For End Users
- 59. TH TechnologyTH Technology I-Grid 18.1 New Features ⢠Cell Selection â Toggle Cell/Row ⢠Copy Down, Copy To Clipboard ⢠NoStretch ⢠Dynamic Action Events
- 60. TH TechnologyTH Technology Cell/Row Selection and Copy
- 61. TH TechnologyTH Technology Column Stretch
- 62. TH TechnologyTH Technology Dynamic Action Events ⢠New Component Events Specifally for Interactive Grids
- 63. TH TechnologyTH Technology Mode Change ⢠Edit Mode On/Off
- 64. TH TechnologyTH Technology Page Change ⢠Pagination Report Change ⢠Primary to Alternate to Private Selection Change ⢠Cell to Row Selection
- 65. TH TechnologyTH Technology Row Initialization ⢠Add Row View Change ⢠Grid to Chart to Icon to Detail Save â Obvious
- 66. TH Technology Interactive Grid: to BuildAPIs 18.1 and 18.2 Documented JS APIs
- 67. 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
- 69. TH TechnologyTH Technology ⢠Pic of grid API ⢠Pic of interactiveGrid API ⢠One common use
- 71. TH TechnologyTH Technology Accessing the Data (âModelâ) ⢠apex.item â Within Row ⢠apex.model âAcross Rows
- 72. TH TechnologyTH Technology JS: Access Grid, Model, RecordâŚ
- 73. TH TechnologyTH Technology Access the Model âŚ
- 74. TH Technology Interactive Grid: to Build Customizations JS Customizations for Menus, Toolbars and More
- 75. TH TechnologyTH Technology Customization Options ⢠Same For Editable/Non-Editable ⢠Toolbar ⢠Action Menu ⢠Column Heading Menu ⢠Row Actions Menu
- 76. 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 No Longer PL/SQL Collections ~ Now JavaScript
- 77. TH TechnologyTH Technology Grid Plugins ⢠Extend IG Toolbar https://apex.oracle.com/pls/apex/f?p= apexbyg:extendigtoolbar
- 78. TH Technology
- 79. TH Technology
- 80. TH TechnologyTH Technology So What (Else) Can I Do ? From the JavaScript console type: apex.region(âigrid_id").widget().interactiveGrid("option","config")
- 82. TH TechnologyTH Technology Customization Examples ⢠Change Toolbar ⢠Change Column Heading Menu ⢠Change RowAction Menu ⢠Change Toolbar Actions Menu ⢠âGlobalâ Settings
- 83. TH TechnologyTH Technology Customized Row Actions, Action Menu
- 84. TH TechnologyTH Technology Change Toolbar
- 85. TH TechnologyTH Technology Change Toolbar Goes in Grid Advanced â JavaScript
- 86. TH TechnologyTH Technology Combine Stuff
- 87. TH TechnologyTH Technology Change Toolbar
- 88. TH TechnologyTH Technology Change Column Heading Menu
- 89. TH TechnologyTH Technology Change Column Heading Menu Goes in Column Advanced â JavaScript
- 90. TH TechnologyTH Technology Change Column Heading Menu
- 91. TH TechnologyTH Technology Change RowAction Menu
- 92. TH TechnologyTH Technology Change RowAction Menu Goes in Page JavaScript
- 93. TH TechnologyTH Technology Access the Model âŚ
- 94. TH TechnologyTH Technology Change Toolbar Actions Menu
- 95. TH TechnologyTH Technology Change Toolbar Actions Menu Goes in Grid Advanced â JavaScript
- 96. TH TechnologyTH Technology âGlobalâ Settings ⢠JS Function in JS File ⢠Include File ⢠Reference JS Function in Advanced â JavaScript Code ⢠Add Classes on Grids
- 97. TH TechnologyTH Technology ⢠<< code example>> ⢠<< Demo app w common settings >>
- 98. TH Technology
- 100. TH TechnologyTH Technology gReport.search Equivalent
- 101. TH Technology Editable Grid: Wrapup to Build Pros, Cons, Discussion
- 102. TH Technology Recap ⢠Reviewed Essentials ⢠Icon and Detail Views ⢠Charts ⢠18.1+ New Features ⢠Dyn Action Grid Events ⢠Documented APIs
- 104. TH TechnologyTH Technology Challenge ⢠Sample Interactive Grid App ⢠IG Cookbook 18.2 Version http://www.hardlikesoftware.com ⢠Read the JS APIs PLAY Homework
- 105. TH Technology Comments? Questions? Thank You! Karen Cannell kcannell@thtechnology.com @thtechnology
- 106. Thanks to our Sponsors! Partners Premier Logo:
- 107. TH TechnologyTH 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/ ⢠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
- 108. 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
- 109. TH TechnologyTH Technology 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
- 111. TH Technology Validation â Dyn Action JS
- 114. TH Technology footer
- 115. TH TechnologyTH Technology JS: Access Grid, Model, RecordâŚ
- 116. TH TechnologyTH Technology Row Selector
- 117. TH TechnologyTH Technology Working w the Row Selector ⢠JavaScript
- 118. TH TechnologyTH Technology 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;
- 119. TH TechnologyTH Technology Row Action Menu