Database Images as BackGround

Back to Forums

Luís Matos

Solved

Database Images as BackGround

Question

Reactive

CSS

Front-end

Application Type

Reactive

Service Studio Version

11.51.3 (Build 57422)

Hi all!

I have a multi-tenant app and want to give each tenant the ability to upload a background image.

This part is done and tested and it works.

My issue begins at actually getting the background image to work as background.

I've tried to use the CardBackground widget but for some reason it just stretches the window infinitely regardless of image dimensions.

I'm not able to add the background to the screen style sheet nor to a container using:

"background-image: url(" + BackGroundImageURL + ");"

Where "BackGroundImageURL" comes from the OutsystemsUI function BinarytoURL.

I've tried to add an OnAfterFetch to the Aggregate where I get the image with a JS Node with the following code:

document.getElementById($parameters.ElementId).setAttribute(

"style", "background-image: url(" + $parameters.ImageURL + "');"

I added the ElementId of a container to see if it'd work but no luck.

Does anyone know of a way to do this?

18 Jan

Luís Matos

Solution

I just had to dig a bit more.

This is the JavaScript I added to the Node on the OnAfterFetch of the Aggregate that picked up the image:

-----------------||-----------------||-----------------||-----------------||-----------------||-----------------||-----------------||-----------------||

var styleSheet = document.createElement("style")

styleSheet.type = "text/css"

styleSheet.innerText = "body{ background-image: url('" + $parameters.ImageURL + "'); background-repeat: no-repeat;background-size: cover;}"

document.head.appendChild(styleSheet)

-----------------||-----------------||-----------------||-----------------||-----------------||-----------------||-----------------||-----------------||

$parameters.ImageURL comes from the OutsystemsUI function BinarytoURL.

So you can create the aggregate and on the OnAfterFetch you'd have something like this:

Hope this can help anyone do this exact same thing!