custom property editor with multiple inputs

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Kelsee Ishmael 71 posts 158 karma points

Oct 29, 2014 @ 21:26
0

Custom property editor with multiple inputs
I'm making my first property editor and I am going off of this tutorial.

http://umbraco.github.io/Belle/#/tutorials/CreatingAPropertyEditor

I would like to have two different input fields instead of just one. Here is an example of what I have. I am stuck on where to go from here though. Any advice, additional tutorials, etc that will show how to get what I'm looking for is appreciated! :)

View:
```
<div ng-controller="MyPackage.MarkDownEditor">
    <textarea id="testone" ng-model="model.value"></textarea>
    <input id="testtwo" type="text" ng-model="model.value"/>
</div>
```
Js
```
(function () {
    angular.module("umbraco")
     .controller("MyPackage.MarkDownEditor",
     function ($scope) {
     alert("The controller has landed"); 
     });
})();
```
Thanks!
Copy Link
Dan Lister 416 posts 1974 karma points c-trib

Oct 30, 2014 @ 15:04

0

Hi Kelsee,

Are the two inputs to have the same content? If so, your property editor should work correctly. I'm no Angular expert but I think by assigning "model.value" as the model to your inputs, saving and restoring of your data type should be correct and automatic.

Are you having trouble creating the manifest for your data type? Once you have created your manifest, you'll be able to create a data type which uses your property editor.

Thanks, Dan.

Copy Link
Kelsee Ishmael 71 posts 158 karma points

Oct 30, 2014 @ 16:32
0
Hey Dan,

Thanks for the reply! Sorry for the confusion, but I need the two inputs to have different values. I have a manifest and everything is working except that I need the two inputs to be able to update and save different values. For example if I wanted to store a left value and a right value:
```
<label>LEFT</label><textareaid="leftInput"ng-model="model.value"></textarea> <label>RIGHT</label><inputid="rightInput"type="text"ng-model="model.value"/>
```
I know technically, I could create two properties on the doctype, but I'm trying to move away from that for creating a custom plugin to be used on multiple sites - it would be easiest to have my group on inputs in a single datatype that can be used on multiple doctypes/sites. Above is just a simple example of what I am looking to do. Thanks!
Copy Link
Dan Lister 416 posts 1974 karma points c-trib

Oct 30, 2014 @ 16:33
0
Ah okay. In that case, you can change your model binding to something like the following:
```
<label>LEFT</label><textareaid="leftInput"ng-model="model.value.left">
```
Copy Link
Kelsee Ishmael 71 posts 158 karma points

Oct 30, 2014 @ 16:44

0

I tried that and you cannot type into the inputs for some reason.. :-\

Copy Link

Dan Lister 416 posts 1974 karma points c-trib

Oct 30, 2014 @ 16:56

Hey Kelsee,

I've just tried with a clean install of Umbraco and using the following code, it works as expected:

Package.manifest:

{
  "propertyEditors": [
    {
      "name": "MyDataType",
      "alias": "MyDataType",
      "editor": {
        "view": "~/App_Plugins/MyDataType/MyDataTypeView.html",
        "valueType": "JSON"
      }
    }
  ],
  "javascript": [
    "~/App_Plugins/MyDataType/MyDataTypeController.js"
  ]
}

MyDataTypeView.html:

<div ng-controller="MyDataTypeController" class="guiInputStandardSize">
    <textarea id="testone" ng-model="model.value.left"></textarea>
    <input id="testtwo" type="text" ng-model="model.value.right" />
</div>

MyDataTypeController.js:

angular.module("umbraco").controller("MyDataTypeController", function ($scope) {});

Hope that helps.

Thanks, Dan.

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Oct 30, 2014 @ 17:13

2

Hi Kelsee

Just skimmed this post and I actually just want to add that you can learn more about Umbraco and AngularJS in the workbook found here https://github.com/umbraco/AngularWorkbook - I know it's not really an answer to the question but seems like Dan has got you covered - Just wanted to mention it since it might be of interest to you :)

Cheers, Jan

Copy Link
Kelsee Ishmael 71 posts 158 karma points

Oct 30, 2014 @ 17:18

1

Thank you so much Dan! Not sure what I was doing wrong initally, but it is working now!

Also, thanks Jan for the link!

Copy Link
Dan 11 posts 82 karma points

May 23, 2018 @ 11:44

1

Hi @kelsee

We need to put the "valueType" : "JSON" in the Package.manifest file.

Thanks @Dan - you saved my day as well!

Copy Link
Kiko Mats 13 posts 103 karma points

Feb 19, 2021 @ 12:43

0

Hello Everyone,

I know this is an old post but I'm trying to achieve the same thing (2 textboxes in 1 datatype). However, I'm unable to make it work. I have two issues:

1.) I'm unable to add values on content level. I'm getting these errors:

TypeError: Cannot create property 'right' on string '' TypeError: Cannot create property 'left' on string ''

2.) Also, how do I access the values for both texboxes from a view? Should I go with:

Model.Value

Is this the proper way of calling these values? I'm using Umbraco 8 by the way.

Thank you.

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?