There’s a number of areas where icons aren’t yet supported (i.e. WebButton) or are supported but in a limited way (i.e. WebMenuItem) - Maybe you want more than one icon or icons at the end versus the start?
Remember there’s the Raw Tag to allow you to inject HTML in many more places, which can be coupled with the Data attribute of the WebPicture’s BootstrapIcon’s Helper Function:
You may want wrap the SVG in an additional div with classes for CSS formatting but it depends on the use case and your bootstrap theme. Hopefully this helps someone, it did for me
==========
For WebMenuItem I found putting it in a span with position absolute allowed it to align correctly: <span style="position: absolute;">
For WebButton I found wrapping in this helped: <span style="position: inherit;top: -3px;">
Also wrapping it in a div for WebButton will make it be on a new line and make a “tall” button
I’ll also note that while you could wrap it in an image tag and use the url link: <img src="/_files/9393-3533-3537-4621-7927/alarm-fill.svg" width="16" height="16" class="align-middle">
But this creates a worse experience as it takes an extra network call for the image to load - meaning it doesn’t load as fast and the image may appear to pop into view after a delay versus the SVG data route which renders it instantly and allows more granular control for potential CSS effects and DOM manipulations.
Wouldn’t it be great if someone were to create a documented sample project with all of Brock’s little tidbits that would get updated weekly and emailed to us
I definitely provide these for the community as a courtesy and for collaboration, but can’t say I’m not adverse to any free will donations (@neonash7777 Venmo/CashApp haha) - but certainly not required. I just hope these help some of you out especially during the interim - until Xojo can get the rest of the Web2.0 features fully baked. I’m really looking forward for additional layout types with hopefully good WYSIWYG support
Brock, I thank you for all your contributions. Where I’m coming from is as a part time developer for corporate productivity applications in a graphics/printing company. I’m a bit disappointed in the usability of web 2.0 at this point and your slew of tips and tricks is hard to keep up with without some organization. I’d gladly pay a fee to subscribe to a weekly update or pay a small fee to download an updated project for quality documented examples so I don’t waste time researching and experimenting. Even better, adding the ability for taking requests for solutions to specific challenges would be a superb addition to a subscription plan because from my perspective I’m stuck in web 1.0 at this point without some assistance. I’d make a list of my complaints but I don’t think Xojo will respond with an update in a timely fashion and there may be alternative solutions that your expertise can resolve to help make the transition less painful. I’m wondering how many people would pony up for some plan you might be able to put forth that helps unlock the power of Web 2.0 without having to wait for Xojo to do the work to make it easy sometime in the distant future? I have a corporate credit card and I’m not afraid to us it.
Hey Brock. That was a great tip! I actually decided to work on this and wrap it into a WebButton subclass. It can be easily dragged in a window and the info can be set directly in the IDE attributes. It’s all pure Xojo code and supports Bootstrap icons, as well as Font Awesome 5. It allows for image only buttons, image and text in a horizontal or vertical arrangement. I also added font size and icon size, as well as font color and text color control. All as ide attributes.
Because it’s a subclass of the regular Xojo WebButton, all the regular events and behavior work. Hopefully it will not get broken in the future as only very simple html stuff was wrapped in a block, as suggested by Brock. Here are a few examples of what it can do:
This is what it looks like in the IDE:
A few caveats. The IDE will not show the icon or the text color, and the height cannot be controlled. It will be adjusted according to the text and icon size. The width set in the IDE will be used, though. So it’s a bit of trial and error to get things right visually. But I believe it’s a great workaround.
The best part is that it’s free for anyone. Distributed as beerware: if you like it, buy me a beer!
Just let me know if you’re interested, I’ll send you the class or post a link if enough people want it.
I found time to work on this so I made my own repository. It includes the original code as the first commit, so if you want to transfer of ownership to your account I’d be happy to do that.
Your button works fine on most pages in my webApp. But this an example where it is screwing up the IDE (different sorting of the fields). On top of that “Icon Type” is not showing any values.
All this is happening after saving the document and reopening it. I’m lost, perhaps you have an idea. Seems like it is not initializing …
That seems like IDE bugs, especially if it works fine on most pages but not others. You should file a ticket and attach a project so Xojo can look into why the properties got messed up.
Ah… thanks Tim for putting this in Git. I don’t want to retain ownership. Happy to contribute and even more happy with community contributions! (I’d like to keep the beerware part of the project though )
@Jeannot_Muller I have experienced the same IDE quirks with custom attributes. The attributes don’t always follow the order you set and sometimes the popup doesn’t show the values, or will not show the default one. I haven’t investigated and like you couldn’t see an obvious reason, but it does seem like an IDE bug.
