4 Replies Latest reply on Jul 17, 2019 8:58 PM by Erick Diaz

    Sticky Header on a List View Divider Column

    Erick Diaz

      Hi,

       

      I’m using APEX 19.1.

       

      I have a List View with a Divider Column similar to this example on the Universal Theme Sample Application (https://apex.oracle.com/pls/apex/f?p=42:425:::NO), Example 2 under List View Examples.

       

      I’m trying to accomplish a sticky header for each list divider group header as shown on this Oracle JET Sample (iPhone Contacts App also has the same behavior):

       

      https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=listView&demo=stickyGroupHeaderListView

       

      I tried using the widget.stickyTableHeader.js and widget.stickyWidget.js libraries but I can’t get it to work.

       

      Any help will be appreciated.

       

      Thank you,

       

      Erick

        • 1. Re: Sticky Header on a List View Divider Column
          Erick Diaz

          I'm just bumping this up in case anyone has an idea.

           

          Thank you,

           

          Erick

          • 2. Re: Sticky Header on a List View Divider Column
            Erick Diaz

            Ok, I was able to resolve this, and it wasn’t as complicated as I initially thought.

             

            In case anyone is interested, I added the following at the Page Property level:

             

            Execute when Page Loads (JavaScript):

             

            /* apply the sticky widget on the list dividers */
            $('li[data-role="list-divider"]').stickyWidget({toggleWidth:true});
            

             

            Inline CSS:

             

            /* replace the default rgba(0,0,0,.025) to remove the opacity */
            .a-ListView-divider {
              background-color: #f9f9f9;
            }
            

             

            Thank you,

             

            Erick

            • 3. Re: Sticky Header on a List View Divider Column
              John Snyders-Oracle

              Hi Erick

              I like your solution. It is great if the whole list is loaded at once but if you load more data the newly added dividers don't stick. Here is a variation to handle that situation.

               

              On the list view region add a dynamic action on event after refresh and add an Execute JavaScript Code action with:

               

                // turn all the list dividers into sticky widgets unless they already are

                $(".stickyDividers .a-ListView-divider").not(".js-stickyWidget-toggle").stickyWidget({toggleWidth:true}); 

               

              Set the action Fire on Initialization = Yes

               

              This also handles the case where the region is refreshed.

               

              Notice I used a different selector. I use stickyDividers and add that CSS class to the specific list region so that in the case where there were multiple list views on a page it would only apply to the ones I want it to. It also lends itself to a solution where you add the code to global app .js and .css files and can apply it to any list view region simply by adding the stickyDividers class to the region.  I used the .a-ListView-divider class because at least historically class selectors are faster than attribute selectors.

               

              Here is an example of what could go in a global .js file. The global app css file should have the inline CSS rule you gave above.

               

              $(function() {

                  var SEL_STICKY_LISTVIEW = ".stickyDividers .a-ListView";

               

                  function makeStick( event ) {

                      var listView$ = event ? $(event.target) : $(SEL_STICKY_LISTVIEW);

                      // turn all the list dividers into sticky widgets unless they already are

                      listView$.find(".a-ListView-divider").not(".js-stickyWidget-toggle").stickyWidget({toggleWidth:true});

                  }

               

                  $(SEL_STICKY_LISTVIEW).on("apexafterrefresh", makeStick);

                  makeStick();

              });

               

              Regards,
              -John

              • 4. Re: Sticky Header on a List View Divider Column
                Erick Diaz

                Hi John,

                 

                Thank you very much, I really like your approach!

                 

                Right now, list views do not have pagination so I expect all the rows to be loaded at once, but I understand this may change in the future and your solution covers that.

                 

                Best regards,

                 

                Erick