v4.0.0 Change Log (June 2018)
FOEX 4.0 comes with lots of code optimizations & improvements, focused on reducing the initial page load and render times.
Due to the extensive work we have done with optimizing our PLSQL code and the PLJSON library, page build times have been reduced from anywhere between 20-60%, depending on the number of regions, items & dynamic actions that you have on the page.
Note: For our next release (FOEX 4.1), we have been performing extensive R&D on 12.2c Native JSON types and are working out how we can seamlessly switch to this new type whilst providing backwards compatibility for 12.1 and below database versions.
Our initial tests they results look really promising, so when we do introduce it you can expect even more performance gains.
Content Loading into the Current Page
By definition this is how single page applications are designed. In previous versions we have mimicked this design by using iFrames, which presented a series of drawbacks:
- iFrames cost close to 1 second to add to the DOM;
- all scripts and CSS need to be (re)loaded and executed;
- the Ext JS framework accounts for 3-4 seconds on page load to initialize & render
This improvement provides a decrease page load times of up to 50%, and is supported for all FOEX regions (except for the FOEX Desktop plugin), page items and all regular APEX & FOEX dynamic actions. Additionally:
- all processes defined 'Before Header' will be executed;
Note: The iFrame approach is still required when you are mixing regular APEX regions with FOEX regions e.g. JET Charts, since we are not yet currently able to render regular APEX regions in Single Page Mode. In future releases we’ll look to include support for regular APEX regions as well.
Theme Roller Integration
You can now customize your FOEX application style with the built-in APEX Theme Roller. You can change the entire look of your application with just several global level changes or use a more fine grained approach and customize at the individual plugin level.
For this to work, you will need to use our less file with the defined rules for FOEX components. There are two options on how to include the file in your application:
- Copy the FOEX Template Application as the base for your application the less file will be included automatically and you will not need to do anything else
- OR -
- Include [foex source]/css/FoexVita.less in your application - set the path to the file in your application's theme's styles Theme Roller Attributes (Shared Components -> Themes -> Universal Theme -> THEME -> Input Parameter File URLs field)
New Triton Themes (Compact & Mini)
For customers which prefer a more data intensive and compact view or those who still use the classic themes we are providing two new variations of the Triton theme: Compact and Mini. Both can be styled using the APEX Theme Roller.
Note: You will need to switch over to using Font Awesome / Font APEX when using these theme's to ensure that icons are sized correctly.
Grid/Tree 2-way data binding with page items
FOEX 4.0 comes with the ability to use external page items to edit grid and tree grid data on row selection. The data binding goes both ways:
- Grid row changes are propagated to page items;
- Page item changes are propagated to the selected grid row
Note: Grids rows which have changes made are now identifiable with a blue triangle in the top left corner. This is in case you are editing hidden columns using the external page items, you will be able to visually see when the grid row has been changed/edited.
Navigation Plugin - Search
The navigation plugin now how an option to include a search field that will filter the navigation list based on the entry title and highlight the matches.
Grid Column Help Text
You now have the option to include help text for grid columns. You have the option of displaying it in the column menu or on hover of a help icon above the column menu drop down.
You can enable this by simply including “helpText”:”some help info” in the report column’s additional config attribute. You can find a demo on page 1520 in the FOEX Cookbook application.
Switch APEX Theme Style (APEX 5.1 Only)
Since we now provide styling of the Triton theme(s) using the APEX Theme Roller we have now included a dynamic action to switch the theme style.
Note: this is only supported in APEX 5.1+ since it relies on an APEX PLSQL API that was introduced in this version.
Grid and Tree Grid Improvements
We have included several new dynamic actions. The first is a set grid row values using a dynamic action. You can set multiple values in a row at a single time by providing a JSON object with “Column”:”Value” pairs.
You can target rows by either using the current row selection (multirow selection is supported), a column/value search using partial or extract matching, or using a single row index or index range e.g. 0 or 0-4 or 0,1,3,5.
The second is a reject changes plugin that will allow you to easily reject changes for the current selected row(s), a column/value search or the entire grid.
You can see an example in our FOEX Cookbook application on page 1252 for the Grid and page 3090 for the Tree Grid.
Additional Tree Grid Improvements
We provide a new action within the FOEX Tree Grid Actions plugin so that you can hide/show the tree root. By default the root is hidden since normally it is a pseudo element because the starting point normally is NULL i.e. Level 1 records have a NULL for the parent ID.
However in cases where you do start at a level where the parent ID is not null then we provide this dynamic action so you can show this starting point. You can see an example of this in our FOEX Cookbook application on page 3012.
We have also included two new events to detect before and after the root node loads. This is to eliminate the requirement for a client side condition on the regular FOEX Tree Grid - After Node Load event which fires for any node loaded in the tree.
Listening to either of these events is useful for many reasons i.e. prevent the tree from reloading because of some conditional check. Or you may want to expand only Level 1 nodes when the tree loads.
Slider Page Item Improvement
We now provide the ability to format and show step values for the slider page item. You can format the labels by providing a format mask.
Close All Windows
Due to the content loader change that loads pages into the current page we now include an option on the “FOEX Close Window” dynamic action to close all open windows prior to opening content via the content loader.
Content Loader Improvement
It is now possible to set content loaders URL to the page currently loaded in the iFrame. This is useful when you are showing regular APEX pages and have navigated away from the original page loaded by the content loader.
This is to ensure that on refresh of the content loader region (i.e. URL reload) the user can stay on the current page they are viewing.
We have included several new demos for existing plugins as well as adding demos for new functionality. We have enabled the new content loading into the current page functionality when navigation links are opened, but have also explicitly set some demos to run in the old iFrame mode.
We now provide a more visible button on the info pane title to easily edit the pages you are viewing in the cookbook application so you can easily peek behind the scenes at the page setup and how the demo was put together using the described plugin(s).
When using the theme switch dynamic action we save this value to an APEX user preference named FOEX_THEME.
APEX Preferences are applied at the workspace level therefore this theme preference will be applied across all FOEX applications that the user account has access to.
If FOEX detects a theme preference for the user it will use this theme for the application.
Removal of Sencha Ext JS Themes
We have removed the Classic, Neptune, and Triton dark themes from this release. The Triton Mini/Compact themes have been included to match the sizing requirements of these removed themes:
- Triton Mini -> Classic
- Triton Compact -> Neptune
- Triton Dark -> Triton
The Triton Dark theme is now an APEX theme style named FOEX Style 1.
When upgrading FOEX from a previous version we will automatically change your application theme (if it is not Triton) for your existing applications based on this mapping.
Post upgrade you can manually change the theme to your desired selection under: Shared Components -> Component Settings -> FOEX Application Settings.
The reason for this behaviour change is because we provide theme roller integration only for the Triton theme. Effectively it is now our Universal Theme so to speak.
This will reduce support requirements and also mean that we can include more functionality in the future that can be easily styled by you / your developer(s).
Translation - Text Messages
Globalization of FOEX components works by using APEX Text Messages. Starting with FOEX 4.0 we have changed the way we use and output these Text Messages.
This now means we have to create these text messages, if they do not already exist (previously we had used hardcoded defaults in PL/SQL), so that APEX can pick them up.
The text messages are created when running a FOEX app for the first time from within an Application Builder session. On this first time you might notice that some buttons do not show the proper text, but an internal message name like FOEX.JS.GENERAL.LOADING_MSG.
This is due to a timing issue where the APEX messages.js file request fires before the texts are created. Simply reload the page again with a hard browser refresh (Shift+F5) and the problem should disappear.
Content Loading into the Current Page
The new option to load content into the “Current Page” means you can now load a page into a page. This is the definition/design of single page applications and the biggest design change we have added to the framework since the initial 1st release.
Example: Let’s say page 30 is your main/parent page and you load page 50 (child page) into it using the "Current Page" setting in the content loader.
When page 50 is loaded into page 30 the page context is still page 30, it just has content from page 50 added to it. If you open session state or edit page from the developer toolbar page 30 will be the context. The same applies when you submit the page, the context is still page 30.
There is no iFrame used in “Current Page” mode it is simply loaded into a HTML element on the page i.e. DIV. This element is created by the region's layout manager which you are loading content into i.e. the affected element in the content loader dynamic action.
From a technical point there is much more complexity to deal with when loading pages into the current page, the benefits outweigh this though, but you will find some situations where it will not fit, so you can fall back to the iFrame mode.
We have also designed this new feature to automatically fall back to iFrame mode when either a pre-condition is not met i.e. one of the following:
- The FOEX Desktop plugin is added to a page;
- A 3rd party dynamic action is included on the page;
- Any regular APEX regions defined on the page will mean that the page will be shown in iFrame mode;
- If you want to open the same page multiple times you will need to open these pages in iFrame mode since you must use unique ID’s on a page and opening the same page will mean that the 2nd attempt to open the page will result in ID conflicts;
Note: Another important point to note is that in the old iFrame mode there is a clear boundary between pages so things like CSS and CSS classes on the parent page don't affect the child pages.
When we load content into the current page the CSS on the parent page can affect the child page loaded (and vice versa) because they are in the same HTML document and there is no separation - which the iFrame normally provides.
Note: If you have open windows on child pages, which are loaded into the current page, they will not be automatically hidden when new content gets loaded into the current page.
With the iFrame mode, when the content loader fetches a new page and adds this new content into a new tab/iFrame, it means that the previous tab would be hidden and as a result the window too since their page boundary was the previous tab/iFrame, not the whole page.
In this version you will have a new option in the “FOEX Close Window” dynamic action to close all open windows. You can use it before the content loader action to resolve the issue described above.
Sencha Ext JS
We have upgraded the underlying Sencha Ext JS framework from 6.2.1 to 6.5.3. This could potentially effect any custom Ext JS code you have written in your application. So please check/test your custom code.
To check the full release notes which include the new features and functionality provided by FOEX 4.0.0, please click here.