Better looking href button in an app

🚧 Developers Coding Questions
1

This is for an app I am working on.
So what I am trying to do is have a button that re-opens the same page I am on but passes a querystring so the page will reload some data when it refreshes. I actually have that working already.

But... it is super ugly.

image
image740×114 5.68 KB

I want a button like these ones:
image

Which I was able to copy the code for the button and it shows on my app but how do I make it DO something when clicked? I am guessing I also need some javascript from the zigbee page but not sure what I am looking for.

image
image768×175 6.73 KB

2

Not sure I completely follow what you want to do but believe I have an example that might be helpful. I have a page to create a Gmail notification device and after entering the details a green button appears that will add a new device but remain on that same page of the app and the table at the bottom refreshes with the new device

image
image2676×1462 170 KB

This is in the parent GCal Search app code and that page is lines 202-222. Pushing the button calls the appButtonHandler function on line 286.

3

Yeah I think I have on idea on how to use one of those buttons that calls the button handler, along with a state variable to do it as well. It wont fix the ugly thing that switches to the edit page though. The one for the edit page loads a different page via a href link so its a different kind of button. I was hoping to get both looking the same.

4

The Zigbee Details page isn't built using the regular app UI framework, and I'm not sure of an (easy?) way to do this in that. But I wonder: you might have better luck using a paragraph() with a plain <a href="x">...</a> and figure out if there's a CSS class you can apply to it that would give you the same styling as the buttons (can probably find one with the developer tools inspector in your browser--I didn't play around with this at all, just spitballing...).

5

Yeah I have the button in there now using the code from inspecting the zigbee page.
I guess if I just made the text an href without any styling that might work.

Have another possible lead using similar code as the checkboxes I have on the same page which came from an example Bruce posted. Looks like a hidden button that triggers the submitOnChange and calls the button handler.

6

Was able to get it not too horrible looking with a regular button. Now if I can figure out how to un-ugly that href link next to it.

image

One uses an icon from HE, the other a unicode char.

input name: "btnListRefresh", type: "button", title: "<span class='p-button-icon p-button-icon-left pi pi-refresh' data-pc-section='icon'></span> Refresh List", width: 2
input name: "btnListRefresh", type: "button", title: "<span style='font-size:120%'>&#x27F3;</span> Refresh List", width: 2
7

Check out these sexy buttons now

image

image

The Refresh I only need to do some actions and reload the page, which the built in input buttons will do. Adding the icon is just borrowing some code from the regular UI (btnIcon function is below). You can find the button names with the browser F12 console and inspecting the icons in the normal UI. Also I found an icons list here: PrimeNG OR PrimeFaces Showcase

input name: "btnListRefresh", type: "button", title: "${btnIcon('pi-refresh')} Refresh List", width: 2

For the button that takes you to another page, again I borrowed the code for the buttons in the regular UI but added an "onClick" settings to the button. I created it as a separate function, feel free to borrow this

Two functions needed:

String btnIcon(String name) {
    return "<span class='p-button-icon p-button-icon-left pi " + name + "' data-pc-section='icon'></span>"
}

String hrefButton(String btnName, String href, String iconName=null) {
    String output = ""
    output += """<button onClick="location.href='""" + href + """'" class="p-button p-component mr-2 mb-2" type="button" aria-label="hrefButton" data-pc-name="button" data-pc-section="root" data-pd-ripple="true">"""
    if (iconName) output += btnIcon(iconName)
    output += btnName
    output += """<span role="presentation" aria-hidden="true" data-p-ink="true" data-p-ink-active="false" class="p-ink" data-pc-name="ripple" data-pc-section="root"></span></button>"""
    return output
}

Example of using it:
paragraph hrefButton("Add SmartStart Entry", "./pageEditEntry?idx=-1", "pi-plus"), width: 2

7 Likes
8

@jtp10181, thanks Jeff for this info, I was scratching my head on how to beautify my app and could not figure it out. I did multiple searches to try and find out what I could do and finally found this post!

Hope you don't mind if I use some of your code.

1 Like
9

Go for it, I made the functions to be portable and posted them so anyone could us them easily. Let me know when you post it, I would love to check it out.

1 Like
10

ok so I tried using the hrefButton, it does work, looks really nice, but the sub page it directs to no longer has the "DONE" button at the bottom and this just won't fly with the way I want it to look.

Do you have an idea why this happens before I start looking for clues of what is missing for that button to appear? Thanks!

11

Seems to be working OK for me, I just tested and the Done shows up on mine still.

What does your dynamicPage look like? I have both of these flags at the end set to false. I forget why or what they do exactly? That might be part of it though.

dynamicPage(name: "pageViewList", title:styleSection("SmartStart Manager: List View"), uninstall: false, install: false)
12

Jeff, I just checked the source code of the SmartStart Manager app and the button that opens that page is a regular "href" not an "hrefButton". When using the later, the done button does not appear for some reason.

13

Only from the main page, if you go to either the List or the Edit page, they have have "hrefButton" linking to the other pages. I clicked around on all my pages with the different buttons and the Done button was always there for me.

1 Like
14

hmmm that's weird and I'll have to investigate further your code to see if I did something wrong.

15

Well I think I figured it out, when coming from the mainPage, I need to reference it in the link...

paragraph hrefButton("${btnIcon('pi-wrench')} Advanced Settings", "./mainPage/configAdvancedSettings"), width: 5

Now when using this mainPage reference in the path, the done button appears and works as expected.

Here is the final result...

image
image911×507 12.5 KB

Thanks Jeff for the code snippet, now to make the text a bit bigger in the buttons. :slight_smile:

16

Looking good.

You have to simulate the built in buttons URL like how it would link it, I think that is how it knows where the Done button should go, so when you click Done it just go up one level. I guess I never realized if you don't do that it could hide the Done button (it doesn't know where to go if you click it so that makes sense).

I also found the built in href buttons if you do a circular reference you can get quite a mess going in the URL if you keep clicking back and forth to different pages (HPM has this issues I think). Doesn't really hurt anything but it messed up the "Done" button (and bothers me). With my buttons you can control the exact URL it goes to and nest it correctly so that Done goes back to where you want it.

1 Like
17

Does anyone know if it's possible to use the Fonts Awesome (FA) icons that the hub uses in our own apps. Specifically I would like to use the morning and evening icons used in the mode setter app (fa-sunset and fa-sunrise) to be specific.

code I see on the mode setter page when looking in Chromes inspector is this...

<span class="fa fa-sunset" style="color: rgb(22, 156, 0); font-size: 18px !important;"></span>

But not sure how to use this info, not very with CSS as already mentioned :woozy_face:

18

You should be able to, that’s basically how I used those other icons in my code. Just slap that span block somewhere and the icon will probably show up.

19

:rofl: I was complicating things more than needed and after looking again at your code, I figured it out, and wrote a new method called faBtnIcon with the code I posted above and that worked immediately! Thanks Jeff for the push I needed, I think I'll go for a power nap right now! Work is slow going and decided to revisite this after seeing those icons in mode setter, was hoping for them to work since they are Pro Icons that need a membership or something?

20

Yah Hubitat has probably purchased some packs and they are built right into the platform. Might as well use them. If you find the pack online we probably have access to everything in it, not just the ones HE is using. Thats how I found some of the ones I used in my app, by just looking at the full pack list online somewhere.