Bootstrap button icons

[Jane]

Tell me there's an easy way to do this, please...

For whatever reason, I've wanted to use some bootstrap stuff in an NT app.

Some items are fairly straightforward.

But the standard way of putting icons on buttons is

• in BS 3 - put a span before the button text with its contents something like
  span class="glyphicon glyphicon-pencil"
• in BS4 the convention seems to be to use an <i> tag rather than a span.  And since glyphicons are no longer supplied, using another image font such as FontAwesome:
  i class="fas fa-pencil-alt"

This requires putting some HTML right before the button text, rather than just adding a class.

I haven't found a way to make this happen other than carving on a copy of netweb.clw to make TextValue longer and to hard-code around the self.translate(p_text) for anything to do with glyphicons or fontawesome tags. 

And then to kludge around the template-generated code so that the TextValue doesn't go through p_web.Translate before it gets to the button code.

It would seem that having an embed that allows XHTML for the button text would allow inserting the span or the <i>... or is there a way to do this that I'm missing?

Pics are what I've been playing with (only the edit/delete buttons, not the EIP):

[bshields]

Hi Jane,

I agree. I use FontAwesome extensively in my apps.

I've done exactly what you've suggested by modifying the template to support XHTML in the button name.

Regards
Bill

[Jane]

Guess that answers my question as to whether there's an easier way... as I'm thinking you'd have found it if there were. 

Thanks, Bill!

Jane

[Bruce]

so, if I understand correctly;

given the current generated code;

<button type="button" name="change_btn" id="change_btnI5wf" value="" class="nt-change-button nt-small-button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" title="Click here to Change this record" data-do="change" role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon ui-icon-pencil"></span>
    <span class="ui-button-text">Hello</span>
</button>

You want to change this to...

<button type="button" name="change_btn" id="change_btnI5wf" value="" class="nt-change-button nt-small-button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" title="Click here to Change this record" data-do="change" role="button" aria-disabled="false">
    something else here?
    <span class="ui-button-text">Hello</span>
</button>


Is that right?

Bruce

[Bruce]

Or are you really just asking "how can I use Font Awesome on a button?"

[bshields]

Hi Bruce,

From my point of view, yes.

I need to place something like:


1
<button type="button" name="change_btn" id="change_btnI5wf" value="" class="nt-change-button nt-small-button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" title="Click here to Change this record" data-do="change" role="button" aria-disabled="false">
    <i class="fab fa-500px"></i>
    <span class="ui-button-text">Hello</span>
</button>


This also works:


2
<button type="button" name="change_btn" id="change_btnI5wf" value="" class="nt-change-button nt-small-button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" title="Click here to Change this record" data-do="change" role="button" aria-disabled="false">
    <span class="ui-button-text"><i class="fab fa-500px"></i> Hello</span>
</button>


I might also require:


3
<button type="button" name="change_btn" id="change_btnI5wf" value="" class="nt-change-button nt-small-button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" title="Click here to Change this record" data-do="change" role="button" aria-disabled="false">
    <i class="fab fa-500px anotherstyle"></i>
    <span class="ui-button-text">Hello</span>
</button>


So I can control icon size.

#2 is probably the preference as the icon will pickup any font-size,colour,background,etc specified by ui-button-text. But that styling could be moved to the button tag in any event.

Regards
Bill

[Jane]

Bruce,

I haven't experimented as much as Bill apparently has. 
My testing-hack had the same result as his #2 code.  When that worked, I didn't try any variants.

If it's possible, that would be awesome ;-)

Jane

[Bruce]

I think it's possible by embedding in WebHandler, in CreateButton method [1] after the parent call.

So by embedding after the parent call you can take what is returned by CreateButton, inject your code into it, and then return that. If you use StringTheory it should be pretty easy to do this. (Let me know if you need ideas, but I'm thinking about the INSTRING and INSERT methods here.)

[1] there are a number of button creation methods. you may find it more convenient to embed in CreateStdButton so you know the "type" of the button (passed in p_equate parameter.)

If you need more, just shout.

cheers
Bruce

[Robert Iliuta]

Hallo Bruce!

I try something in WebHandler but it not works...

This is the return value after parent call
ReturnValue = <button type="button" name="PrinteazaC" id="PrinteazaCAkB6" value="Printeaza"   data-do="bserver" data-form="b_transferuri">Printeaza</button>

Now what and where to insert my code: <i class="fas fa-print"></i>

Thank you!
Robert

[Bruce]

what HTML code do you want to end up with?

[Robert Iliuta]

This is the code: <i class="fas fa-print"></i>

[Bruce]

yes, I know that's the code you want to inject.
But mixing that with the generated code - what do you want to be left with?

It's impossible to answer you question of what to do, because I don't know what you want to do...

Cheers
Bruce

[bshields]

My crystal ball suggests:

ReturnValue = <button type="button" name="PrinteazaC" id="PrinteazaCAkB6" value="Printeaza"   data-do="bserver" data-form="b_transferuri"><i class="fas fa-print"></i>
 Printeaza</button>

[Bruce]

str.SetValue(clip(ReturnValue))
i = str.instring('Printeaza')
str.Insert(i,'<i class="fas fa-print">')
ReturnValue = str.GetValue()

[Robert Iliuta]

Hallo Bruce!

I have a lot of buttons in "WebHandler, in CreateButton method [1] after the parent call" ... but it's very hard to add there every button you need to change/add icons.
It could be more easy to have another field on the button tab where we can add our style like Bill mentioned:

1
<button type="button" name="change_btn" id="change_btnI5wf" value="" class="nt-change-button nt-small-button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" title="Click here to Change this record" data-do="change" role="button" aria-disabled="false">
    <i class="fab fa-500px"></i>
    <span class="ui-button-text">Hello</span>
</button>


OR (much better)

to add xHTML support in the button name :-)

The point is that if we can add this piece of code "<i class="fab fa-500px"></i>" before the name of the button it will be great.

Thank you!
Robert