I tried following the steps here but I'm not sure if its something about my syntax or if it just doesnt work this way.
<aura:component controller="SomeController" implements="force:appHostable,flexipage:availableForAllPageTypes" access="global">
<aura:attribute name="data" type="List"/>
<aura:attribute name="columns" type="List"/>
<aura:attribute name="sortedBy" type="String" default="received"/>
<aura:attribute name="sortDirection" type="string" default="asc" />
<aura:attribute name="startDate" type="date" />
<aura:attribute name="endDate" type="date" />
<aura:attribute name="dataInRange" type="List" />
<aura:attribute name="isDateRange" type="boolean" default="false" />
<aura:handler name="init" value="{! this }" action="{! c.init }"/>
<lightning:card title="Agency Notices">
<div class="input-container">
<lightning:input id="start-date" type="date " name="startDate" label="Start date" value="{! v.startDate}" onchange="{! c.filterDateRange}"></lightning:input>
<lightning:input id="end-date" type="date " name="endDate" label="End date" value="{! v.endDate}" onchange="{! c.filterDateRange}"></lightning:input>
</div>
<div style="height: 300px">
<lightning:datatable
keyField="id"
data="{! v.isDateRange == true ? ! v.dataInRange : ! v.data }"
columns="{! v.columns }"
onsort="{!c.updateSorting}"
sortedBy="{!v.sortedBy}"
sortedDirection="{!v.sortDirection}"
hideCheckboxColumn="true"/>
</div>
</lightning:card>
</aura:component>
I want to conditionally set the data thats being used based on if there is a date range or not. but it doesnt like my syntax, I've also tried using
data="{!v.isDateRange ? !v.dataInRange : !v.data }"
and it doesnt work either.
Related
I need add attribute VALUE for input depending on the state of the parameter isValue
{this.state.isValue ?
<input type="text" id="amount" name="amount" value={this.state.amount} />
:
<input type="text" id="amount" name="amount" />
}
If I use this code - I have emtpy value in html code (if isValue = false)
<input type="text" id="amount" name="amount" value={this.state.isValue ? this.state.amount : null} />
Is it possible to do this in a more elegant way? For example, I try like this, but it doesn't work...
<input type="text" id="amount" name="amount" {this.state.isValue ? value=this.state.amount : null} />
Finally I found a solution. Too bad no one could help me.
<input type="text" id="amount" name="amount" {...(this.state.isValue ? {value: this.state.amount} : {})} />
I'm learning aura framework but I am facing an issue. I'm actually using nested layout with 4 fields but somehow it's only showing me top 2 fields. Can anyone please help me to show all those 4 fields?
Here is my code. As you can see there is a comment row 2 below that comment two fields are there that is not visible on my page.
Component
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
<div class="c-container">
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="12">
<div class="page-section page-header">
<h2>General Information</h2>
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="12">
<div class="page-main">
<lightning:layout>
<lightning:layoutItem padding="around-small" size="6">
<div class="slds-p-around_medium lgc-bg">
<lightning:input name="firstName" label="First Name" />
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="6">
<div class="slds-p-around_medium lgc-bg">
<lightning:input name="lastName" label="Last Name" required="true" />
</div>
</lightning:layoutItem>
<!-- This row 2 is not visible -->
<lightning:layoutItem padding="around-small" size="6">
<div class="slds-p-around_medium lgc-bg">
<lightning:input type="email" name="email1" value="abc#domain.com" label="Email" required="true" />
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="6">
<div class="slds-p-around_medium lgc-bg">
<lightning:input type="tel" label="Phone" name="phone" required="true" />
</div>
</lightning:layoutItem>
</lightning:layout>
</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small" size="12">
<div class="page-footer page-section">
<h2>Footer</h2>
</div>
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>
CSS
.THIS.c-container {
border: 1px solid #d8dde6;
margin: 10px 0 20px 0;
}
.THIS .page-section {
border: solid 1px #ccc;
padding: 1rem;
}
.THIS .page-header,
.THIS .page-footer {
height: 50px;
}
.THIS .page-main {
background: #f8f8f8;
}
.THIS .page-left,
.THIS .page-right {
background: #f0efef;
}
We refer to the size in lightning:layoutItem as per the grid. You can have up to 12 columns in your grid, so we choose the size accordingly.
Please replace this code with your code-
<lightning:layout>
<lightning:layoutItem padding="around-small" size="3">
<div class="slds-p-around_medium lgc-bg">
<lightning:input name="firstName" label="First Name" />
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="3">
<div class="slds-p-around_medium lgc-bg">
<lightning:input name="lastName" label="Last Name" required="true" />
</div>
</lightning:layoutItem>
<!-- This row 2 is not visible -->
<lightning:layoutItem padding="around-small" size="3">
<div class="slds-p-around_medium lgc-bg">
<lightning:input type="email" name="email1" value="abc#domain.com" label="Email" required="true" />
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="3">
<div class="slds-p-around_medium lgc-bg">
<lightning:input type="tel" label="Phone" name="phone" required="true" />
</div>
</lightning:layoutItem>
</lightning:layout>
Please visit the link below to know more about Grid in Aura.
https://www.lightningdesignsystem.com/utilities/grid/
Thanks
Is there anyway to add a name and ID attribute to Flatpicker? When I add it in the code, it gets removed when rendered in the browser.
Code:
<Flatpickrdatetime type="monthSelect" id="startDate" name="startDate" onChange={this.handleChange} />
Rendered:
<input class="makeStyles-flatpickr-62 form-control input" placeholder="mm/yy" tabindex="0" type="text">
What I would like when rendered:
<input class="makeStyles-flatpickr-62 form-control input" placeholder="mm/yy" tabindex="0" type="text" name="startDate" id="startDate">
I have an xml in sql server which is like:
<Student version="2">
<Section name="Report">
<Glossary>
<Item name="Some text"</Item>
</Glossary>
<InputNumber type="int" min="0" max="100" title="Maths" format="normal" description="Marks obtained in Maths out of 100">
<Value>70</Value>
</InputNumber>
<InputNumber type="int" min="0" max="100" title="Science" format="normal" description="Marks obtained in Science out of 100">
<Value>60</Value>
</InputNumber>
<InputNumber type="int" min="0" max="100" title="English" format="normal" description="Marks obtained in English out of 100">
<Value>80</Value>
</InputNumber>
<InputNumber type="float" min="100" max="100" title="Total " format="normal" description="Total of all subjects marks added together.">
<Value/>
</InputNumber>
<InputNumber type="int" min="0" max="10000" title="How many students in the class?" format="normal" description="total students>
<Value>19</Value>
</InputNumber>
<InputNumber type="int" min="0" max="100" title="How many subjects are there?" format="normal" description="total subjects">
<Value>3</Value>
</InputNumber>
</Section>
<Section>
....
</Section>
</Student>
Here, In the value of /Student[1]/Section[1]/InputNumber[4] which is sum of all the marks in all the subject is to be filled which will be 210 in this case.
How can I take sum of values in the nodes: /Student[1]/Section[1]/InputNumber[1], /Student[1]/Section[1]/InputNumber[2], /Student[1]/Section[1]/InputNumber[3] and assign it to /Student[1]/Section[1]/InputNumber[4].
I guess there will be simple way of doing this, but here is one variant:
DECLARE #DataXML XML;
SET #DataXML = '<Student version="2">
<Section name="Report">
<Glossary>
<Item name="Some text"></Item>
</Glossary>
<InputNumber type="int" min="0" max="100" title="Maths" format="normal" description="Marks out of 100">
<Value>70</Value>
</InputNumber>
<InputNumber type="int" min="0" max="100" title="Science" format="normal" description="Marks out of 100">
<Value>60</Value>
</InputNumber>
<InputNumber type="int" min="0" max="100" title="English" format="normal" description="Marks out of 100">
<Value>80</Value>
</InputNumber>
<InputNumber type="float" min="100" max="100" title="Total " format="normal" description="Total of all subjects marks added together.">
<Value />
</InputNumber>
<InputNumber type="int" min="0" max="10000" title="How many students in the class?" format="normal" description="total students">
<Value>19</Value>
</InputNumber>
<InputNumber type="int" min="0" max="100" title="How many subjects are there?" format="normal" description="total subjects">
<Value>3</Value>
</InputNumber>
</Section>
</Student>';
SET #DataXML.modify('insert text{sum(./Student[#version="2"]/Section[#name="Report"]/InputNumber[#description="Marks out of 100"]/Value)} into (./Student[#version="2"]/Section[#name="Report"]/InputNumber[#description="Total of all subjects marks added together."]/Value)[1]');
SELECT #DataXML;
The idea is to insert text for this node:
(./Student[#version="2"]/Section[#name="Report"]/InputNumber[#description="Total of all subjects marks added together."]/Value)[1]
and the text is simple the some of these ones:
sum(./Student[#version="2"]/Section[#name="Report"]/InputNumber[#description="Marks out of 100"]/Value)
I don't like selecting the nodes using the description tag value. It will be better if you have another way.
Also, it will be nicer if you have these data normalized in SQL tables and built this XML using FOR XML clause before it is send to the application.
You can filter the nodes for the some like this:
SET #DataXML.modify('insert text{sum(./Student[#version="2"]/Section[#name="Report"]/InputNumber[#title="Maths" or #title="Science" or #title="English"]/Value)} into (./Student[#version="2"]/Section[#name="Report"]/InputNumber[#description="Total of all subjects marks added together."]/Value)[1]');
using the titles:
(./Student[#version="2"]/Section[#name="Report"]/InputNumber[#title="Maths" or #title="Science" or #title="English"]/Value)
It will be better to add a type of the input and filter by it - for example add attribute type=mark.
I am working on Redux form. I am facing some issue with dropdown values.When I select some dropdown value, I am not getting the selected value onSubmit of the form.What could be the issue?
export class AddRecipientForm extends React.Component {
onSubmit(values) {
console.log(values)
const recipient = Object.assign({}, values);
return this.props.dispatch(addRecipient(recipient));
}
render() {
if (this.props.submitSucceeded === true) {
return (
<div>
<Redirect to={`/dashboard`} />
</div>
);
}
return (
<div>
<form
className="add-recipient-form"
aria-label="add new recipient form"
onSubmit={this.props.handleSubmit(values => this.onSubmit(values))}>
<label htmlFor="name">Name</label>
<Field component="input" name="name" type="text" />
<label htmlFor="relationship">Relationship</label>
<Field component="input" type="text" name="relationship" required />
<label htmlFor="occassion">Occassion</label>
<Field component="input" type="text" name="occassion" required />
<label htmlFor="giftDate">Gift Date</label>
<Field component="input" type="date" name="giftDate" required />
<label htmlFor="gift">Gift</label>
<Field component="input" type="text" name="gift" required />
<label htmlFor="budget">Cost</label>
<Field component="input" type="number" name="budget" required />
<label
htmlFor="status">
Gift Status
</label>
<Field component={select} name="status" required>
<option value="notPurchased">Not Purchased</option>
<option value="purchased">Purchased</option>
<option value="gifted">Gifted</option>
</Field>
<button type="submit">Submit</button>
<Link to="/dashboard">
<button type="button" aria-label="go back">
Back
</button>
</Link>
</form>
</div>
);
}
}
AddRecipientForm = reduxForm({
form: 'addRecipient'
// onSubmitFail: (errors, dispatch) => {
// console.log(`Error: ${JSON.stringify(errors)}`);
// dispatch(focus('addRecipient', Object.keys(errors)[0]));
}
)(AddRecipientForm);
export default AddRecipientForm;
I am getting other values except the dropdown values. Replaced Field with select but still its not working
Finally fixed the issue by including default dropdown value.
<option key={2333333} value={''}>Please Select</option>
But still wonder why does it require default dropdown