How to create Plugin in 2 min - Oracle Apex 24.1 Template Compnent




Creating an Oracle APEX Plugin: Indicator Visualizer

In this section of our blog post, we'll explore how to create a custom Oracle APEX plugin named Skills. This plugin is designed as a template component and will enhance the visual representation of skills in a dynamic and responsive design.

Plugin Details:

  • Name of Plugin: Indicator Visualizer
  • Type: Template Component
  • Options: Both checkboxes enabled for enhanced configuration

Plugin Components and Code:

HTML/XML Structure for the Plugin
The plugin utilizes conditional rendering and dynamic CSS for a responsive and visually appealing display of skills and percentages. Here's a breakdown of the HTML/XML structure used:
HTML/XML
{if APEX$IS_LAZY_LOADING/}
<p>loading...</p>
{else/}
<div class="mb-1 flex justify-between">
  <span class="text-base font-medium">#INDICATOR_NAME#</span>
  <span class="text-sm font-medium">#VALUE#%</span>
</div>
<div class="h-2.5 w-full rounded-full bg-gray-200">
	<div class="h-2.5 rounded-full bg-blue-600" style="width: #VALUE#%; background: {if COLOR_INDEX_NR%assigned/}var(--u-color-#COLOR_INDEX_NR#);{else/}var(--ucolor-1);{endif/}">
  </div>
</div>
{endif/}

Report Body:

The report body structure allows the plugin to aggregate and display rows of data efficiently.
HTML/XML
<div class="progress-list">#APEX$ROWS#</div>

Report Row:

Each row of the report is individually styled and contains a part of the dynamic content, showcasing partial data rendering for better performance.
HTML/XML
<div #APEX$ROW_IDENTIFICATION# style="margin-top: 1lh;">#APEX$PARTIAL#</div>

Column Configuration:

The plugin automatically adjusts to accommodate three columns, ensuring a responsive layout across different devices and screen sizes.
This initial setup provides a solid foundation for our Skills plugin, allowing for dynamic data representation and interactive user experiences in Oracle APEX applications.

Completing the Oracle APEX Plugin: Skills

After setting up the HTML/XML structure for our Skills plugin, it's time to integrate CSS for styling and then test the plugin in Oracle APEX by creating a new page.

Adding CSS to the Plugin

To enhance the appearance of the plugin, create a new CSS file and reference it within the plugin. This CSS will style the elements defined in the HTML structure.
CSS/SCSS
.progress-list:first-child {
margin-top: 0px;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.flex {
display: flex;
}
.h-2 {
height: 0.5rem;
}
.h-2\.5 {
height: 0.625rem;
}
.w-full {
width: 100%;
}
.justify-between {
justify-content: space-between;
}
.rounded-full {
border-radius: 9999px;
}
.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.font-medium {
font-weight: 500;
}
.text-blue-700 {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
}


Implementing and Testing the Plugin in Oracle APEX

After integrating the CSS, it's time to implement the plugin within Oracle APEX to ensure everything functions as expected.

Creating a New Page and Region

  • Open the Oracle APEX Page Designer: Start by navigating to the Oracle APEX environment on your browser.
  • Create a New Page: In the APEX page designer, initiate the creation of a new page.
  • Add a New Region:
  • On the new page, add a region and select the "Skills" plugin from the list of available plugins.
  • This sets up the space where your plugin will actively function and display data.

Configuring SQL Queries for Dynamic Data

The dynamic nature of this plugin requires setting up SQL queries that generate random skill percentages and color indices. These queries simulate a dynamic data source, making the plugin interactive and responsive to varying data inputs.
Here are the titles and placeholders where you should insert your specific SQL code for each professional role:

Implementing and Testing the Plugin in Oracle APEX

Once the CSS is integrated, proceed to implement the plugin in Oracle APEX:
  • Create a New Page and Region: In the Oracle APEX page designer, create a new page, then add a new region and select the Skills plugin.
  • SQL Query for Dynamic Data: Use the following SQL query to generate random skill percentages and color indices. This query simulates a dynamic data source for the plugin:
  • Web Programming Languages:
SQL
WITH web_programming_languages AS (
    SELECT 'JavaScript' AS language_name FROM DUAL
    UNION ALL
    SELECT 'SQL' FROM DUAL
    UNION ALL
    SELECT 'PL/SQL' FROM DUAL
    UNION ALL
    SELECT 'Python' FROM DUAL
    UNION ALL
    SELECT 'Java' FROM DUAL
)
SELECT language_name as INDICATOR_NAME
    , FLOOR(DBMS_RANDOM.VALUE(0, 100)) as VALUE
    , FLOOR(DBMS_RANDOM.VALUE(1, 45)) as COLOR_INDEX_NR
FROM web_programming_languages;


  • Employee Performance:
SQL
WITH employee_performance AS (
    SELECT 'Work Quality' AS performance_indicator FROM DUAL
    UNION ALL
    SELECT 'Teamwork' FROM DUAL
    UNION ALL
    SELECT 'Customer Satisfaction' FROM DUAL
    UNION ALL
    SELECT 'Innovation Contribution' FROM DUAL
    UNION ALL
    SELECT 'Reliability' FROM DUAL
)
SELECT performance_indicator AS INDICATOR_NAME
    , FLOOR(DBMS_RANDOM.VALUE(0, 100)) AS VALUE
    , FLOOR(DBMS_RANDOM.VALUE(1, 45)) AS COLOR_INDEX_NR
FROM employee_performance;


  • Sales Performance:
SQL
WITH sales_performance AS (
    SELECT 'Revenue' AS performance_indicator FROM DUAL
    UNION ALL
    SELECT 'Customer Acquisition' FROM DUAL
    UNION ALL
    SELECT 'Product Return Rate' FROM DUAL
    UNION ALL
    SELECT 'Market Penetration' FROM DUAL
    UNION ALL
    SELECT 'Customer Satisfaction' FROM DUAL
)
SELECT performance_indicator AS INDICATOR_NAME
    , FLOOR(DBMS_RANDOM.VALUE(0, 100)) AS VALUE
    , FLOOR(DBMS_RANDOM.VALUE(1, 45)) AS COLOR_INDEX_NR
FROM sales_performance;


  • Customer Satisfaction Metrics:
SQL
WITH customer_satisfaction_metrics AS (
    SELECT 'Overall Satisfaction' AS metric FROM DUAL
    UNION ALL
    SELECT 'Support Response Time' FROM DUAL
    UNION ALL
    SELECT 'Product Quality Satisfaction' FROM DUAL
    UNION ALL
    SELECT 'Ease of Use' FROM DUAL
    UNION ALL
    SELECT 'Customer Loyalty' FROM DUAL
)
SELECT metric AS INDICATOR_NAME
    , FLOOR(DBMS_RANDOM.VALUE(0, 100)) AS VALUE
    , FLOOR(DBMS_RANDOM.VALUE(1, 45)) AS COLOR_INDEX_NR
FROM customer_satisfaction_metrics;

  • Define Attributes: In the region attributes, map each row to the appropriate field in the SQL result set.
  • View and Refresh: Save the page and view it. With each refresh, you will see different values and colors, demonstrating the dynamic nature of the plugin.

Conclusion

This guide illustrates how simple it is to create a fully functional Oracle APEX plugin with minimal effort. By leveraging SQL for dynamic data and CSS for styling, we can significantly enhance user interaction and data visualization within Oracle APEX applications.
For more details on supported color codes and further customization, visit: Oracle APEX Color and Status Modifiers.

{fullWidth}

0 $type={blogger}:

Kommentar veröffentlichen