grid essentials - amazon s3€¦ · th technology about me … • mechanical/sw engineer -...
TRANSCRIPT
![Page 2: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/2.jpg)
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.
![Page 3: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/3.jpg)
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
![Page 4: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/4.jpg)
TH Technology
About You …
• Oracle Technology ?
• Years w APEX ?
• APEX Versions ?
• Interactive Reports and Tabular Forms ?
• Customizations ?
Biggest Gripes?
![Page 5: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/5.jpg)
TH Technology
Agenda
• Evolution
• Essentials
• Build/Upgrade ~Features ~ Oddities
• Extras (Advanced)
• JavaScript Customizations
• Wrapup• Pros/Cons ~ Questions
![Page 6: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/6.jpg)
TH Technology
In the Sandbox …
![Page 7: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/7.jpg)
TH Technology
Out of the Sandbox
![Page 8: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/8.jpg)
TH Technology
Interactive Grid == Better Sandbox
![Page 9: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/9.jpg)
Interactive Grid:
to BuildEvolution
![Page 10: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/10.jpg)
TH Technology
Interactive Grid
(Interactive Report or Tab Form)
+ <All the Features You Ever Wanted>(Thank You APEX Team!)
-----------------------------------------Interactive Grid
![Page 11: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/11.jpg)
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
![Page 12: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/12.jpg)
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
![Page 13: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/13.jpg)
TH Technology
Direction
Interactive Report
Tabular Form
Interactive GridNow
Future
![Page 14: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/14.jpg)
TH Technology
IGrid Architecture
Interactive Grid – Under the Hood
J Snyders
http://hardlikesoftware.com/weblog/2016/06/08/interactive-grid-under-the-hood/
![Page 15: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/15.jpg)
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
![Page 16: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/16.jpg)
Interactive Report
• Collections (pre 5.0)
• Browser Decides Column Width
table-layout: auto;
Interactive Grid
• Model
• Each Column is an “Item”
• Fixed Table Layout
![Page 17: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/17.jpg)
Interactive Grid:
to BuildEssentials
Build/Upgrade
Features Oddities
![Page 18: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/18.jpg)
TH Technology
Interactive Report – Still There
![Page 19: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/19.jpg)
TH Technology
Tabular Forms == Legacy
![Page 20: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/20.jpg)
TH Technology
Interactive Grid
• Add image here – looks pretty much the same
![Page 21: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/21.jpg)
Editable Grid:
to Build
![Page 22: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/22.jpg)
TH Technology
Editable
![Page 23: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/23.jpg)
TH Technology
Editable Interactive Grid
![Page 24: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/24.jpg)
TH Technology
If Editable
• Set a PK
• Set Reload on Submit Only On Success
![Page 25: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/25.jpg)
TH Technology
![Page 26: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/26.jpg)
TH Technology
Edit: Set One Column as a Primary Key
![Page 27: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/27.jpg)
TH Technology
![Page 28: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/28.jpg)
TH Technology
Edit: Page Reload on Submit
![Page 29: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/29.jpg)
TH Technology
Row Selector
![Page 30: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/30.jpg)
TH Technology
Row Action Menu
![Page 31: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/31.jpg)
More Grid Details: to Build
Column Width,
(No)Stretch,
Master-Detail, Casc.
LOV, 32K Limit
![Page 32: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/32.jpg)
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
![Page 33: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/33.jpg)
![Page 34: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/34.jpg)
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;
}
![Page 35: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/35.jpg)
TH Technology
NoStretch – APEX 5.1.1
• JS to Set Per Grid (All Columns)
In Advanced JavaScript for the Grid
![Page 36: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/36.jpg)
TH Technology
Declarable in
APEX 5.2 ?
![Page 37: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/37.jpg)
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
![Page 38: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/38.jpg)
TH Technology
Cascading LOV
• Just Like Page Item to Page Item
![Page 39: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/39.jpg)
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)
![Page 40: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/40.jpg)
After (APEX 5.1+)
![Page 41: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/41.jpg)
TH Technology
32K Row Limit
footer
![Page 42: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/42.jpg)
TH Technology
Dynamic Action
• Just Like On a Page Item
• Conditions/Action Reference Any Column In Row
• Cannot Reference Element in Other Rows
![Page 43: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/43.jpg)
TH 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
![Page 44: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/44.jpg)
TH Technology
![Page 45: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/45.jpg)
Validation – Dyn Action JS
![Page 46: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/46.jpg)
footer
id
validity
attribute
![Page 47: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/47.jpg)
TH Technology
ids
validity
attribute
![Page 48: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/48.jpg)
footer
![Page 49: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/49.jpg)
TH Technology
Access Grid, Model, Record…
![Page 50: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/50.jpg)
Upgrading to Grid: to Build
IR to Grid,
Tabular Form
to Grid
![Page 51: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/51.jpg)
TH Technology
Upgrade Interactive Reports?
• Change Region Type
• Standard, No Frills Users YES
• Considerations• Pivot• Computed• Customized Logic• Drills To IRs
HOW
WHEN
HOW
![Page 52: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/52.jpg)
TH Technology
Upgrade Tabular Forms?
• Upgrade Utility• May Need Rework
• Standard YES
• Non-Standard• Maintain vs Rebuild
• Rebuild is Relatively Quick
HOW
WHEN
![Page 53: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/53.jpg)
Interactive Grid:
Extrasto Build
Advanced:
JS Customizations for Menus,
Toolbars and More
![Page 54: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/54.jpg)
TH 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
![Page 55: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/55.jpg)
TH Technology
Grid Plugins
• Extend IG Toolbarhttps://apex.oracle.com/pls/apex/f?p=apexbyg:extendigtoolbar
• XXXX
![Page 56: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/56.jpg)
TH Technology
Note: APEX 5.1.1 PatchJohn Snyders ~ Interactive Grid API Improvements
http://hardlikesoftware.com/weblog/2017/03/28/apex-interactive-grid-api-improvements-in-5-1-1/
• 5.1.1 IGrid APIs are DIFFERENT from APEX 5.1.0 IGrid APIs …
Current Version: 5.1.3
Expect the APIs to Update
![Page 57: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/57.jpg)
![Page 58: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/58.jpg)
![Page 59: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/59.jpg)
TH Technology
So What (Else) Can I Do ?
From the JavaScript console type:
apex.region(“igrid_id").widget().interactiveGrid("option","config")
![Page 60: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/60.jpg)
TH Technology
…
![Page 61: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/61.jpg)
TH Technology
Customization Examples
• Change Toolbar
• Change Column Heading Menu
• Change RowAction Menu
• Change Toolbar Actions Menu
• “Global” Settings
![Page 62: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/62.jpg)
TH Technology
Change Toolbar
![Page 63: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/63.jpg)
TH Technology
Change Toolbar Goes in Grid
Advanced
JavaScript
![Page 64: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/64.jpg)
TH Technology
Combine Stuff
![Page 65: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/65.jpg)
TH Technology
Change Toolbar
![Page 66: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/66.jpg)
TH Technology
Change Column Heading Menu
![Page 67: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/67.jpg)
TH Technology
Change Column Heading Menu
Goes in Column
Advanced
JavaScript
![Page 68: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/68.jpg)
TH Technology
Change Column Heading Menu
![Page 69: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/69.jpg)
TH Technology
Change RowAction Menu
![Page 70: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/70.jpg)
TH Technology
Change RowAction MenuGoes in Page
JavaScript
![Page 71: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/71.jpg)
TH Technology
Access the Model …
![Page 72: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/72.jpg)
TH Technology
Change Toolbar Actions Menu
![Page 73: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/73.jpg)
TH Technology
Change Toolbar Actions Menu
Goes in Grid
Advanced
JavaScript
![Page 74: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/74.jpg)
TH Technology
“Global” Settings
• JS Function in JS File
• Include File
• Reference JS Function in Advanced JavaScript Code
• Add Classes on Grids
![Page 75: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/75.jpg)
TH Technology
• << code example>>
• << Demo app w common settings >>
![Page 76: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/76.jpg)
![Page 77: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/77.jpg)
TH Technology
![Page 78: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/78.jpg)
TH Technology
gReport.search Equivalent
![Page 79: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/79.jpg)
Interactive Grid:
Wrapupto Build
Pros, Cons,
Discussion
![Page 80: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/80.jpg)
TH Technology
Upgrade or Not?
• IR Considerations• Pivot
• Customized Logic
• Drills To IRs
• Tabular Form Considerations• Customizations
![Page 81: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/81.jpg)
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
![Page 82: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/82.jpg)
TH Technology
Prototype !
Test!
![Page 83: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/83.jpg)
TH Technology
![Page 84: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/84.jpg)
TH Technology
There is Much More ….
• Charts
• Pagination Options
• Client-Side Validation
• Protected Rows
• Icon View
• Detail View
• More Coming!
![Page 85: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/85.jpg)
TH Technology
Challenge
• Sample Interactive Grid App
• IG Cookbookhttp://www.hardlikesoftware.com
• Read the JS Widget Code<apex_install_dir>/images/libraries/apex
PLAY
Homework
![Page 87: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/87.jpg)
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 Widthshttp://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/
![Page 88: Grid Essentials - Amazon S3€¦ · TH Technology About Me … • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications](https://reader031.vdocuments.net/reader031/viewer/2022041019/5ecd1c9ceb4ae73e77243ebe/html5/thumbnails/88.jpg)
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 Widthshttp://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/