Question

HTML control with javascript support


Userlevel 2
Badge

Hi,

 

The problem:

We like to show an external picture from some website in a detailpanel - for example a picture of a some parts of a some sort of a machine (a washing machine door rubber for example)

Now we are not sure if a part has a picture yet but we do know a part of the endpoint

So when we call said picture it might not exist and will result in a 404 and in a browser or html control it will result in a small red cross to explain the picture does not exist.

 

A probable solution

Say we can define some arbitrary htmlcode with some javascript in some sort of html control which we can put on a javascript eventlistener:

<img id="myimage" src="https://cdn.2ba.nl/FCRL/ETIMPictures/EC000084.png"> 
<script>
    // the above URL is not valid and results in a 404.
    var img = document.getElementById("myimage")  
    if (img.complete) {//do some neat stuff if it works} 
    else {    
        img.addEventListener("error", function() {
                img.src="https://www.acto.nl/wp-content/uploads/2017/02/Acto-logo-2014-rgb-L-transparant.png" // the backup picture
                }
        )
    }  
</script>

This will result in showing the backup picture, because the original EC000084.png will fail to load and gets caught in the error that is generated by the listener.

 

The current HTML control doesn’t seem to be willing to consume any javascript.

 

 

Other solutions are welcome!

 

 


3 replies

Userlevel 3
Badge +9

We bypassed this issue by using the Preview component instead of a HTML control. The preview component does not strip off the javascript, because you preview any website you want. We've had a similar issue, but by serving images from the database:

https://community.thinkwisesoftware.com/development-13/improving-the-previewer-experience-1041

The case above uses the web gui in combination with the image handler. If you're using the Windows GUI, I don't know if this works, because of the ‘hack’ using ImageHandler.ashx (you don't have access to in the Windows GUI offcourse). As an alternative to this you can pass the data / url as part of your preview uri, although this is limited. You could for example call http://www.website.org/preview.html?url=http://2ba.nl/image.png as your preview url (please note that there are limitations on url lengths).

Userlevel 2
Badge

@René W

We indeed use the windows gui for know. 

From what I understand from your posts is that you have a webserver that is serving the preview.html right?

That’s the part I’d rather not have, that’s another (web)service to maintain :-) (maybe it would be neat if indicium(universal) would serve said html file maybe?)

But indeed the way you’ve described that - works just fine:

https://www.dagevos.org/pub/test.html?link=https://cdn.2ba.nl/FCRL/ETIMPictures/EC000080.png -- succeeds

https://www.dagevos.org/pub/test.html?link=https://cdn.2ba.nl/FCRL/ETIMPictures/EC00008022222.png -- fails and fallback to the acto logo

<html>
    <body>
    <img id="myimage" src=""> 
    <script>
        //test.html?link=https://cdn.2ba.nl/FCRL/ETIMPictures/EC000080.png
        var url = new URL(window.location.href);
        var imagelink = url.searchParams.get("link");

        var img = document.getElementById("myimage")
        img.src=imagelink
        if (img.complete) {//do some neat stuff if it works
            } 
        else {
            img.addEventListener("error", function() {
                    img.src="https://www.acto.nl/wp-content/uploads/2017/02/Acto-logo-2014-rgb-L-transparant.png" // the backup picture
                    }
            )
        }  
    </script>
</body>
</html>

Userlevel 3
Badge +9

@René W

We indeed use the windows gui for know. 

From what I understand from your posts is that you have a webserver that is serving the preview.html right?

That’s the part I’d rather not have, that’s another (web)service to maintain :-)

 

We've added the preview.html to the web-gui folder, so not really an extra web service, but indeed it's extra maintance because it's not a part of the SF-development database, but a ‘loose’ part in between SF and the DevOps that requires attention (not removing or forgetting the file etc). Not the nicest solution, but it works :grin: .

Reply