Umbraco inrichten

Ingediend door Dirk Hornstra op 12-feb-2018 19:39

Umbraco heb ik werkend, ik ga nu door met de vervolgstappen zoals die op https://our.umbraco.org/documentation/Extending/Dashboards/ genoemd worden. Kijken of ik mijn eigen dashboard kan inrichten. Eerst in /config/Dashboard.config alles in commentaar gezet en gestart. Dat levert inderdaad een mooi leeg scherm op, met natuurlijk links nog wel je menu en de boom met Home en Recycle Bin. Hoe je zelf het dashboard in kunt richten wordt duidelijk uitgelegd in https://our.umbraco.org/documentation/Tutorials/Creating-a-Custom-Dashboard/ 

Even door de mappen bladeren. Ik kom daarbij uit in Umbraco/Views/Default.cshtml. Dat is inderdaad de pagina die geladen wordt. Ik zie dat de inhoud daarvan met AngularJS geladen wordt. Interessant, omdat ik me ook daar in wil verdiepen.  In deze pagina zie ik de tag umb-navigation. Het lijkt me dat hier de boom wordt opgebouwd. Even verder zoeken levert mij in de map /config het bestand applications.config op. Hier zie je alle items van het menu staan. Als ik deze in commentaar zet en de applicatie start, dan hou ik na inloggen 2 knoppen over: de user en de help-knop.

Onder Umbraco/Views/components/application/ staat het bestand umb-navigation.html. Hierin staat de opmaak. Deze verwijst dan weer naar umb-sections.html in dezelfde map. Hier kun je ook de "user" en "help" in terug vinden. Maar goed, ik zet mijn aanpassingen terug, want dit zijn aanpassingen in de "core" van Umbraco en dat zal niet de bedoeling zijn.

Via een Google-zoekactie kom ik uit op https://our.umbraco.org/forum/using-umbraco-and-getting-started/78551-tree-config-question. Deze verwijst door naar http://siempresolutions.co.uk/blog/Extending_Umbraco_Custom_Tree_and_MVC_API_Part_1. Die stappen gaan we volgen. Ik heb nog geen App_Code map, dus die maak ik aan. In die map maak ik een lege MVC 5 controller met de naam UmbExtendedTreeController. De rest van de stappen volg ik ook. Na een aantal keer reloaden gaat het goed, onder Settings krijg ik nu Umbraco Extend. Als ik op de 3 puntjes erachter klik krijg ik de HTML te zien en kan ik een "API"-call doen.

Ik wil eigenlijk dit menu-item in het uiterst linker menu krijgen, maar het blijft hardnekkig onder "settings" staan.

Het bovenstaande heb ik uitgewerkt op 12 februari 2018, op 22 maart 2018 besloot ik om hier nog mee verder te gaan, deze week had ik inmiddels al 3 avonden besteed aan voorbereiding voor mijn certificering voor Microsoft. Het is al laat, dus waarschijnlijk ga ik er de 25e mee verder, via een Google zoekactie kwam ik uit op deze site en als ik het zo doorlees, ziet het er goed uit!

Nu staat niet heel erg duidelijk hoe je dit voor elkaar krijgt. Ik heb het volgende gedaan;
In App_Code heb ik een bestand PBTreeExtender.cs aangemaakt, deze bevat de code die het voorbeeld ook heeft.


using Umbraco.Core;
using Umbraco.Core.Models;

namespace PBBackoffice.App_Code
{
    public class PBTreeExtender : ApplicationEventHandler
    {
        protected const string PBTreeSectionAlias = "PB";

        protected override void ApplicationStarted(UmbracoApplicationBase umbraco, ApplicationContext context)
        {

            // Gets a reference to the section (if already added)
            Section section = context.Services.SectionService.GetByAlias(PBTreeSectionAlias);
            if (section != null) return;

            // Add a new "Skrift Demo" section
            context.Services.SectionService.MakeNew("Prijsbewust", PBTreeSectionAlias, "icon-newspaper");

        }
    }
}

Vervolgens ben ik in de back-office van Umbraco naar de Administrator-groep gegaan. Daar zie je alle sections. Klik je daar op Add, dan kun je de [PB] toevoegen. Uitloggen en weer inloggen en ja: het item staat in het menu. Dit-is-cool. Ik ga de groep "Writers" gebruiken om een inlog daarvoor te maken en die deze sectie te geven. Dan kan ik daarmee de boel naar wens inrichten.

Als ik de rest van de code doorloop, dan blijkt dat de schrijver van dit artikel het toch anders gedaan heeft. Deze code heeft hij in een eigen Startup.cs in de root-map gezet. Ook staat niet alle code in zijn voorbeeld, dus je kunt zaken niet builden omdat er delen missen. Man-man-man. Via de Github-pagina de code gedownload, dan gaan we dat als basis gebruiken om een eigen back-end in te richten.