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
    Kelsee Ishmael
    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!
  • Dan Lister 416 posts 1974 karma points c-trib
    Oct 30, 2014 @ 15:04
    Dan Lister
    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.

  • Kelsee Ishmael 71 posts 158 karma points
    Oct 30, 2014 @ 16:32
    Kelsee Ishmael
    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!

  • Dan Lister 416 posts 1974 karma points c-trib
    Oct 30, 2014 @ 16:33
    Dan Lister
    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">
    
  • Kelsee Ishmael 71 posts 158 karma points
    Oct 30, 2014 @ 16:44
    Kelsee Ishmael
    0

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

  • Dan Lister 416 posts 1974 karma points c-trib
    Oct 30, 2014 @ 16:56
    Dan Lister
    103

    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.

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Oct 30, 2014 @ 17:13
    Jan Skovgaard
    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

  • Kelsee Ishmael 71 posts 158 karma points
    Oct 30, 2014 @ 17:18
    Kelsee Ishmael
    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!

  • Dan 11 posts 82 karma points
    May 23, 2018 @ 11:44
    Dan
    1

    Hi @kelsee

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

    Thanks @Dan - you saved my day as well!

  • Kiko Mats 13 posts 103 karma points
    Feb 19, 2021 @ 12:43
    Kiko Mats
    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.

Please Sign in or register to post replies

Write your reply to:

Draft