Hi Ana,

You can do that by 1) creating an entry point that returns the image that you want to set as background depending on the ID and 2) Setting the background-image CSS style property as the URL that retrieves the desired image on each situation. See the details below. 

1) Creating an entry point that returns the image that you want to set as background

1. Create a GetBackgroundImage Entry Point that points to a GetBackgroundImageScreen empty screen with an ID parameter;
2. In the preparation of the GetBackgroundImageScreen screen, insert the logic that gets the desired image from the database and end the preparation with the download widget that downloads the image you got from the database (see more about the download widget in the Service Studio help)

(By doing this, if you access the URL https://<your_server>/<your_espace>/GetBackgroundImage.aspx?ID=<desired_id> you will get the image corresponding to the ID)


2) Setting the background-image CSS style property as the URL that retrieves the desired image depending on the ID

1. In your container, go to the Extended Properties section, and add a property with name style and the value is the CSS background-image property with an URL that points to the desired image (use the GetEntryURL function that is made available by the HttpRequestHandler extension to generate the URL). See in the image below.

Best Regards,

Daniel Lourenço
OutSystems

Hi Daniel!!

Thank you for your reply!! :-)
It does work, but now I have another problem... I have a list of items, each of them will link to a popup with a different background image.
The problem is that the GetBackgroundImage screen's Preparation is only fired once, so when I click on the various links of the list (it's a table column that gets as ID the current row ID), it always shows the same image as the popups background... What am I doing wrong?? I have a breakpoint set at the start of the screen's preparation, and the code only goes through there on the first link I click, all the others skip the preparation.

Thanks in advance,
Ana

Hi Ana,

Could it be a caching problem?

Have you checked if the preparation of the popup screen is also executed on all clicks? You can even place a break point in the container to see the value that is being computed for the style property (or put the computed background image URL in a variable in preparation variable and see if the value is correct there).

What popup widget are you using?

A trick to avoid caching is creating a dummy imput parameter to which you pass a random value.

Best Regards,

Daniel Lourenço
OutSystems

Hello Daniel,

The Preparation of the popup screen is not executed in all clicks, as suspected. I've added a dummy input parameter both to the popup window and the empty screen that downloads the image, and the value that I send is the result of the GeneratePassword built-in function (I couldn't find a function that generates a random number?). Still, the preparation is not executed, it's just executed on the first time its called.

I've added a local variable to see the URL of the image. It works like a charm, but only the first time! The others, it won't even pass through that piece of code...
The popup widget I'm using is the Popup_Editor from the espace Rich Widgets.

Glad of any help anyone can give, I'm at a loss here.

Thanks in advance,
Ana

Hi,

I have more information. If I don't use a popup screen to call the image, it appears without any problem.
The problem is when I use a popup screen, the image screen's preparation only runs once.

The parameters are exactly the same, I'm using dummy parameters between all screens now...
I don't know what am I doing wrong.

Thanks
Ana

Hi Ana,

I did a small test in my community edition and the popup editor preparation is always fired as expected.
Besides the background image, do you have other dynamic data in your popup window? For example, dispaying the ID of the record that opened the popup? Is this information displayed properly?

Attached you can see my test eSpace. Can you run it a see if both lines in the table fire the popup preparation break point (it was done in Service Studio 5.0.1.9)?

Best Regards,

Daniel Lourenço
Outsystems

Hello again Daniel,

I apreciate the effort you're doing in helping me on this...

I am using service center 4.2.4.45 and service studio 4.2.54. Can't open the file you sent, unfortunatelly. :-(
Yes, I have more information showing in the popup, and it's correct.
I have the popup calling the empty image screen on the style property of a table cell, and it's not being called all the time! I don't have a clue why...

The style is:
"background-image: url('" + ImageURL + "');"

ImageUrl is a local text variable that is being assigned on the popup's screen preparation, and it's correct... its value is:

"GetBackgroundImage.aspx?BusinessCardRequestId=1&IsCardBackImage=False&Dummy=lf22sopoh0"

Thanks,
Ana

<EDIT>
Adicional information. Not even the GetBackgroundImage.aspx page is being called everytime! Seems like the table cell saves the image it used before and reuses... More than likely a caching problem, as you sugested. Is there a way to force the table cell to go fetch the image's url everytime it renders??
</EDIT>

Hi Ana,

I tried doing the same in my local community edition and it worked fine (see attached, it's still 5.0 - you can try it by installing the OutSystems Community Edition that you can download at https://www.outsystems.com/download).

I suppose the problem might also be somehow related with your network. Are you behind a web proxy? Have you tried clearing all you local cache files and then test it again?

There is something I do not understand - you said before that the popup preparation is not being executed all times. Does that still happen?
One other thing - have you tried calling the background URL in you browser (when the app does not display what you want) to see if it works properly and returns the image you expect him to?

Best Regards,

Daniel Lourenço
OutSystems

Hi Daniel,

I'm sorry it took me so long to answer, I have been busy with other project.
I looked at your test eSpace, and the only thing that is different from mine is that you're building the list by hand, and getting the binary image through HTTPBinaryGet (I have it stored as a binary in a database).

I made some changes in my code. I'm not using popup windows anymore, and I have two containers in the same screen.
The goal is to show the front and the back of a business card of the chosen person.

Both containers have the style set as you suggested, with the difference of one parameter (that says if it's the front or the back of the card).
The preparation screen of the GetBackgroundImage screen is called every time.
The problem is that the parameters aren't sent to the screen every time!
When I look at the HTML source code of the page through the browser's "View Source" option, both URL are looking fine, with all the parameters well formed and correct. But when the image's page is actually called, the parameters randomly disappear. If I do enough refreshes to the page, eventually the images show up right. I'm still using the dummy parameter, generated with the function GeneratePassword(10,True)

When I use a program like Fiddler to see what is actually being called, no problem is shown! Both requests have all the parameters set right...







Any idea why this is happening? Looks like the parameters get lost somewhere between the call being sent and the image's page preparation?

Thanks!
Ana Sofia Santana