change element background image on page load if page hgas custom image

I have a webscreen that loads a container, this container has a default image, say default.png.

When the page loads preparation is provided an id of an entity, this entity contains imagedata, that is, filename, image binary data and extension, the rest of the data refers to outside references (e.g product ID etfc)

Anyway the issue i have is why i am going bald.


When the page loads it makes a call to the database to check if an image is available for the given container, if there is no image, the default image provided is shown,

The problem I am having is that I can get the data from the database to get the binary data but for the life of me I just cannot seem to get the image to change.  I tried using RunJavascript but the script through an error because the script needs to be a string and the image is in Binary I have tried using the webscreen Javascript call but this too wont access the image.I have tried using the class name as an identifier so that I could use javascript to change the image but it returns errors when I use defined local variable names For instance:


window.onload = setBackgroundImage();


function setBackgroundImage() {
    var image = new Image();
    image.src = '" + Background + "';
    $('." + CompetitionCenterPanel.Id + "').css({background-image: image});
}


The error returned is 'Background is not defined and  CompetitionCenterPanel.Id throughs an error too.

Is there a way that I can change the default image on the page load? there must be a simpler way to do this,for example the default image for a user is replaced by a user defined image; so it must be able to be done..I just dont know!


Any help is always appreciated















Hi Jim,

you want use this on webapp or mobile app

for web app -

I think you should use this propert for image Type-External

and URL provide a variable.

On page load prepration change this variable from another image url.


And for mobile -

window.onload = setBackgroundImage(Background);


function setBackgroundImage() {

    image.src = '" + Background + "';
    $('." + CompetitionCenterPanel.Id + "').css({'background-image': 'url('+Background+')'});
}

as Background take as input parameter and provide image url in this.


Hope this will help you.

Thanks]

Rahul Sahu

You, sir, are a diamond!


Thank you I can see where you are going with that and I should be able to work out the rest,  I'll post the results in case anyone else is looking for something similar.

Morning bro, 

First the code javascript is wrong.

$('.something') -> will be any code jQuery in a class.

What you are doing is: 

$('." + something.id " +') -> you are assign in selector class jQuery, one Id. (not work)


You could access the img tag class e do: 

$('#" + ClassONImg.id + "').attr('src', 'data:image/png;base64, btoa(Background)'); 

or

$('#" + somethingContainer.id + "').css('background', 'url(data:image/png;base64, btoa(Background)');

btoa is a function native js:

Look: https://stackoverflow.com/questions/10982712/convert-binary-data-to-base64-with-javascript

My suggestion, in your preparation verify data from the database, if empty to get url default image on Outsystems, create a string as i showed up there, else create string with binary data from the database.

All this without to use JS.

Rodrigo Luan wrote:

Morning bro, 

First the code javascript is wrong.

$('.something') -> will be any code jQuery in a class.

What you are doing is: 

$('." + something.id " +') -> you are assign in selector class jQuery, one Id. (not work)


You could access the img tag class e do: 

$('#" + ClassONImg.id + "').attr('src', 'data:image/png;base64, btoa(Background)'); 

or

$('#" + somethingContainer.id + "').css('background', 'url(data:image/png;base64, btoa(Background)');

btoa is a function native js:

Look: https://stackoverflow.com/questions/10982712/convert-binary-data-to-base64-with-javascript

My suggestion, in your preparation verify data from the database, if empty to get url default image on Outsystems, create a string as i showed up there, else create string with binary data from the database.

All this without to use JS.


Thank you Rodrigo.


I have been looking at a slightly different method 

I have embeded the function in the webscreen Javascript section, in preperation I have then used RunJavaScript passing the data on through there.  I may try yours if this doesnt work and I saw some of the errors in the first example, but missed one you pointed out,  many thanks