2. PHPRunner General questions
  3. [SOLVED]  Conditionally change font colour on add/edit page control
This topic is locked
[SOLVED]

 Conditionally change font colour on add/edit page control

 		9/15/2019 9:17:56 PM
PHPRunner General questions
woodey2002 author

Hi Guys,
I am trying to conditionally change the font colour on a control on a add/edit page.
The conditional part of my code works great but I can't seem to get the font to change colour based on the condition.
I was hoping to use the Javascript API to achieve this as described here https://xlinesoft.com/phprunner/docs/how_to_change_font_in_edit_con.htm


var ctrl = Runner.getControl(pageid, 'Make');

ctrl.addStyle('font-size: 12px; color: red;');


However nothing I try seem to works with changing the font colour on the fly.
I can change the text colour on the list page "view as custom", but I need to do it on add/edit page
Can I use .addStyle Javascript for this purpose? If not any ideas/suggestions would be very much appreciated.


var ctrlAge1 = Runner.getControl(pageid, 'rag_One_Days');

var ctrlRag1 = Runner.getControl(pageid, 'rag_One_Complex_Home_Package_Needed');

var ctrlRag11 = Runner.getControl(pageid, 'rag_One_Referral_To_Community');

var ctrlRag1warn = Runner.getControl(pageid, 'rag_One_Warning');
ctrlAge1.on('change', function(e) {
if (ctrlAge1.getValue() <8 && ctrlAge1.getValue() >0){

ctrlRag1warn.setValue("Green <8");

ctrlRag1warn.addStyle('font-size: 16px; color: red;');



}

else if (ctrlAge1.getValue() >=8 && ctrlAge1.getValue() <=14){

ctrlRag1warn.setValue("Amber 8 to 14");

}

else if (ctrlAge1.getValue() >14){

ctrlRag1warn.setValue("Red >14");

}

else {

ctrlRag1warn.setValue("None");

}

}
)


Best wishes

James
Admin 9/16/2019

addStyle() should work. As a first step make sure that your code doesn't produce any Javascript errors:

https://xlinesoft.com/phprunner/docs/troubleshooting_javascript_errors.htm
woodey2002 author 9/16/2019

Thanks Sergey,
Spot on as always my friend, Javascript error found as suggested.
Here is the working code if anyone is interested.
It's cool as the field I was hoping to change colour on was read only, the Javascript API I think only changes the format on ReadWrite fields, so the code below gets around this in therefore colour changes while still keeping the field read-only. <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=88841&image=1&table=forumreplies' class='bbc_emoticon' alt=':)' />
It's also a good example of the setInterval function to change the values on the fly (not just on change keyup etc) <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=88841&image=2&table=forumreplies' class='bbc_emoticon' alt=':)' />
Thanks Sergey once again, and thanks to Phprunners amazing Javascript API.
Cheers,

James

var ctrlAge1 = Runner.getControl(pageid, 'rag_One_Days');

var ctrlRag1 = Runner.getControl(pageid, 'rag_One_Complex_Home_Package_Needed');

var ctrlRag11 = Runner.getControl(pageid, 'rag_One_Referral_To_Community');

var ctrlRag1warn = Runner.getControl(pageid, 'rag_One_Warning');
ctrlAge1.on('change', function(e) {
if (ctrlAge1.getValue() <8 && ctrlAge1.getValue() >0){

ctrlRag1warn.setValue("<8");

//ctrlRag1warn.addStyle('font-size: 16px; color: red;');

ctrlRag1warn.addStyle('background: Green;');

ctrlRag1warn.isReadonly();

}

else if (ctrlAge1.getValue() >=8 && ctrlAge1.getValue() <=14){

ctrlRag1warn.setValue("8 to 14");

ctrlRag1warn.addStyle('background: Orange;');

ctrlRag1warn.isReadonly();;

}

else if (ctrlAge1.getValue() >14){

ctrlRag1warn.setValue(">14");

ctrlRag1warn.addStyle('background: Red;');

ctrlRag1warn.isReadonly();

}

else {

ctrlRag1warn.setValue("None");

ctrlRag1warn.makeReadWrite();

ctrlRag1warn.setValue('');

}

}
)

setInterval(function () {



if (ctrlAge1.getValue() <8 && ctrlAge1.getValue() >0){

ctrlRag1warn.setValue("<8");

//ctrlRag1warn.addStyle('font-size: 16px; color: red;');

ctrlRag1warn.addStyle('background: Green;');

ctrlRag1warn.isReadonly();

}

else if (ctrlAge1.getValue() >=8 && ctrlAge1.getValue() <=14){

ctrlRag1warn.setValue("8 to 14");

ctrlRag1warn.addStyle('background: Orange;');

ctrlRag1warn.isReadonly();

}

else if (ctrlAge1.getValue() >14){

ctrlRag1warn.setValue(">14");

ctrlRag1warn.addStyle('background: Red;');

ctrlRag1warn.isReadonly();

}

else {

ctrlRag1warn.setValue("None");

//ctrlRag1warn.makeReadWrite();

ctrlRag1warn.setValue('');

ctrlRag1warn.addStyle('background: White;');

}

}

)