combining rich:inplaceInput with rich:suggestionbox - jsf

We want to pre-fill our richfaces suggestion-box with a inplace text.
Are there any recommendations on how to do this? I think, simple replacement of h:inputText to rich:inplaceInput will not work.
<h:inputText id="field" value="#{form.field}" required="true" /><rich:in
<rich:suggestionbox id="suggestionBoxId" for="field" suggestionAction="#{suggestion.autocomplete}" var="result" fetchValue="#{result.zip} #{result.cityName}" minChars="3">
<h:column>
<h:outputText value="#{result.text}" />
</h:column>
</rich:suggestionbox>

If I understand the question correctly, you could simply define form.field as whatever you want to pre-fill with in the #PostConstruct method of the form bean. Or even the constructor, really.

Related

JSF 2 h:dataTable with inputText values binded to List. Values not updating [duplicate]

This question already has an answer here:
Using <ui:repeat><h:inputText> on a List<String> doesn't update model values
(1 answer)
Closed 7 years ago.
I'm trying to display the data from a List contained in a bean via a datatable, and have actions performed by code as the user types. It initially displays ok, and changes to the List are reflected in UI.
My issue is that values entered into the inputText are ignored. Tried looking for solutions, I've tried checking the List as the values changed, and also tried to check without the ajax in case that was the issue (no change). Have tried using session and view scoped bean without luck. Tried wrapping the Strings in a POJO.
Going crazy here. Feel like I'm missing something obvious. Any idea?
<h:dataTable id="multioptionanswers"
value="#{multiTextBean.texts}" var="texts">
<h:column>
<f:facet name="header">
<h:outputText value="Enter Values"></h:outputText>
</f:facet>
<h:inputText value="#{texts}" immediate="true">
<f:ajax event="blur" execute=":addgroup"
render=":addgroup"
listener="#{multiTextBean.update}" />
</h:inputText>
</h:column>
</h:dataTable>
**addgroup is a panel group that the data table resides in.
Worked it out, needed change to how the inputtext read the data. Solution below in case it helps someone :
<h:dataTable id="multioptionanswers" binding="#{table}"
value="#{multiTextBean.texts}" var="texts">
<h:column>
<f:facet name="header">
<h:outputText value="Enter Values"></h:outputText>
</f:facet>
<h:inputText
value="#{multiTextBean.texts[table.rowIndex]}">
<f:ajax event="blur" execute=":addgroup" render=":addgroup"
listener="#{multiTextBean.update}" />
</h:inputText>
</h:column>
</h:dataTable>

JSF2 Building Dynamic EL Expressions

I am working on creating a dynamic table using JSTL forEach and a h:dataTable and have all of the controls and potential error message showing nicely, but am now stuck on getting the value set for each of the control. I will need to create (I think) a dynamic EL expression to set the value, but have not been able to get any of my versions to work. I was hoping to build out the expression using c:out, but found out that that tag is not available in JSF2.
So, is it possible to build a dynamic expression in the page?
How can I set the expression in the backing bean if the control hasn't been built yet ?
<h:dataTable id="dtDetails" styleClass="slate_table" value="#{remediationDetail.eventList}" var="dataItem">
<c:forEach items="#{remediationDetail.eventHeaders}" var="key">
<h:column>
<f:facet name="header">#{key.fieldDefinition.fieldConfiguration.customLabel}</f:facet>
<h:inputText value="" id="txtNumber" styleClass="remediation_textbox error_marker" title="#{remediationDetail.errorMessages(dataItem.id, key.fieldDefinition.id)}">
<f:convertNumber maxFractionDigits="0" maxIntegerDigits="19"/>
</h:column>
</c:forEach>
</h:dataTable>
As always, any help or direction is appreciated.
Regards,
Mike
I was not being able to create a Dynamic EL Expression. So, I ended using the index of the c:forEach to help define what values I am looking for. The only catch for this result is that I would be expecting the data that I am about to display to have the same number of positions in the array.
<c:forEach items="#{remediationDetail.eventHeaders}" var="key" varStatus="looper">
<h:column>
<f:facet name="header">#{key.fieldDefinition.fieldConfiguration.customLabel}</f:facet>
<h:inputText id="txtNumber" value="#{dataItem.entityList[looper.index].val}">
<f:convertNumber maxFractionDigits="0" maxIntegerDigits="19"/>
</h:inputText>
</h:column>
</c:forEach>
In my case the following helped to build dynamic EL.
<ui:param name="beanName" value="myBackedBean"/>
<ui:param name="propertyName" value="field1"/>
<ui:param name="nestedPropertyName" value="field1"/>
<p:inputTextarea value="#{sessionScope[beanName][propertyName][nestedPropertyName]}"/>
Inspired of this topic

Dynamically change input type

I am using JSF 2.2. I am trying to build an exam system. Some questions have 1 right answer, others have multiple right answers. According to this, my view should show radio buttons or checkboxes. I have one hard coded example in my XHTML page:
<h:dataTable value="#{main.answerList}" var="list">
<h:column>
<h:selectBooleanCheckbox id="checkboxAnswer" value="#{list.check}"/>
<h:outputText value="#{list.ansValue}"/>
</h:column>
</h:dataTable>
How can I change between radio buttons and checkboxes, depending on the question type?
Just use the rendered attribute to toggle between the input types depending on the question type. The code (the variable names) in your question is not self-documenting, so I'm making changes on that as well, so that it becomes more self-documenting and it's immediately obvious what each of those properties represent.
<h:dataTable value="#{bean.questions}" var="question">
<h:column>
<h:selectOneRadio value="#{question.selectedAnswer}" rendered="#{question.type == 'SINGLE_CHOICE'}">
<f:selectItems value="#{question.availableAnswers}" />
</h:selectOneRadio>
<h:selectManyCheckbox value="#{question.selectedAnswers}" rendered="#{question.type == 'MULTIPLE_CHOICE'}">
<f:selectItems value="#{question.availableAnswers}" />
</h:selectManyCheckbox>
</h:column>
</h:dataTable>
The #{question.type} should represent an enum with the mentioned values.

Nested datatable in JSF 2.0

I am trying to fetch the questions and the associated answers. I am able to get the questions fine but the nested datatable does not even recognize the properties each answer has, and this is also pointed out by the IDE as well. Maybe this is not the right way to go about this. How do I iterate over the answers associated with each question ?
<h:dataTable value="#{questionBacking.recentlyAskedQuestions}" var="questions"
rendered="#{questionBacking.recentlyAskedQuestions.size() > 0}"
border="1">
<h:column>
<h:outputText value="#{questions.questionTitle}" />
<br/>
<h:outputText value="#{questions.questionBody}" />
</h:column>
<h:dataTable value="#{questions.answers}" var="answers">
<tr>
<h:outputText value="#{answers.answer}" />
</tr>
</h:dataTable>
</h:dataTable>
You need to put columns inside a <h:column>.
<h:dataTable value="#{questionBacking.recentlyAskedQuestions}" var="question" rendered="#{not empty questionBacking.recentlyAskedQuestions}">
<h:column>
<h:outputText value="#{question.questionTitle}" />
<br/>
<h:outputText value="#{question.questionBody}" />
</h:column>
<h:column>
<h:dataTable value="#{question.answers}" var="answer">
<h:column>
<h:outputText value="#{answer.answer}" />
</h:column>
</h:dataTable>
</h:column>
</h:dataTable>
(note that I changed the rendered and the var attributes to be a bit more self-documenting, you might want to rename questionTitle, questionBody and answer to title, body and body respectively as well so that you don't keep duplicating the meaning)
You can do the same thing mentioned in BalusC's answer using PrimeFaces as well. Just replace <h:dataTable> with <p:dataTable> and the same goes for column tags as well. You can create nested datatable with PrimeFaces. I recommend people to use PrimeFaces as it reduces the amount of time people spend on writing/modifying css definitions.

jsf 2 composite component problem when use f:facet

I am new to JSF, so I have many problems with it. I have solved much, but now I have a problem when I make composite component of column.
This is the code:
myPage.xhtml:
<h:dataTable >
<util:myCol />
</h:dataTable>
myCol.xhtml:
<composite:interface>
</composite:interface>
<composite:implementation>
<h:column>
<f:facet name="header" >
<h:outputText value="user name" />
</f:facet>
<h:outputText value="some data" />
</h:column>
</composite:implementation>
The problem is that the column does not render.
So I have changed a little in code:
myPage.xhtml:
<h:dataTable >
<h:column>
<util:myCol />
</h:column>
</h:dataTable>
myCol.xhtml:
<composite:interface>
</composite:interface>
<composite:implementation>
<f:facet name="header" >
<h:outputText value="user name" />
</f:facet>
<h:outputText value="some data" />
</composite:implementation>
Here the column renders, but the header "user name" does not appear.
How to solve the problem? Thanks in advance.
Case 1:
dataTable only treats column control children as columns. You are adding a composite control to the dataTable and a the column to the composite control.
Case 2:
The problem is probably to do with where the facets are set. These are set on a map on the parent control. The control you are adding the header facet to is the composite control, not the column.
Note: the links are to JSF 1.2 (JEE5) stuff, but the principle still applies.
I don't know if you still follow this thread, but we had problems inserting facets due to a bug.
Starting the content inside the facet with a comment (server side comment < ! - - - - > ) may solve the problem showing the content. We encountered problems with facets having one liners in there.. putting an extra comment as the first statement is the workaround for the problem.
Kind regards,
Gijs
Does it render correctly when you have all of the JSF on one page? Setting up your JSF on a single page at first can be helpful to make sure that the basics are right; after that works, you can break it up into composite components.
Also, I have noticed (using JSF and Richfaces) that sometimes you can't separate 'parents' and 'children' at times; a rich:toolBar and it's rich:toolBarGroup's need to be on the same actual page, for example. I haven't worked with Facelets much so you might have a different situation.
Best of luck.
Edit:
Try pulling the header out of the composite control, i.e.:
<h:dataTable >
<h:column>
*HEADER_FACET_GOES_HERE*
<util:myCol />
</h:column>
</h:dataTable>
Use composite:facet in interface and composite:renderFacet or composite:insertFacet in implementation.
<composite:interface>
<composite:facet name="foo"/>
<composite:attribute name="value"/>
</composite:interface>
<composite:implementation>
<h:inputText id="value" value="#{cc.attrs.value}"/>
<composite:renderFacet name="foo"/>
<composite:insertChildren/>
</composite:implementation>

Resources