We just released FOEX 4.1 – Here’s a sneak peek on what’s new

Drag & Drop

This is the standout feature of the release. Drag and drop is an intuitive way of copying, moving and rearranging things. In this latest release of FOEX we are introducing a very flexible dynamic action that will allow you to drag & drop across regions or re-order rows/items in existing regions. There is no limit in the number of regions you can drag/drop between and you can drag & drop across regions defined on different pages loaded in single page mode using the content loader or window plugins. The following is a demo of two-way dragging and dropping tasks across 3 list view region plugins.

 

You will be able to copy or move records between grids, trees, tree grids, list views. You will be able to drop the records from the previously mentioned regions into forms, fieldsets, page items, static regions, PLSQL regions, Code Editor, and buttons. You can drag & drop across pages loaded by the content loader in single page mode, you’re not just restricted to regions defined on the same page. You can see some more demo’s here which we blogged about recently.

To perform both actions you can use the Ctrl key whilst dragging to perform a copy operation if move is already enabled. You can automatically map the columns from one region to another if the column aliases are the same, or you can manually provide a mapping. You can also control what happens with selections post dropping. In the initial release these are the available settings to choose from:

 

---

JET Chart Master Detail & SPA Support

With the introduction of JET Charts in APEX 5.1, the visualization capability of APEX out of the box increased dramatically. We have taken the step to integrate the existing APEX JET Chart region with our plugins and provide single page application support across different pages. That’s right you can simply (re)use the APEX JET Chart region under your FOEX viewport hierarchy. We have introduced the ability to select chart items and perform master detail relations using our dynamic action plugin in combination with our existing region plugins like the grid, tree, tree grid, form, and list view. For example:

 

 

We have taken this step because JET Charts offers a superior charting solution compared to the Ext JS charts which we have been using in earlier versions of FOEX. Moving forwards from this 4.1 release we would strongly suggest that everyone uses a JET Chart instead of our chart plugin. If you require more functionality than what we currently provide please let us know as we will happily introduce more features in future versions of FOEX.

 

---

New Page Items

We are introducing three new page item plugins:

• Color Picker
• Toggle Button
• Sparkline Charts

The color picker can appear as a select list or as a button and has extensive colour formats which can be returned.

The toggle button behaves like a switch with customization over labels, icons, background colors, and rounding or square edges.

The sparkline chart item plugin allows you to show mini charts inline within other form items. This can be useful in situations where a chart is overkill and a smaller simpler representation suffices e.g. for use in toolbars.

 

 

---

Editable List Views

To easily support the new drag & drop feature with list item re-ordering capability we extended the “List View” plugin to be editable. You can now use the same functionality as you find within the grid/tree grid to save the list data. This ensures that it’s very simple to save changes using just several plugin settings with zero programming overhead. Additionally we are also providing a number of dynamic actions like set item values, refresh item, and reject changes.  Here is an example of using the “Set Item Values” dynamic action to set the values of selected rows programatically.

 

 

We also provide a custom processing option on the occasions you need it, which is the same design as the grid & tree grid for consistency and code reusability purposes. Here are the additional editing settings you will find on the list view:

 

---

Automatically add new values to LOV’s

Sometimes you have LOV’s in your application where users need to add a new value to the list. As a developer it’s normally an annoyance/cumbersome process to provide a button next to the list that opens a popup with a form to add the extra value, especially if you have 5 or more LOV’s to provide this functionality for. From this version onwards we now take this headache away for you, all you need to do is add a few settings to your LOV and we will take care of the rest.

 

 

We support inserting into all types except static LOV’s i.e.  shared component LOV, PLSQL returning SQL, LOV based on a SQL Query. The only requirement is that your query is updatable. If it’s not don’t worry you can write your own custom processing. We also provide authorization support since not everyone is always allowed to enter new values.

 

 

Last but not least is that you can associate an existing window region plugin with a more complex form, or even use a content loader region and load a form from a different page. Why would you do this? Well some people during data entry might get half way through entering a large record before realizing they need to add a missing record in another part of the application. This is where you can easily provide a full form for them to enter the details, and on enter it’s automatically selected in the LOV for them, which makes a nice workflow. Rather then them having to abandon their changes and start again after adding the LOV value in another part of the system.

 

---

Quick Pick Support

We have added quick pick support to all list of values plugins. To display quick picks next to your form field you will use the APEX Quick Picks settings of the page item.

 

 

In FOEX you have two display options for the quick picks: they can be displayed either as links below the field or as menu buttons. The default is to show quick picks as a menu button. If you prefer to display your quick picks as links, please use the following setting in your field’s Custom Config:

"quickPickDisplayType": "links"

---

Field Icons

Field Icons serve as visual indicators usable in all editable FOEX form page items on the left or right side (or both) of the input field. They are not new page item plugins but a configuration setting on existing page items, i.e. you will need to pass a setting in the field’s Custom Config.

 

 

Let’s take a look how this setting is supposed to look like:

"fieldIcons": {
    "carIcon": {
        "iconCls": "fa fa-car",
        "iconSize": 20,
        "width": 20,
        "color": "#CCC",
        "backgroundColor": "#FFF",
        "position": "before",
        "showRightBorder": true,
        "showLeftBorder": false,
        "text": "Lorem Ipsum",
        "textCls": "text-cls",
        "focusCls": "focus-cls",
        "extraCls": "extra-cls",
        "weight": 1
    }
}

---

Updated Template Application

In earlier versions of FOEX we provided a blank template application which had all our plugins and templates loaded. You copied this application as a starting point for creating new FOEX applications. However that was it! We didn’t include any pages since it was a minimal starting point, but it was a bit too minimal.

So in this release we have included a main navigation page with a navigation region, navigation bar and a number of dynamic actions that gives you a quicker starting point to getting your application up and running.

 

Note: if you’re not happy with what’s included simply change or remove it when you start building your new application. It’s there to give you one idea of how to get started, but you have full control over how you want your application to look & behave. There are many different ways that you could design your application, we have just included the most popular style. Check out our navigation section in the cookbook for other possible styles.

 

New APEX Integration Showcase

See how you can use the grid or tree grid as a standalone region on a regular APEX page. The regions will work with responsive design and auto resize on window resize and navigation collapse.

 

 

Alternatively you can use everything FOEX has to offer on a regular APEX page by starting with a layout region as the parent region and then nest whichever FOEX plugin you like below. For existing developers already using FOEX all you need to do is switch your viewport to the “FOEX Layout” plugin. This means that you can take advantage of everything FOEX has to offer like single page application design without having to re-develop your application.

 

Other Notable Features

Tab switch & Navigation Region Sync

• the navigation plugin when used with a content loader dynamic action will automatically sync its selection with the current tab. So when you switch tabs the correct navigation item will be selected and scrolled to. You can disable scrolling by adding the following config setting to your navigation plugin custom config:

  "disableScrollOnTabSync": true

New Region Spacer Plugin

• using this plugin you can now easily add space between your regions. Choose either a fixed width/height or variable amount using a flex setting, and style the background colour app wide using the theme roller, or provide your own custom color.

New Timer dynamic action

• this is a useful plugin for providing timed actions either on an unlimited basis or X number of timeouts. This plugin is a replica of the timer plugin that the APEX team provided on their website. We made the decision to include our own version to avoid an external requirement for you to install and manage a separate plugin.

Call AJAX Callback (CLOB)

• using this plugin you can call AJAX callbacks additionally passing in the p_clob_01 variable which can be accessed in PLSQL using apex_application.g_clob_01. The benefit of this plugin is that it has “wait for result” support so your proceeding TRUE actions can wait before the callback completes.

Theme roller Improvements

• We have introduced some additional control to the theme roller to style the region header padding, font, font weight, and font size, and form label. We have also included additional styling properties for splitters and the new region spacer plugin as well as a number of other items.

All in all, FOEX 4.1 delivers some great new features that will bring productivity gains to your development process and for your end-users’ experience. Adding Drag & Drop capability to your apps could prove to be a big win on making your applications simpler and more intuitive. Moving forward, we’ll continue to improve on functionality, giving you more flexibility when developing applications using our components, but we’ll also continue to tightly integrate with APEX like we did with JET Charts and the Theme roller, so you can leverage what’s best of both.

So head over to your FOEX trial workspace, or sign up for a new one and take FOEX 4.1 for a spin. We’re eager to receive your feedback!