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