How-To: Property Editor und Data Types

Was Ist ein Property Editor ?

 

Hört sich spannender an als es ist.

Property ist die Eigenschaft. Dem entsprechend ist der Property Editor, ein Editor zum ändern eines Wertes / einer Eigenschaft

Beispiel. Eine Textbox um den text eines Labels zu ändern 

oder eine Checkbox zum zeigen/verstecken des Menüs

 

 

Der Property editor muss noch wissen welcher DataTyp angebunden ist.

Also den Typ des Editors (Textbox, Checkbox, Dropdown Menu, Slider, Datapicker,...)

Du kannst auch deine eigenen DatenTypen /Controller erstellen und diese dann auswählen. 

Wie das geht findest du hier

 

So erstellst du deinen eigenen Property Editor

 

Erstelle unter dem "App_Plugins" Ordner einen neuen Ordner. Hier kommen alle nötigen Dateien rein.

Wir nennen den Ordner "MarkDownEditor"

 

Jetzt erstelle folgende 3 Dateien in dem neu angelegtem Ordner:

  1. Ein Manifest Packet
    • package.manifest
  2. Ein HTML Template
    • markdowneditor.html
  3. Ein Angular Controller
    • markdowneditor.controller.js

 

Die Manifest Datei definiert was dieses Plugin tut. Das Manifest informiert Umbraco über unseren neuen Property Editor und erlaubt uns alle nötigen Dateien zu laden.

Nun fügen wir in die Manifest datei etwas json code ein.

{
//you can define multiple editors propertyEditors: [ { /*this must be a unique alias*/ alias: "My.MarkdownEditor", /*the name*/ name: "My markdown editor", /*the HTML file we will load for the editor*/ editor: { view: "~/App_Plugins/MarkDownEditor/markdowneditor.html" } } ] , //array of files we want to inject into the application on app_start javascript: [ '~/App_Plugins/MarkDownEditor/markdowneditor.controller.js' ] }

 

Nun müssen wir dem ganzen noch eine Ansicht und eine Funktion einbinden. Hier komment die HTML und die JS Datein in Spiel

In die HTML Datei fügen wir eine Textarea ein.

<div ng-controller="My.MarkdownEditorController">
    <textarea ng-model="model.value"></textarea>
</div>

Die JS Datei erhält eine AngularJS Controller

angular.module("umbraco")
    .controller("My.MarkdownEditorController",
    function () {
        alert("The controller has landed");
    });

 

Wir fassen zusammen

  • Das Manifest Package teilt Umbraco mit was zu laden ist
  • Die HTML Datei stellt die View dar
  • Der Controller startet den Editor per Angular

 

Registriere den Datentyp in Umbraco 

Nun starte dein Projekt neu. Gehe in die "Developer Section" im Backoffice und erstelle einen neuen Datentyp mit den Namen "markdown"

Nun kannst du hier den Property Editor "my markdown editor" wählen, den du gerade erstellt hast.

Zur Erinnerung:

Den namen des Datentypes haben wir in der Manifest festgelegt:

propertyEditors: [
        {
            /*this must be a unique alias*/
            alias: "My.MarkdownEditor",
            /*the name*/
            name: "My markdown editor",
            /*the HTML file we will load for the editor*/
            editor: {
                view: "~/App_Plugins/MarkDownEditor/markdowneditor.html"
            }
        }
    ]

 

Speichere deine neuen Datentyp und füge diesen einem Documenten Typen deiner Wahl zu.

Dazu gehst du auf "Settings". Wählst ein Document Typ deiner Wahl. Nun gehe auf den Tab "Generic Properties". Klicke "add a new property". Wähle einen namen deiner Wahl. Der Alias wird autmatisch gesetzt. Nun wählst du bei "Typ" deinen soeben erstellten Daten Typ "markdown"

Nicht vergessen zu speichern.

Wenn du nun auf "Content" gehst und eine Site mit dem gewählten Document Typ auswählst, wirst du mit der Nachricht "The controller has landed" empfangen. Nun kannst du deine Properties/Eigenschaften im Editor per Javascript bearbeiten/manipulieren.

 

 

 

 

 

Ein "Property Editpr" ist der Editor, auf welchem vom "Data Type" verwiesen wird.

Ein Datentyp wird im Backoffice definert und verweits auf ein Property Editor.

In Umbraco wird ein Property Editor im JSON Manifest-Datei und den zugehörigen JS Dateien definiert.

Zum erstellen eines Datentypes, wählt man im Propert Editor den zunutzende Datentyp aus. 

 

 

Author

Caglar Tasci

Beauty is more important in computing than anywhere else in technology because software is so complicated. Beauty is the ultimate defence against complexity. — David Gelernter

comments powered by Disqus