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
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.
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>
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.
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
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.
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 theumb-editor
Here is markup:
And controller:
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/
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:
Output is:
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 aString
on fields that have not. I think really I do need aPropertyValueConverter
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
directive (mh-date-picker)
package.manifest I added the follow three dependencies
cheers, Stefan
is working on a reply...