Custom grid with modifications in backend of Magento 2 - php

Question

I’m newbie Magento2 developer.
Now I’m making one small module and I’m stuck in one place.
I built admin grid with founded example and here is my di.xml:
<preference for="Magento\Catalog\Model\Product" type="Vendor\Module\Model\Product" />
<virtualType name="Vendor\Module\Model\ResourceModel\Grid\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
<arguments>
<argument name="mainTable" xsi:type="string">vendor_module</argument>
<argument name="resourceModel" xsi:type="string">Vendor\Module\Model\ResourceModel\Grid</argument>
</arguments>
</virtualType>
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<arguments>
<argument name="collections" xsi:type="array">
<item name="grid_record_grid_list_data_source" xsi:type="string">Vendor\Module\Model\ResourceModel\Grid\Grid\Collection</item>
</argument>
</arguments>
</type>
And also I use layout XML file with hardcoded columns inside:
...
<column name="customer" >
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">false</item>
<item name="label" xsi:type="string" translate="true">Customer</item>
</item>
</argument>
</column>
...
My table has columns like: product id, customer id, price, status
And my questions are:
How do I transform customer id to first+last name?
Column “status” has 3 different states (0, 1 and 2) - how do I convert them to human-readable words? (undefined, good, bad)
How to add to same grid another column for example $price + 10%?

Answer 1

Within the component XML you can define a UI class to assist in displaying custom/readable data within Magento 2. There are a number of examples within core, such as the thumbnail being displayed on the Catalog grid view.
Using that as an example, here's the column definition within catalog/view/adminhtml/ui_component/product_listing.xml:
<column name="thumbnail" class="Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/thumbnail</item>
<item name="add_field" xsi:type="boolean">true</item>
<item name="sortable" xsi:type="boolean">false</item>
<item name="altField" xsi:type="string">name</item>
<item name="has_preview" xsi:type="string">1</item>
<item name="label" xsi:type="string" translate="true">Thumbnail</item>
<item name="sortOrder" xsi:type="number">20</item>
</item>
</argument>
</column>
As you can see there are several arguments which can be passed to the column definition, including a component which depends on the type of data you're trying to display. In this case, it is a thumbnail. Reviewing that JS file reveals that it is logic to pull out the data being set in the below method to be displayed as the actual thumbnail. This is not necessarily a requirement.
Within the defined class on the column tag, you see Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail. This is a class which defines helper methods for the way the data is to be displayed, as well as parsing the data to be displayed in such a way that the defined column component can properly render it.
Pay close attention to the method within that class, prepareDataSource:
/**
* Prepare Data Source
*
* #param array $dataSource
* #return array
*/
public function prepareDataSource(array $dataSource)
{
if (isset($dataSource['data']['items'])) {
$fieldName = $this->getData('name');
foreach ($dataSource['data']['items'] as & $item) {
$product = new \Magento\Framework\DataObject($item);
$imageHelper = $this->imageHelper->init($product, 'product_listing_thumbnail');
$item[$fieldName . '_src'] = $imageHelper->getUrl();
$item[$fieldName . '_alt'] = $this->getAlt($item) ?: $imageHelper->getLabel();
$item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
'catalog/product/edit',
['id' => $product->getEntityId(), 'store' => $this->context->getRequestParam('store')]
);
$origImageHelper = $this->imageHelper->init($product, 'product_listing_thumbnail_preview');
$item[$fieldName . '_orig_src'] = $origImageHelper->getUrl();
}
}
return $dataSource;
}
You would use this method to format the data you're displaying into the format you need.
For instance, the way Price is displayed on the catalog grid (formatted to the proper currency) through their defined column class is:
public function prepareDataSource(array $dataSource)
{
if (isset($dataSource['data']['items'])) {
$store = $this->storeManager->getStore(
$this->context->getFilterParam('store_id', \Magento\Store\Model\Store::DEFAULT_STORE_ID)
);
$currency = $this->localeCurrency->getCurrency($store->getBaseCurrencyCode());
$fieldName = $this->getData('name');
foreach ($dataSource['data']['items'] as & $item) {
if (isset($item[$fieldName])) {
$item[$fieldName] = $currency->toCurrency(sprintf("%f", $item[$fieldName]));
}
}
}
return $dataSource;
}
I hope this helps make it clear how to format data in columns on grids.