Copied to clipboard

Flag this post as spam?

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


  • Rihab 104 posts 388 karma points
    Nov 21, 2018 @ 09:41
    Rihab
    0

    use a database value in a custom property type

    Hi Everyone, I create my own custom property type that allows the content editor to select a location in a Bing map, I have 2 issues :

    1. 1- I want to get the Bing map API key from my database
    2. 2- I created a text box that is Model.value and when the user selects a location in the map the text box value changed to log,lat of the location but the model.value is not changing until he writes something manually is the textbox. this is my view code

    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=[my API Key ]&callback=loadMapScenario' async defer></script>
    
    
    
    
    <script type='text/javascript'>
        var map;
        function loadMapScenario() {
            var navigationBarMode1 = Microsoft.Maps.NavigationBarMode;
            result = document.getElementById("location").value.split(',');
            var mapProp = {
                center: new Microsoft.Maps.Location(result[0], result[1]),
                zoom: 16,
                mapTypeId: Microsoft.Maps.MapTypeId.aerial,
                navigationBarMode: navigationBarMode1.compact,
            };
            map = new Microsoft.Maps.Map(document.getElementById('BingMap'), mapProp);
            Microsoft.Maps.Events.addHandler(map, 'dblclick', function (e) { handleArgs('mapDoubleclick', e); });
            var location = new Microsoft.Maps.Location(result[0], result[1]);
            var pushpin = new Microsoft.Maps.Pushpin(location, null);
            map.entities.push(pushpin);
            function handleArgs(id, e) {
              //setFocusToTextBox()
                var point = new Microsoft.Maps.Point(e.getX(), e.getY());
                var loc = e.target.tryPixelToLocation(point);
                document.getElementById("location").value = loc.latitude
                    + "," + loc.longitude;
                var location = new Microsoft.Maps.Location(loc.latitude, loc.longitude);
                map.entities.clear();
                var pushpin1 = new Microsoft.Maps.Pushpin(location, null);
                var memId = loc.latitude
                    + ", " + loc.longitude;
    
                map.entities.push(pushpin1);
    
                setFocusToTextBox()
    
            }
            function setFocusToTextBox() {
                document.getElementById("location").focus();
                vm.model.value = document.getElementById("location").value;
            }
        }
    </script>
    
    
    <small>Input address</small>
    <br />
    <input type="text" ng-model="model.value"  ng-change="vm.savevalue()"  id="location"  class="umb-editor" />
    <br />
    

    and this is my controller code:

    (function () {
    "use strict";
    function MapController($scope) {
        var vm = this;
        vm.checkValue = checkValue;
        vm.savevalue = savevalue;
        function checkValue() {
            if ($scope.model.value === "" || $scope.model.value === null) {
               // alert($scope.model.value);
                $scope.model.value = "Damascus";
            }
        }
        function savevalue() {
           // alert($scope.model.value);
            if ($scope.model.value === "" || $scope.model.value === null) {
              //  alert($scope.model.value);
                $scope.model.value = "Damascus";
            }
        }
        function onInit() {
           // alert($scope.model.value);
            checkValue();
        }
        onInit();
        var unsubscribe = $scope.$on("formSubmitting", function (ev, args) {
          //  $scope.model.value += "0";
            savevalue();
        });
    
    }
    angular.module("umbraco").controller("Bing.MapController", MapController);})();
    

    Thanks.

  • Dan Diplo 1554 posts 6205 karma points MVP 5x c-trib
    Nov 21, 2018 @ 13:06
    Dan Diplo
    101

    Normally if you want to retrieve a value from a database via the Angular layer then you'd need to create an UmbracoAuthorizedJsonController (in your C# code) that does this and then returns the value as JSON to your Angular layer.

    However, the normal way you configure Property Editors is via Pre Values. So when someone creates an instance of the Property Editor they would enter the API key and then this can be retrieved in the controller.

    https://our.umbraco.com/Documentation/Extending/Property-Editors/package-manifest#pre-values

Please Sign in or register to post replies

Write your reply to:

Draft