How do I Create APEX Style Templates

 Introduction

Creating APEX style templates allows developers to define the visual appearance of regions, buttons, items, and report components consistently across an application. Oracle APEX provides a powerful templating system that supports reusable HTML structures, CSS styling, and substitution strings to streamline UI development. By designing your own custom style templates, you can enforce branding standards, improve maintainability, and enhance the overall user experience in a way that aligns with your organization’s design language.

In Oracle APEX, Style Templates are used to define the appearance and layout of user interface components like regions, reports, buttons, and items. Creating custom APEX style templates allows developers to design a consistent look and feel across the entire application. This ensures UI consistency, branding alignment, and reusability. Templates are written using HTML markup, CSS classes, and APEX substitution strings to inject dynamic content.

To create a custom style template, navigate to:

Shared Components > Templates

Choose the type of template you want to create. Common template types include:

• Region Template

• Report Template (Classic, Cards, etc.)

• Button Template

• Item Template

• Label Template

Click Create and choose to create either from scratch or by copying an existing template.

Steps to Create a Custom Region Template:

1. Go to Shared Components > Templates

2. Click Create and choose Region Template

3. Enter a name for your template, such as Custom Region Box

4. In the Template section, define the HTML structure
   Example:

   <div class="custom-region">
     <div class="custom-region-title">#TITLE#</div>
     <div class="custom-region-body">#BODY#</div>
   </div>
   

   Here, #TITLE# and #BODY# are substitution strings provided by APEX

5. Use Template Options to create toggleable features like showing/hiding headers, icons, or borders

6. Add any necessary CSS classes under Template Class or create your own in User Interface > Themes > Theme Roller or CSS File

Creating a Custom Report Template:

1. Go to Shared Components > Templates > Report

2. Click Create, select Classic Report

3. Provide a name like Styled Table Report

4. In the Row Template, define the HTML for each row
   Example:

   <tr>
     <td>#COLUMN1#</td>
     <td>#COLUMN2#</td>
   </tr>
   

5. Add Before Rows Template and After Rows Template to wrap the table:

   <table class="styled-report">
     <thead><tr><th>Name</th><th>Status</th></tr></thead>
     <tbody>
   

   and

     </tbody>
   </table>
   

6. Set Pagination Templates and No Data Found Template as needed

Styling Your Template

You can create a CSS file and upload it under Static Application Files, or define custom classes within Theme Roller. Attach your CSS class names to the template markup accordingly.

Example CSS:

.custom-region {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 8px;
  background-color: #f9f9f9;
}
.custom-region-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
}

Using Your Template in a Page

When editing a region, report, or item, go to its Appearance section and select your custom template from the Template dropdown list. If you've added Template Options, these will appear as checkboxes or selects.

Custom APEX style templates allow for powerful control of layout and branding across applications, making it easy to maintain a polished, consistent UI.

Example

Tutorial: How to Create and Use APEX Style Templates

Oracle APEX provides a flexible way to create visually consistent applications through APEX Style Templates. These templates allow you to apply pre-built or custom styles to various components in your application, such as reports, forms, and regions, without needing to manually write CSS for each component.

This tutorial will guide you through the process of creating and using APEX Style Templates in your Oracle APEX application. By the end, you'll understand how to apply these templates to regions and components, customize them, and take advantage of pre-defined styles in APEX.

Step 1: Understanding APEX Style Templates

An APEX Style Template is a set of CSS styles and predefined visual components that you can apply to different parts of your APEX application, such as:

• Regions (e.g., report, chart, calendar)

• Forms (e.g., create, edit, update forms)

• Buttons

• Charts

• Cards

APEX offers a collection of predefined styles such as Classic, Universal, Minimal, and more, which can be easily applied to give your application a modern and consistent look.

Step 2: Create a New Application (if you don't have one already)

1. Log in to your Oracle APEX workspace.

2. From the App Builder, click on Create.

3. Choose New Application and follow the steps to create a basic application with a few pages (e.g., a form and a report).

4. After the application is created, navigate to the App Builder.

Step 3: Explore and Use Predefined APEX Style Templates

APEX comes with a collection of predefined themes and templates that you can apply to your application components. These templates are part of the Theme you select for your application.

1. Navigate to Shared Components:

• In the App Builder, go to Shared Components.

• Under User Interface, click on Themes.

2. Select a Theme:

• APEX provides a set of predefined themes. Choose a theme that suits your application (e.g., Universal, Classic, Redwood, etc.).

• Click on the theme name (e.g., Universal).

3. Assign a Theme to Your Application:

• After selecting the theme, click on Assign to Application to apply this theme to your entire application.

• You can also customize the theme further by choosing Theme Styles or Theme Stylesheets from the Theme Settings page.

Step 4: Apply Predefined Templates to Regions

Now that your application has a theme, you can apply APEX Style Templates to specific regions. Regions are the building blocks of your application’s UI, such as reports, charts, forms, and cards.

Example 1: Apply a Style Template to a Report Region

1. Create a Report Region:

• In App Builder, navigate to the page where you want to create the region (e.g., a report page).

• Click Create > Region.

• Choose Classic Report as the region type.

• Set the SQL Query for the report.

• Click Save.

2. Assign a Style Template to the Region:

• Go to the Attributes tab of the report region.

• Under Region Template, select one of the predefined templates. For example, choose Report - Classic or Report - Simple.

• Click Save.

Example 2: Apply a Style Template to a Form Region

1. Create a Form Region:

• In App Builder, go to the page where you want to create the form region (e.g., a create/edit form).

• Click Create > Form > Form on a Table.

• Select the table or view you want to create the form for and follow the steps to configure the form.

• Click Save.

2. Assign a Style Template to the Form Region:

• Under the Attributes tab of the form region, locate the Region Template dropdown.

• Choose a template that fits your form’s needs. For example, select Form - Clean or Form - Standard.

• Click Save.

Step 5: Customize APEX Style Templates

You may want to further customize the templates to match your application's branding. You can achieve this by modifying Theme Styles or adding your own custom CSS.

Example 1: Modify Theme Styles

1. Modify Theme Styles:

• Navigate to Shared Components > Themes.

• Click on Theme Styles.

• Select the Style you want to modify (e.g., Universal Theme).

• Customize the background color, font size, buttons, and other aspects of the style.

• Click Save.

Example 2: Add Custom CSS

1. Navigate to the Page’s CSS:

• In App Builder, go to the page where you want to apply custom styles.

• Under the Page Attributes section, locate the Inline CSS field.

2. Write Custom CSS: You can write your custom CSS directly in this section. For example:

.t-Button {

    background-color: #4CAF50;

    color: white;

}

.t-RegionHeader {

    font-size: 18px;

    color: #2c3e50;

}

3. Save your changes, and preview the application to see the new styles in action.

Step 6: Use APEX Style Templates with Cards

Oracle APEX also allows you to use Card Regions, which are very flexible for displaying data in a visually appealing way. You can apply a style template to these cards to ensure they are consistent with the rest of your application’s theme.

Example: Apply a Template to a Card Region

1. Create a Card Report Region:

• In App Builder, click Create > Region.

• Choose Card Report as the region type.

• Define the SQL Query for the cards, such as:

• SELECT employee_id, first_name, last_name, job_title, department_name FROM employees

2. Assign a Style Template:

• In the Region Attributes section, find the Region Template dropdown.

• Select Card - Simple or any other predefined card template.

3. Save and Run the page to see the cards with the applied template.

Step 7: Advanced Customization of APEX Style Templates (Optional)

If you need more advanced customizations, you can define your own custom templates or themes:

1. Create a Custom Theme:

• In Shared Components, under Themes, click Create to create a custom theme.

• Choose a Parent Theme to base your custom theme on (e.g., Universal).

• Modify the CSS, HTML structure, or JavaScript to fit your needs.

2. Use the Custom Theme:

• Once the custom theme is created, assign it to your application by navigating to App Builder > Shared Components > Themes, and assign the custom theme to your app.

3. Advanced Templates:

You can create advanced templates for specific regions, such as report templates, form templates, and button templates, by navigating to Shared Components > Templates and creating a custom template with HTML and CSS.

Conclusion
Style templates in Oracle APEX serve as a foundation for consistent and visually appealing application interfaces. Whether you're designing a custom report layout or defining the look of interactive components, templates give you full control over structure and styling. By learning to create and apply these templates effectively, you not only save time during development but also create a cohesive user experience that scales across pages and applications.