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.
I want a button like these ones:
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.
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
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.
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.
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...).
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.
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.
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%'>⟳</span> Refresh List", width: 2
Check out these sexy buttons now
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
5 Likes
