Hi Rob,

Try to see Dan´s comment in here hope this can help you a step further.

https://our.umbraco.org/forum/umbraco-7/developing-umbraco-7-packages/55678-How-to-reuse-an-Umbraco-Property-Editor-from-dialogService?p=0#comment191268

/Dennis

Hi Dennis, I looked at that post before actually, but I can't see anything relevant; I'm not creating a dialog, just using an inline picker.

This blog was very useful: http://creativewebspecialist.co.uk/2013/08/23/how-i-built-my-first-property-editor-for-umbraco-belle/

• in there, they are attaching change events to their inputs and updating the model.value from those, so I assume I have to do something similar; I just don't know how to attach the appropriate events to the umb-editor that sets up the date picker.

Hi Rob,

Perhaps this Angular Workbook can help you also if you haven't seen yet. https://github.com/umbraco/AngularWorkbook and the chapter about your first controller https://github.com/umbraco/AngularWorkbook/blob/master/Exercises/Exercise2.md

Hope this helps,

/Dennis

Hi Rob

You can see the datepicker controller in the Umbraco source code here https://github.com/umbraco/Umbraco-CMS/blob/5b9a98ad6ae9e63322c26f7b162204e34f7fcb54/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js - I just gave it a quick glance and it's seems they're using an eventlistener in the controller.

There is not described anything about how to use existing directives in the angular workbook btw. - But it's still a nice resource for learning.

Hope this helps a bit.

/Jan

Hmmm, looking at that (Jan's link) it might be best to not use the existing directives as I may have to deal with conflicting events updating the model value; but I'll have a go at just reproducing a simple datepicker myself from that which should give me enough to go on to extend it.

Okay, I've got my property editor all working nicely, saving and loading JSON data, that end is sorted.

I'm struggling to display information from it in a Partial View though.

View is:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    var nodes = 
        from n in Model.Content.AncestorsOrSelf(1).First().DescendantsOrSelf()
        where 
            n.DocumentTypeAlias == "Event"
        select n;
}

<ul class="events_list">
    @foreach(var n in nodes)
    {
        <li>
            <a class="@n.UrlName" href="@n.Url">
                @n.Name<br/>
                @n.GetPropertyValue("eventDates")<br/>
                @n.GetPropertyValue("eventDates").GetType().FullName
            </a>
        </li>
    }
</ul>

Output is:

Event 1
{ "eventDate": "2015-02-06T00:00:00Z", "runsToDate": "2015-01-31 00:00:00" }
Newtonsoft.Json.Linq.JObject

Event 2
{ "eventDate": "2015-02-22T00:00:00Z" }
Newtonsoft.Json.Linq.JObject

Event 3

System.String

Event 4

System.String

How do I get my stored property values out? Do I need to create a PropertyValueConverter or is there a not too awful of doing it in Razor, coping with the fact that unset values are strings not JSON?

Again, I did Google for both an example PropertyValueConverter for JSON data and an example of using the strongly typed IPublishedContent on JSON data but came up short.

I found this, but it is not using JSON data: http://www.theoutfield.net/blog/2013/04/strongly-typed-property-values-using-property-editor-value-converters-in-umbraco

Hi Rob

Not sure you need to convert them using the PropertyValueConverter...should be accessible without it I believe.

What happens if you try to write out @n.GetPropertyValue("eventDates").eventDate ? It might be useful to use the Inspect package in order to figure out how the data is exposed on your model perhaps https://our.umbraco.org/projects/developer-tools/inspect

Hope this helps.

/Jan

I get a Newtonsoft.Json.Linq.JObject on properties that have been updated and saved, and a String on fields that have not. I think really I do need a PropertyValueConverter or the Razor script will be very hacky. I was thinking about this at the weekend; not much point using the strongly typed API if I don't strongly type my data.

I'll check out the Inspect package, ta!

Once I've got everything working I might knock up something on the Wiki; it'd be nice to have all the pieces together in one place.

Hi, I have the same problem... I don't know how to get the value from umb-editor datepicker in a property editor.

@Rob Could you please tell me how to get the value?

Thanks, Stefan

I couldn't figure it out, so did by myself. For those interested here is my solution

html

<umb-control-group label="Date" description="The date of the race">
    <div class="input-append" mh-date-picker="date">
        <input name="date" type="text" ng-model="vm.date" placeholder="YYYY-MM-DD" required>
        <span class="add-on"><i class="icon-calendar"></i></span>
    </div>
    <div id="date-error" ng-show="(vm.submitted || raceForm.date.$dirty) && raceForm.date.$invalid">
        <span class="help-inline" ng-show="raceForm.date.$error.required"><localize key="mayhem_required">[Required]</localize></span>
    </div>
</umb-control-group>

directive (mh-date-picker)

var Mayhem;
(function (Mayhem) {
    "use strict";
    var DatePickerDirective = (function () {
        function DatePickerDirective() {
            this.restrict = "A";
            this.scope = false; // use controller scope
            this.link = function (scope, element, attributes) {
                var modelName = attributes["mhDatePicker"];
                var config = {
                    format: "YYYY-MM-DD"                    
                };
                element.datetimepicker(config);
                element.on("dp.hide", function (event) {
                    // set the value
                    scope.vm[modelName] = event.date.format("YYYY-MM-DD");
                    scope.$apply();
                });
            };
        }
        DatePickerDirective.factory = function () {
            var directive = function () { return new DatePickerDirective(); };
            return directive;
        };
        return DatePickerDirective;
    })();
    angular.module("mayhem.directives").directive("mhDatePicker", DatePickerDirective.factory());
})(Mayhem || (Mayhem = {}));

package.manifest I added the follow three dependencies

{
    "javascript": [
        "~/umbraco/lib/moment/moment-with-locales.js",
        "~/umbraco/lib/datetimepicker/bootstrap-datetimepicker.js"
    ],
    "css": [
        "~/umbraco/lib/datetimepicker/bootstrap-datetimepicker.min.css"     
    ]
}

cheers, Stefan

is working on a reply...