I have a Material-UI <Autocomplete /> component I am using where you can type in someone's name and it will provide a list of people to select from. This is a pretty standard use case, however I need the selected item in the form to be different than the label.
Currently if you pick the entry labelled "John Smith", the text field will be filled with "John Smith". Instead, I want to fill the text field with that user's ID.
The data for autocomplete is an array of objects like this:
{ "name": "John Smith", "id": 123456789 }
How can I make the autocomplete component put the user ID in the text field instead of the user label?
You can customize renderOption props in Material-UI Autocomplete
Render the option, use getOptionLabel by default.
Signature: function(option: T, state: object) => ReactNode
option: The option to render.
state: The state of the component.
As for the code
getOptionLabel={option => option.name}
renderOption={(option) => <span>{option.name}</span>}
Refer to the demo in an official document
If you just want to display name in Textfield, You could try this
getOptionLabel={option => option.id}
renderOption={option => <>{option.name}</>}
If you want to display name in TextField and OptionLabel but want to get id as value of TextField in order to store id after form submission.
You could try this
getOptionLabel={(option) => option.name}
renderOption={(option) => (
<>
{option.name} ({option.surname})
</>
)}
onChange={(event, newValue) => {
setValue(newValue);
setCustomValue(newValue.id);
}}
using onChange event you could select any field of the option you want to get as value.In this example I stored id of the option in the state.
Complete working example is here https://codesandbox.io/s/material-demo-forked-wlzr8?file=/demo.js:804-1084
Related
I need to add data-test attribute to column header for automated testing of different operations, such as sorting, filtering etc., so that scripts could find where to click.
How it can be done? I would like to keep all the functionality of default headers, just add the attribute.
Thanks!
You can use the renderHeader and pass the attributes you want like below:
columns={[
{
field: "name",
renderHeader: (params) => (
<span data-testid="header-test-id"> // Here pass your data-testid
{"Header with attr "}
</span>
)
}
]}
I've got checkboxes and selects where label is different to its value.
In the DB the value is saved ok, however, when viewing Form Entries (and pre-submit form data) for all the checkboxes and selects the values are displayed not labels. So I end up with not so informative IDs rather than names.
Is there a way to display labels instead of values in the Form Entries screen?
I came across your question while looking to do the same thing. I have a field called Account Type that stores the account type ID as the value. In the entries list I want to show the account type name, not the ID.
Here's the solution:
In your theme's functions.php file add the following filter:
add_filter( 'gform_entries_column_filter', 'modify_entry_view', 10, 5 );
You'll find the documentation for it here: https://docs.gravityforms.com/gform_entries_column_filter/
Then add the function code:
function modify_entry_view( $value, $form_id, $field_id, $entry, $query_string ){
//- Check the field ID to make sure you only change that one
if( $field_id == 14 ){
return 'modified value';
};
return $value;
}
In my case I'm using a custom field that I created called account_type that prepopulates a select menu with choices corresponding to each of the account types in our system. I used the following call to check the field type instead of checking based on field id since the id will change from form to form:
if( RGFormsModel::get_field( $form_id, $field_id )->type == 'account_type' ){
You could do the same thing but use the label property instead of type, like:
if( RGFormsModel::get_field( $form_id, $field_id )->label == 'Field Label' ){
In my case the value saved is a term id from a custom taxonomy I set up called account_type, so I simply use:
return get_term_by( 'id', $value, 'account_type' )->name;
to replace the account id with the account name.
FYI: The process is the same for the entry detail, use the filter documented here: https://docs.gravityforms.com/gform_entry_field_value/
I have a list and I try to create form for each item to submit them separately, each row is add dynamically. I use compose() to create each name of form dynamically, like this :
return {
formName: ownProps.form
}
And I pass the form name like this in my child component (item of list), list arrive from the reducer :
list.map((item, index) => (
<RowAuthorizations form={`${formName}[${index}]`} onSubmit={this.submitRowAuthorization} />
))
When i try to refresh my list fields without selected value from the reducer :
tenant.users.filter((x) => x.id !== action.payload.id)
Values of the field has been deleted but registeredFields reappear when my component re render the list without the deleted value.
When I add the field :
When I remove the field :
Finally, I solved my problem :
You need to add a nested object and add destroyOnUnmount: true (Defaults to true if you change it to false).
registeredField overrided each field when it was already mounted that's why my field has doesn't unregistered.
If you want to create a list and submit each row independently (each row is a form) you need to add a dynamic name to the form with mapStateToProps (dynamic name passed from the container) and recovered by an intermediate component like this :
return {
formName: ownProps.form
}
This formName need to be passed has a prop to each child (Form Row):
{ list.map((item, index) => {
return <RowAuthorizations form={`${formName}[${index}].${name}`} onSubmit={this.submitRowAuthorization} />
})
}
name is the sub object which contain registeredField, values,... so you have user[0].user.values unlike that user[0].values
If you use formReducer.plugin({}) and you want to manage form from your reducer for this case follow this steps.
Let me know, if i'm right.
I have few fields on the form like name, description, timestamp.
Now in the form I am only displaying name and description but not timestamp.
public function __construct()
{
$this->setTimestamp(new \DateTime());
}
Now in my database, it is coming as null.
Either doctrine is not executing constructor or those fields are set to null when displayed in form.
Even though I am not displaying them.
You need put the timestamp field in your FormType.
If you don't need to show it, just hide the field and set default value.
Something like that:
$builder->add('timestamp', 'hidden', array(
'data' => new \DateTime(),
));
Don't forget {{form_rest(form)}} at end of the twig template to send all hidden fields.
For testing purposes I am trying to write a script using WWW::Mechanize that would login to Gowalla via https://api.gowalla.com/signin
As I can see the login form does not have a "name" attribute but it has an "id" attribute.
Mech has a "submit_form" method that can get the name as a parameter but I don't see it accepting the id as a parameter.
So would that be then
$w->form_id('form_signin');
$w->submit_form(
fields => {
username => $username,
user_session_password => $password,
});
You've selected the form via id attribute, but that doesn't allow you to use id attribute to select fields, this should fix your code:
$w->submit_form(
fields => {
user_session[username] => $username,
user_session[username] => $password,
});
If you get an error, enclose the field names in single quotes, not sure whether the square brackets will be a problem.
WWW::Mechanize sets the focus onto the single form automatically. You can submit it with $m->click('') or $m->submit();