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

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

xxxxxxxxxx

12

 

1

{if APEX$IS_LAZY_LOADING/}

2

<p>loading...</p>

3

{else/}

4

<div class="mb-1 flex justify-between">

5

  <span class="text-base font-medium">#INDICATOR_NAME#</span>

6

  <span class="text-sm font-medium">#VALUE#%</span>

7

</div>

8

<div class="h-2.5 w-full rounded-full bg-gray-200">

9

  <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/}">

10

  </div>

11

</div>

12

{endif/}

Report Body:

The report body structure allows the plugin to aggregate and display rows of data efficiently.

 

HTML/XML

xxxxxxxxxx

 

1

<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

xxxxxxxxxx

 

1

<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

xxxxxxxxxx

47

 

1

.progress-list:first-child {

2

margin-top: 0px;

3

}

4

.mb-1 {

5

margin-bottom: 0.25rem;

6

}

7

.flex {

8

display: flex;

9

}

10

.h-2 {

11

height: 0.5rem;

12

}

13

.h-2\.5 {

14

height: 0.625rem;

15

}

16

.w-full {

17

width: 100%;

18

}

19

.justify-between {

20

justify-content: space-between;

21

}

22

.rounded-full {

23

border-radius: 9999px;

24

}

25

.bg-blue-600 {

26

--tw-bg-opacity: 1;

27

background-color: rgb(37 99 235 / var(--tw-bg-opacity));

28

}

29

.bg-gray-200 {

30

--tw-bg-opacity: 1;

31

background-color: rgb(229 231 235 / var(--tw-bg-opacity));

32

}

33

.text-base {

34

font-size: 1rem;

35

line-height: 1.5rem;

36

}

37

.text-sm {

38

font-size: 0.875rem;

39

line-height: 1.25rem;

40

}

41

.font-medium {

42

font-weight: 500;

43

}

44

.text-blue-700 {

45

--tw-text-opacity: 1;

46

color: rgb(29 78 216 / var(--tw-text-opacity));

47

}

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

xxxxxxxxxx

15

 

1

WITH web_programming_languages AS (

2

    SELECT 'JavaScript' AS language_name FROM DUAL

3

    UNION ALL

4

    SELECT 'SQL' FROM DUAL

5

    UNION ALL

6

    SELECT 'PL/SQL' FROM DUAL

7

    UNION ALL

8

    SELECT 'Python' FROM DUAL

9

    UNION ALL

10

    SELECT 'Java' FROM DUAL

11

)

12

SELECT language_name as INDICATOR_NAME

13

    , FLOOR(DBMS_RANDOM.VALUE(0, 100)) as VALUE

14

    , FLOOR(DBMS_RANDOM.VALUE(1, 45)) as COLOR_INDEX_NR

15

FROM web_programming_languages;

• Employee Performance:

 

SQL

xxxxxxxxxx

15

 

1

WITH employee_performance AS (

2

    SELECT 'Work Quality' AS performance_indicator FROM DUAL

3

    UNION ALL

4

    SELECT 'Teamwork' FROM DUAL

5

    UNION ALL

6

    SELECT 'Customer Satisfaction' FROM DUAL

7

    UNION ALL

8

    SELECT 'Innovation Contribution' FROM DUAL

9

    UNION ALL

10

    SELECT 'Reliability' FROM DUAL

11

)

12

SELECT performance_indicator AS INDICATOR_NAME

13

    , FLOOR(DBMS_RANDOM.VALUE(0, 100)) AS VALUE

14

    , FLOOR(DBMS_RANDOM.VALUE(1, 45)) AS COLOR_INDEX_NR

15

FROM employee_performance;

• Sales Performance:

 

SQL

xxxxxxxxxx

15

 

1

WITH sales_performance AS (

2

    SELECT 'Revenue' AS performance_indicator FROM DUAL

3

    UNION ALL

4

    SELECT 'Customer Acquisition' FROM DUAL

5

    UNION ALL

6

    SELECT 'Product Return Rate' FROM DUAL

7

    UNION ALL

8

    SELECT 'Market Penetration' FROM DUAL

9

    UNION ALL

10

    SELECT 'Customer Satisfaction' FROM DUAL

11

)

12

SELECT performance_indicator AS INDICATOR_NAME

13

    , FLOOR(DBMS_RANDOM.VALUE(0, 100)) AS VALUE

14

    , FLOOR(DBMS_RANDOM.VALUE(1, 45)) AS COLOR_INDEX_NR

15

FROM sales_performance;

• Customer Satisfaction Metrics:

 

SQL

xxxxxxxxxx

15

 

1

WITH customer_satisfaction_metrics AS (

2

    SELECT 'Overall Satisfaction' AS metric FROM DUAL

3

    UNION ALL

4

    SELECT 'Support Response Time' FROM DUAL

5

    UNION ALL

6

    SELECT 'Product Quality Satisfaction' FROM DUAL

7

    UNION ALL

8

    SELECT 'Ease of Use' FROM DUAL

9

    UNION ALL

10

    SELECT 'Customer Loyalty' FROM DUAL

11

)

12

SELECT metric AS INDICATOR_NAME

13

    , FLOOR(DBMS_RANDOM.VALUE(0, 100)) AS VALUE

14

    , FLOOR(DBMS_RANDOM.VALUE(1, 45)) AS COLOR_INDEX_NR

15

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.

https://apex.oracle.com/pls/apex/r/apex_pm/ut/color-and-status-modifiers

 {fullWidth}