In this post we are focusing on transforming a standard APEX form into an Ext flavoured form simply by setting a custom region template which we have built. We will be replacing the Form layout with an Ext Panel and we will be changing the input fields to their Ext equivalent. We will be using the Ext basic form level validation which we previously posted about with the APEX Tabular Form.

For the design approach we use the same method as our report, we create a JSON metadata object in our page header based on the APEX Form definition in the APEX data dictionary. Whilst we build our JSON object we use the apex dictionary details to query the database data dictionary to work out what types of fields to convert them to. i.e. for VARCHAR2 we use TextField, for NUMBER we use NumberField, etc.

The advantage of this is that there are some extra restrictions the Ext form fields impose for us. For example in a number field it will only accept numbers even if you type text it will not appear in the input field. Number fields can also have a decimal precision set so you if you enter more than X many decimal places they are removed. Date fields require a specific format and a validation error will be displayed if it does not conform. The great thing about this is that it cleans your data before page submission and negates the server side validation requirement although it’s still worth having it there as a backstop.

The high level overview of how ts done…

1. We create a new Ext panel and set the body to be our APEX form region
2. We query our JSON metadata object using the Region ID to work out what attributes to set e.g. title, width, collapsible etc. (Note: we have enabled a form option button similar to the grid options we blogged about previously for customizing the widget)
3. We grab the particular region and it’s input fields we are interesed in by using an “Ext.get(FormRegion).select(“input,textarea,select”).each” javascript call
4. We then use the element id e.g. P4_NAME to query our JSON metadata object in the page header which is output by our page process. This has a number or attributes which we are interested in such as Data Type, Format, Decimal Precision, Nullable etc.
5. We then perform a switch statement in javascript based on the data type and hand it off to a javascript transform function which we have written which will turn it into the Ext equivalent field with any additional parameters defined in the metadata object. i.e. if nulls are allowed, Date Format etc..
6. Once rendered, if any validation issues occur we simply disable the top and bottom toolbars on the Panel so the form can’t be submitted and simply enable them once the entire form is valid for submitting.

For this particular integration piece we are relying on APEX form submission, so we don’t need to worry about defining the region as an Ext.form.FormPanel as APEX will handle the processing via the “Automatic Row Processing (DML)” process that’s created via the wizard. Our form buttons use the APEX javascript function “doSubmit”. We can still use all available APEX features which we like for this form, e.g. computations, processes, validations etc. We are simply changing the look and feel to Ext but still processing the form itself via APEX. This gives us a flexible solution and has reduced the development time for producing this integration piece. In the near future we will be looking to implement a full AJAX version of the form with processing masks etc. when we have more time (know the feeling?? i.e. to much to do not enough time).

Here’s a good point to note about the integration. As everything occurs in the region template we can simply change the region template for the form back to our APEX theme Form Region and all Ext functionality will be removed, there is nothing that you need to change with your form elements or at the page/application level. Simple and clean reusable design, which is our motto by the way!

Here’s a preview of the end result…