Copied to clipboard

Flag this post as spam?

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


  • Petras Surna 90 posts 144 karma points
    Jan 21, 2021 @ 01:47
    Petras Surna
    0

    How to change an Umbraco Textstring value from a custom property editor?

    I have a simple custom property editor that renders as a button (see image)

    When it is clicked, how do I change the value inside the Textstring?

    <div ng-controller="My.MarkdownEditorController">
      <a target="_default" ng-click="changeValue()" class="btn btn-info">Copy Organisation Address to Member</a>
    </div>
    
    
    angular.module("umbraco").controller("My.MarkdownEditorController",
      function ($scope, $http) {
    
        $scope.changeValue = function () {
    
          //what do I do here to access the textbox title?
    
        };
    
      });
    

    enter image description here

  • Petras Surna 90 posts 144 karma points
    Jan 21, 2021 @ 04:05
    Petras Surna
    102

    I think I worked it out, not sure if this is correct but it works

    angular.module("umbraco").controller("My.MarkdownEditorController",
      function ($scope, $http) {
    
        $scope.changeValue = function () {
    
          var title = $("#title");
          title.val("this is how to do it");
          setTimeout(function(){ title.trigger("input") }, 10);
    
    
        };
    
      });
    

    Not sure if the trigger is needed or what it should be set to either

  • Mark Drake 134 posts 458 karma points c-trib
    Jan 21, 2021 @ 05:04
    Mark Drake
    3

    I tested the code below and I was able to use it to find a property (by its alias) and update the value. I tested it on a simple string in my doc type named seoTitle. (I don't know if this is the best method, or even a recommended practice.)

    const controller = function ($scope, editorState) {
    
        $scope.test = function (e) {
            let property = findPropertyByAlias("seoTitle");
            if (property) {
                property.value = "test seo title";
            }
        };
    
        function findPropertyByAlias(alias) {
            let state = editorState.getCurrent(),
                variant = state.variants.find(v => v.active),
                value = null;
    
            for (let i = 0, l = variant.tabs.length; i < l; i++) {
                let tab = variant.tabs[i],
                    property = tab.properties.find(p => p.alias === alias);
    
                if (property) {
                    value = property;
                    break;
                }
            }
    
            return value;
        }
    };
    
    angular.module("umbraco").controller("JustATest", controller);
    

    The template is a simple button with the ng-click set to call test($event).

    Also heads up that this is using ES6 and could be transpiled down to ES5 for wider browser support.

Please Sign in or register to post replies

Write your reply to:

Draft