Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Rob Watkins 369 posts 701 karma points
    Feb 20, 2015 @ 13:21
    Rob Watkins
    1

    Get value from umb-editor datepicker in property editor

    I'm creating a custom property editor that will include various date related items. First time I've used Angular, let alone created a v7 property editor, so starting very simple.

    I've got my editor all installed as a datatype, and I've got it displaying the built-in datepicker; I know I have to put my results in $scope.model.value, but I can't seem to find out how to get the value from the umb-editor

    Here is markup:

    <div ng-controller="My.EventDateSelectorController">
        <div class="single_date">
            <label>Single date</label>
            <umb-editor model="datePickerSingle"></umb-editor>
        </div>
    </div>
    

    And controller:

    angular.module("umbraco")
        .controller("My.EventDateSelectorController",
            function($scope) 
            {
                $scope.datePickerSingle = {
                        view: 'datepicker',
                        config: {
                                pickDate: true,
                                pickTime: false,
                                pick12HourFormat: false,
                                format: "yyyy-MM-dd"
                        }
                };
            }
    );
    
  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Feb 20, 2015 @ 13:32
  • Rob Watkins 369 posts 701 karma points
    Feb 20, 2015 @ 15:04
    Rob Watkins
    0

    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.
  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Feb 20, 2015 @ 15:12
    Dennis Aaen
    0

    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

     

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Feb 20, 2015 @ 15:14
    Jan Skovgaard
    0

    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

  • Rob Watkins 369 posts 701 karma points
    Feb 20, 2015 @ 15:57
    Rob Watkins
    0

    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.

  • Rob Watkins 369 posts 701 karma points
    Feb 20, 2015 @ 18:48
    Rob Watkins
    0

    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

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Feb 21, 2015 @ 17:01
    Jan Skovgaard
    0

    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

  • Rob Watkins 369 posts 701 karma points
    Feb 23, 2015 @ 11:08
    Rob Watkins
    1

    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.

  • stevo 63 posts 106 karma points
    Jul 21, 2015 @ 03:05
    stevo
    0

    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

  • stevo 63 posts 106 karma points
    Jul 22, 2015 @ 22:16
    stevo
    2

    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

Please Sign in or register to post replies

Write your reply to:

Draft