I am using GWTBootstrap3 ,
I have a textArea , I entered 3 different rows in my text area
But when i display it somewhere it all comes in 1 single row
I thought GWtbootstrap3 textArea will handle the multiLine itself , am i wrong , do i need to do something for this.
please guide
<b:Column size="XS_12,SM_6,MD_6,LG_4">
<b:FormGroup ui:field="formRemarks">
<b:FormLabel for="remarksForm" ui:field="remarksForm" >
<ui:msg meaning="remarks">Remarks</ui:msg></b:FormLabel>
<b:TextArea name="remarks" debugId="remarks" ui:field="remarks" />
</b:FormGroup>
</b:Column>
Replace existing TextArea line with below:
<b:Column size="XS_12,SM_6,MD_6,LG_4">
<b:FormGroup ui:field="formRemarks">
<b:FormLabel for="remarksForm" ui:field="remarksForm" >
<ui:msg meaning="remarks">Remarks</ui:msg></b:FormLabel>
<b:TextArea name="remarks" rows="4" debugId="remarks" ui:field="remarks"></b:TextArea>
</b:FormGroup>
</b:Column>
Related
How do I link a graph using a state to a form, so when the form changes the graph is automatically updated as well, even the form is not submitted yet? The graph is just using showCarrot to generate a chart.js element.
I found initialValues as fields for forms but do not know how to clue this all together. Anyone can help to save me from insanity?
Update: I figured that Ant Design form is based on field-form, still not know how this helps but it is a trail.
That's the state I set and propagate to my form and my graph
const [showCarrot, setCarrot] = useState<ICarrotArray>([]);
That's my form and table to edit the data
<Form form={form} initialValues={showCarrot} onFinish={onFinish}>
<Table
dataSource={showCarrot}
rowKey={"id"}
pagination={false}
bordered
footer={(): React.ReactElement => {
return (
<Button onClick={addCarrot}>
<PlusOutlined /> Add Carrot
</Button>
);
}}
>
...
</Table>
<br />
<Row justify="end">
<Form.Item>
<Button type="default" onClick={onReset}>
Restore
</Button>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" style={{ marginLeft: 8 }}>
Save
</Button>
</Form.Item>
</Row>
</Form>
Firstly I just want to understand, correct me if I'm wrong.
You set your initialValues for form which is showCarrot. Is it mean that initialValues set for some Form.Item, because usually object element inside initialValue is used as data for Form.Item by their name.
Like so
<Form
name="validate_other"
{...formItemLayout}
onFinish={onFinish}
initialValues={{
['input-number']: 3, //name of the Form.Item
['checkbox-group']: ['A', 'B'],
rate: 3.5,
}}
>
<Form.Item label="InputNumber">
<Form.Item name="input-number" noStyle>
<InputNumber min={1} max={10} />
</Form.Item>
<span className="ant-form-text"> machines</span>
</Form.Item>
But by your code it look you want set showCarrot only as table data. If so, I can't find columns in your table, look like currently error because of that. You should add there dataIndex param which will listen for your data elements by that name
i'm looking for a way to add a text between the button of 'semantic:negativeAction' and the button of 'semantic:positiveAction' in the footer of a semantic content within a semantic page of 'sap.f.semantic' .
<semantic:positiveAction>
<semantic:PositiveAction text="+"/>
</semantic:positiveAction>
<semantic:negativeAction>
<semantic:NegativeAction text="-" />
</semantic:negativeAction>
Have you considered using customFooterContent aggregation in semantic page for footer
<semantic:customFooterContent>
<Button text="Approve" type="Accept" press="onAcceptPress"/>
<Label text="Test Text between two buttons"></Label>
<Button text="Reject" type="Reject" press="onRejectPress"/>
</semantic:customFooterContent>
Link:
https://sapui5.hana.ondemand.com/#/api/sap.m.semantic.SemanticPage
We would like to change the color of a particular bar in the chart. Can someone share a code snippet to achieve the same? If we use color-pallete aggregation then color change is getting reflected to all the bars.
We are using makit library, please note that we had tried the same with viz library also.
Snippet from XML view:
<ma:Chart id="idChart1" height="50%" width="100%" type="Column"
rows="{/}" showRangeSelector="true"
showTableView="false" showTotalValue="false">
<ma:category>
<ma:Category column="type" displayName="Product" />
</ma:category>
<ma:values>
<ma:Value expression="tickets" displayName="Gross Value"
format="number" />
</ma:values>
<ma:columns>
<ma:Column name="type" value="{BillCycle}" />
<ma:Column name="tickets" value="{Volume}" type="number" />
</ma:columns>`enter code here`
</ma:Chart>
Regards,
DR
<rich:dataTable id="companyList" var="company"
value="#{companyList.resultList}"
rowClasses="odd-row, even-row"
rendered="#{not empty companyList.resultList}">
<rich:column width="25px" style="text-align:center;">
<f:facet name="header">#{messages.Edit}</f:facet>
<a4j:commandLink reRender="companyPanel"
oncomplete="#{rich:component('companyPanel')}.show()"
style="align: center;"> <f:setPropertyActionListener target=
"#{companyHome.instance}"
value="#{company}" />
<rich:toolTip value="#{messages.Edit}" />
</a4j:commandLink>
</rich:column>
<h:column>
<f:facet name="header">
#{messages.companyName}</f:facet>
#{company.companyName}
</h:column>
</rich:dataTable>
Hi I have some problem my rich datatable. All operation work normally , I search some data in dataTable ,I get true list in datatable but, If I try to update some data in column , wrong instance coming. Forexample , I choose banana which name is my data , but it brings before searching data not bring banana. I do not understand why. Sorry my english.
Not sure but, have you tried this
<f:setPropertyActionListener target="#{companyHome.id}" value="#{company.id}" />
instead of
<f:setPropertyActionListener target="#{companyHome.instance}" value="#{company}" />
I have a datatable which loops through a List and has a value column which renders as such:
<h:dataTable var="assessmentFieldValue" value="#{assessmentBean.assessmentFieldValues}">
...
<ui:fragment rendered="#{assessmentFieldValue.field.type eq 'TEXT'}">
<h:inputText value="#{assessmentFieldValue.value}" />
</ui:fragment>
<ui:fragment rendered="#{assessmentFieldValue.field.type eq 'SLIDER'}">
<component:slider value="#{assessmentFieldValue.value}" />
</ui:fragment>
...
</h:dataTable>
So sometimes I get a standard inputText, sometimes I get my composite slider component:
<composite:interface>
<composite:attribute name="value" />
</composite:interface>
<composite:implementation>
<script type="text/ecmascript">
function updateValue(value) {
$('##{cc.id} span').each(function() {
$(this).text(value);
});
}
</script>
<div id="#{cc.id}">
<input id="sliderComponent" type="range" min="1" max="10"
value="#{cc.attrs.value}"
style="float: left"
onchange="javascript:updateValue(this.value);" />
<h:outputText id="fieldValue" value="#{cc.attrs.value}"
style="min-width: 20px; display: block; float: left" />
</div>
</composite:implementation>
This all renders as I would like it too (deployed on JBoss-AS7), but when I hit the save button associated with the datatable the assessmentBean.assessmentFieldValue List doesn't reflect any value changes on the slider component yet it does for the standard inputText.
Can anyone suggest why changes to the slider aren't making it back to the backing bean? Thanks!
That's because you used a plain HTML <input> element instead of a fullworthy JSF input component like <h:inputText>. This way the value is in no way bound to the JSF context. It's only treated as plain vanilla template output value, not as input value. A composite component isn't going to solve this. You really need to create a fullworthy UIComponent for this (or to look for a 3rd party component library which has already done the nasty job for you, such as PrimeFaces with its <p:slider>).
See also:
When to use <ui:include>, tag files, composite components and/or custom components?