APEX Interactive Grid: Column Widths and noStretch

Setting column widths in Interactive Grid is totally different than how you may have set column widths in Interactive Reports.  While it is nice to blindly let APEX and the browser handle it, there are times when you need to explicitly set a column width, or at least set the width of one column relative to another, and for that you need to know how Interactive Grid handles column widths.

Recall that Interactive Reports let the browser figure out the column width, using table-layout:auto;  We could do little tricks like making the column heading longer or shorter to trick the browser into making the column wider or narrower.  That won’t work with Interactive Grids.  Interactive Grids are Fixed Table Width – table-layout:fixed;.  APEX will, by default, try to fill the full table width with the displayed columns, adjusting  – stretching or shrinking – the width of columns to  fit the full width of the table.

So how to set Interactive Grid column widths?

First,  the Width property (visible in the Appearance property group) for an Interactive Grid column does not set the width of the column.

ColAppearWidth

Instead, run the Interactive Grid, then set the column widths interactively using Drag and Drop on the columns themselves.

Select the || divider to dynamically adjust column width:

ChangeWidth

Select the 4-way divider between columns to activate Drag and Drop column order:

DragDrop

Hover over the divider between column headings to grab either the column width adjustment icon or the drag-and-drop column order icon.

Adjust column widths and column order as desired.  (Notice that APEX will adjust column widths so the full width of the table is filled.  This auto-adjustment may not be what you want – more on “noStretch” later on in this post).  Then save the report: Action –> Report –> Save.   The column order and the relative column widths are saved with the report.   When a user adjusts column widths, or does any other actions, a Reset action will restore the column order and column widths to the default set by the Developer’s Save Report.  Much easier that messing with numbers!

reportSave

You can, in the Column action, set a minimum column width. This sets just that – sets a minimum column width for the column that APEX tries to honor.

ColMinWidth

What about Max width?  You may have a Yes/No column, or a single-digit column, and do not want that column to get auto-stretched to some absurd-looking width.

SillyWidth

 

This is where the noStretch option comes in.

Setting noStretch on a column will hopefully (Oracle Safe Harbor) be declarative as of  APEX 5.2.0.

Until then, to set noStretch, as of APEX 5.1.1, in the Advanced –> JavaScript for the column you do not want stretched, set the noStretch grid column option to true:

function(config) {
   config.defaultGridColumnOptions = {
       noStretch: true
   };
   return config;
}

If you want noStretch true for all columns, the solution is similar, but this time we adjust the configuration in the Advanced–> JavaScript region for the Grid:

function(config) {
   var cfg = cfg;
  cfg.stretchColumns = false;
  return config;
}]
    

With noStretch on, APEX will not resize your noStretch column(s) to fill the full table width:

noStretchOn

 

While this works perfectly if the current view is your Grid view, remember that there are also Chart, Group By, Icon and Detail views – the above code will fail if the current view is not Grid.  So one should make that code that code a bit smarter, so it only acts on – changes the configuration for – a Grid view:

function(config) {
   var cfg = cfg;
  "views.grid.features".split(".").forEach( function (p) {
      if ( !cfg[p] ) {           cfg[p] = {};      cfg = cfg[p];  });
  cfg.stretch.noStretch = true;
Columns = false;
  return config;
}

In version APEX 5.1.0, setting noStretch is a bit different.  If you can, upgrade to APEX 5.1.1 or higher.  There are significant updates to Interactive Grid widgets and APIs in APEX 5.1.1.  IF you cannot upgrade and need noStretch, it can be implemented per column, by adding JavaScript to the Page Execute When Page Loads element:

var igrid = apex.region ("my igrid").widget().interactiveGrid("getViews", "grid");igrid.modelColumns.COLUMN1_NAME.noStretch = true;igrid.modelColumns.COLUMN2_NAME.noStretch = true;
igrid.view$.grid("refreshColumns");igrid.view$.grid("refresh");

That’s it!

I highly recommend checking out the APEX Sample Interactive Grid packaged application. Your best source of Interactive Grid documented examples.

Good luck!
  

 

Going to the Grid: What the APEX Interactive Grid Means to You and Your End Users

I will be speaking at Kscope 17 in San Antonio, TX on APEX 5.1 Interactive Grid:

Going to the Grid: What the APEX 5.1 Interactive Grid Means for You and Your End Users

Karen Cannell , TH Technology
When: Jun 26, 2017, Monday Session 2 , 11:45 am – 12:45 pm
Room: Cibolo Canyon 5
KScope_Pic
Topic: Application Express – Subtopic: APEX New Release

The long-awaited APEX 5.1 Interactive Grid region is here – but what does it mean to you and your end users? Need some practical guidance on when, why, and how to adopt the interactive grid region type? This session is for those who have seen the introductory demonstrations, are looking to upgrade to APEX 5.1, and need some advice. Does the interactive grid replace interactive reports? No more tabular forms? This session answers practical functional and technical questions raised by this new region type:

• When and why should I upgrade existing regions to interactive grid?
• Is there an upgrade wizard?
• What features will I gain; what features will I lose?
• What about customizations – will they upgrade?
• How does an editable interactive grid compare to my existing tabular form?
• Which features must still be manually written? Do I still need to write all that collection logic?
• How can I customize appearance?
• How can I add dynamic actions?
• Can I extend the interactive grid functionality?
• Will my end users like it? What about data entry users?

This session compares and contrasts interactive grids with the interactive reports and tabular forms we are familiar with. We will pay particular attention to maintaining or replacing features and common customizations in existing applications: checkboxes, 32K limits, cascading select lists, row-level validations, interactions between columns, and navigation between fields. How does the interactive grid region measure up? Should you upgrade all your interactive reports and tabular forms now?

How we do settings of which features are on or off for a particular Grid and for a particular column is now controlled by javascript. Sound scary? It is really not, you just need to learn where to put what piece of code when.  How to access data in the Grid data model?  We will show you that too.

If you cannot attend, don’t worry, I will be posting bits of that presentation here over the next few weeks.  IF you can attend, I will see you there!

Rest up ~ our Kscope 17 schedule is packed, so don’t expect much sleep or downtime.

APEX Presentations ~ Through the Years

I was recently asked to summarize my APEX Presentations. I realized I had them in several places, but not in one consolidated space. So here it is – a summary of my APEX Presentations through the years:

APEX 5 Interactive Reports

Updated for the APEX 5 release, these links contain the presentations from KScope 15, and white papers as published in RMOUG’s SQL>UPDATE magazine.

For APEX 5, Interactive Reports have been reengineered from the inside out. Any developer who uses IRs, has made customizations for appearance or features or performance outside of the standard API’s, even pagination plugins, needs to be aware of the new CSS and JavaScript engine.  APEX 4 and earlier customizations will likely not work in APEX 5 without some refactoring. Be prepared!

Presentations: APEX 5 (Released) Interactive Report Deep Dive, KScope 2015 Presentation
   APEX5 Interactive Reports New Features and Upgrade Cheat Sheet – Presentation RMOUG 2015
Papers:     APEX 5 Interactive Reports Part I: New Features and Enhancements
     APEX 5 Interactive Reports Part II: Structural CSS and JS Widget Code Changes
 

Migrating Critical Business Application to APEX – Successfully

Presentation: Migrate Business Applications to APEX, Successfully – Presentation 

I had a blast at COLLABORATE14 in Las Vegas, NV, April 6-11, 2014.  I had a chance to catch up on Oracle 12c skills, learn more about ADF Mobile with APEX for hybrid mobile applications, XQuery and XML DB and of course refresh friendships with all those at IOUG.  My Friday presentation was on Migrating Critical Business Applications to APEX, covering tips and tools for migrating any legacy app to APEX.

APEX Data Load Options, or, How Do I Load Data, Let Me Count the Ways …

Presentations: APEX Data Loading Options

There are many many ways to load data into an Oracle application. This presentation discusses data load methods specific to APEX – the data load wizard, external files, custom methods and using the APEX Listener for a true MS Excel file upload. This is practical what works, what doesn’t information to help one decide the best approach for data loading problems.

Meaningful Maps, Gantts and Charts

Presentations: Meaningful Maps, Gantts and Charts

APEX 4.0 introduces improved charts and maps, but how to make sense of them? This presentation covers all the basics for understanding APEX 4.0 Charts, Maps and Gantt Charts.  Plenty of information to get one building meaningful charts and maps in APEX applications.

Tight Tabular Forms

Presentations: Tight Tabular Forms

APEX tabular forms are handy, but kind of loose, if you use them out of the box. This presentation covers the improvements in APEX 4.0 for tabular form validations, plus some tips on adding validations using the APEX_APPLICATION arrays, and building manual tabular forms using the APEX_ITEM API.

Migrate BI to APEX: What Works, What Doesn’t, and Lessons Learned Along the Way

Presentation: Migrate BI to APEX – What Works, What Doesn’t, and Lessons Learned Along the Way

This presentation covers a real migration from a major-vendor BI tool to APEX Interactive Reports for end-user information needs. Covers feature considerations such as drills, pivots, output; dynamic crosstab options and construction, including use of 11g PIVOT and AMIS PIVOT object type solution.  Careful crosstab query construction makes APEX Interactive Reports more powerful than one may think. APEX 4.0 new features address the needs for user-defined grouping, shared reports, scheduled report delivery, multiple views of the same data set and improved charting.  Check it out!

Note:  I am working on an APEX 5 version of this presentation – improvements in APEX 5 interactive reports, including the PIVOT feature, may tip the scales and make a switch from an expensive, underutilized BI tool to APEX a better use of resources.

Oracle Application Express: Tactics to Tackle APEX Bugs

Paper:               Tactics to Tackle_APEX Bugs,  Paper

Presentation: Tactics to Tackle_APEX Bugs, Powerpoint

Know your application, know your tools, have a plan, and always remember that you know some stuff. You can debug Application Express apps and stay sane.

APEX development is a breeze, until something goes wrong and there’s no obvious clue of what happened or how to fix it, and there’s no UNDO. Or is there? This session presents tactics to tackle common APEX problems such as MRU internal error, Browser errors, SQL and PL/SQL issues, HTML, and JavaScript problems. We cover triage, debug tool options, and debug tactics, and then demonstrate applying those strategies to tackle common APEX problems.

This paper and presentation were written for APEX 4.0 (or earilier?) ~ APEX debugging techniques are much improved now! However, the strategies and tactics for addressing bugs: knowing your app, knowing your tool, instrumenting, researching first and using the forums still apply.

Oracle Application Express Interactive Reports: The Good, The Bad, The Ugly

Presentation: APEX Interactive Reports: The Good, The Bad & The Ugly

Paper:               APEX Interactive Reports: The Good, The Bad, The Ugly

I had fun writing this paper, mainly because the movie (old western, Clint, of course) theme song played in my head, and our house is defnitely a Clint-John Wayne-Sam Elliot-Any Old Western neighborhood.

Oracle APEX Interactive Reports have many Good points, but one-size does not fit all, so we developers still have some cleverness to apply to meet end user requirements in all cases. This paper outlines the Good, the Bad, the limitations, and shows some easy CSS edits to address the Ugly, the default appearance. Have fun!

APEX Interactive Reports offer amazing functionality out-of-the box, but this wealth of features comes with limitations. This session presents the Good, the Bad and the Ugly of APEX IR, then details and demonstrates workarounds to address the Bad (the limitations) and the Ugly (the appearance). Learn how to limit Search and Activity features for different user roles, how to eliminate part or all of the Search and Activity Bars and how to customize the look-and-feel to fit your corporate template.

(As with all my papers, I will keep this post up to date with the latest version of the paper.)

APEX Cheat Sheet

Download the APEX Cheat Sheet paper from here: APEX Cheat Sheet

When starting out with Application Express, it can be a bit confusing in terms of what syntax to use where, how to effect the item alignment needed, how to customize the look-and-feel… in general, how to get productive. Tha APEX Cheat Sheet paper is a collection of tips, how-to’s, syntax conventions and tricks to accelerate a developer’s APEX learning curve. The APEX Cheat Sheet paper has grown to be much longer than a “cheat sheet” but it does provide a solid quick-start to APEX development.

Note: While written for erly APEX versions – APEX 3! – some of the basics still apply, like the f?p syntax.  Someday I will do another Cheat Shet- the problem is there are so many new features, I will have to do multipe cheat sheets for each major feature.

APEX Under the Covers

Paper: APEX Under the Covers

In working with Oracle Application Express I have found the best way to learn “how they did that” is to look “under the covers” at the APEX code … The way to do that is to download an application, install it in my builder, and view how the author implemented the features of interest.

The white paper and presentation APEX Under the Covers walks the reader / viewer through the learning process of looking under the covers at some not-so-standard features implemented in APEX. The examples are not rocket science; they are intended only to get the brain thinking along lines where the reader may not yet have ventured, suggesting a few different approaches to achieving an end within APEX.

Note: This presentation was written for APEX 4, but the approach is the same with APEX 5 and beyond – learn from how they wrote APEX. For APEX 5, use and LOOK AT how they wrote the packaged applications. This is free training at its best!

APEX Debug Options

Paper: APEX Debug Options

Debugging Oracle Application Express can be a conundrum.   It’s PL/SQL, but I cannot see it, and I cannot step through it. PL/SQL generates the page, but I do not have access to the APEX page generator. There is JavaScript and CSS and HTML … Where to start?  The truth is there are many avenues for debugging APEX; some APEX-supplied, some external to APEX. The paper and presentation APEX Debug Options describes both APEX-supplied utilities and tools external to APEX for debugging APEX applications.

~ Keeping it Fresh: Cost-Effective Training

Layoffs, economizing, more for less, and oh-by-the-way keep up with the latest in Web development, languages, data modeling, coding techniques, testing, quality, the latest App Servers and find time to relax a bit and network with your peers. The temptation is to postpone or skip all training. I suggest however that this is the time we need training all the more. I maintain the most cost-effective training can be found at our user group conferences. Attend! Volunteer – get involved! IT is the most efficient, cost-effective way to stay current and learn new technologies, and you might have some fun along the way.