Comments

13 comments

  • Official comment
    Avatar
    Varun Agasthya

    Hi Brad,

    You can use the below CSS snippet either as part of Global CSS so that it is applicable to all applications across the platform or you can use it in the inline CSS Injector if your requirement is only for one application.

    .nicescroll-rails > div {
    background-color: red !important; //Color of your choice
    }

    In addition, the scroll bar is implemented with the help of an external library called "Nice Scroll". While discussing with the product team about the CSS options, we were informed that the product team is planning to move away from the third party library file and implement native scroll. Therefore, the provided solution holds good as of today's AgilePoint Version (NX v7 SU2.5).

    Hope this helps.!


    Thanks,
    Varun Agasthya

    Comment actions Permalink
  • Avatar
    Brad Harr

    Varun,

    This partially worked.  When I open my form, the scroll bar is now the color I want.  However, my form has multiple sections.  When I switch to section 2, for example, the scroll bar goes back to the default color and remains that way, even if I go back to section 1.

    Thoughts?

    0
    Comment actions Permalink
  • Avatar
    Casey Kolowinski

    You may have to use JavaScript and in the OnSectionNavigation function, change the CSS with JS, as the secondary sections might not have elements created when the form is first loaded, and might not be affected by the same CSS as is above.

    Additionally, if you use the Console window in your Browser, you can search through the elements and discover if the secondary section scroll bars are indeed the same as the primary section scroll bar to see if you just need a little more robust CSS snippet than was provided up above

    1
    Comment actions Permalink
  • Avatar
    Brad Harr

    It doesn't look like the element names change when the section is changed.  I'm not that versed in JavaScript.  If you have a moment to provide direction, I would be grateful :)

    0
    Comment actions Permalink
  • Avatar
    Casey Kolowinski

    https://documentation.agilepoint.com/00/appbuilder/cloudformEvents.html

    Look for onSectionNavigation there, and you'll put your actions in there.

    It'll be something like this (this is untested and probably not perfect)

    $('.nicescroll-rails > div').css('background-color', 'blue');
    1
    Comment actions Permalink
  • Avatar
    Brad Harr

    I placed the following code in the Shared Javascript section, but it didn't work.    I also tried substituting eventArgs with eventArgs.previousSection, but that thru an unexpected token error.  Again, not well versed in JS.  Also, if possible, I'd like to use a hex value for the color.

    eFormEvents.onSectionNavigation = function (eventArgs) 
    {
    $('.nicescroll-rails > div').css('background-color', 'blue');
    }
    0
    Comment actions Permalink
  • Avatar
    Casey Kolowinski

    Gimme a day and I'll see if I can get it for you. The rest of my day is too busy.

    0
    Comment actions Permalink
  • Avatar
    Sampat Patil

    Hi Brad,
    Please give a try with below css 
    .oob, .nicescroll-rails > div { background-color: red !important; }

    Let me know if this works.

     

    1
    Comment actions Permalink
  • Avatar
    Brad Harr

    I get an Unexpected Token error on Line 3:

    eFormEvents.onSectionNavigation = function (eventArgs)
    {
    .oob, .nicescroll-rails > div { background-color: red !important; }
    }

    0
    Comment actions Permalink
  • Hi Brad,
    You are now mixing css and JavaScript. Try in the console to build the right selector inside $('') and with this selector modify css parameters as earlier.
    Regards
    Alexey

    1
    Comment actions Permalink
  • Avatar
    Brad Harr

    My IT guy reworked the JS to what I have shown below.  The original snippet from Casey was accurate.  The problem is that it tries to call that function before the section loads.  We put in a timer to delay the call, which seems to work.  The smallest amount of time we could set it to that would still allow it to work was 1500ms.  What my IT guy wasn't sure about is if the timer could be replaced by something else, such as a section load.  This is where I would presume "eventArgs.previousSection" comes into play, but we couldn't figure out how to use it.  Thoughts?

    eFormEvents.onSectionNavigation = function (eventArgs)
    {
    setTimeout(function(){ $('.nicescroll-rails > div').css('background-color', '#521c1a') }, 1500);
    }

    0
    Comment actions Permalink
  • Avatar
    Sampat Patil

    Hi Brad,


    This do not require script, below one line of css will help in changing color of scroll bar.

    .oob, .nicescroll-rails > div { background-color: red !important; }

     

    Let me know if this works.

     

    1
    Comment actions Permalink
  • Avatar
    Brad Harr

    Gotcha!  That was the ticket, thank you very much!

    1
    Comment actions Permalink

Please sign in to leave a comment.