CardBackground in WEB needs Image URL

CardBackground in WEB needs Image URL

  

Hi everyone!

I'm currently trying to create a dynamic CardBackground widget. By dynamic I mean change the image URL everytime I enter the screen. This is easily done with images present in the eSpace, but I want to do it with Images present in my Database. So, the question is..how can I get the image URL that is present in my database so I can paste it in the CardBackgroundImage URL?

Thanks in advance,


Tiago Carmo

Hi Tiago,

Please use following expression with Escape Content as NO

"<img src="+EncodeHtml("data:image/png;base64,"+BinaryToBase64(BinaryDataFromDatabase))+">"

I am also attaching sample oml for your reference.

Sachin

Hi,

So is there any relation between images stored in database and screen you are entering?

Hello Tiago,

You have some options, probably none as "straight forward" as you would like. 

You can take a look at forge. If you search by "background", you will find some components that deal with this. Probably, not what you want, but take a look, the effort will not be wasted (there are some nice components there to work with background).

If you don't find anything that suits your needs, you can try to do it in the following ways:

1. Through Download from a Page.

You can create a page that receives as input parameter the "id" or any other identifier (like the file name) of the image in database and returns the image binary file through the Download node at the end of the preparation. 

2. Create a REST API that will receive as input an "id" or any other identifier (like the file name) of the image in database and returns the image binary.

3. Use a normal Image Widget and apply style to it so that it will work as a background image. Usually you need to use position absolute and some z-index and height/width or tpo/left/right/bottom properties (and guarantee that the first positioned element is around your card, for example.

4. Use an ImageWwidget and javascript to set the background image to the URL returned by the Image Widget.

Also, beware of the "cache", as if the filename/url is the same, if cache is being used (good practice), the browser will look for the file it alread downloaded. 

Hope this can help you.

Cheers,
Eduardo Jauch 

Sachin Mahawar wrote:

Hi Tiago,

Please use following expression with Escape Content as NO

"<img src="+EncodeHtml("data:image/png;base64,"+BinaryToBase64(BinaryDataFromDatabase))+">"

I am also attaching sample oml for your reference.

Sachin


Thanks Sachin, but since i'm trying to use a card background widget, i'm not able to use expressions (what I want is the image URL in order to paste it in the widget's properties)

Eduardo Jauch wrote:

Hello Tiago,

You have some options, probably none as "straight forward" as you would like. 

You can take a look at forge. If you search by "background", you will find some components that deal with this. Probably, not what you want, but take a look, the effort will not be wasted (there are some nice components there to work with background).

If you don't find anything that suits your needs, you can try to do it in the following ways:

1. Through Download from a Page.

You can create a page that receives as input parameter the "id" or any other identifier (like the file name) of the image in database and returns the image binary file through the Download node at the end of the preparation. 

2. Create a REST API that will receive as input an "id" or any other identifier (like the file name) of the image in database and returns the image binary.

3. Use a normal Image Widget and apply style to it so that it will work as a background image. Usually you need to use position absolute and some z-index and height/width or tpo/left/right/bottom properties (and guarantee that the first positioned element is around your card, for example.

4. Use an ImageWwidget and javascript to set the background image to the URL returned by the Image Widget.

Also, beware of the "cache", as if the filename/url is the same, if cache is being used (good practice), the browser will look for the file it alread downloaded. 

Hope this can help you.

Cheers,
Eduardo Jauch 

Hello Eduardo,


Is there any way you can give me a sample oml in order for me to try your ideas? The ones I'm most curious about are the 1, 2 and 4 (I'm trying to avoid using css for this)


Thanks


Tiago Carmo wrote:

Sachin Mahawar wrote:

Hi Tiago,

Please use following expression with Escape Content as NO

"<img src="+EncodeHtml("data:image/png;base64,"+BinaryToBase64(BinaryDataFromDatabase))+">"

I am also attaching sample oml for your reference.

Sachin


Thanks Sachin, but since i'm trying to use a card background widget, i'm not able to use expressions (what I want is the image URL in order to paste it in the widget's properties)

Hi Tiago, Let me use that widget, I haven't tried it.

Also one thing If it's possible Please share sample oml, or any screen shot, So that we can have a look.

Sachin


Hello Tiago,

Yes :)

The nº 1 I have already tested, but will be able to provide only at night. I'll implement the other two and send to you.

Cheers,
Eduardo Jauch

Sachin Mahawar wrote:

Tiago Carmo wrote:

Sachin Mahawar wrote:

Hi Tiago,

Please use following expression with Escape Content as NO

"<img src="+EncodeHtml("data:image/png;base64,"+BinaryToBase64(BinaryDataFromDatabase))+">"

I am also attaching sample oml for your reference.

Sachin


Thanks Sachin, but since i'm trying to use a card background widget, i'm not able to use expressions (what I want is the image URL in order to paste it in the widget's properties)

Hi Tiago, Let me use that widget, I haven't tried it.

Also one thing If it's possible Please share sample oml, or any screen shot, So that we can have a look.

Sachin


You can find a sample oml attached to this reply. It's a very simple example with an error in the widget propoerty where I have to paste the URL!


Thanks


Eduardo Jauch wrote:

Hello Tiago,

Yes :)

The nº 1 I have already tested, but will be able to provide only at night. I'll implement the other two and send to you.

Cheers,
Eduardo Jauch

Thank you Eduardo! Looking forward to trying them out! ;)


Hello Tiago,

Here is an example: https://eduardojauch.outsystemscloud.com/CardBackgroundWithDatabase/Home.aspx?_ts=636419665531389391
And attached the code (a little "rough", but you can adapt it to your needs).

Just pay attention because I used an Entity (Picture) from another space I have for this example, so it is not in the OML I'm attaching.

Cheers,
Eduardo Jauch

Solution

Hello Tiago,

Was you able to test the solutions provided?
Or are you still experiencing any kind of problem?

Cheers,
Eduardo Jauch

Solution

Eduardo Jauch wrote:

Hello Tiago,

Was you able to test the solutions provided?
Or are you still experiencing any kind of problem?

Cheers,
Eduardo Jauch

Sorry for the late response Eduardo! The examples helped! Thank you very much!