I would like to use tooltip for sheet columns. Like
<pe:sheetcolumn headerText="Coverage Shape" value="#{material.coverageShape}" colWidth="250"
colType="dropdown"
selectItems="#{itemActionsManagedBean.getMapItems('coverageShape')}">
<pe:tooltip value="Coverage" atPosition="top" autoShow="true" />
</pe:sheetcolumn>
It doesn't show any tooltip. I tried to give id to sheetcolumn and tried to use in tooltip like referring by for attribute. But no luck. How can i show tooltips for sheetcolumns ?
My JSF VERSION : 2.2.1 PRİMEFACES AND PRIMEFACES EXTENSION VERSION : 6.2
I tried #Melloware solution but it didn't work.
I tried that. But didnt show me any error and didnt show tooltip.
<pe:tooltip value="Coverage" atPosition="top" global="true" for="#(.coverage)"/>
<pe:sheet id="someSheet" widgetVar="someSheetSheetWidget" value="#{itemActionsManagedBean.materials}" var="material"
extender="sheetExtender" height="300">
<pe:sheetcolumn headerText="Material Number" readOnly="true" value="#{material.materialNumber}" styleClass="coverage"
colWidth="250"/> </pe:sheet>
That won't work. OK remove that tooltip from inside the sheet and do this.
Add a custom style class coverage to the column like..
<pe:sheetcolumn headerText="Coverage Shape"
value="#{material.coverageShape}"
colWidth="250"
styleClass="coverage"
colType="dropdown"
selectItems="#{itemActionsManagedBean.getMapItems('coverageShape')}">
Add this global tooltip OUTSIDE of the sheet.
<pe:tooltip value="Coverage" atPosition="top" global="true" for="#(.coverage)" />
That should find every one of your cell values with coverage style and give it the tooltip.
Related
I use Slider xtype in dialog.xml
Is it possible to automatically display the value of this slider? for example - like a tooltip when the value changes
<slider
jcr:primaryType="cq:Widget"
fieldLabel="Tile Background Transparency"
name="./slider"
width="{Long}200"
value="42"
increment="1"
minValue="0"
maxValue="100"
xtype="slider"/>
You can use the sliderfield xtype which provides this functionality.
The useTips property allows to enforce the desired behaviour.
<slider
jcr:primaryType="cq:Widget"
fieldLabel="Tile Background Transparency"
name="./slider"
width="{Long}200"
value="42"
increment="1"
useTips="true"
minValue="0"
maxValue="100"
xtype="sliderfield"/>
Check out the docs for more information.
Primefaces (5.2, Mojarra 2.2.13) inside Dialog Framework is not opening a <p:confirm>-MessageBox.
I have delete icons in a datatable as a <p:commandLink> per row inside a Dialog.
I want to have a user confirmation to delete every row.
Following code works as expected in a <p:dialog> but not using Dialog Framework. Dialog Framework blocks the click on the delete icon or in other words: shows the confirm box invisible and answers NO.
<p:dataTable id="idTblMfc" value="#{bnMfcs.rows}" var="ORow" editable="true" ...>
... Columns ...
<p:column>
<p:commandLink styleClass="ui-icon ui-icon-trash" title="#{msg.TXT_DELETE}" actionListener="#{bnMfcs.doDelete(ORow)}" update="idTblMfc">
<p:confirm header="#{msg.TXT_DELETE}" message="#{msg.PRM_DEL_CONT_MARKED}" icon="ui-icon-alert" />
</p:commandLink>
</p:column>
I tried the same with <p:confirmDialog> instead of <p:confirm> with the same result. OK, I found the tiny difference that <p:confirmDialog> doesn't block the delete icon click but also does not appear.
The rest of the dialog and the datatable works as expected even with message boxen shown with showMessageInDialog(...).
Any ideas?
As you can see in the showcase (http://www.primefaces.org/showcase/ui/overlay/confirmDialog.xhtml), you need both p:confirm (where you need confirmation) and p:confirmDialog (which defines how the dialog looks like).
Also make sure that you are in a h:form tag.
Solution found!
The documentation makes not clear that <p:confirmDialog> is mandatory. I had one on my main page and the page using Dialog Framework had not.
Scenario: I used component and infront of autcomplete I used one command link with search image.
My purpose is to display cursor in autocomplete after clicking on commandlink.
My code is as follows:
Autocomplete:
<p:autoComplete id="senderAutocomplete" widgetVar="senderInfo"
value="#{customerReviewLazyDataModel.customerReviewVO.senderVO}"
completeMethod="#{customerReviewLazyDataModel.searchOrganizations}"
var="senderVO"
itemValue="#{senderVO}" converter="organizationConverterForCustomerReview"
size="60">
commandlink
<p:commandLink oncomplete="setFocus()" ajax="true">
<p:graphicImage value="/app-resources/themes/yob/images/search.png" style="margin-bottom: -4px;"></p:graphicImage>
</p:commandLink>
js function
function setFocus(){
document.getElementById("senderAutocomplete").focus();
}
Is there any solution for this problem?
The ID you are using to get the DOM-element for the input to focus is wrong. First of all you have to consider the id of the form. Additionally the id of the input of a p:autoComplete has a suffix _input. So use this:
document.getElementById("formId:senderAutocomplete_input").focus();
You should also set process="#this" on the commandButton, as you are just using it to focus the autoComplete.
I solved this problem adding a css style class and using jquery (which is included on Primefaces) to set the focus.
<p:autoComplete id="senderAutocomplete" widgetVar="senderInfo" ...
*styleClass="focusme"*
/>
And the commandlink would be like this:
<p:commandLink *oncomplete="$('.focusme').focus()"* ajax="true">
I have a tabView component and in each tab panel, I have a form.
I have also a flag image to change locale in my application and when it's clicked, I want to reload all tabView with new locale changes.
In one form in a tab panel, I use captcha component and I don't want to reload it because...it's impossible without all reload page (doesn't support partial Ajax reloading, I will use Recaptcha.reload() JS to do the job of reloading).
So I want to reload all my tabView component nested in panel component named...panel without my captcha.
my tabView is nested in panel named panel
my captcha has id captcha
My 2 locale change buttons are these one :
<p:commandLink update="#(:panel:not(captcha))" rendered="#{locale.locale != 'fr'}">
<h:graphicImage url="resources/images/flags/flag_fr.png" width="30" height="30" />
<f:setPropertyActionListener target="#{locale.locale}" value="fr" />
</p:commandLink>
<p:commandLink update=":panel" rendered="#{locale.locale != 'en'}">
<h:graphicImage url="resources/images/flags/flag_en.png" width="30" height="30" />
<f:setPropertyActionListener target="#{locale.locale}" value="en" />
</p:commandLink>
I have tested much combinaisons of selectors inside update attribute but without success.
Any selector idea please ? Thanks a lot
When you are using PFS you are referencing client id of the componenets. For example if client id of your panel is :panel, your selector will be #(#\\:panel) (you have to escape semicolon). Inspect your generated html and find out real client ids of your components. If the component is in naming container id of container is concatenated before id of child compoenent. For example if panel is naming container of your captcha it would be something like: #(#\\:panel:not(#\\:panel\\:captcha)). Forms are also naming container so probably your ids will have something more near this.
How does this code in the PrimeFaces DataTable row selection work?
<p:commandButton update=":form:display" oncomplete="confirmation.show()" image="ui-icon ui-icon-close" title="Delete">
<f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
</p:commandButton>
I am confused by the following: update=":form:display", and image="ui-icon ui-icon-close".
Is this inbuilt into Primefaces? or do I need to create an additional form, or have an external image mapped to it?
update=":form:display" refers to a specific element on the page. The first ':' goes to the root of the page, so there needs to be a component with the id "form" (probably a form) and inside that a component with the id "display". This means after the button actions has completed :form:display will be updated. Note that it's generally not a great idea to use absolute paths as they can be hard to keep up to date when you change the page structure. If the button is on the same level as the "display" component you could just do update="display", or you can do things like update="#form" to update the entire current form.
image="ui-icon ui-icon-close" refers to style classes in your css. These two comes predefined with primeface, but if you want to use custom graphics you can also define your own style classes for them.