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.
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.
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
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
(*) 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
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.
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
No, I won’t. The original Issue seems good enough to me.
This here is just a possible workaround…
Oh, thanks for the update
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.