Xojo2024R4.1: how to display icon in the header column of the WebListBox that is using DataSource?

I don’t know if this issue:
https://tracker.xojo.com/xojoinc/xojo/-/issues/72681
relates to my question or not.

However, what I need is to display the icon in the column header instead of the text.
In the DataSource.ColumnData I have the code that populates the column heading:

col.Heading = vColumnDataStrArray(2)  // the name that appears above the column in the header

Since the WebListBoxColumnData is not offering “icon” property, is it doable to formulate string for the col.Heading to display icon?

Once upon a time there was a special mode that allowed you to put raw html into any text element. It was primarily for labels but it may work here as well.

Try setting like this to test

col.Heading = "<raw><i>italic</i></raw>"

If you get the word “italic” written in italics, then you could put just about anything in the header.

Unfortunately, that’s exactly the bug that was linked. :confused:

#72681 - Can’t use HTML in WebListBox column header

It’s replacing spaces with &nbsp;, even when the HTML is enclosed using the <raw> tag, making HTML tags unusable.

2 Likes

I will try but I don’t have much faith in it, the thing is that I use DataSource with WebListBoxes, all columns are defined in DataSource class. I think they don’t exist in the control itself at the time of Opening or Shown event, they do get created once the list is actually build. At least this is my understanding of it.

Thanks for confirmation. The issue is over year old so I wasn’t sure. It looks like it is too difficult or not having enough priority to be resolved, I know that this is not a big deal but it would be nice to have it. I just hope that this will be addressed at some point in not so distant future.

Just some hackish idea - not knowing if that’s a good idea/approach or not (I’m sure some of the “Web-Gurus”'s here will tell later…) :wink:

In WebListBox.Opening Event: add an own/custom class - here: listboxDbHeaderAlignment

Sub Opening() Handles Opening
  Me.ExecuteJavaScript("$('#" + Me.ControlID + "').addClass('listboxDbHeaderAlignment')")
End Sub

That allows to style WebListboxHeader’s in App.HTMLHeader by setting the style for the custom/own class listboxDbHeaderAlignment.

Example: Align some Headers centered (Note: nth-child Element indices are 1-based):

<style>
.listboxDbHeaderAlignment th:nth-child(1),
.listboxDbHeaderAlignment th:nth-child(3),
.listboxDbHeaderAlignment th:nth-child(5) {
  text-align: center;
}
</style>

Example: Trying to add an Icon to the WebListBox Header(s):

<style>
.listboxDbHeaderAlignment th:nth-child(1):before,
.listboxDbHeaderAlignment th:nth-child(3):before,
.listboxDbHeaderAlignment th:nth-child(5):before {
    content: '';
    background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSj3XfIpf-OOJRCcWz4iN2CU3qMKVVbj0p0bRvKNGVo1U9pk_8ZIlyR8pWreA');
    background-size: cover;
    position: absolute;
    width: 20px;
    height: 20px;
    margin-left: -20px;
}
</style>
1 Like

And a quick follow-up to:

One idea here would be to change the example above to use an image url such as this:

background: url('/res/img.svg');

And App.HandleURL could serve the icon such as:

Function HandleURL(request As WebRequest, response As WebResponse) Handles HandleURL as Boolean
  Select Case request.Path
    
  Case "res/img.svg"
    Var wp As WebPicture = WebPicture.BootstrapIcon("activity", &cffffff)
    Var mb As Memoryblock = wp.Data
    Response.Header("Content-Type") = "image/svg+xml"
    Response.Write(mb)
    Return True
    
  End Select  
End Function

Jürg, thanks for the suggestion, I haven’t tried it yet.
Do you think this could work with WebListBox based on DataSource?

Well, I have tried this “proof of concept” on a WebListBox with a WebDataSource - so: yes :wink:

1 Like

Great, thank you. I will try it on Mon and let you know how it went, but if you happen to have sample project, could you share?

This is Xojo’s example project (Eddies), where I’ve added the above idea:
WebListBox-HeaderIcons.zip (2.4 MB)

Looks like this:

Be aware - it really is just kind of a “proof of concept”… the above kind of works with “centered” headers (without sorting indicators)…
…if you have the Headers left-aligned, or sorting enabled - it’s highly likely that the styles need to be modified.

Don’t ask me how - I really only was curious if that approach (*) could be an idea :wink:

(*) I’ve found the “centered headers” somewhere on the forums, and just tried to find a way to add an icon. But I’m not much into a web / css - so please don’t ask anything further of me here :wink:

1 Like

Just a quick update, I have Safari 17.6 on my MBP with M1, using latest Xojo 2024R4, I don’t see the icons the list column headers. Thanks for the demo anyway.

Safari 18.2 with MBP with M2 works.
Firefox 130.0.2 (same system) doesn’t show the icons.
Weird.

So it is good and bad news, hopefully Ricardo or someone else can see how to make it work out of the box in next release of Xojo :slight_smile:

Maybe @Jürg_Otter can create an Issue for this.

The example doesn’t set the HTTP Status Code in App.HandleURL, so it’s returning 404. Some browsers see that there’s data and ignore the status code, others treat it as a resource failure. The App.HandleURL code should look like this:

Select Case request.Path
  
Case "res/person.svg"
  Var wp As WebPicture = WebPicture.BootstrapIcon("person", &cffffff)
  response.Status = 200
  Response.Header("Content-Type") = "image/svg+xml"
  Response.Write(wp.Data)
  Return True
  
Case "res/person-arms-up.svg"
  Var wp As WebPicture = WebPicture.BootstrapIcon("person-arms-up", &cffffff)
  response.Status = 200
  Response.Header("Content-Type") = "image/svg+xml"
  Response.Write(wp.Data)
  Return True
  
Case "res/compass.svg"
  Var wp As WebPicture = WebPicture.BootstrapIcon("compass", &cffffff)
  response.Status = 200
  Response.Header("Content-Type") = "image/svg+xml"
  Response.Write(wp.Data)
  Return True
  
End Select
5 Likes

Thank you Anthony, adding that line to the example makes Firefox show the icons.
I can’t test Safari 17.6

It didn’t make much difference, no icon in the column header.

No, I won’t. The original Issue seems good enough to me.
This here is just a possible workaround…

Oh, thanks for the update :wink:

Do you by any chance have an idea how the style (which displays the icon) needs to be set for the header column(s) that allow Sorting?
I haven’t had the chance to look more into that… But I think to remember that the above style doesn’t work for that. And having such an example as well would be nice to have - should someone really want to use that for now.


However… the best solution will be the one that will be officially supported by the Xojo Web Framework. So add your Thumbs up to the OP’s issue.

I don’t have access to Safari 17.6, but I can tell you that it works in these scenarios:

  • Safari 18.2
  • Brave (latest)
  • Chrome (latest)
  • Firefox (latest)

As always, when testing with old versions of macOS, you’re at the mercy of whatever their WebKit implementation supported the last time that OS received a Safari update.