Improvements to Template Components in APEX 24.1

Oracle APEX 24.1 is packed with new features and enhancements designed to streamline application development and improve user experience. Whilst many of the new developments focus on the implementation of AI, one standout area of improvement in this release is the upgrades to Template Components. This blog post will delve into the enhancements and explore how they can elevate your application development process.

Templates are the structures in which APEX application pages, controls, and components are built and displayed. Template Components were introduced in version 23.1 as a new plug-in type that allows you to build custom, reusable components using HTML, CSS, JavaScript, and template directives, allowing for dynamic content. Lee Burgess recently wrote a fantastic blog post here giving an in-depth guide to working with Template Components. I will be using Lee’s product card Template Component in this blog to demonstrate how we can implement the improvements introduced in 24.1.

What’s New with Template Components in 24.1?

Selection Support

An especially useful addition to template components in 24.1 is Selection Support. This gives us the option to enable single or multiple-row selection, extracting the primary key value for each selected row.

Our Row Selection options are:

• None – As expected, it does not allow any row selection.
• Focus – This will visibly show a row selected by outlining the card but does not use any data from the row.
• Single-Selection – Like Focus, you will again get an outline around the selected card. Single selection will also extract the primary key data from the selected row and populate it into a specified item.
• Multiple Selection – Allows you to choose multiple rows of data, storing the primary key for each row into a specified item as a colon-delimited list.

Let us change the product cards app around a bit to implement Selection Support:

1. To enable Row Selection Support, we must make a couple of changes to our Template Component. To do this, we can go to Shared Components > Plug-ins and select our Template Component to edit. The first change is to switch on Row Selection Support. This is just a checkbox under the Standard Attributes section.

2. Next, we need to include a checkbox on each card. To do so, we can edit the template Partial and add the checkbox to the card header using the following APEX$SELECTOR placeholder in tandem with a template directive.

{if ?APEX$SELECTOR%assigned/}
<div class="t-ContentRow-selection">#APEX$SELECTOR#</div>
{endif/}

3. When I apply the changes and return to the page designer, we should now see support for Row Selection within the component attributes.

4. Instead of displaying the phone specs within the card, we could implement Row Selection support to choose several items and then compare the chosen phone specifications in a table. When I change the Row Selection Type to Multiple Selection, an additional option becomes available called Current Selection Page Item. I have created a new hidden item as the place to hold the primary key IDs from each selected card.

5. We also have another field– Select All Page Item. I have created a Checkbox item (P1_SELECT_ALL) and referenced it here, which allows us to use a single checkbox to select all the cards.

Now, we can select any number of products using the checkbox on each card or use the Select All checkbox to mark every card as selected. We still need to display the specifications somewhere, so let us show off a few more features that were added in 24.1.

Region-Only Template

APEX 23.1 included Single (Partial) or Multiple (Report) Component Template types.

24.1 introduces a third Component Template type – Region Only. This is a more simplistic style template with limited attributes. The big difference to the other templates is that Region-Only does not require a data source.

6. Next, I will create a Component Template named Specs Region and set the template type to Region Only. This generates some basic Partial code with a couple of default placeholders but also utilises the #APEX&DOM_ID# attribute. Region-only templates do not wrap the HTML, so when I add this region to my app, I can give it a static ID and use #APEX&DOM_ID# to reference it in any further styling or functionality applied to the template.

Currently, my new region is empty. You would usually use this template type to display some static content that does not rely on a data source, but I am going to use it to show off one of the more useful improvements – Slots.

Slots

What was once known as Display Points, and then Positions, is now renamed as Slots, and we can now create our own Slots within a Template Component. This allows us to add and position components into your template and define exactly what each slot can or cannot hold. Immensely powerful, and you can get creative with this!

7. Within my Region Only template component, I can create some Slots. You can see that Component Type Support allows you to define exactly what you can or cannot add. Here I have created one slot to only hold buttons, and one to only hold items of Checkbox type.

8. What is cool about slots is that I can create another slot to only hold Regions, and I can specify the Supported Region as a different Template Component, giving us the option to nest Template Components within other Template Components.

9. I have created a third Template Component named Specs Details. I have set the template type to Multiple (Report) and built the Partial code to display the specs data. This will be used to display the product specifications in a table format.

10. Now when I go back to my Region Only Template Component, I can add a new slot and define it to only accept a region type of my third Specs Details template.

11. With my Slots created, I can amend the template Partial HTML, making sure to reference the Slot Static ID’s.

12. Once that is saved, I can go to the application page designer and add the Specs Region component to my app. The Slots have been created, and I am restricted to what I can add to each slot based on the Slots component type support. It will not let me, for example, add a Date Picker to the “Select All Checkbox” Slot. I have moved the “Select All” checkbox into the checkbox slot, created a new “Compare Specs” button, added it to the buttons slot, and then added my Specs Details Template Component into the remaining slot.

13. Lastly, I need to create a dynamic action to show and refresh the Specs Details Template Component based on the selected cards, and there we have it:

1. A Template Component with selectable cards.
2. A simple reusable Region-Only Template Component.
3. Within this template, we have created our own Slots and defined exactly what each slot can hold. One of these slots contains a third Template Component nested within.

Summary

These improvements to Template Components are a welcome addition in 24.1, creating a more versatile and robust feature. They provide developers with extra levels of flexibility and customisation without introducing any additional complexities. There are still a few areas for further advancement and fine-tuning, but overall, Template Components are now an established feature of APEX, and I look forward to seeing how it can continue to improve.

For more information, check out our Oracle APEX Services, and if you liked this blog, check out our other APEX blogs here.

Subscribe to Oracle APEX Insights if you want to stay tuned for more APEX updates.