html image not visible in table records

html image not visible in table records

  

Hello All,

I'm trying to display images through html using expression in the table records. But only the first row shows the image and the rest of the rows shows only a cross mark. Here is the code:

"<html>
   <body>
     <img id='img' src='#'>
 <script>
        var i = '"+Var1+"';
        if(i=1)
        {
         document.getElementById('img').src = '/CloneOfMultiFileUpload_Demo/pdf.PNG';
        } 
        else 
        {
           document.getElementById('img').src = '/CloneOfMultiFileUpload_Demo/xls.PNG'
        };

    </script>

  </body>
 </html>"

 I have attached the screenshot for reference.

Thanks,

Samuel Stephen

Why make it so complex?

you can do it far more easy with the icon-library or dynamic css even?


Hello Samuel,

As J. said, you don't need to make it so complex.

You can add the image widget to your table, Select external on Type and your URL should be something like:

if(var1=1, "/CloneOfMultiFileUpload_Demo/pdf.PNG", "/CloneOfMultiFileUpload_Demo/xls.PNG")

Hello Samuel,

If the image is "broken", probably the reason is that the address your provide is wrong and the browser don't find the image, or it is right but it is not accessible. If you're using resources (the images are stored in the server), than you need to specify Deploy To Target Directory, or the file will not be accessible.

Other than that, I am not sure about what you're doing. Why not using a simple Image widget inside an IF, in the table, instead of messing around with JavaScript?

Cheers.

EFreitas wrote:

Hello Samuel,

As J. said, you don't need to make it so complex.

You can add the image widget to your table, Select external on Type and your URL should be something like:

if(var1=1, "/CloneOfMultiFileUpload_Demo/pdf.PNG", "/CloneOfMultiFileUpload_Demo/xls.PNG")


Hello EFreitas,

Thanks for the idea. I would like to display images based on different conditions. Something like switch. Or even the if else statement would be fine. But could you help me with the syntax. Your syntax above looks new to me and tedious to interpret for the if else statement.

Thanks and regards,

Samuel Stephen

J. wrote:

Why make it so complex?

you can do it far more easy with the icon-library or dynamic css even?



Hello J,

Can I get some elaboration about icon-library.

Thanks,

Samuel Stephen

Eduardo Jauch wrote:

Hello Samuel,

If the image is "broken", probably the reason is that the address your provide is wrong and the browser don't find the image, or it is right but it is not accessible. If you're using resources (the images are stored in the server), than you need to specify Deploy To Target Directory, or the file will not be accessible.

Other than that, I am not sure about what you're doing. Why not using a simple Image widget inside an IF, in the table, instead of messing around with JavaScript?

Cheers.

Hello Eduardo,

I have deployed the resources to the target directory. Unable to figure out why the image is not accessible.

Thanks and regards,

Samuel Stephen


Samuel Stephen wrote:

EFreitas wrote:

Hello Samuel,

As J. said, you don't need to make it so complex.

You can add the image widget to your table, Select external on Type and your URL should be something like:

if(var1=1, "/CloneOfMultiFileUpload_Demo/pdf.PNG", "/CloneOfMultiFileUpload_Demo/xls.PNG")


Hello EFreitas,

Thanks for the idea. I would like to display images based on different conditions. Something like switch. Or even the if else statement would be fine. But could you help me with the syntax. Your syntax above looks new to me and tedious to interpret for the if else statement.

Thanks and regards,

Samuel Stephen

Hello,

You have the conditional at first, then the true result and by the end, the false one.

if ( condition, True, False ) . 

You can write an if statement inside another one, something like:

if( condition,TRUE result, if( condition, TRUE result, FALSE result ) )


You could also use the if widget on the page, but you would needed to add as many picture widget as the options that you have. Thus, I think writing the if statement on the picture widget is easier. If you need to change anything, you'll only need to rewrite in one place.


If it are only two options, I would use the If-widget in each row with an image widget for the corresponding filetype.

As for the original html-code you mentioned in your inital questions, there are some issues. First of all, you don't need to start and end with <html><body> and </body></html>, since the page Outsystems generates is already an html-page with an body. Furthermore you're using a static id or the IMG's. An Id can be used only once on the page. If you really want to use such a solution, you should put an DIV-widget there and use its Outsystems generated ID in the javascript code.