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
{"gridEditors": [
{"name": "MusicGenre",
"alias": "custom.MusicGenre",
"view": "/App_Plugins/MusicGenre/backoffice/music-genre-view.html",
"icon": "icon-music color-green",
"config": {"controller": "MusicGenre",
"action": "Index"
}
}
]
}
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
namespace Compent.Uintra.App_Plugins.MusicGenre.Models
{public class MusicGenreItemViewModel
{public string Name { get; set; }public int Count { get; set; }}
}
using System.Collections.Generic;
namespace Compent.Uintra.App_Plugins.MusicGenre.Models
{public class MusicGenreViewModel
{public IEnumerable<MusicGenreItemViewModel> Items { get; set; }}
}
“View” folder and MusicGenreView.cshtml
It is MVC view, which render your data in UI
@model Compent.Uintra.App_Plugins.MusicGenre.Models.MusicGenreViewModel
<div class="tabset__holder">
@foreach (var item in Model.Items)
{<h4 class="tabset__title">@item.Name</h4>
<p>Items Count: @item.Count</p>
}
</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
using System.Collections.Generic;
using System.Web.Mvc;
using Compent.Uintra.App_Plugins.MusicGenre.Models;
using Umbraco.Web.Mvc;
namespace Compent.Uintra.Controllers
{public class MusicGenreController : SurfaceController
{public ActionResult Index()
{// use external service to populate view model
// just stubed for now
var model = new MusicGenreViewModel()
{Items = new List<MusicGenreItemViewModel>()
{new MusicGenreItemViewModel()
{Name = "Rock",
Count = 42
},
new MusicGenreItemViewModel()
{Name = "Blues",
Count = 34
},
new MusicGenreItemViewModel()
{Name = "Grange",
Count = 92
},
}
};
return View("~/App_Plugins/MusicGenre/View/MusicGenreView.cshtml", model);}
}
}
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.