{"id":4987,"date":"2022-06-06T22:24:55","date_gmt":"2022-06-06T20:24:55","guid":{"rendered":"https:\/\/gpmfactory.com\/?p=4987"},"modified":"2022-06-06T22:24:55","modified_gmt":"2022-06-06T20:24:55","slug":"customer-satisfaction-score-with-oracle-apex","status":"publish","type":"post","link":"https:\/\/gpmfactory.com\/index.php\/2022\/06\/06\/customer-satisfaction-score-with-oracle-apex\/","title":{"rendered":"Customer Satisfaction Score with Oracle APEX"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"472\" height=\"514\" src=\"https:\/\/gpmfactory.com\/wp-content\/uploads\/2022\/06\/image.png\" alt=\"\" class=\"wp-image-4988\" srcset=\"https:\/\/gpmfactory.com\/wp-content\/uploads\/2022\/06\/image.png 472w, https:\/\/gpmfactory.com\/wp-content\/uploads\/2022\/06\/image-275x300.png 275w\" sizes=\"auto, (max-width: 472px) 100vw, 472px\" \/><\/figure>\n\n\n\n<p>This material should be implemented as a region Plugin but not enough time and overall, it&rsquo;s quite easy to adapt it manually.<br>Approach used is to generate button from a pl\/sql code and implement the needed JS code.<\/p>\n\n\n\n<p>Another approach using regular APEX buttons with Dynamic Actions did&rsquo;nt give acceptable result. <br>Color scheme is picked from Redwood Light look and feel. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code<\/h3>\n\n\n\n<p>Create a region PL\/SQL dynamic content<\/p>\n\n\n\n<p>Add a page Item Pnn_RATE<\/p>\n\n\n\n<p>Add the Following code intro the PL\/SQL code property and change :P6_RATE by your item page name and choose between three or five emoticons (l_nb number :=5)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DECLARE\r\n    l_css apex_t_varchar2;\r\n    tout varchar2(32000) := '';\r\n    l_emoji apex_t_varchar2;\r\n    l_size varchar2(100) := ' fa-2x fa-lg ';\r\n    l_gap varchar2(100) := '' ;     -- gap between two icons\r\n    l_js varchar2(32000);\r\n    l_rate varchar2(2);     -- rate value\r\n    l_nb    number :=5;     -- number of emoji (3 or 5)\r\n\r\n\r\nBEGIN\r\n    l_rate := :P6_RATE;\r\n    htp.p('\r\n        &lt;STYLE>\r\n            .btn {\r\n                padding: 0;\r\n                border: none;\r\n                background: none;\r\n                font-size: 10px;\r\n                cursor: pointer;\r\n            }\r\n            .btn1 {\r\n                background: radial-gradient(#d63b25 50%, transparent 50%);\r\n            }\r\n            .btn2 {\r\n                background: radial-gradient(#ac630c 50%, transparent 50%);\r\n            }\r\n            .btn3{\r\n                background: radial-gradient(#d8d0b5 50%, transparent 50%);\r\n            }\r\n            .btn4{\r\n                background: radial-gradient(#c2d4d4 50%, transparent 50%);\r\n            }\r\n            .btn5{\r\n                background: radial-gradient(#bdd9ae 50%, transparent 50%);\r\n            }\r\n            \r\n            .btnsel {\r\n                padding: 0;\r\n                border: none;\r\n                color: white;\r\n                \/\/background: none;\r\n                background-color: silver; \/\/#bac9ba;\r\n                font-size: 10px;\r\n                cursor: pointer;\r\n            }\r\n\r\n        \/* Darker background on mouse-over *\/\r\n        \r\n        .btn:hover {\r\n            background-color: silver;\r\n        }\r\n    &lt;\/STYLE>  \r\n    ');\r\n    if l_nb = 5 then\r\n        l_emoji := apex_t_varchar2('fa-emoji-frown','fa-emoji-slight-frown','fa-emoji-neutral','fa-emoji-slight-smile','fa-emoji-sweet-smile');\r\n        l_css := apex_t_varchar2('btn btn1','btn btn2','btn btn3', 'btn btn4', 'btn btn5');\r\n    elsif l_nb = 3 then\r\n        l_emoji := apex_t_varchar2('fa-emoji-slight-frown','fa-emoji-neutral','fa-emoji-slight-smile');\r\n        l_css := apex_t_varchar2('btn btn1','btn btn3','btn btn5');\r\n    end if;\r\n    \r\n    -- Displaying the icons\r\n    \r\n    tout := '&lt;div>';\r\n    if l_rate in (1,2,3,4,5) then\r\n        l_css(l_rate) := l_css(l_rate)|| ' btnsel';\r\n    end if;\r\n    for i in 1..l_nb loop\r\n        \r\n        tout := tout ||\r\n        '&lt;button type=\"button\" id = \"pb' ||i || '\" class=\"'||l_css(i) ||'\" >&lt;i class=\"fa '||l_emoji(i) || l_size ||'\" >&lt;\/i>&lt;\/button>'|| l_gap\r\n        ;\r\n    end loop;\r\n    tout := tout || '&lt;\/div>';\r\n    htp.p(tout);        -- renders html markup\r\n\r\n    -- Builds JS code\r\n\r\n    l_js := '\r\n    &lt;script type=\"text\/javascript\">\r\n        function clearcss () {\r\n            for (i=1;i&lt;=5;i++) {\r\n            document.getElementById(\"pb\" + i).classList.remove(\"btnsel\");\r\n            }\r\n        }\r\n        function setRate(pnro) {\r\n            apex.item( \"P6_RATE\" ).setValue( pnro, null, true );\r\n            clearcss();\r\n            document.getElementById(\"pb\" + pnro).classList.add(\"btnsel\");\r\n        }';\r\n    -- adding Listeners\r\n    for i in 1..l_nb loop\r\n        l_js := l_js || '\r\n        pb'||i||'.onclick = function() {\r\n            setRate(\"'||i||'\"); \r\n        }            \r\n        ';\r\n    end loop;\r\n    l_js := l_js || '&lt;\/script>';\r\n    htp.p(l_js);\r\n\r\nEND;<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This material should be implemented as a region Plugin but not enough time and overall, it&rsquo;s quite easy to adapt it manually.Approach used is&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"ppma_author":[150],"class_list":["post-4987","post","type-post","status-publish","format-standard","hentry","category-non-classe"],"authors":[{"term_id":150,"user_id":1,"is_guest":0,"slug":"admin8700","display_name":"Patrick","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/209d5ed69b74d288390621ab4c1d3773?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/posts\/4987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/comments?post=4987"}],"version-history":[{"count":2,"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/posts\/4987\/revisions"}],"predecessor-version":[{"id":4990,"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/posts\/4987\/revisions\/4990"}],"wp:attachment":[{"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/media?parent=4987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/categories?post=4987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/tags?post=4987"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/gpmfactory.com\/index.php\/wp-json\/wp\/v2\/ppma_author?post=4987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}