Ruslan-Shevyrev/OracleAPEX_Label-Count-AJAX

Adds a label with a number next to a Navigation Menu item or Region Display Selector using AJAX.

OracleAPEX_Label-Count-AJAX

Adds a label with a number next to a Navigation Menu item or Region Display Selector using AJAX.

1. Navigation Menu:

2. Region Display Selector:

Install

1. Add
   OracleApex-Label-Count-AJAX.js
   OracleApex-Label-Count-AJAX.css
   to your application.

2. Create Application Process

For Example: SET_AJAX

❗ Point: "On Load: After Footer (page template footer)"

Code:

BEGIN
	HTP.p ('<script type="text/javascript">');
	HTP.p ('addNavigationBadgeLoader();');
	--register your AJAX Process here
	HTP.p ('</script>');
END;

How to use

1. Create Application Process (AJAX)

For Example: COUNT_TEST

❗ Point: "Ajax Callback: Run this application process when requested by a page process"

Code

DECLARE
	COUNT_TEST  NUMBER;
BEGIN

SELECT 1
	INTO COUNT_TEST
	FROM DUAL;

/*Write your query here*/
--DBMS_LOCK.SLEEP(5); --for Test only

	htp.p('[{'||
		'"COUNT_TEST": '||COUNT_TEST||
		'}]');
END;

2. Registry Application Process in SET_AJAX

BEGIN
	HTP.p ('<script type="text/javascript">');
	HTP.p (   'addNavigationBadgeLoader();');
	HTP.p (   'addNavigationBadge(''COUNT_TEST'');');
	--register your AJAX Process here
	HTP.p ('</script>');
END;

3. Add to Navigation Menu

Add your class from step 1 and js-three-quarters-loader to Image/Class

COUNT_TEST js-three-quarters-loader

4. Add to Region Display Selector

Title of your Region must look like:

<div class="COUNT_TEST js-three-quarters-loader">Test Label</div>

WARNING

Do not add the same class to Navigation Menu and Region Display Selector at the same time.

Example