Magento – Magento 2: Add attribute to customer grid

customer-attributecustomer-gridmagento2uicomponent

I want to show an custom attribute in the customers grid.

I created the customer attribute via upgrade script. The attribute is shown in adminhtml_customer so I can save values for this attribute.

Setup/UpgradeData.php

public function upgrade(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
{
    $setup->startSetup();

    /** @var CustomerSetup $customerSetup */
    $customerSetup = $this->_customerSetupFactory->create(['setup' => $setup]);

    if (version_compare($context->getVersion(), '0.2.0', '<')) {
        $customerSetup->addAttribute(Customer::ENTITY, 'phone_order_disallowed',  [
            'type'     => 'int',
            'backend'  => 'Magento\Customer\Model\Attribute\Backend\Data\Boolean',
            'label'    => 'Phone Order Disallowed',
            'input'    => 'boolean',
            'source'   => '',
            'visible'  => true,
            'required' => false,
            'default' => 0,
            'frontend' => '',
            'unique'     => false,
            'note'       => '',
            'adminhtml_only' => 1,
            'is_used_in_grid' => true,
            'is_visible_in_grid' => true,
            'is_filterable_in_grid' => true,
            'is_searchable_in_grid' => false,
            'position' => 130
        ]);

        $phone_order_disallowed = $customerSetup->getEavConfig()->getAttribute(Customer::ENTITY, 'phone_order_disallowed');
        $used_in_forms = array();
        $used_in_forms[]='adminhtml_customer';
        $phone_order_disallowed->setData('used_in_forms', $used_in_forms)
            ->setData('is_used_for_customer_segment', true)
            ->setData('is_system', 0)
            ->setData('is_user_defined', 1)
            ->setData('is_visible', 1)
            ->setData('sort_order', 130)
            ->save();
    }

    $setup->endSetup();
}

Now I read that I have to add etc/indexer.xml:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Indexer/etc/indexer.xsd">
    <indexer id="customer_grid">
        <fieldset name="customer">
            <field name="phone_order_disallowed" xsi:type="filterable" dataType="int"/>
        </fieldset>
    </indexer>
</config>

And view/adminhtml/ui_component/customer_listing.xml:

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="customer_columns" class="Magento\Customer\Ui\Component\Listing\Columns">
        <column name="phone_order_disallowed">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">select</item>
                    <item name="editor" xsi:type="string">select</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                    <item name="dataType" xsi:type="string">select</item>
                    <item name="label" xsi:type="string" translate="true">Phone Order Disallowed</item>
                    <item name="sortOrder" xsi:type="number">51</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

As you can see I can select the column, but it will be shown without values.
enter image description here

I already read some other questions here on StackExchange, but they couldn't provide the correct answer for me.

Best Answer

The solution of @bassplayer7 works for me.

So the correct view/adminhtml/ui_component/customer_listing.xml looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="customer_columns" class="Magento\Customer\Ui\Component\Listing\Columns">
        <column name="phone_order_disallowed">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">select</item>
                    <item name="editor" xsi:type="string">select</item>
                    <item name="label" xsi:type="string" translate="true">Phone Order Disallowed</item>
                    <item name="sortOrder" xsi:type="number">51</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

E. g. if you want to replace integer value with text use this <column> -node:

<column name="phone_order_disallowed" class="Vendor\Module\Ui\Component\Listing\Column\PhoneOrderDisallowed">