Views and custom pages

View

In the Dcat Admin we can use the admin_view function to render the view, this function draws on the design ideas of vue, you can write HTML, CSS and JS code in the same template file, so that the code is more clear and more concise and easy to read layered code, such as

  1. <div class="my-class">...</div>
  3. <style>
  4.     .my-class {
  5.         color: blue;
  6.     }
  7. </style>
  9. <script require="@test1,@test2" init=".my-class">
  10.     $this.css({background: 'red'})
  11. </script>

Render the view in php

  1. public function index(Content $content)
  2. {
  3.     return $content->body(admin_view('...'));
  4. }

Explanation of Example

The code in the above example is actually equivalent to the following code

  1. <div class="my-class">...</div>
  1. public function index(Content $content)
  2. {
  3.     admin_require_assets(['@test1', '@test2']);
  5.     admin_style('.my-class {
  6.         color: blue;
  7.     }');
  9.     admin_script(
  10.         <<<JS
  11. Dcat.init('.my-class', function (\$this, id) {
  12.     \$this.css({background: 'red'})
  13. });
  14. JS
  15.     );
  17.     return $content->body(view('...'));
  18. }

Obviously, using admin_view to render the view will make your code much easier to read. For Dcat.init and the use of the init and require attributes in the script tag, please refer to the documentation [Static Resources] (assets.md) and [Dynamic Listening Element Generation (init)] (js.md #init) chapters.

Custom pages

Building a custom page in Dcat Admin is very simple, you can refer to the following two examples

Example 1

{tip} Dcat Admin is a single page application and the loaded JS script will only be executed once, so the initialization operation cannot be placed directly in the JS script, it should be loaded using the Admin::script method.

  1. <?php
  3. use Illuminate\Contracts\Support\Renderable;
  4. use Dcat\Admin\Admin;
  6. class MyPage implements Renderable
  7. {
  8.     // Define the static resources needed for the page, which will be loaded here on demand.
  9.     public static $js = [
  10.          // The js script cannot contain the initialization operation directly, otherwise the page refresh is invalid.
  11.         'xxx/js/page.min.js',
  12.     ];
  13.     public static $css = [
  14.         'xxx/css/page.min.css',
  15.     ];
  17.     public function script()
  18.     {
  19.         return <<<JS
  20.         console.log('All JS scripts are loaded');
  21.         // The initialization operation is written here.
  22. JS;        
  23.     }
  25.     public function render()
  26.     {
  27.         // This is where you can bring in your js or css files.
  28.         Admin::js(static::$js);
  29.         Admin::css(static::$css);
  31.         // JS code to be executed on the page
  32.         // The JS code set by Admin::script will be executed automatically when all JS scripts are loaded.
  33.         Admin::script($this->script());
  35.         return view('admin.pages.my-page')->render();
  36.     }
  37. }

View admin.pages.my-page, make sure the view code does not contain tags such as <body> and <html>.

  1. <div>
  2.   <h3>自定义页面演示</h3>
  3. </div>
  4. <script>
  5. Dcat.ready(function () {
  6.     // js代码也可以放在模板里面
  7.     console.log('所有JS脚本都加载完了!!!');
  8. });
  9. </script>

Usage

  1. public function index(Content $content)
  2. {
  3.     return $content->body(new MyPage());
  4. }

Example 2

The dashboard page /admin in the background can also be seen as a custom page, the code implementation is as follows

  1. public function index(Content $content)
  2. {
  3.     return $content
  4.         ->header('Dashboard')
  5.         ->description('Description...')
  6.         ->body(function (Row $row) {
  7.             $row->column(6, function (Column $column) {
  8.                 $column->row(Dashboard::title());
  9.                 $column->row(new Examples\Tickets());
  10.             });
  12.             $row->column(6, function (Column $column) {
  13.                 $column->row(function (Row $row) {
  14.                     $row->column(6, new Examples\NewUsers());
  15.                     $row->column(6, new Examples\NewDevices());
  16.                 });
  18.                 $column->row(new Examples\Sessions());
  19.                 $column->row(new Examples\ProductOrders());
  20.             });
  21.         });
  22. }