Command link with "copy to clipboard" function jsf primefaces - jsf

Question

So as in the picture i have a share, save and apply button.
image
i've read some articles about the copy to clipboard but it seems only works with a button (?), As what i used is a command link ,since i wanted a transparent button so i used a command link instead of command button(i read this from another articles).
This is my xhtml file
<h:commandLink id="share">
<i class="fa fa-share-alt" style="color: black"/>
<h:outputText value=" Share" escape="false" style="color: black;"/>
</h:commandLink>
<pe:clipboard id="clipboardbtn" trigger="share" action="copy" text="http://localhost:8082/index.xhtml">
<p:ajax event="success" listener="#{clipboardController.successListener}" />
<p:ajax event="error" listener="#{clipboardController.errorListener}" />
</pe:clipboard>
This is my controller
public void successListener(final ClipboardSuccessEvent successEvent) {
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Success",
"Component id: " + successEvent.getComponent().getId() + " Action: " + successEvent.getAction()
+ " Text: " + successEvent.getText());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
I'm really stuck in here and the references for this isn't that much :(
I've been searching everywhere but only found about that commandbutton references not commandlink, but i needed to use a commandlink since i wanted the UI like in the image i've attahced above.

Answer 1

Just replacing h:commandLink with p:commandLink should solve your problem.
You may also want to add some update="#form" clauses so that you can see the messages.
<h:form>
<p:growl globalOnly="false" showDetail="true" />
<p:commandLink id="btnAjaxCopy" onclick="return false;" >
<i class="fa fa-share-alt" style="color: black"/>
<h:outputText value=" Share" escape="false" style="color: black;"/>
</p:commandLink>
<pe:clipboard id="clipAjax" trigger="btnAjaxCopy" action="copy" text="PrimeFaces Clipboard Rocks Ajax!">
<p:ajax event="success" listener="#{clipboardController.successListener}" update="#form"/>
<p:ajax event="error" listener="#{clipboardController.errorListener}" update="#form"/>
</pe:clipboard>
</h:form>