In the first part, we explored how to quickly add screens to your Favourite List for faster navigation. Now, in Part 2 , we’ll dive deeper and extend the functionality—making it even smarter and more user-friendly. This continuation will help you maximize productivity while managing complex applications with thousands of menus. If you not explore the part one then please follow it first from here (Part 1) . You can follow below tutorials for better understanding. Part 2 and Part 1 from here . Let's walk through the implementation process of part 2 step by step- Step-1 : Open your application and navigate to shared components. Under "Navigation and Search" section, click on "Navigation Bar List". A new page open. Click on the "Navigation Bar" link column titled "Name". Click on "Create Entry" button. A new page open. Set the below properties as like below- Sequence: 8 Image/Class: fa-bookmark List Entry Label: Target ...
Tired of scrolling through menus to find the screen you use every day? There’s a smarter way! By adding screens to your favorite list, you can open them instantly without wasting time.
Managing frequently used screens becomes easier when you add them to your favorite list. This feature helps you reduce navigation time and improve efficiency by keeping your most important screens just one click away. In this article, we’ll explain the step-by-step process to add any screen to your favorites.
If you need any visual assistance then please have a look from here.
Step- 1:
Open page 0 and add a static content region, Rename it to “Bookmark”. Set it template properties is "Blank with attributes". Go to HTML code under Source section and open it. Paste the below code in the editor-
<div id="bookmark" onclick="add2Bookmark()">
★ Add to Bookmark
</div>
Step- 2:
Add another static content region and rename it to "CSS 1". Set it template properties is "Blank with attributes". Scroll down to "Header and Footer" section and open "Header Text" code editor. Paste the below css code here-
<style>
#bookmark-container {
position: relative;
top: 80px;
}
#bookmark {
position: fixed;
top: 50%;
padding: 15px 20px;
font-size: 15px;
text-align: center;
background-color: #ccc;
font-family: serif;
right: -145px;
transform: translateY(-50%);
box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
transition: right .6s ease-in-out;
border-radius: 30px 0 0 30px;
}
#bookmark:hover {
right: 0;
cursor: pointer;
}
#bookmark-list {
right: -5000px;
position: fixed;
padding: 5px;
font-size: 15px;
font-family: serif;
transform: translateY(-50%);
transition: right .6s ease-in-out;
width: 250px;
}
#bookmark-list ul {
list-style-type: none;
margin: 0;
padding:0;
}
#bookmark-list ul li {
padding: 4px;
}
#bookmark-list ul li:hover {
font-size: 18px;
}
</style>
Step- 3:
Create a database table to store the favorite screen list as per user. Open sql code editor where you feel comfort (Toad/Sql Developer/SQL commands) and paste the below code-
CREATE TABLE "BOOKMARK"
( "BOOKMARK_ID" NUMBER,
"PAGE_ID" NUMBER,
"USER_ID" NUMBER,
"CREATION_DATE" DATE DEFAULT sysdate
) ;
In my case, I have set the limit of favorite list to 10. That's why I have add a flag column in my app_user table. You can also follow this step by altering your users table. Copy and paste the below code (replace your user table name instead of 'app_user')-
ALTER TABLE app_user ADD bookmark_max_limit NUMBER DEFAULT 10;
Step- 4:
Create a database function to check the added favorite list. If maximum limit reached then you can't add anymore screen in your favorite list. Need to remove screen first from the list and then you can add new one. Copy and paste the below code in your sql editor and then compile it-
CREATE OR REPLACE FUNCTION bkmrk_max_limit(
p_userid NUMBER
) RETURN NUMBER
IS
l_count NUMBER;
l_limit NUMBER;
BEGIN
SELECT COUNT(*)
INTO l_count
FROM bookmark
WHERE user_id = p_userid ;
SELECT bookmark_max_limit
INTO l_limit
FROM app_user
WHERE user_id = p_userid ;
RETURN l_limit - l_count ;
END;
/
Step- 5:
Create an application item. Open share component and click on "Application Items" menu under "Application Logic" section. Click on Create button and set "Name" and "Scope" properties. In my case name is "USER_ID" and scope is "Application".
Step- 6:
Create an application process in the same saction. Click on "Application Process" menu. A popup modal dialog opened. Enter process name and set point. I use "SET USER ID" as name and "After Authentication" as point.
Click Next. Another popup window appeared. Enter below PL/SQL code here-
SELECT user_id
INTO :USER_ID
FROM app_user
WHERE UPPER(user_name) = UPPER(:P9999_USERNAME)
AND pass_word = apex_util.get_hash(apex_t_varchar2(:P9999_USERNAME, :P9999_PASSWORD), NULL);
If you use no password encrytion method the pass only the password field otherwise use your own encryption method. I use apex_util.get_hash(apex_t_varchar2() method to encrypt my password. Click Next and then click "Create Process".
Step- 7:
Create another application process in the same way. Named it to "SET_BOOKMARK" and point is "Ajax Callback: Run this application process when requested by a page process". Click Next. A popup window opened. Enter below PL/SQL code here-
DECLARE
l_bookmark_id NUMBER;
l_msg VARCHAR2(300);
l_count NUMBER ;
BEGIN
SELECT NVL(MAX(bookmark_id),0)+1
INTO l_bookmark_id
FROM bookmark;
IF bkmrk_max_limit(
p_userid => apex_application.g_x02
) > 0 THEN
-- CHECK FIRST IF THE PAGE IS ALREADY ADDED OR NOT
SELECT COUNT(*)
INTO l_count
FROM bookmark
WHERE page_id = apex_application.g_x01
AND user_id = apex_application.g_x02;
IF l_count > 0 THEN
--l_msg := 'Already added to bookmark.';
DELETE FROM bookmark
WHERE page_id = apex_application.g_x01
AND user_id = apex_application.g_x02 ;
l_msg := 'Successfully remove from bookmark.';
ELSE
INSERT INTO bookmark(bookmark_id, page_id, user_id)
VALUES(l_bookmark_id, apex_application.g_x01, apex_application.g_x02);
l_msg := 'Successfully added to bookmark' ;
END IF;
ELSE
l_msg := 'You have reached your max limit. Please remove one first.';
END IF;
apex_json.open_array;
apex_json.open_object;
apex_json.write('MSG', l_msg);
apex_json.close_object;
apex_json.close_all;
END;
Go to page 0 and create a new region for declaring javaScript function so that we can call it from all page. Named it to "JS 2". Set it's template as "Blank with Attributes" and scroll down to "Header and Footer" section. Open "Header Text" code editor and paste the below code here-
<script>
function add2Bookmark() {
apex.server.process(
'SET_BOOKMARK'
, {
x01: $v('pFlowStepId'),
x02: apex.item('P0_USER_ID').getValue()
}
, {
dataType: 'json',
success: function(pData) {
apex.message.showPageSuccess(pData[0].MSG);
}
}
);
}
</script>
Step- 9:
Create a page item named "P0_USER_ID". Set it's type to "Hidden" and value protected to "No" (toggle off) in setting section. Then go to the shared component and open the application process menu under the application logic section. Edit the "SET USER ID" process's PL/SQL code. Add the below line at the last of the existing code-
:P0_USER_ID := :USER_ID ;
Step- 10:
Create a database function which will check that the screen is already added to favorite list or not. Open SQL editor and paste the below code here. Compile the code.
CREATE OR REPLACE FUNCTION chk_bkmrk_added(
p_user_id IN NUMBER
, p_page_id IN NUMBER
) RETURN VARCHAR2
IS
l_count NUMBER;
l_return VARCHAR2(1);
BEGIN
SELECT COUNT(*)
INTO l_count
FROM bookmark
WHERE user_id = p_user_id
AND page_id = p_page_id ;
IF l_count > 0 THEN
l_return := 'Y' ;
ELSE
l_return := 'N' ;
END IF;
RETURN l_return ;
END ;
/
Step- 11:
Create another application process in shared components section under the application logic sub section. The process is as same as step 6 and 7. Click on "Application Process" and then click on "CREATE" button. Enter process name and point. In my case, i use "CHECK_BOOKMARK_ADDED" as name and use point as "On Load: Before Header (Page Template Header)". In the source tab, paste the below code in the code field-
DECLARE
l_chk VARCHAR2(1);
BEGIN
l_chk := chk_bkmrk_added(
p_user_id => apex_application.g_x01
, p_page_id => apex_application.g_x02
) ;
apex_json.open_array;
apex_json.open_object;
apex_json.write('ADDED', l_chk);
apex_json.close_object;
apex_json.close_all;
END;
/
Step-12:
Create a dynamic action in page 0. Click on dynamic action tab under the left side navigation pane. Select "Page Load" under the drop down tree menu. Right click here and select "Create Dynamic Action". A dynamic action will be created with titled "New". Rename it as per your choice. I renamed it "Check Bookmark".
Select the autometically created true action and change its properties like below-
Select the autometically created true action and change its properties like below-
Action: Execute JavaScript Code
Code:
var userId = apex.item('P0_USER_ID').getValue();
var pageId = $v('pFlowStepId');
apex.server.process(
'CHECK_BOOKMARK_ADDED' ,
{
x01: userId,
x02: pageId
} ,
{
dataType: 'json',
success: function(pData) {
if (pData[0].ADDED === 'Y') {
var bkmrk = document.getElementById('bookmark');
bkmrk.innerHTML = '★ Remove Bookmark';
bkmrk.style.backgroundColor = 'red';
bkmrk.style.color = '#fff'
}
}
}
)
Save the page and run the application.
By adding screens to your favourite list, you can significantly enhance navigation efficiency and streamline your daily tasks. This simple yet powerful feature ensures that frequently accessed screens are always just a click away, helping you maintain a smooth and productive workflow.
Comments
Post a Comment