WebListbox: ProcessingMessage Color

Targets Web
1

Add a Processing Message to a WebListbox:
WebListbox.ProcessingMessage = "Loading..."

This will display a Label and an blue-ish (indetermintate) Progress Control.
Depending on the look&feel of the WebApp, this color doesn’t quite fit.

Feature Request to have this built-in: Issue 78311

This has been asked in the Testers Channel: Forum: 2024r3 Web | Listbox Processing Message

Answer:

@Ricardo_Cruz
You’ve found the answer to deactivate it already, removing the message won’t display it.

I’ll take a look to see how to customize it a bit, or at least match the Primary color, from the Bootstrap theme.

Which doesn’t quite help to set the color, hence the above Feature Request.

Does anyone know if the Color can be changed somehow (e.g. with some JavaScript magic) already today with Xojo 2024r4.x?

2

I found that using WebProgressWheel works well, and lets you set the size location and color.

3

Sure. But I’m not looking for a workaround (some own progress indication mechanism) here :wink:

I’m trying to use the features that the Xojo Web Framework provides - in this case: WebListbox.ProcessingMessage (which should be displayed while the WebDataSource is loading data).

4

Completely respect that! I’m typically work-around-adverse myself; too hard to debug and support in the long run. Good luck!

5

That should be set based on the bootstrap theme you have assigned.

6

I don’t use an own/custom Bootstrap Theme… so I guess it’s the Xojo default’s.

It likely makes sense (or might already be like that) for most use cases to use the primary color.

Stil… if a WebListbox is using quite some customized content, some developers might want to have the progressing popup match that (and not the primary color, such as of buttons).

Which then would lead to the question: Can one only change this primary color, without adding an own/custom Bootstrap Theme?

7

Hi @Jürg_Otter, in the HTML Header, you can use this CSS to change the color of the animated bullets:

<style>
div.dataTables_processing > div:last-child > div {
  background-color: #ffaa00;
}
</style>
2 Likes
8

@Ricardo_Cruz
Where do you go to get to the HTML Header code?
Tim

9

Select the App object in the IDE and have a look at the Inspector…
…you’ll find the WebApplication.HTMLHeader there.

1 Like