Extending Panels

This manual shows how to create custom panel “Music Genre”, which contains list of music, sorted by genre with counters.

 

1. Create folder “MusicGenre ” under App_Plugins folder

 

 

2. Under “MusicGenre” create package.manifest file

  1. {
  2.   "gridEditors": [
  3.     {
  4.       "name": "MusicGenre",
  5.       "alias": "custom.MusicGenre",
  6.       "view": "/App_Plugins/MusicGenre/backoffice/music-genre-view.html",
  7.       "icon": "icon-music color-green",
  8.       "config": {
  9.         "controller": "MusicGenre",
  10.         "action": "Index"
  11.       }
  12.     }
  13.   ]
  14. }

The package.manifest JSON file format is used to describe one or more custom Umbraco property editors, grid editors or parameter editors. This page outlines the file format and properties found in the JSON.

 

  • Name – name of panel
  • Alias – Umbraco alias of panel
  • View – view of panel in Umbraco backoffice
  • Config – section, where you describe action and controller which will be pulled, when panel is rendering on UI.

 

To learn more about package.manifest file see 

 

3. Create under “MusicGenre”:

 

  • “backoffice” folder and music-genre-view.cshtml

<dummy-view text="Music Genre"></dummy-view>

  • “Models” folder and MusicGenreItemViewModel.cs and MusicGenreViewModel.cs

 

Each of these models,  it is MVC-model which populates panel view model with data from controller

  1. namespace Compent.Uintra.App_Plugins.MusicGenre.Models
  2. {
  3.     public class MusicGenreItemViewModel
  4.     {
  5.         public string Name { get; set; }
  6.         public int Count { get; set; }
  7.     }
  8. }
  9. using System.Collections.Generic;
  10. namespace Compent.Uintra.App_Plugins.MusicGenre.Models
  11. {
  12.     public class MusicGenreViewModel
  13.     {
  14.         public IEnumerable<MusicGenreItemViewModel> Items { get; set; }
  15.     }
  16. }

“View” folder and MusicGenreView.cshtml

It is MVC view, which render your data in UI

 

@model Compent.Uintra.App_Plugins.MusicGenre.Models.MusicGenreViewModel

  1. <div class="tabset__holder">
  2.     @foreach (var item in Model.Items)
  3.     {
  4.         <h4 class="tabset__title">@item.Name</h4>
  5.         <p>Items Count: @item.Count</p>
  6.     }
  7. </div>

Folders structure should be like this

 

 

4. Then, you have to create Controller with Action described in package.manifest

 

Go to “Controllers” folder and create MusicGenreController.cs

  1. using System.Collections.Generic;
  2. using System.Web.Mvc;
  3. using Compent.Uintra.App_Plugins.MusicGenre.Models;
  4. using Umbraco.Web.Mvc;
  5. namespace Compent.Uintra.Controllers
  6. {
  7.     public class MusicGenreController : SurfaceController
  8.     {
  9.         public ActionResult Index()
  10.         {
  11.             // use external service to populate view model
  12.             // just stubed for now
  13.             var model = new MusicGenreViewModel()
  14.             {
  15.                 Items = new List<MusicGenreItemViewModel>()
  16.                 {
  17.                     new MusicGenreItemViewModel()
  18.                     {
  19.                         Name = "Rock",
  20.                         Count = 42
  21.                     },
  22.                     new MusicGenreItemViewModel()
  23.                     {
  24.                         Name = "Blues",
  25.                         Count = 34
  26.                     },
  27.                     new MusicGenreItemViewModel()
  28.                     {
  29.                         Name = "Grange",
  30.                         Count = 92
  31.                     },
  32.                 }
  33.             };
  34.             return View("~/App_Plugins/MusicGenre/View/MusicGenreView.cshtml", model);
  35.         }
  36.     }
  37. }

5. After all file is created and all code written, you have to allow creating your panel in Uintra grid layout.

 

Go Umbraco backoffice => Seveloper section => Data Types folder => Content Grid

 

 

Choose “One column row” in Rows Configuration

 

 

And find our MusicGenre panel

 

 

To allow it on grid layout, just choose it by clicking on checkbox (see above).

 

NB! Don’t forget to save all your changes.

 

6. Go to Umbraco content section and create new content page “My Music”

 

 

Add  “MusicGenre” panel to content grid layout

 

Save and publish content page

Go to UI by content page link

 

 

MusicGenre panel appears on UI

 

 

For more inspiration see our other panels like “LatestActivities”, “Usertags” and “Comments”

 

Didn't find what you were looking for?

Our site is a work in progress and feedback is very much appreciated. If you could not find information regarding your problem please contact jba@compent.net or go to our github and create an issue if the problem relates to a bug or otherwise unintended technical functionality.