Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Oracle Apex dynamically change success message color based on page item

I’m using oracle apex version 22.2 and I’m trying to conditionally change the color of my pl/sql’s success message based on a page item value. Basically if my process returns a ‘1’ into my page item then I want the message to be green, if ‘0’ then I need the message to be yellow. I tried accomplishing this with a DA set to occur after the page refresh. The javascript code shows as below.

var successMsg = document.querySelector('.t-Alert--success');
var colorValue = $v('P101_CHGCOLOR');
if (colorValue == '1') {
   successMsg.style.backgroundColor = '#4CAF50'; //set success color
   successMsg.style.color = '#FFFFFF';
} else if (colorValue == '0') {
   successMsg.style.backgroundColor = '#eed202'; //set warning color
   successMsg.style.color = '#000000';
}

Already attempted the solution here cross-conditional color formatting based on user input in Oracle Apex but with no success. I’m not sure where in that solution we’re actually supposed to tell apex to change the success message color.

Tags:

2

Answers


  1. 0

    You need to use .addClass method of jQuery.
    First you need to create a class like this below code :

    .green-alert {
  background-color: #4CAF50;
  color: #FFFFFF;
}

    after that you can put this class name with using .addClass method like this below code :-

    var colorValue = $v('P101_CHGCOLOR');

if (colorValue == '1') {

   $('#P101_CHGCOLOR').addClass('green-alert');

} else if (colorValue == '0') {

   $('#P101_CHGCOLOR').addClass('warning-alert');
}
    Login or Signup to reply.
  2. 0

    That post you are referring to is pretty different. It is about a class that is added to a page item. In your case, you’re trying to modify a class on the success message.

    Since 21.1, apex uses css variables. So you could create a dynamic action on page load that sets the css variable depending on the page item value with javascript. For example:

    var r = document.querySelector(':root');
let alertColor;
alertColor = apex.item('P153_VALUES').getValue() == 1 ? 'green' : 'red'
r.style.setProperty('--ut-palette-success', alertColor);
apex.message.showPageSuccess( "Changes saved!" );

    Note that that example the success message is executed from within javascript. With the default success message that is passed from another page, it will first show the original color and then change to the color that you defined and that doesn’t look good. This example is just a very basic prototype (for example you’ll still need to write some code to prevent it from firing on page load, but it could point you in the right direction

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search