Tweaking the interactive grid
1 like1,532 views
The document outlines ten key tweaks for enhancing the interactive grid in Oracle APEX, focusing on toolbar customization, action menu modifications, and column management. Key suggestions include removing default functions, adding custom buttons, and refreshing rows without a full region refresh. It concludes with links to additional resources and provides contact information for further inquiries.
![Add a button on the Search Bar - IG (alt.)
19
function( options ) {
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup = { id : “myToolBarGroup"
, controls : [{ type : "BUTTON"
, action : "my-custom-action"
, label : "My Button"
, icon : "fa fa-user-secret"
, iconBeforeLabel : true
}]
};
// toolbarGroup is my new created object
toolbarData.push( toolbarGroup );
// pass back the modified object
options.toolbarData = toolbarData;
return options;
}](https://image.slidesharecdn.com/tweakingtheinteractivegrid-171012140430/85/Tweaking-the-interactive-grid-19-320.jpg)
![Add a button on the Search Bar - IG
27
function( options ) {
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup = { id : “myToolBarGroup"
, controls : [{ type : "BUTTON"
, action : "my-custom-action"
, label : "My Button"
, icon : "fa fa-user-secret"
, iconBeforeLabel : true
}]
};
// toolbarGroup is my new created object
toolbarData.push( toolbarGroup );
// pass back the modified object
options.toolbarData = toolbarData;
return options;
}](https://image.slidesharecdn.com/tweakingtheinteractivegrid-171012140430/85/Tweaking-the-interactive-grid-27-320.jpg)
![Refresh upon delete
56
var records, recordId, iNode,
currentViewImpl = apex.region('emp').widget().interactiveGrid("getViews", "grid");
records = currentViewImpl.getSelectedRecords();
currentViewImpl.model.fetchRecords(records, function(err){
if (err) {
apex.message.clearErrors();
recordId = currentViewImpl.model.getRecordId(records[0]);
iNode = currentViewImpl.model.getRecordMetadata(recordId);
iNode.canDelete = true;
currentViewImpl.model.setOption('editable', true);
currentViewImpl.model.deleteRecords(records);
currentViewImpl.model.clearChanges();
}
});](https://image.slidesharecdn.com/tweakingtheinteractivegrid-171012140430/85/Tweaking-the-interactive-grid-56-320.jpg)
Tweaking the interactive grid
- 1. 1 Top ten tweaks for the Interactive Grid Roel Hartman APEX Consulting @RoelH
- 2. X
- 3. 3
- 5. Copyright © 2017 APEX Consulting Interactive Grid The “basics” 5
- 6. 6
- 7. 7
- 8. Copyright © 2017 APEX Consulting 1. Tweak the Toolbar Remove “Finder Drop Down” 8
- 9. Declarative settings for an IR 9
- 10. Declarative settings for an IG 10
- 12. JavaScript Configuration 12 function( options ) { options.toolbar = false; return options; }
- 13. “toolbar” is just one of the options 13 apex.region("emp").widget().interactiveGrid("option").config
- 14. Disable “Finder Drop Down” 14
- 15. Disable “Finder Drop Down” 15 function( options ) { var $ = apex.jQuery, toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), toolbarGroup = toolbarData.toolbarFind("search"); // toolbarGroup points to "search" object, containing “controls” array // remove first element from that array toolbarGroup.controls.shift(); // pass back the modified object options.toolbarData = toolbarData; return options; }
- 16. Copyright © 2017 APEX Consulting 2. Tweak the Toolbar Add a button on the Search Bar 16
- 17. Add a button on the Search Bar - IR 17
- 18. Add a button on the Search Bar - IG 18 function( options ) { var $ = apex.jQuery, toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), toolbarGroup = toolbarData.toolbarFind("actions3"); // toolbarGroup is "actions3" object, with the "Add Row" button // add an element to that array toolbarGroup.controls.push({ type : "BUTTON" , action : "my-custom-action" , label : "My Button" , icon : "fa fa-user-secret" , iconBeforeLabel : true }); // pass back the modified object options.toolbarData = toolbarData; return options; }
- 19. Add a button on the Search Bar - IG (alt.) 19 function( options ) { var $ = apex.jQuery, toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), toolbarGroup = { id : “myToolBarGroup" , controls : [{ type : "BUTTON" , action : "my-custom-action" , label : "My Button" , icon : "fa fa-user-secret" , iconBeforeLabel : true }] }; // toolbarGroup is my new created object toolbarData.push( toolbarGroup ); // pass back the modified object options.toolbarData = toolbarData; return options; }
- 20. Copyright © 2017 APEX Consulting 3. Tweak the Action Menu Remove default functions 20
- 21. Declarative settings for an IR 21
- 22. Declarative settings for an IG 22
- 23. Remove default Actions 23 function( options ) { options.initActions = function( actions ){ actions.hide("show-columns-dialog"); actions.hide("show-control-break-dialog"); actions.hide("show-aggregate-dialog"); actions.hide("show-help-dialog"); actions.hide("show-sort-dialog"); actions.hide("refresh"); // actions.hide("show-filter-dialog"); // actions.hide("show-flashback-dialog"); // actions.hide("show-highlight-dialog"); actions.disable("chart-view"); } return options; }
- 24. Remove default Actions (features) 24 function( options ) { // Disable Filter / Flashback as "features" options.features = options.features || {}; options.features.filter = false; options.features.flashback = false; return options; }
- 25. Remove default Actions (Grid View features) 25 function( options ) { // Disable Highlight "feature" of the Grid View options.views = options.views || {}; options.views.grid = options.views.grid || {}; options.views.grid.features = options.views.grid.features || {}; options.views.grid.features.highlight = false; return options; }
- 26. Copyright © 2017 APEX Consulting 4. Tweak the Action Menu Add an Action to a Toolbar Button 26
- 27. Add a button on the Search Bar - IG 27 function( options ) { var $ = apex.jQuery, toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), toolbarGroup = { id : “myToolBarGroup" , controls : [{ type : "BUTTON" , action : "my-custom-action" , label : "My Button" , icon : "fa fa-user-secret" , iconBeforeLabel : true }] }; // toolbarGroup is my new created object toolbarData.push( toolbarGroup ); // pass back the modified object options.toolbarData = toolbarData; return options; }
- 28. Link Action to Button 28 function( options ) { … options.initActions = function( actions ){ actions.add( { name : "my-custom-action" , action : function( event, element ) { apex.event.trigger( element, "my-custom-action" ); } }); } return options; }
- 29. Copyright © 2017 APEX Consulting 5. Modify Column Headings Remove sorting, hiding, aggregate etc. 29
- 30. Remove column header features 30
- 31. Remove column header features - region level 31 function( options ){ options.views = options.views || {}; options.views.grid = options.views.grid || {}; options.views.grid.features = options.views.grid.features||{}; options.views.grid.features.reorderColumns = false; options.views.grid.features.resizeColumns = false; options.views.grid.features.sort = false; return options; }
- 32. Where to find all these options? 32
- 33. Remove column header features - column level 33 function( options ){ options.features = options.features || {}; options.features.canHide = false; options.features.controlBreak = false; options.features.aggregate = false; //options.features.freeze = false; return options; }
- 34. Reuse settings • Create JavaScript function (in a - static - file) 34 function myColumnSettings( options ){ options.features = options.features || {}; options.features.canHide = false; options.features.controlBreak = false; options.features.aggregate = false; return options; } • Call the function myColumnSettings
- 35. Reuse settings and override 35 function( options ){ options = myColumnSettings( options ); options.features.aggregate = true; return options; } • Call the function
- 36. Copyright © 2017 APEX Consulting 6. Modify Column Headings Rotate column heading 36
- 38. Rotate column headings 38 .a-GV-header { height: 120px; } .a-GV-w-hdr .a-GV-headerLabel { transform: translateX(25%) rotate(45deg); display: inline-block; }
- 39. Copyright © 2017 APEX Consulting 7. Customise tooltips Show “hidden” columns as a tooltip 39
- 41. Customise tooltip 41 function( options ){ options.defaultGridViewOptions = { tooltip: { content: function(callback, model, recordMeta, colMeta, columnDef ) { return model.getValue( recordMeta.record, "JOB" ) + "<br/>$" + model.getValue( recordMeta.record, "SAL" ); } } } return options; }
- 42. Copyright © 2017 APEX Consulting 8. Modify row menu Delete and add entries 42
- 44. Modify row menu 44 function(options) { options.initActions = function( actions ) { actions.remove("single-row-view"); actions.remove("row-add-row"); actions.remove("row-duplicate"); actions.remove("row-delete"); actions.remove("row-refresh"); actions.remove("row-revert"); actions.remove("selection-duplicate"); actions.remove("selection-delete"); actions.remove("selection-refresh"); actions.remove("selection-revert"); } return options; }
- 45. Modify row menu 45 apex.region("emp").widget() .interactiveGrid("getViews").grid .rowActionMenu$.menu("option") .items.push({type:"action", label:"Hi", icon : "fa fa-hand-paper-o", action: function(){alert("Hi y'all")}}); apex.region("emp").widget() .interactiveGrid("getViews").grid .selActionMenu$.menu("option") .items.push({type:"action", label:"Hi", icon : "fa fa-thumbs-up", action: function(){alert("Good work by all selected employees")}});
- 48. Copyright © 2017 APEX Consulting 9. Refresh row on change without a full region refresh 48
- 49. Refresh (just the) row on change 49
- 50. Refresh (just the) row on change 50
- 51. Refresh (just the) row on change 51
- 52. Refresh (just the) row on change 52
- 53. Copyright © 2017 APEX Consulting 10. Refresh upon delete without a full region refresh 53
- 56. Refresh upon delete 56 var records, recordId, iNode, currentViewImpl = apex.region('emp').widget().interactiveGrid("getViews", "grid"); records = currentViewImpl.getSelectedRecords(); currentViewImpl.model.fetchRecords(records, function(err){ if (err) { apex.message.clearErrors(); recordId = currentViewImpl.model.getRecordId(records[0]); iNode = currentViewImpl.model.getRecordMetadata(recordId); iNode.canDelete = true; currentViewImpl.model.setOption('editable', true); currentViewImpl.model.deleteRecords(records); currentViewImpl.model.clearChanges(); } });
- 57. Top ten 1. Remove objects from the standard Toolbar 2. Add objects to the standard Toolbar 3. Remove / disable standard Actions 4. Add your own Actions 5. Modify column functions 6. Modify column headings 7. Customise tooltips 8. Modify row level menu 9. Refresh (just the) row on change 10. Remove (just the) row on delete 57
- 58. Links to resources • http://hardlikesoftware.com/weblog/2016/06/08/interactive-grid-under-the-hood/ • http://hardlikesoftware.com/weblog/2017/01/06/interactive-grid-column-widths/ • http://hardlikesoftware.com/weblog/2017/01/18/how-to-hack-apex-interactive-grid-part-1/ • http://hardlikesoftware.com/weblog/2017/01/24/how-to-hack-apex-interactive-grid-part-2/ • http://hardlikesoftware.com/weblog/2017/02/20/how-to-hack-apex-interactive-grid-part-3/ • http://hardlikesoftware.com/weblog/2017/03/31/how-to-hack-apex-interactive-grid-part-4/ • http://hardlikesoftware.com/weblog/2017/07/10/apex-interactive-grid-cookbook/ • https://github.com/mgoricki/orclapex-ig-cheat-sheet • https://github.com/Dani3lSun/apex-plugin-extend_ig_menu 58
- 59. Copyright © 2017 APEX Consulting Q& Aroel@apexconsulting.nl http://www.apexconsulting.nl @RoelH 59
- 60. @roelh roel@apexconsulting.nl http://www.apexconsulting.nl Copyright © 2017 APEX Consulting 60