Conditionally-PopUp-LOV-Value-Color-on-Oracle-APEX/Conditionally PopUp LOV Value Color.txt at main · cse-source/Conditionally-PopUp-LOV-Value-Color-on-Oracle-APEX · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

==> Step # 01
=> Create page item P59_QUERY_BASED
=> Type : Popup LOV
=> LOV SQL Query :

SELECT S.ATTRIBUTE_NAME||' ('||I.GENERIC_ITEM_NAME||')', S.ID
FROM ATTRIBUTE_SETUPS S,
     GENERIC_ITEMS I
WHERE S.GENERIC_ITEM_ID=I.ID

==> Step # 02
=> Create a Dynamic Actions on Page Load Event
=> True Action : Execute JavaScript Code
=> Code :

(function(){
  var dialogObservers = {};
  function colorList($container){
    if (!$container || $container.length === 0) return;
    var $items = $container.find(
      'li, .a-List-item, .a-PopupLOV-results li, .apex-item-result, .t-List-item'
    );

    if ($items.length === 0) {
      $items = $container.find('a, span, div').filter(function(){
        var t = $(this).text().trim();
        return t.length > 0 && t.length < 200;
      });
    }

    $items.each(function(){
      var $el = $(this);
      var txt = $el.text().trim();
      if (!txt) return;

      $el.removeClass('lov-red lov-green lov-blue');

      if (txt.includes("Application")) { /* Replace txt.includes Value based on Your own Value */
        $el.addClass("u-color-5");
        }
      else if (txt.includes("Desktop")) {
        $el.addClass("u-color-7");
        }
      else if (txt.includes("Laptop")) {
        $el.addClass("u-color-12");}
      else if (txt.includes("Mini Desktop")) {
        $el.addClass("u-color-13");
        }
      else if (txt.includes("Networking Device")) {
        $el.addClass("u-color-14");
        }
      else if (txt.includes("Printer")) {
        $el.addClass("u-color-18");
        }
      else if (txt.includes("Router")) {
        $el.addClass("u-color-23");
        }
      else if (txt.includes("TAB")) {
        $el.addClass("u-color-43");
      }
    });
  }

  function attachDialogObserver($dlg){
    if (!$dlg || $dlg.length === 0) return;
    var dlgId = $dlg.attr('id') || ('lovdlg_' + Math.random().toString(36).substr(2,9));
    $dlg.attr('id', dlgId);
    if (dialogObservers[dlgId]) return;
    // initial coloring
    setTimeout(function(){ colorList($dlg); }, 50);
    var obs = new MutationObserver(function(){
      colorList($dlg);
    });
    obs.observe($dlg[0], { childList: true, subtree: true, characterData: true });
    dialogObservers[dlgId] = obs;
  }

  // detect when ANY lov dialog opens
  $(document).on("apexafterlovopen", function(){
    var $dlg = $(".a-PopupLOV-dialog");
    attachDialogObserver($dlg);
  });
  // detect dynamically created LOV dialogs
  var globalObs = new MutationObserver(function(muts){
    muts.forEach(function(m){
      $(m.addedNodes).each(function(){
        var $node = $(this);
        if ($node.hasClass("a-PopupLOV-dialog")){
          attachDialogObserver($node);
        }
      });
    });
  });

  globalObs.observe(document.body, { childList: true, subtree: true });
  console.log("LOV Coloring for ALL LOVs activated");
})();