This discussion is archived
1 2 Previous Next 16 Replies Latest reply: Dec 3, 2012 3:00 PM by Martin1 RSS

LOV change background colour

Martin1 Newbie
Currently Being Moderated
Hi,

i have a dynamic LOV with three values. Now i want in dependency of the displayed value change the background color of the LOV values. Can i do this in the SELECT statement of the LOV?

Regards,
Martin
  • 1. Re: LOV change background colour
    fac586 Guru
    Currently Being Moderated
    Martin1 wrote:

    i have a dynamic LOV with three values. Now i want in dependency of the displayed value change the background color of the LOV values. Can i do this in the SELECT statement of the LOV?
    Not if the LOV is rendered as a select list. If that's the case then you have to use a dynamic action/jQuery/JavaScript (or possibly CSS, depending on how "dynamic" the LOV is).
  • 2. Re: LOV change background colour
    Martin1 Newbie
    Currently Being Moderated
    Hi,

    thanks for your reply.
    Can you give me an example how i can achieve this via dynamic action/jQuery/JavaScript or CSS? The SELECT of the LOV is very simple and brings always three values out of a parameter table.

    Regards,
    Martin
  • 3. Re: LOV change background colour
    fac586 Guru
    Currently Being Moderated
    Martin1 wrote:

    Can you give me an example how i can achieve this via dynamic action/jQuery/JavaScript or CSS? The SELECT of the LOV is very simple and brings always three values out of a parameter table.
    Always the same values? Always in the same order? What colours? How are they assigned to LOV values? Where is this required: One item? Multiple items? One page? Multiple pages?
  • 4. Re: LOV change background colour
    Martin1 Newbie
    Currently Being Moderated
    Hi,

    1. Always the same values.
    2. Always in the same order.
    3. One value should be in the background red, the second yellow and the third green.
    4. It's only a simple SELECT.
    5. It's only required on one item in the application.

    Martin

    Edited by: Martin1 on Nov 29, 2012 7:58 PM
  • 5. Re: LOV change background colour
    fac586 Guru
    Currently Being Moderated
    Martin1 wrote:

    1. Always the same values.
    2. Always in the same order.
    3. One value should be in the background red, the second yellow and the third green.
    4. It's only a simple SELECT.
    5. It's only required on one item in the application.
    For only one item, add the following style sheet in the page HTML Header (or in APEX 4.2, without <tt>style</tt> tags in Inline CSS ):
    <style>
    #PX_SELECT.opt-val1,
    #PX_SELECT option[value="val1"] {
      background-color: #cc0000;
    }
    #PX_SELECT.opt-val2,
    #PX_SELECT option[value="val2"] {
      background-color: #ffcc00;
    }
    #PX_SELECT.opt-val3,
    #PX_SELECT option[value="val3"] {
      background-color: #99cc00;
    }
    </style>
    and this script in Execute When Page Loads:
    $('#PX_SELECT').change(function() {
      $(this)
        .removeClass('opt-val1 opt-val2 opt-val3')
        .addClass('opt-' + $(this).find('option:selected').val());
    }).change();
    Replacing <tt>PX_SELECT</tt> with the name of your select list item, and <tt>val1</tt>, <tt>val2</tt> and <tt>val3</tt> with the values in your LOV.
  • 6. Re: LOV change background colour
    Martin1 Newbie
    Currently Being Moderated
    Hi,

    thanks for your reply.
    I did the following test at APEX 4.0.2 but it doesn't work.
    HTML Header:
    <style>
    #P120_MODUL_TYP.opt-val1,
    #P120_MODUL_TYP option[value="Forms"] {
      background-color: #cc0000;
    }
    #P120_MODUL_TYP.opt-val2,
    #P120_MODUL_TYP option[value="Reports"] {
      background-color: #ffcc00;
    }
    </style>
    Execute when Page Loads:
    $('#P120_MODUL_TYP').change(function() {
      $(this)
        .removeClass('opt-val1 opt-val2')
        .addClass('opt-' + $(this).find('option:selected').val());
    }).change();
    What i'm doing wrong?

    Regards,
    Martin

    Edited by: Martin1 on Nov 30, 2012 10:04 AM
  • 7. Re: LOV change background colour
    fac586 Guru
    Currently Being Moderated
    Martin1 wrote:
    Hi,

    thanks for your reply.
    I did the following test at APEX 4.0.2 but it doesn't work.
    HTML Header:
    <style>
    #P120_MODUL_TYP.opt-val1,
    #P120_MODUL_TYP option[value="Forms"] {
    background-color: #cc0000;
    }
    #P120_MODUL_TYP.opt-val2,
    #P120_MODUL_TYP option[value="Reports"] {
    background-color: #ffcc00;
    }
    </style>
    Execute when Page Loads:
    $('#P120_MODUL_TYP').change(function() {
    $(this)
    .removeClass('opt-val1 opt-val2')
    .addClass('opt-' + $(this).find('option:selected').val());
    }).change();
    What i'm doing wrong?
    The class names must match the actual LOV values (i.e. values in the second column in the LOV query):

    HTML Header:
    <style>
    #P120_MODUL_TYP.opt-Forms,
    #P120_MODUL_TYP option[value="Forms"] {
      background-color: #cc0000;
    }
    #P120_MODUL_TYP.opt-Reports,
    #P120_MODUL_TYP option[value="Reports"] {
      background-color: #ffcc00;
    }
    </style>
    Execute when Page Loads:
    $('#P120_MODUL_TYP').change(function() {
      $(this)
        .removeClass('opt-Forms opt-Reports')
        .addClass('opt-' + $(this).find('option:selected').val());
    }).change();
    I used the "opt-" prefix to get valid class names if the values were numeric. You can leave it out if the LOV values are valid HTML identifiers that don't need to be escaped in the selectors.
  • 8. Re: LOV change background colour
    Martin1 Newbie
    Currently Being Moderated
    Hi,

    thanks a lot - it works fine :-)

    Additionally i had to do the value in uppercase.
    <style>
    #P120_MODUL_TYP.opt-forms,
    #P120_MODUL_TYP option[value="FORMS"] {
      background-color: #cc0000;
    }
    #P120_MODUL_TYP.opt-reports,
    #P120_MODUL_TYP option[value="REPORTS"] {
      background-color: #ffcc00;
    }
    </style>
    Regards,
    Martin
  • 9. Re: LOV change background colour
    fac586 Guru
    Currently Being Moderated
    Martin1 wrote:

    Additionally i had to do the value in uppercase.
    Yes, CSS/jQuery selectors are case sensitive. Needs to be an exact match with the LOV values.
  • 10. Re: LOV change background colour
    Martin1 Newbie
    Currently Being Moderated
    Hi,

    it works fine also at APEX 4.2 but only with 'IE and item not focussed' and not with Firefox and Safari. Do you have an idea what's to do that it works on every browser and with focus on the item?

    Regards,
    Martin
  • 11. Re: LOV change background colour
    fac586 Guru
    Currently Being Moderated
    Martin1 wrote:
    Hi,

    it works fine also at APEX 4.2 but only with 'IE and item not focussed' and not with Firefox and Safari. Do you have an idea what's to do that it works on every browser and with focus on the item?
    My example was developed using Safari 6 and also tested on Firefox 16 and IE8. I suggest you put your version on apex.oracle.com for comparison.

    Define "works...with focus on the item". I don't know what this means. In my opinion focus should be clearly indicated to the user, preferably using defaults methods they are familiar with.
  • 12. Re: LOV change background colour
    maceyah Journeyer
    Currently Being Moderated
    http://www.inside-oracle-apex.com/add-colors-or-images-to-your-select-list/

    This example shades weekend days in a select list, essentially using the same SQL that populates the list. Works on 4.0.2
    -- PL/SQL region
    -- Sat=1, Sun=7 are grey
    htp.p('<script language=JavaScript type=text/javascript>
    <!--');
    for i in (select to_char(dt, 'D') dow, rownum r  from ... order by ...) loop
      if i.dow = '1' or i.dow = '7' then
        htp.p('$x("P0_DT")['||i.r||'].style.backgroundColor = "#E3E3E3";');
      end if;
    end loop;
    htp.p('
    //-->
    </script>');
    Edited by: maceyah on Nov 30, 2012 9:21 PM
  • 13. Re: LOV change background colour
    Martin1 Newbie
    Currently Being Moderated
    I wanted yesterday and today to build a test app at apex.oracle.com but this site has a very high response time. It's nearly unpossible to work.

    'works ... without focus' - I mean that if i switch off the focus on item at that page it works, but if the item because it's the first of the page is focussed, then it doesn't work.

    With IE 8 the background color is set in the values of the select list and also after selection and page reload in the item.
    With Firefox 17 and Safari 6 the background color is set in the values of the select list and is not set after selection and page reload in the item.

    Here the actual code.
    Execute when Page Loads:
    $('#P10_STATUS_MIT_MEASURES').change(function() {
      $(this)
        .removeClass('opt-imp opt-inimp opt-notst')
        .addClass('opt-' + $(this).find('option:selected').val());
    }).change();
    CSS Inline:
    #P10_STATUS_MIT_MEASURES.opt-imp,
    #P10_STATUS_MIT_MEASURES option[value="50"] {
      background-color: #99CC00;
    }
    #P10_STATUS_MIT_MEASURES.opt-inimp,
    #P10_STATUS_MIT_MEASURES option[value="51"] {
      background-color: #FFCC00;
    }
    #P10_STATUS_MIT_MEASURES.opt-notst,
    #P10_STATUS_MIT_MEASURES option[value="52"] {
      background-color: #CC0000;
    }
    Regards,
    Martin

    Edited by: Martin1 on Dec 1, 2012 12:16 PM
  • 14. Re: LOV change background colour
    Martin1 Newbie
    Currently Being Moderated
    That works only in the values of the select list but not after selection and page reload in the item.
1 2 Previous Next

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points