How to add screen in your favourite list (Part 2)

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 Type: URL

URL Target: #

After setting the above properties click on the "Create List Entry" button. This will create a navigation bar list in your application which will displayed in the navigation.

Step- 2:

Go back to your application builder home page and open page 0. Create a new region and set it propertise as like-

Name: Bookmarks

Type: Dynamic Content

PL/SQL Function Body returning a CLOB: Click on the code editor icon. A code editor window opened. Paste the below code here-

        DECLARE

            l_clob      CLOB;

        BEGIN

           l_clob  := '<div id="bookmark-list" onmouseleave="hideBookmark()"><ul>';

    

            FOR i IN (

                SELECT b.bookmark_id

                    , b.page_id

                    , aap.page_name

                    , LOWER(aap.page_alias) AS page_alias

                FROM bookmark b

                    , apex_application_pages aap

                WHERE 1                = 1

                AND b.page_id          = aap.page_id

                AND aap.application_id = :APP_ID

                AND b.user_id          = :USER_ID

                ORDER BY b.bookmark_id

            ) LOOP

               l_clob := l_clob||'<li><a href="http://localhost:9090/ords/r/hr/tutorial/'||i.page_alias||'?        session='||apex_application .g_instance||'">'||i.page_name||'</a></li>';

            END LOOP;

            l_clob := l_clob||'</ul></div>';

            RETURN l_clob;

        END;

Template: Blank with Attributes

Static ID: bookmark-container

Step- 3:

Select the region titled "JS 2" and navigate to properties section. Scroll down till "Header and Footer" section. Open "Header Text" code editor and add the below line of code under the success attribute.

    apex.region('bookmark-container').refresh();

Create another 2 JavaScript function here to show and hide the added favorite lists menu. Paste the below code here-

 function showBookmark() {

        var list = document.getElementById('bookmark-list');

        list.style.right = 0;

        list.style.position = 'fixed';

        list.style.top = '80px';

        list.style.borderRadius = '0px';

        list.style.backgroundColor = 'lightgray';

        list.style.zIndex = 5000 ;

    }

    function hideBookmark() {

        var list = document.getElementById('bookmark-list');

        list.style.right = "-5000px";

    }

Create another JavaScript function here to check the screen is already added into the bookmark lists or not. Paste the below code here-

    function isAddedToBookmark() {

        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) {

                    var bkmrk = document.getElementById('bookmark');

                    if (pData[0].ADDED === 'Y') {

                        bkmrk.innerHTML = '★ Remove Bookmark';

                        bkmrk.style.backgroundColor = 'red';

                        bkmrk.style.color = '#fff'

                    } else {

                        bkmrk.innerHTML = '★ Add to Bookmark';

                        bkmrk.style.backgroundColor = '#ccc';

                        bkmrk.style.color = 'black' 

                    }

                }

            }

        )

    }

Click OK.

Step- 4:

Click on "Shared Components" icon immediate before the save button. Then click on the "Navigation Bar Lists" menu under the "Navigation and Search" section. Click on "Navigation Bar" link to edit. Click on "name" column value in associate with sequence no. 8 (If you use lower version of APEX then you can find a pencil icon for editing purpose).

A new page will be appeared. Set the below properties as like-

Attributes: onclick="showBookmark()"

Click on Apply Changes.

With these enhancements, the Favourite List feature becomes more powerful and adaptable, ensuring seamless access to frequently used screens even in large applications. By combining simplicity with efficiency, this solution continues to reduce navigation time and improve overall user productivity.