React-admin documentation suggests to filter data via referencing to another endpoint like:
<Filter {...props}>
<TextInput label="Search" source="q" alwaysOn />
<ReferenceInput
label="User"
source="userId"
reference="users"
allowEmpty
>
<SelectInput optionText="name" />
</ReferenceInput>
</Filter>
But in my case there is no need to refer to another endpoint and I would like to filter current list relying on data from this list:
<Filter {...props}>
<SelectInput label='Title' source='Title' allowEmpty/>
</Filter>
But the filter list is empty. How can I data from "title"? I will be grateful for any possible help.
Using the ReferenceInput will set the choices property of the SelectInput. If you want to use the SelectInput alone, you need to provide a choices property by yourself like
<SelectInput
choices={items.map(({ id, name }) => ({
id,
name
}))}
label="My Select"
source="userId"
/>
I'm setting an admin panel and listing the users that are registered in a platform.
In the listing page, when I click over the row I am linked to edit page. However, one of the fields is 'email' and I use EmailField to get advantage of validations, what it automatically creates an anchor tag with a mailto functionality.
For all the fields I am showing, 'email' is the unique field that has a link so, from the UX point of view, it invites to click it. And when I click over the link, the email client is opened. That is why I want to disable the link.
I could change to TextField, but I want to keep EmailField's validations. So, is there a way to avoid creating a mailto anchor over the email? I can't find it in the docs or in google.
export const UserList = props => (
<List bulkActionButtons={false} {...props} filters=
{<UserFilter/>} perPage={10} sort={{ field: 'email', order: 'ASC'
}} pagination={<UserPagination />} >
<Datagrid rowClick="edit">
<EmailField source="email" />
<BooleanField source="isAdmin" />
<EditButton />
<DeleteButton />
</Datagrid>
</List>
);
Thanks for your help.
I am using React Native and have a form like this :
<Form>
<Text>Password</Text>
<Label>
New Password
</Label>
<Item regular >
<Input />
</Item>
<Label style={styles.label}>
Confirm
</Label>
<Item regular >
<Input/>
</Item>
</Form>
<Button title="Update" onPress={() =>? } ></Button>
I need to check that the values in the input fields are the same, and check some restrictions that can be done using regular expressions.
How do I pass the values in the input fields so that I check in the controller?
I have done this using Angular in the past only.
It's my first time using react native, any guidance of best practice to do is is appreciated.
Thanks.
This problem is so basic that I suggest you to read React docs on forms: https://reactjs.org/docs/forms.html
Tell me if you have problems still when you have read the docs and tried implement the solution yourself :)
Goodmorning Stackoverflow,
I'm customizing the checkout onepage in Magento 2. Now I'm trying to display placeholders instead of labels in the shipping-address form, but no success till now. I hope someone can help me out
Cheers, Jorge
UPDATE:
In the console i can see a variable is giving to the attribute placeholder of the element input.
<input class="input-text" type="text" data-bind="
value: value,
valueUpdate: 'keyup',
hasFocus: focused,
attr: {
name: inputName,
placeholder: placeholder, // <<<< right here
'aria-describedby': noticeId,
id: uid,
disabled: disabled
}" name="street[0]" placeholder="" aria-describedby="notice-BVWUCFN" id="BVWUCFN">
Now i would like to know if theres is a way to modify this variable via the backend, so i can display label name in the placeholder attr.
See screenshot
Apoligies for my bad english
Standard way,
Copy all html files from vendor/magento/module-ui/view/frontend/web/templates/form/element/
at
app/design/frontend/<Vendor>/<theme>/Magento_Ui/web/templates/form/element/
Then change all Change placeholder: placeholder to placeholder: label as mention by Akis Verillis.
Now you need to deploy the static files by below code:
php bin/magento setup:static-content:deploy
And see the magic.
Note: If you have checkout from github then try copy from
/app/code/Magento/Ui/view/base/web/templates/form/element/
Change placeholder: placeholder to placeholder: label
The answer is in Magneto 2 documentation now:
http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_edit_form.html
The templates are the ones mentioned in previous answers.
The templates from magento-ui module are used in other places than checkout.
In your custom module directory, create a new /view/frontend/layout/checkout_index_index.xml file. In this file, add content similar to the following:
...
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
...
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<!-- The name of the form the field belongs to -->
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<!-- the field you are customizing -->
<item name="telephone" xsi:type="array">
<item name="config" xsi:type="array">
<!-- Assigning a new template -->
<item name="elementTmpl" xsi:type="string">%Vendor_Module%/form/element/%your_template%</item>
%Vendor_Module%/form/element/%your_template%
path is [your theme dir]/Vendor_Module/web/template/form/element/your_template.html
Clear browser cache too beside:
Delete all files in the pub/static/frontend and var/view_preprocessing directories.
If this is useful for you, the definition of that element is in:
/app/code/Magento/Ui/view/base/web/templates/form/element/input.html
It defines an input as:
<input
class="admin__control-text"
type="text"
data-bind="
value: value,
hasFocus: focused,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': noticeId,
id: uid,
disabled: disabled
}" />
You can add placeholder item to a layout.xml file for your field. Just like this:
<item name="address" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="config" xsi:type="array">
<item name="customScope" xsi:type="string">contactForm</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
</item>
<item name="placeholder" xsi:type="string">Address</item>
<item name="dataScope" xsi:type="string">address</item>
<item name="label" xsi:type="string">Address</item>
<item name="sortOrder" xsi:type="string">20</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="string">true</item>
</item>
I want to have an article picker in my custom module. A button and a form field like this one in add new article.
Is ist possible?
I tried this in my module xml:
<field name="article_id" type="modal_article" default="" label="Select an article" description="" />
But I only get a form input, not a button to choose an article.
You need to manually add the path to the modal article element.
In the < fieldset > element just above the modal_article field type, add the following attribute:
addfieldpath="/administrator/components/com_content/models/fields"
So your final xml would look something like this:
<fieldset name="basic" addfieldpath="/administrator/components/com_content/models/fields">
<field name="article_id" type="modal_article" default="" label="Select an article" description="" />