Customizing Admin Dashboard in Magento

testdev33583cc · ‎05-25-2024

I'm trying to add a custom block to the admin dashboard above the "Last Orders" section. I have attempted several approaches, including directly adding the block via layout XML and overriding existing blocks, but none of them seem to be working as expected.

Only the following XML snippet works, but it only displays my block at the top or bottom of the dashboard:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Magento\Backend\Block\Template" name="device_tracking_graph" template="Tra_DeviceTracking::dashboard/device_tracking_graph.phtml" before="-"/>
</referenceContainer>
</body>
</page>

I have tried this but it does not work.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceBlock name="dashboard">
        <block class="Magento\Backend\Block\Template" name="device_track_graph" before="dashboard.lastOrders" template="Tra_DeviceTracking::dashboard/device_tracking_graph.phtml"/>
    </referenceBlock>
</page>

82vCBzZT

Milople · ‎10-28-2024

Hello @testdev33583cc,

Customizing admin dashboard and show custom block at right above laast orders can not be done directly like you have done here.

for that you have to do some customization and structure change like in below steps:

Step-1: Create/Modify the Layout XML: Add the following content to dashboard_index_index.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="styles" />
<body>
<referenceContainer name="page.main.actions">
<block class="Magento\Backend\Block\Store\Switcher" name="store_switcher" as="store_switcher" template="Magento_Backend::store/switcher.phtml">
<action method="setUseConfirm">
<argument name="params" xsi:type="string">0</argument>
</action>
</block>
<block class="Magento\Backend\Block\Template" name="refresh_statistics" after="store_switcher" template="Magento_Backend::dashboard/totalbar/refreshstatistics.phtml"/>
</referenceContainer>

<referenceContainer name="content">
<!-- Override original dashboard block -->
<block name="dashboard" template="Vendor_Module::dashboard/index.phtml">
<block class="Milople\ConfigurablePreselect\Block\Adminhtml\CustomBlock" name="custom.block" template=" Vendor_Module::customblock.phtml"/>
<block class="Magento\Backend\Block\Dashboard\Orders\Grid" name="dashboard.lastOrders" as="lastOrders"/>
<block class="Magento\Backend\Block\Dashboard\Totals" name="dashboard.totals" as="totals">
<block template="Magento_Backend::dashboard/totalbar/script.phtml" name="dashboard.totals.script"/>
</block>
<block class="Magento\Backend\Block\Dashboard\Sales" name="dashboard.sales" as="sales"/>
<block class="Magento\Backend\Block\Dashboard\Grids" name="dashboard.grids" as="grids"/>
<block name="dashboard.chart.disabled"
as="chartDisabled"
template="Magento_Backend::dashboard/chart/disabled.phtml">
<arguments>
<argument name="view_model" xsi:type="object">Magento\Backend\ViewModel\ChartDisabled</argument>
</arguments>
</block>
<block class="Magento\Backend\Block\Widget\Tabs"
name="dashboard.diagrams"
as="diagrams"
template="Magento_Backend::widget/tabshoriz.phtml"
ifconfig="admin/dashboard/enable_charts">
<action method="setId">
<argument name="id" xsi:type="string">diagram_tab</argument>
</action>
<action method="setDestElementId">
<argument name="dest_element_id" xsi:type="string">diagram_tab_content</argument>
</action>
<action method="addTab">
<argument name="name" xsi:type="string">orders</argument>
<argument name="block" xsi:type="string">orders</argument>
</action>
<action method="addTab">
<argument name="name" xsi:type="string">amounts</argument>
<argument name="block" xsi:type="string">amounts</argument>
</action>
<block class="Magento\Backend\Block\Widget\Tab" name="dashboard.chart.orders" as="orders" template="Magento_Backend::dashboard/chart.phtml">
<arguments>
<argument name="html_id" xsi:type="string">orders</argument>
<argument name="label" xsi:type="string" translate="true">Orders</argument>
<argument name="title" xsi:type="string" translate="true">Orders</argument>
<argument name="update_url" xsi:type="string">adminhtml/dashboard_chart/orders</argument>
<argument name="view_model" xsi:type="object">Magento\Backend\ViewModel\ChartsPeriod</argument>
</arguments>
</block>
<block class="Magento\Backend\Block\Widget\Tab" name="dashboard.chart.amounts" as="amounts" template="Magento_Backend::dashboard/chart.phtml">
<arguments>
<argument name="chart_precision" xsi:type="number">2</argument>
<argument name="html_id" xsi:type="string">amounts</argument>
<argument name="label" xsi:type="string" translate="true">Amounts</argument>
<argument name="title" xsi:type="string" translate="true">Amounts</argument>
<argument name="update_url" xsi:type="string">adminhtml/dashboard_chart/amounts</argument>
<argument name="view_model" xsi:type="object">Magento\Backend\ViewModel\ChartsPeriod</argument>
</arguments>
</block>
</block>
<block name="dashboard.diagrams.period"
as="diagramsPeriod"
template="Magento_Backend::dashboard/chart/period.phtml"
ifconfig="admin/dashboard/enable_charts">
<arguments>
<argument name="view_model" xsi:type="object">Magento\Backend\ViewModel\ChartsPeriod</argument>
</arguments>
</block>
</block>
</referenceContainer>
</body>
</page>

Step-2: Create Custom Block:

<?php
namespace Vendor\Module\Block\Adminhtml;

use Magento\Backend\Block\Template;

class CustomBlock extends Template
{
public function getCustomMessage()
{
return "Hello from the Custom Block!";
}
}

Step-3: Create Template File (custom.phtml):

<div class="custom-block">
<h2>Custom Block</h2>
<p><?= $this->getCustomMessage(); ?></p>
</div>

Step-4: Update Your index.phtml File:

Now, you’ll want to instantiate and call this custom block in your index.phtml file.

<div class="dashboard-container row">
<div class="dashboard-main col-m-8 col-m-push-4">
<div class="dashboard-diagram-container">
<?= $block->getChildHtml('chartDisabled') ?>
<?= $block->getChildHtml('diagrams') ?>
<?php
$diagramsBlock = $block->getChildBlock('diagrams');
$tabsIds = $diagramsBlock ? $diagramsBlock->getTabsIds() : [];
?>
<?php if (is_array($tabsIds)): ?>
<?= $block->getChildHtml('diagramsPeriod') ?>
<div id="diagram_tab_content" class="dashboard-diagram-tab-content"></div>
<?php endif; ?>
</div>
<?= $block->getChildHtml('totals') ?>
<div class="dashboard-store-stats">
<?= $block->getChildHtml('grids') ?>
<div id="grid_tab_content" class="dashboard-store-stats-content"></div>
<?= $block->getChildHtml('refresh_statistics') ?>
</div>
</div>
<div class="dashboard-secondary col-m-4 col-m-pull-8">
<?= $block->getChildHtml('sales') ?>
<?= $this->getChildHtml('custom.block') ?>
<div class="dashboard-item">
<div class="dashboard-item-title"><?= $block->escapeHtml(__('Last Orders')) ?></div>
<?= $block->getChildHtml('lastOrders') ?>
</div>
<div class="dashboard-item">
<div class="dashboard-item-title"><?= $block->escapeHtml(__('Last Search Terms')) ?></div>
<?= $block->getChildHtml('lastSearches') ?>
</div>
<div class="dashboard-item">
<div class="dashboard-item-title"><?= $block->escapeHtml(__('Top Search Terms')) ?></div>
<?= $block->getChildHtml('topSearches') ?>
</div>
</div>
</div>

That’s all and it will show right above last orders like below image.

If the issue will be resolved, Click Kudos & Accept as a Solution.

Customizing Admin Dashboard in Magento

Customizing Admin Dashboard in Magento

Re: Customizing Admin Dashboard in Magento