Drupal 8 - Admin Dashboard custom Module creation

,



Folder Structure


Step 1:

Create the admin_dashboard.info.yml file, and add the below code

name: Admin Dashboard
type: module
description: 'Custom admin dashboard.'
core: 8.x
dependencies:
  - node
  - views
libraries:
  - admin_dashboard/global-styling
  - admin_dashboard/global-styling1
package: Libin Prasanth


name: module name
libraries: css and js for admin dashboad if required

Step 2:

Create libraries file, the file name should admin_dashboard.libraries.yml, and add the following code in your file


global-styling:
  version: 1.x
  css: 
    theme:
      css/bootstrap.min.css: {} 
      css/font-awesome.min.css: {} 
      css/admin-dashboard.css: {} 
      css/admin-media.css: {} 
global-styling1:
  version: 1.x
  css: 
    theme:
      css/toolbar.css: {} 

Step 3:

Menu link, create a file with the name admin_dashboard.links.menu.yml

Add the following code in admin_dashboard.links.menu.yml file 

admin_dashboard.admin:
  title: 'Dashboard'
  description: 'admin dashboard'
  parent: system.admin
  url: internal:/dashboard
  weight: -300

Step 4:

Create the module file, the file name is admin_dashboard.module

Code

<?php

/**
 * @file
 * Configuration Update Base module.
 */

use Drupal\Core\Routing\RouteMatchInterface;

/**
 * Implements hook_help().
 */

function admin_dashboard_page_attachments_alter(&$page) {
 $current_path = \Drupal::service('path.current')->getPath(); 
 if((strpos($current_path, '/manage-content/') !== false) || $current_path == '/dashboard')
 {
  $build['#attached']['library'][] = 'admin_dashboard/global-styling';
  $page['#attached']['library'][] = 'admin_dashboard/global-styling';
 } 
 $page['#attached']['library'][] = 'admin_dashboard/global-styling1';
}  
  
 
function admin_dashboard_theme_registry_alter(&$theme_registry) {
  $pages = [
    'page__dashboard' => 'page--dashboard',
 'page__manage_content' => 'page--manage-content',
  ];
  $mod_path = drupal_get_path('module', 'admin_dashboard') . '/templates';

  foreach ($pages as $key => $template) {
    $theme_registry[$key]['template'] = $template;
    $theme_registry[$key]['path'] = $mod_path; 
  }
}
 
 
In the above code hide the admin_dashboard_theme_registry_alter function temporary, once created the template file enable the function

Step 5:

Create uninstall file,

admin_dashboard.install

<?php

/**
 * @file
 * Contains install and update functions for Features.
 */

function admin_dashboard_uninstall() {
 db_truncate('watchdog')->execute();  
   
 $types = array('dashboard'); 
 $nids_query = db_select('node', 'n')
 ->fields('n', array('nid'))
 ->condition('n.type', $types, 'IN')
 ->range(0, 500)
 ->execute(); 
 $nids = $nids_query->fetchCol();  
 entity_delete_multiple('node', $nids); 
 $content_type = \Drupal::entityManager()->getStorage('node_type')->load('dashboard');
 $content_type->delete();  
}

 Step 6:

Create the folder with the name templates inside your module, and create two files with names page--dashboard.html.twig and page--manage-content.html.twig and add the following codes

page--dashboard.html.twig

<div class="dashboard-inner">
 <div class="container">
  <div class="row">
  {% if page.content %}
     {{ page.content }}
  {% endif %}
  </div>
 </div>
</div>


page--manage-content.html.twig

<div class="dashboard-inner">
 <div class="container">
  <div class="">
  <a href="{{ url('<front>') }}/dashboard" class="backtodash"><i class="fa fa-angle-left" aria-hidden="true"></i> Back</a>
  {% if page.content %}
     {{ page.content }}
  {% endif %}
  </div>
 </div>
</div>

Css ( admin-dashboard.css )

.view-dashboard,.path-manage-content
{
 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;  
}
a 
{
 border: none;
}
img 
{
 max-width: 100%;
}
.path-dashboard,.path-manage-content
{
 background: #f1f1f1;
}
.dash-inner
{ 
 border: 2px solid #DFE7E8;
    display: block;
    padding: 40px 15px;
    border-radius: 2px;
    background-color: #fdfdfd;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    color: #2e2e33;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
 text-align: center; 
}
.dash-inner h4 
{
 margin: 0;
 padding-top: 10px;
}
.dashboard-inner .row 
{
 margin: 0 -5px;
}
.dashboard-inner .row .col-md-3
{
 padding: 5px;
}
.dashboard-inner
{
 padding: 60px 0;
 min-height: calc(100vh - 150px);
 position: relative;
}
.toolbar-vertical .dashboard-inner
{
 min-height: calc(100vh - 90px);
} 
.dashboard-inner .ui-media
{
 padding: 0;
 margin: 0;
}
.dashboard-inner .ui-media li 
{
 display: inline-block;
 list-style: none;
 padding-right: 10px;
}
.dashboard-inner .ui-media li a 
{
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    outline: none;
    border: none;
}
.path-dashboard .dashboard-inner .page-title
{
 display: none;
}
.dashboard-inner .page-title
{
 margin: 0;
 padding-bottom: 15px;
 text-transform: uppercase;
    margin-left: 70px;
}
.dashboard-inner .form-item, .dashboard-inner .form-actions
{
 margin: 0;
}
.dashboard-inner .views-exposed-form .form--inline
{
 display: table; 
}
.dashboard-inner .views-exposed-form .form--inline > div 
{
    display: table-cell;
    float: none;
    vertical-align: middle; 
}
.dashboard-inner .views-exposed-form .form--inline > div label 
{
 display: block;
 font-size: 14px;
    font-weight: 400;
    padding-right: 15px;
    vertical-align: middle;
    margin: 0;
}
.dashboard-inner .views-exposed-form .form--inline > div input[type="text"],.dashboard-inner .views-exposed-form .form--inline > div select 
{
    width: 200px;
    height: 34px;
    margin-right: 10px;
    font-size: 14px;
    text-indent: 10px;
}
.dashboard-inner .views-exposed-form .form--inline > div input[type="submit"]
{
    margin: 0;
    padding: 6px 20px;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 13px;
    padding-top: 7px;
    border: none;
    border-radius: 0;
    background: #2b5498;
    color: #fff; 
}
.dashboard-inner table tr th
{
 background: #35455e;
 font-size: 14px;
 text-transform: uppercase;
}
table tr th, table tr th a, table tr th a:hover, table tr th a:focus,table a 
{
 border: none; 
}
.dashboard-inner table tr td 
{
 font-size: 14px; 
}
.dashboard-inner  .views-field-delete-node,.dashboard-inner .views-field-edit-node,.views-field-status
{
 width: 50px;
 text-align: center;
} 
a:hover, a:active, a:focus, .link:hover, .link:active, .link:focus{ 
    border: none !important;
}
.dashboard-inner td.views-field-delete-node a,.dashboard-inner td.views-field-edit-node a
{
 font-size: 0;
}
.dashboard-inner td.views-field-delete-node a:before   
{
 content: "\f014";
 font: normal normal normal 16px/1 FontAwesome;
 color: #f00;
}
.dashboard-inner td.views-field-edit-node a:before
{
 content: "\f044";
 font: normal normal normal 16px/1 FontAwesome;
 color: green;
}
.dashboard-inner .container 
{
 position: relative;
}
a.backtodash
{  
    font-size: 14px;
    border: none;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    position: absolute;
    left: 16px;
    z-index: 9;
    top: 6px;
    background: #2b5498;
    padding: 5px 10px;
}
.backtodash .fa-angle-left 
{
 font-size: 22px;
    top: 2px;
 line-height: 16px;
    position: relative;
}


Css ( admin-media.css )

@media screen and (max-width: 767px)
{
 .dashboard-inner
 {
  padding: 30px 0;
  min-height: calc(100vh - 90px);
  
 }
 .dash-inner
 {
  padding: 15px; 
 }
 .ui-media li
 {
  
 }
 .das-booter p
 {
  font-size: 14px;
 }
}


Css ( toolbar.css )

a.toolbar-icon.toolbar-icon-admin-dashboard-admin:before
{
 background-image: url(dashboard.png);
}

Note: add the css inside css folder, also download the bootstrap from bootstrap website and add to css folder

Download entire code click the below link

Download



Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.