X

The Oracle APEX blog is your source for APEX news, technical tips and strategic direction

User Interface and Theme Roller Enhancements in APEX 21.1

Monica Godoy
Principal Product Manager

Universal Theme, first introduced with APEX 5 in 2015, is the User Interface for Oracle APEX applications and is continually updated with every release with features and enhancements to empower developers to build modern responsive apps that are highly accessible, easily customizable, and easy to maintain.

The latest release of APEX, 21.1, continues this tradition and delivers several UI-focused enhancements, and updates to Universal Theme, that provide developers with even greater control and flexibility of their applications. Here are some of the features in this release:

  • Modern CSS and Performance Improvements
  • Font APEX 2.2
  • Refreshed Redwood Light Theme Style 
  • Theme Roller Updates
  • New Row and Column CSS Classes attributes
  • New Templates and Template Options

Modern CSS and Performance Improvements

Stylesheets in Universal Theme have been refactored to use modern CSS features such as CSS variables, grid layout, and flex-box to provide a more flexible and robust user interface.  As an added benefit, Universal Theme is able to rely less upon JavaScript for page layouts, resulting in faster paint times.  In addition, using CSS variables now enables easy customization of nearly every CSS property in the theme, and enables plug-in developers to reference the same variables so that the plugin adopts the UI customizations from Theme Roller and your custom Theme Styles. As a result of this CSS modernization effort, we were able to see a 15% reduction in CSS for Universal Theme, further improving page load times.

Font APEX 2.2

Font APEX has been expanded with the addition of 95 additional icons with a focus on medical applications, map markers, and extra file types. We’ve also made minor tweaks to a few existing icons so they fit in better with the rest of the set.

Refreshed Redwood Light Theme Style

The Redwood Light Theme Style was introduced in APEX 20.2, which aligns with Oracle's new user experience design system, and provides a new design, color, and textures across all of Universal Theme. With APEX 21.1, The Redwood Light theme style has been dramatically refreshed to align much closer with Oracle's Redwood Design System, and now supports a number of customization options using Theme Roller, including setting the pillar color, page layout, and control over the color scheme for the header, body, and navigation elements.

The Pillar class enables you to change the background and header images. Each pillar has a specific color theme and data texture.
You can select one of the ten available pillars for your app:

And the Layout class enables you to switch to one of the following options:

Edge to Edge (Default)


Floating


Contained

Theme Roller Updates

Theme Roller has been updated with a streamlined UI, improved accessibility, simpler save experience, and much more.  The first change you will see is that Theme Roller and Logo Editor are now separate panels that can both be launched from the new Customize menu in the Developer Toolbar.  We’ve also updated the color picker, and the Custom CSS code editor, so it is more consistent with the experience in the APEX builder. 

Some of these enhancements include:

  • In the Runtime Developer Toolbar, you will find the Customize menu that allows you to launch Theme Roller or to edit the logo of your application.

  • From the Theme Roller dialog, there is a new Filter text field at the top to immediately find the property you’re looking for.
  • The save experience is far simpler and no longer requires multiple actions.  When you’re done making changes, simply click on the Save button and it will save your changes, and set it as the current theme style for your application.

New Row and Column CSS Classes attributes

These new attributes added to Region, Page Item, and Item Buttons allow you to enter CSS classes you wish to apply to the layout row or column that contains the region. This property can be used to provide fine-grained control over the responsiveness and layout of the region's layout row or column as the viewport size is changed. For Universal Theme applications, there are a number of CSS modifiers you may use to extend your page components. Review the Reference section of the Universal Theme Sample Application to learn more.

New Templates and Template Options

Universal Theme includes a new Classic Report template to display contextual information.  This is similar to the Value Attribute Pairs report but provides a more condensed and minimal view of information.  In addition, there are also several new template options for controlling heading levels and the required attribute for your form items. 
You can customize the appearance of the Required Indicator by using Template Options and setting Required Indicator to either Inline, Asterisk, or keep it the default:

  1. Run your page with a required item
  2. From the Developer Toolbar, click on Quick Edit
  3. Mouse over the page item you want to update and click on the black Wrench icon
  4. Change the Required Indicator attribute to the style you prefer
  5. Click Save.

The following screenshot shows:

  • Asterisk style (with the red indicator in the field) for the Project item
  • Inline Label for the Start date item.


Summary

Oracle APEX 21.1 allows developers to take greater control over their application's user interface with new icons in Font APEX, modernized CSS in Universal Theme, performance improvements and more.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.