Simple package not available - Text/Value Dropdown List
I am looking to have a property which stores an ID but which allows the editor to pick from a set of strings.
This seems like such a simple use case I'm surprised there isn't already a backoffice editor that allows me to do this.
I implemented my own for Umbraco 6, but now need to re-implement for 7 (I just stored the key/value mapping in the prevalues). I'm currently doing that so will release mine if there isn't one already!
So I've made a plugin to do this - would anyone else find this useful, should I release it as a package?
New folder in App_Plugins with 3 files:
package.manifest
{
propertyEditors: [
{
alias: "Fluent.NameValueDropDownList",
name: "Name Value DropDown List",
editor: {
view: "~/App_Plugins/NameValueDropDownList/NameValueDropDownList.html"
},
prevalues: {
fields: [
{
label: "Value:Name Mapping",
description: "Enter the valus and names for the dropdown list separated by a :",
key: "names",
view: "textarea",
validation: [{type: "Required"}]
}
]
}
}
],
javascript: [
'~/App_Plugins/NameValueDropDownList/NameValueDropDownList.controller.js'
]
}
NameValueDropDownList.html
<div ng-controller="NameValueDropDownListController" class="wmd-panel">
<!--http://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/-->
<select ng-model="model.value" ng-options="item.value as item.name for item in nameValueList" />
</div>
NameValueDropDownList.controller.js
angular.module("umbraco")
.controller("NameValueDropDownListController",
function ($scope) {
//newline separated -> array of "value:name":
var namesValues = $scope.model.config.names.split('\n');
var nameValueList = _.map(namesValues, function (nameValue) {
// "value:name" -> {value:v, name:n}
var nameValue = nameValue.split(':');
return { name: nameValue[1], value: nameValue[0] };
});
$scope.nameValueList = nameValueList;
});
As I say - if anyone already has a package like this that'd be great - otherwise I'll create one if it'd be useful?
Does this allow the creation of a list of key/value pairs?
I am trying to create a similar property myself where the user can enter multiple sets of key/value pairs to build up a select list on the front end.
@Jason Yeah, but the content editor doesn't build the list - that's stored in prevalues when you create the data type.
When you create the data type and select this property editor it has a prevalue editor which allows you to input multiple lines corresponding to the entries in the dropdown list - which should be in the format: "value:name", so: "1:first item".
Ah I see. I need one where the content editor can build the list dynamically but I am struggling a bit as I don't do much angular on a day to day basis.
The user can enter a key and a corresponding value then click a plus to add a new row so they can enter another key value. Ideally then this would be stored in JSON or some format so I could output the labels and values they have created on the back end in a front-end select list.
I just can't believe that this sort of thing isn't included in Umbraco by default.
@Jason TBH I think that sounds fairly specific :) I just wanted the ability to use a 'value' on a dropdown list as well as the text in it.
Your control means content editors need to store a list of values inside a property on each node and then mark one of those as special in some way I assume? The list and the special item both vary per node?
@Ian If anything I would have though my situation was more common. Lots of people must be creating forms with select options out there in the Umbraco world. It would be ideal if they could define the options for these in a property within a page. So, in my example I am trying to create a search page. The options in the difficulty field of my search page will be populated by what the user enters into the property editor. In a way it would be similar to the related links property type that exists at the moment except instead of forcing the user to enter a caption and a link it would allow them to enter a value and a caption and then click the 'Add' button before adding another and saving this.
This would also work better for multi-lingual sites as well because if you use prevalue then you will always have the same options coming through for each language version of the site whereas with my idea you can create a spanish site and an english one and their options can be completely independent of one another.
I just wish I could access the source of the related links property type somehow as I know I would be able to adapt that to create what I need.
@Jason I'd like to use a key/value pair editor for the prevalues for this control - but I figured it wasn't worth the overhead of creating one and settled on a textarea with:
1:option one 2:option two etc.
So you could use that I guess. It looks OK - but having nice add/remove/reorder controls would be much better.
I think you're right - it'd be great to just customize the related links editor, but they package all their 'plugins' together in the Umbraco source, don't they?
@Ian I've actually managed to find the view for the relatedlinks controller in my standard Umbraco install but I can't for the life of me find the actual controller that it pairs with
HQ are indeed dogfooding and the property editors that comes out of the box are based on angularjs. If I remember correctly you'll find all controllers in the
/Umbraco/Js/Umbraco.Controllers.js (All controllers seem to be defined in this file in the compiled source - Including those for property editors) and you'll find the views in /Umbraco/Views/PropertyEditors
EDIT: And the "Content" and "Media" sections are also based on angularjs - In the upcoming v8 it's the intention that the whole backoffice is being converted to use AngularJs instead of the legacy code they're currently using now.
If you're interested in diving into the source code of Umbraco to figure out how things work then I recommend reading Andy Butlands article in last years Umbraco advent calendar, which gives a good introduction http://24days.in/umbraco/2014/traveller-guide/ - It might be relevant as a learning ressource.
Unfortunately it's been a while since I've done an Umbraco project from scratch (That's about to change soon fortunately :)) so can't quite remember how the out of the box property editors work but I'm thinking it should be possible to achieve what you need without doing your own extension - But in order to be sure I'll need to do some investigation - And if it's not covered out of the box perhaps some of the pickers from the nupickers project can achieve what you need? https://our.umbraco.org/projects/backoffice-extensions/nupickers
Thanks for the reply, Jan. My original question was simply: How can I have a dropdownlist with values configured in the datatype where I can store a value rather than the text that the content editor sees.
I don't know if nuPickers will do that, it was one of the first packages I found, but it has no examples, and I wasn't really clear on what each one does or why there's loads of repeated ones (JSON, CSV etc. etc).
I just found those items before your comment.
I'm currently trying to reverse engineer what I need from the related links property editor. If I managed to get it working, I'll release it to the wild so that other people don't have to waste the time trying to do the same.
Ok, then I'd say go go go release! As you write others might benefit from it as well and if it's becoming popular then you can try making a core pull request to have the property editor become a part of the core and you will have made a nice contribution to the project - The joy of open source, right? :)
Regarding the documentation on serverside data - Nope I was not aware of that. I'm a frontend developer who spends way too much time on the forums but if you have found an error, which should be corrected you can actually also make a pull request to the documentation project if you'd like - Don't know if things have changed since the initial documentation was written. Some of the documentation is written by HQ and some of it is written by the community.
The downside to this can sometimes be that documentation becomes outdated and/or can be confusing to navigate - I think that things might be better organized and structured once the new version of the forum is released. The rumor has it that it should happen within the next month.
Is there any documentation anywhere on how to do a pull request?
I use mercurial myself (and have only started doing so recently) so I'm not too familiar with contributing the projects let alone via GitHub.
@Jan I was in the process of trying to fix the documentation in a pull request, but I didn't know how that path change affected modules with custom routing... I also wasn't sure if creating my fork and editing it was enough? Wouldn't I need to point someone at the change before they'd pull it?
@Ian - Ah great! Ehm...it's been a while since I've done a PR myself but once you have made your edits you need to push it and then you should be able to make a pull request on the https://github.com/umbraco/Umbraco4Docs project if I remember correctly - Otherwise it might help to read the PR article I pointed Jason to in my previous post - Even though it describes how to do a core pull request some of the steps involved in regards to forking and making the actual PR should be the same no matter, which project you're trying to modify :)
@Jason - Yeah, that kinda sucks but that's how it's currently working. Think I saw someone made a pull request so that dictionary items for custom plugins live in a certain folder in ones package so one does not need to manipulate and rely on core files that are being overwritten when upgrading - But for now you can find the language keys in the /Umbraco/Config/ dir - Then you can add keys to either the UI.XML and in specific languages in the /langs folder depending on where you need to add something. Make sure to recycle the app pool after adding keys for them to show up.
Archetype looks pretty awesome. It allows you to add an arbitrary number of sets of fields, for e.g. people (name, role, photo) in a field. So you could create entries with 'name' and 'value'.
I've not used it myself but some of my colleagues have and like it. The only concern is how much we come to rely on it and it's not part of Umbraco core!
Why are you worried that archetype is not a part of the core? It's not the intention that everything should be in Umbraco's core out of the box. That's why it's rather easy to extend Umbraco with new property editors etc. for instance :)
@Ian - Valid concern indeed - But no need to worry too much regarding this package since it's open source :D https://github.com/imulus/Archetype
In general most of the community members are releasing their 3rd party packages as open source projects, which has the benefit that they can get help from others etc. and that if a person for some reason chooses to abandon the project others can keep forking it and modify it.
Well I've brought Archetype into my Umbraco install and whilst it appears to be what I need, it has also corrupted my install after setting and changing some properties so looks like a pretty unstable package to me. Good job I backed up before installing it.
@Jason - What version of Umbraco are you using and what version of archetype did you install? Unfortunately there can be a bug in the package, which could cause it. So the approach of backing things up before installing is always a good practice imho - And fortunately it's usually pretty simple if one is using mercurial/git since most packages don't add stuff to the database.
@Jan I am using the latest version of Umbraco as well as the latest version of Archetype. Basically what happened is a I created a datatype based on my requirements then I edited it and when I went to my pages that contained the properties I could not select any options. After about 5 minutes it complained then that a node was missing even though I didn't delete anything. I'm restored my backup now and it seems to be running okay again though.
Simple package not available - Text/Value Dropdown List
I am looking to have a property which stores an ID but which allows the editor to pick from a set of strings.
This seems like such a simple use case I'm surprised there isn't already a backoffice editor that allows me to do this.
I implemented my own for Umbraco 6, but now need to re-implement for 7 (I just stored the key/value mapping in the prevalues). I'm currently doing that so will release mine if there isn't one already!
So I've made a plugin to do this - would anyone else find this useful, should I release it as a package?
New folder in App_Plugins with 3 files:
package.manifest
{ propertyEditors: [ { alias: "Fluent.NameValueDropDownList", name: "Name Value DropDown List", editor: { view: "~/App_Plugins/NameValueDropDownList/NameValueDropDownList.html" }, prevalues: { fields: [ { label: "Value:Name Mapping", description: "Enter the valus and names for the dropdown list separated by a :", key: "names", view: "textarea", validation: [{type: "Required"}] } ] } } ], javascript: [ '~/App_Plugins/NameValueDropDownList/NameValueDropDownList.controller.js' ] }NameValueDropDownList.html
<div ng-controller="NameValueDropDownListController" class="wmd-panel"> <!--http://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/--> <select ng-model="model.value" ng-options="item.value as item.name for item in nameValueList" /> </div>NameValueDropDownList.controller.js
angular.module("umbraco") .controller("NameValueDropDownListController", function ($scope) { //newline separated -> array of "value:name": var namesValues = $scope.model.config.names.split('\n'); var nameValueList = _.map(namesValues, function (nameValue) { // "value:name" -> {value:v, name:n} var nameValue = nameValue.split(':'); return { name: nameValue[1], value: nameValue[0] }; }); $scope.nameValueList = nameValueList; });As I say - if anyone already has a package like this that'd be great - otherwise I'll create one if it'd be useful?
Hi
Does this allow the creation of a list of key/value pairs? I am trying to create a similar property myself where the user can enter multiple sets of key/value pairs to build up a select list on the front end.
Cheers,
Jason
@Jason Yeah, but the content editor doesn't build the list - that's stored in prevalues when you create the data type.
When you create the data type and select this property editor it has a prevalue editor which allows you to input multiple lines corresponding to the entries in the dropdown list - which should be in the format: "value:name", so: "1:first item".
Ah I see. I need one where the content editor can build the list dynamically but I am struggling a bit as I don't do much angular on a day to day basis.
The user can enter a key and a corresponding value then click a plus to add a new row so they can enter another key value. Ideally then this would be stored in JSON or some format so I could output the labels and values they have created on the back end in a front-end select list.
I just can't believe that this sort of thing isn't included in Umbraco by default.
@Jason TBH I think that sounds fairly specific :) I just wanted the ability to use a 'value' on a dropdown list as well as the text in it.
Your control means content editors need to store a list of values inside a property on each node and then mark one of those as special in some way I assume? The list and the special item both vary per node?
@Ian If anything I would have though my situation was more common. Lots of people must be creating forms with select options out there in the Umbraco world. It would be ideal if they could define the options for these in a property within a page. So, in my example I am trying to create a search page. The options in the difficulty field of my search page will be populated by what the user enters into the property editor. In a way it would be similar to the related links property type that exists at the moment except instead of forcing the user to enter a caption and a link it would allow them to enter a value and a caption and then click the 'Add' button before adding another and saving this.
This would also work better for multi-lingual sites as well because if you use prevalue then you will always have the same options coming through for each language version of the site whereas with my idea you can create a spanish site and an english one and their options can be completely independent of one another.
I just wish I could access the source of the related links property type somehow as I know I would be able to adapt that to create what I need.
@Jason I'd like to use a key/value pair editor for the prevalues for this control - but I figured it wasn't worth the overhead of creating one and settled on a textarea with:
So you could use that I guess. It looks OK - but having nice add/remove/reorder controls would be much better.
I think you're right - it'd be great to just customize the related links editor, but they package all their 'plugins' together in the Umbraco source, don't they?
@Ian Yeah. They don't even use Angular and HTML by the looks of it. All of the default property editors seem to be written in C#.
@Jason Oh, some dogfood not being eaten, there!?
Come again? I don't quite get that expression :-S
@Jason http://en.wikipedia.org/wiki/Eating_your_own_dog_food ;)
@Ian Ha ha. See what you mean. It's really frustrating though as I need this functionality.
@Ian I've actually managed to find the view for the relatedlinks controller in my standard Umbraco install but I can't for the life of me find the actual controller that it pairs with
@Jason perhaps you can fix the 'ui.sortable: ngModel not provided!' warning you get on the JS console for each relatedLinks item, then! :)
Hi guys
HQ are indeed dogfooding and the property editors that comes out of the box are based on angularjs. If I remember correctly you'll find all controllers in the /Umbraco/Js/Umbraco.Controllers.js (All controllers seem to be defined in this file in the compiled source - Including those for property editors) and you'll find the views in /Umbraco/Views/PropertyEditors
EDIT: And the "Content" and "Media" sections are also based on angularjs - In the upcoming v8 it's the intention that the whole backoffice is being converted to use AngularJs instead of the legacy code they're currently using now.
If you're interested in diving into the source code of Umbraco to figure out how things work then I recommend reading Andy Butlands article in last years Umbraco advent calendar, which gives a good introduction http://24days.in/umbraco/2014/traveller-guide/ - It might be relevant as a learning ressource.
Unfortunately it's been a while since I've done an Umbraco project from scratch (That's about to change soon fortunately :)) so can't quite remember how the out of the box property editors work but I'm thinking it should be possible to achieve what you need without doing your own extension - But in order to be sure I'll need to do some investigation - And if it's not covered out of the box perhaps some of the pickers from the nupickers project can achieve what you need? https://our.umbraco.org/projects/backoffice-extensions/nupickers
/Jan
Thanks for the reply, Jan. My original question was simply: How can I have a dropdownlist with values configured in the datatype where I can store a value rather than the text that the content editor sees.
I don't know if nuPickers will do that, it was one of the first packages I found, but it has no examples, and I wasn't really clear on what each one does or why there's loads of repeated ones (JSON, CSV etc. etc).
On a vaguely related note - did you know the "server side data" tutorial is wrong? https://our.umbraco.org/forum/umbraco-7/developing-umbraco-7-packages/48668-Creating-an-UmbracoAuthorizedJsonController :)
Hi Jan,
I just found those items before your comment. I'm currently trying to reverse engineer what I need from the related links property editor. If I managed to get it working, I'll release it to the wild so that other people don't have to waste the time trying to do the same.
Cheers,
Jason
Hi Ian
Ok, then I'd say go go go release! As you write others might benefit from it as well and if it's becoming popular then you can try making a core pull request to have the property editor become a part of the core and you will have made a nice contribution to the project - The joy of open source, right? :)
Regarding the documentation on serverside data - Nope I was not aware of that. I'm a frontend developer who spends way too much time on the forums but if you have found an error, which should be corrected you can actually also make a pull request to the documentation project if you'd like - Don't know if things have changed since the initial documentation was written. Some of the documentation is written by HQ and some of it is written by the community.
The downside to this can sometimes be that documentation becomes outdated and/or can be confusing to navigate - I think that things might be better organized and structured once the new version of the forum is released. The rumor has it that it should happen within the next month.
Now, time to release your package, eh? :)
/Jan
Hi Jan,
Is there any documentation anywhere on how to do a pull request? I use mercurial myself (and have only started doing so recently) so I'm not too familiar with contributing the projects let alone via GitHub.
Cheers,
Jason
Hi Jason
Actually Sebastiaan Janssen (Project manager at HQ) wrote a follow up to Andy's article on how to do your first pull request - You can read it here http://24days.in/umbraco/2014/your-first-pull-request/
Hope this helps :)
/Jan
@Jan I was in the process of trying to fix the documentation in a pull request, but I didn't know how that path change affected modules with custom routing... I also wasn't sure if creating my fork and editing it was enough? Wouldn't I need to point someone at the change before they'd pull it?
Here's my fixed version of the tutorial: https://github.com/IanGrainger/Umbraco4Docs/blob/master/Documentation/Extending-Umbraco/Property-Editors/creating-tutorial4-v7.md - what do I do with it? :)
Great. Thanks. One thing I have noticed is in some of the default property editors there are a lot of things like this hanging around:
I am assuming that this is like the Umbraco dictionary that the developer/user can add to via the settings menu but where are these values stored?
@Jan I'm trying to help, look! https://github.com/umbraco/Umbraco4Docs/pull/191 :)
@Ian - Ah great! Ehm...it's been a while since I've done a PR myself but once you have made your edits you need to push it and then you should be able to make a pull request on the https://github.com/umbraco/Umbraco4Docs project if I remember correctly - Otherwise it might help to read the PR article I pointed Jason to in my previous post - Even though it describes how to do a core pull request some of the steps involved in regards to forking and making the actual PR should be the same no matter, which project you're trying to modify :)
@Jason - Yeah, that kinda sucks but that's how it's currently working. Think I saw someone made a pull request so that dictionary items for custom plugins live in a certain folder in ones package so one does not need to manipulate and rely on core files that are being overwritten when upgrading - But for now you can find the language keys in the /Umbraco/Config/ dir - Then you can add keys to either the UI.XML and in specific languages in the /langs folder depending on where you need to add something. Make sure to recycle the app pool after adding keys for them to show up.
Hope this helps!
/Jan
@Ian - Aaah good, you managed to figure it out before I could even reply ;-)
/Jan
@Jason this package will do what you want: https://our.umbraco.org/projects/backoffice-extensions/archetype/
Archetype looks pretty awesome. It allows you to add an arbitrary number of sets of fields, for e.g. people (name, role, photo) in a field. So you could create entries with 'name' and 'value'.
I've not used it myself but some of my colleagues have and like it. The only concern is how much we come to rely on it and it's not part of Umbraco core!
Hi Ian
Why are you worried that archetype is not a part of the core? It's not the intention that everything should be in Umbraco's core out of the box. That's why it's rather easy to extend Umbraco with new property editors etc. for instance :)
/Jan
@Jan it was a fairly frivalous comment - simply a worry that if the guy that writes it decides to stop I don't know what we'd do! :)
I realise that the correct way to architect a large system is to keep some things out of the core, otherwise you end up with bloat ;)
@Ian - Valid concern indeed - But no need to worry too much regarding this package since it's open source :D https://github.com/imulus/Archetype
In general most of the community members are releasing their 3rd party packages as open source projects, which has the benefit that they can get help from others etc. and that if a person for some reason chooses to abandon the project others can keep forking it and modify it.
/Jan
Well I've brought Archetype into my Umbraco install and whilst it appears to be what I need, it has also corrupted my install after setting and changing some properties so looks like a pretty unstable package to me. Good job I backed up before installing it.
@Jason strange - it seems to be a fairly widely used package. Might be worth reporting to the project maintainers what got corrupted!?
@Jason - What version of Umbraco are you using and what version of archetype did you install? Unfortunately there can be a bug in the package, which could cause it. So the approach of backing things up before installing is always a good practice imho - And fortunately it's usually pretty simple if one is using mercurial/git since most packages don't add stuff to the database.
However the issue you encountered may have been fixed with the latest release of Archetype, which was done yesterday according to my Twitter feed? :) - V1.7.5 is out and is possible to fetch here https://our.umbraco.org/projects/backoffice-extensions/archetype/ - Maybe it's possible to see if the potential issue has been fixed in this release here https://github.com/imulus/Archetype/issues?q=is%3Aissue+is%3Aclosed ?
/Jan
@Jan I am using the latest version of Umbraco as well as the latest version of Archetype. Basically what happened is a I created a datatype based on my requirements then I edited it and when I went to my pages that contained the properties I could not select any options. After about 5 minutes it complained then that a node was missing even though I didn't delete anything. I'm restored my backup now and it seems to be running okay again though.
is working on a reply...