Dynamic HTML Image Changing

milind.wakale · May 7, 2020, 7:51pm

Hello,

I have a grid application that shows messages from application, messages are of type plain, info, warning, alert, error. There is a column which hold this type of message. I took a HTML Image field and on record of the application assigning image to the field, but it is not working.


if({MessageType} == "PLAIN"){
	{Logo} = "sys__NM__icn_plain.png";
}
elseif({MessageType} == "INFORM"){
	{Logo} = "sys__NM__icn_alert_info.png";
}
elseif({MessageType} == "WARNING"){
	{Logo} = "sys__NM__icn_alert_warning.png";
}
elseif({MessageType} == "QUESTION"){
	{Logo} = "sys__NM__icn_question.png";
}
elseif({MessageType} == "ERROR"){
	{Logo} = "sys__NM__icn_error.png";
}

–
Milind

giovannino · May 7, 2020, 8:44pm

Hi,
at the end did you solve that problem ?
I’ve to build a traffic light indicator and I have to manage the three status green , yellow red using different .png images…
If you have any hints please… tell me them !!!
Bye

milind.wakale · May 7, 2020, 8:44pm

[QUOTE=giovannino;32089]Hi,
at the end did you solve that problem ?
I’ve to build a traffic light indicator and I have to manage the three status green , yellow red using different .png images…
If you have any hints please… tell me them !!!
Bye[/QUOTE]

Hi Giovannino!

Go to Applications --> Settings in your application and find the field named as Image Directory. Note down the path. Upload images in that directory from SC.

Check value in the field print with following code. If not try to find similar variable from PHP session.


$image_directory = $_SESSION['scriptcase'][<app_name>]['glo_nm_path_img'];

Now go to your code and update code like below.


if({MessageType} == "PLAIN"){
    {Logo} = $image_directory . "/" . "sys__NM__icn_plain.png";
}
elseif({MessageType} == "INFORM"){
    {Logo} = $image_directory . "/" . "sys__NM__icn_alert_info.png";
}
elseif({MessageType} == "WARNING"){
    {Logo} = $image_directory . "/" . "sys__NM__icn_alert_warning.png";
}
elseif({MessageType} == "QUESTION"){
    {Logo} = $image_directory . "/" . "sys__NM__icn_question.png";
}
elseif({MessageType} == "ERROR"){
    {Logo} = $image_directory . "/" . "sys__NM__icn_error.png";
}

I hope this will work. Please update me if you still have problem.

–
Milind Wakale

giovannino · May 7, 2020, 8:44pm

Great Milind !!! I will try for sure !!! Thanks

giovannino · May 7, 2020, 8:45pm

Hi Milind,
I’m doing a test about the topic.
I have a form named ‘DinamicoDB_import’ with two fields:
test --> text field
semaforo --> Html image

I inserted the following code under OnChange Event just to test different images on changing values of test field.
Under Data in session I’ve found a global variable called ‘glo_nm_path_imagens’ that has this value : /scriptcase/file/img
The same value is under Settings / System folders / Images Folder —> /scriptcase/file/img
Under Application / Image Directory I’ve the same value —> /scriptcase/file/img

At the moment running the application nothing happens… ;-(
Am I wronging syntax ?? Thanks

$image_directory = $_SESSION[‘scriptcase’][‘DinamicoDB_import’][‘glo_nm_path_img’];

if({test} == “”){
{semaforo} = $image_directory . “/” .“scriptcase__NM__ico__NM__led_white_24.png”;
}
elseif({test} == “1”){
{semaforo} = $image_directory . “/” .“scriptcase__NM__ico__NM__led_green_24.png”;
}
elseif({test} == “2”){
{semaforo} = $image_directory . “/” .“scriptcase__NM__ico__NM__led_yellow_24.png”;
}
elseif({test} == “3”){
{semaforo} = $image_directory . “/” .“scriptcase__NM__ico__NM__led_red_24.png”;
}

milind.wakale · May 7, 2020, 8:45pm

Hi Giovannino,

Some modifications you need here:

Change “semaforo” to a label field.
On Load Record event:

 
if({test} == ""){
{semaforo} = "<img src='" . $image_directory . "/" ."scriptcase__NM__ico__NM__led_white_24.png" . "' class='whatever' style='whatever' />";
}
elseif({test} == "1"){
{semaforo} = "<img src='" . $image_directory . "/" ."scriptcase__NM__ico__NM__led_green_24.png" . "' class='whatever' style='whatever' />";
}
elseif({test} == "2"){
{semaforo} = "<img src='" . $image_directory . "/" ."scriptcase__NM__ico__NM__led_yellow_24.png" . "' class='whatever' style='whatever' />";
}
elseif({test} == "3"){
{semaforo} = "<img src='" . $image_directory . "/" ."scriptcase__NM__ico__NM__led_red_24.png" . "' class='whatever' style='whatever' />";
}

giovannino · May 7, 2020, 9:11pm

Ok . I did modification adding

$image_directory = $_SESSION[‘scriptcase’][‘DinamicoDB_import’][‘glo_nm_path_imagens’];

echo of $image_directory is “/scriptcase/file/img”

If I do the find of ‘scriptcase__NM__ico__NM__led_white_24.png’ on my C:\ the result is under here

C:\Program Files (x86)\Scriptcase\v8_new\wwwroot\scriptcase\app\B2B_B2C_lib\img

A bit better … but still not image

$image_directory = $_SESSION[‘scriptcase’][‘DinamicoDB_import’][‘glo_nm_path_imagens’];
echo $image_directory ;

if({test} == “”){
{semaforo} = “<img src=’” . $image_directory . “/” .“scriptcase__NM__ico__NM__led_white_24.png”."/>";
}
elseif({test} == “1”){
{semaforo} = “<img src=’” . $image_directory . “/” .“scriptcase__NM__ico__NM__led_green_24.png”."/>";
}
elseif({test} == “2”){
{semaforo} = “<img src=’” . $image_directory . “/” .“scriptcase__NM__ico__NM__led_yellow_24.png”."/>";
}
elseif({test} == “3”){
{semaforo} = “<img src=’” . $image_directory . “/” .“scriptcase__NM__ico__NM__led_red_24.png”."/>";
}

milind.wakale · May 7, 2020, 8:45pm

Hi,

Have you uploaded that image in the directory? Your browser would be able to access the file in the directory using http://xx.xx.xx.xx/scriptcase/B2B _B2C/_lib/img/scriptcase__NM__ico__NM__led_red_24.png path.

If you have images uploaded there and still not accessing them, use ‘…’ to go one directory up. You can also use <img src="…/_lib/img/name-of-image.png" /> to access that image.

giovannino · May 7, 2020, 8:45pm

I did in this way and now it shows the icon…
I’ve to find a better way for define $image_directory… ;-(
Thanks again !!!

$image_directory ="/scriptcase/app/B2B_B2C/_lib/img";

if({test} == “”){
{semaforo} = “<img src=” . $image_directory . “/grp__NM__ico__NM__led_white_24.png” . " >";
}
elseif({test} == “1”){
{semaforo} = “<img src=” . $image_directory . “/grp__NM__ico__NM__led_green_24.png” . " >";
}
elseif({test} == “2”){
{semaforo} = “<img src=” . $image_directory . “/grp__NM__ico__NM__led_yellow_24.png” . " >";
}
elseif({test} == “3”){
{semaforo} = “<img src=” . $image_directory . “/grp__NM__ico__NM__led_red_24.png”. " >";
}

diogo · May 7, 2020, 8:45pm

Use relative path, or you’ll have problem when you deploy your application because of the path.

if({test} == “”){
{semaforo} = “<img src=’…/_lib/img/grp__NM__ico__NM__led_white_24.png’ >”;
}
elseif({test} == “1”){
{semaforo} = “<img src=’…/_lib/img/grp__NM__ico__NM__led_green_24.png’ >”;
}
elseif({test} == “2”){
{semaforo} = “<img src=’…/_lib/img/grp__NM__ico__NM__led_yellow_24.png’ >”;
}
elseif({test} == “3”){
{semaforo} = “<img src=’…/_lib/img/grp__NM__ico__NM__led_red_24.png’ >”;
}

pyq · May 11, 2021, 2:55am

Hola Chicos,
muchas gracias por este aporte. me ayudo muchísimo