Last chance to get discounted tickets to Codegarden... Price goes up on Tuesday at 20:00 CEST!

Copied to clipboard

Flag this post as spam?

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


  • Bert Detailleur 10 posts 80 karma points
    6 days ago
    Bert Detailleur
    0

    Custom Property Editor properties not saved.

    Hi all!

    I'm trying to set up a simple Custom Property Editor that has an input coupled to the GoogleMaps API. If users begin to type an address, an autocomplete appears. If they select an address from the autocomplete, it fills out some values in seperate inputs below the autocomplete.

    What's frustrating me is that I cannot get it to save to the database when clicking 'save and publish'. I'm using a local instance of Umbraco V7.

    this is my html:

    <div class="container" ng-controller="addressautocomplete.editorcontroller">
    
    <div id="locationField">
        <input id="autocomplete" placeholder="Enter your address" ng-model="model.value.address" width="100%" value="{{model.value.address}}"
               onfocus="geolocate()" type="text" />
    </div>
    <br />
    <table id="address">
        <tr>
            <td class="label">Street address</td>
            <td class="slimField">
                <input class="field" id="street_number" ng-model="model.value.streetNumber" value="{{model.value.streetNumber}}" />
            </td>
            <td class="wideField" colspan="2">
                <input class="field" id="route" ng-model="model.value.route" value="{{model.value.route}}" />
            </td>
        </tr>
        <tr>
            <td class="label">City</td>
            <!-- Note: Selection of address components in this example is typical.
                 You may need to adjust it for the locations relevant to your app. See
                 https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
            -->
            <td class="wideField" colspan="3">
                <input class="field" id="locality" ng-model="model.value.locality" value="{{model.value.locality}}" />
            </td>
        </tr>
        <tr>
            <td class="label">State</td>
            <td class="slimField">
                <input class="field" ng-model="model.value.state"
                       id="administrative_area_level_1" value="{{model.value.state}}" />
            </td>
            <td class="label">Zip code</td>
            <td class="wideField"> 
                <input class="field" id="postal_code" ng-model="model.value.zipcode" value="{{model.value.zipcode}}" />
            </td>
        </tr>
        <tr>
            <td class="label">Country</td>
            <td class="wideField" colspan="3">
                <input class="field" id="country" ng-model="model.value.country" value="{{model.value.country}}" />
            </td>
        </tr>
    </table>
    

    And here's my controller:

    angular.module("umbraco")
    .controller("addressautocomplete.editorcontroller", function ($scope, notificationsService) {
    
    });
    

    and lastly, my manifest:

    {
      "propertyEditors": [
        {      
          "name": "Address Autocomplete",
          "alias": "addressAutocomplete",
          "isParameterEditor": true,
          "icon": "icon-bird",
          "group": "Google",
          "editor": {
            "view": "/app_plugins/AddressLookup/editor.html"
          }
        }
      ],
      "javascript": [
        "/app_plugins/AddressLookup/editor.controller.js"
      ]
    }
    

    Anything I'm doing wrong? I looked over some tutorials for the custom property editor and this seems like the way to do it?

    Note: The script that handles the Google API is in my template, I tried to get it to work over the controller, but failed miserably. So this was kind of a lazy fix

  • Michaël Vanbrabandt 725 posts 2876 karma points c-trib
    5 days ago
    Michaël Vanbrabandt
    0

    Hi Bert,

    first of all Welcome to the Umbraco Our Community!

    Don't know it this is the issue but on all of your inputs you do a ng-model and a value binding.

    Try removing the value attribute to see if this works. The ng-model will set the value of the input so no need for the value attribute.

    Hope this helps.

    /Michaël

  • Bert Detailleur 10 posts 80 karma points
    5 days ago
    Bert Detailleur
    0

    Thanks for your reply Michaël!

    I removed the value binding, but no luck.

    When looking at the database, in the table cmsPropertyData, the field dataNvarchar shows an array filled with null values like so:
    [ null, null, null, null, null, null ]

    Does this mean it recognises the ng-model, but not it's value?

  • Michaël Vanbrabandt 725 posts 2876 karma points c-trib
    5 days ago
    Michaël Vanbrabandt
    0

    Hi Bert,

    could you try to add the following to your package.manifest:

     "editor": {
        "view": "/app_plugins/AddressLookup/editor.html",
        "valueType": "JSON"
      }
    

    Hope this helps!

    /Michaël

  • Bert Detailleur 10 posts 80 karma points
    5 days ago
    Bert Detailleur
    0

    Hi Michaël

    This was already added inside the "propertyEditors" category, the only thing that's different was the missing "valueType": "JSON".

    I added this and still nothing.

    Thanks for your help so far!

    /Bert

  • Michaël Vanbrabandt 725 posts 2876 karma points c-trib
    5 days ago
    Michaël Vanbrabandt
    0

    Hi Bert,

    yes forgot to mention about the part of valueType.

    Do you get console errors?

    Thanks!

    /Michaël

  • Bert Detailleur 10 posts 80 karma points
    5 days ago
    Bert Detailleur
    0

    Hi Michaël

    I get 2 exactly the same errors, one when the page has landed and one after clicking the save button

    This is the error:

    "Error parsing header X-XSS-Protection: 1; mode=block; report=https://www.google.com/appserve/security-bugs/log/youtube: insecure reporting URL for secure page at character position 22. The default protections will be applied."

    It "looks" irrelevant to this problem though.

    /Bert

  • Michaël Vanbrabandt 725 posts 2876 karma points c-trib
    5 days ago
    Michaël Vanbrabandt
    0

    Hi Bert,

    can you try the following.

    Remove the part of Google Maps and just add the input and textarea fields. Then add manually some values in it and hit save and publish.

    Does that work?

    Hope this helps!

    /Michaël

  • Bert Detailleur 10 posts 80 karma points
    5 days ago
    Bert Detailleur
    0

    Hi Michael

    I removed everything and again no luck so far. No new errors either.

    I tried to add the property editor to another page, and save there but also nothing. The only difference now is that it saves an empty array.

    T

    Thanks again for your suggestions!

  • Bert Detailleur 10 posts 80 karma points
    3 days ago
    Bert Detailleur
    0

    Update from the situation:

    I started from scratch and I'm now able to save values to the db, without using the GoogleMapsApi.

    I noticed when input fields are manipulated from javascript, that the binding doesn't seem to notice that something has changed. As a consequence, it doesn't save a value. When I change the value manually, then it does save.

    In my context: the address autocomplete fills out the address input fields automatically when clicked using javascript.

  • Michaël Vanbrabandt 725 posts 2876 karma points c-trib
    2 days ago
    Michaël Vanbrabandt
    0

    Bert,

    can you show us the code? Why use javascript and not Angularjs for setting the values of your input fields?

    Thanks!

    /Michaël

  • Bert Detailleur 10 posts 80 karma points
    2 days ago
    Bert Detailleur
    0

    basically the same code as before, but with this javascript file added: you can click an address from a drop down, which is filled with addresses from googlemapsApi, then select one, and it fills out your form automatically

    html:

    <div class="container" ng-controller="addressautocomplete.editorcontroller">
    
    <div id="locationField">
        <input id="autocomplete" placeholder="Enter your address" ng-model="model.value.address"
               onfocus="geolocate()" type="text" />
        <!--<input placeholder="Enter your address" ng-model="model.value.address" type="text" />-->
    </div>
    
    <br />
    <table id="address">
        <tr>
            <td class="label">Street address</td>
            <td class="slimField">
                <input class="field" id="street_number" ng-model="model.value.streetNumber" />
            </td>
            <td class="wideField" colspan="2">
                <input class="field" id="route" ng-model="model.value.route" />
            </td>
        </tr>
        <tr>
            <td class="label">City</td>           
            <td class="wideField" colspan="3">
                <input class="field" id="locality" ng-model="model.value.locality" />
            </td>
        </tr>
        <tr>
            <td class="label">State</td>
            <td class="slimField">
                <input class="field" ng-model="model.value.state"
                       id="administrative_area_level_1" />
            </td>
            <td class="label">Zip code</td>
            <td class="wideField">
                <input class="field" id="postal_code" ng-model="model.value.zipcode" />
            </td>
        </tr>
        <tr>
            <td class="label">Country</td>
            <td class="wideField" colspan="3">
                <input class="field" id="country" ng-model="model.value.country" />
            </td>
        </tr>
    </table>
    

    controller:

    angular.module("umbraco")
    .controller("addressautocomplete.editorcontroller", function ($scope, notificationsService) {
    
    });
    

    manifest:

    {
    

    "propertyEditors": [ {
    "name": "Address Autocomplete", "alias": "addressAutocomplete", "isParameterEditor": true, "icon": "icon-bird", "group": "Google", "editor": { "view": "/appplugins/AddressLookup/editor.html", "valueType": "JSON" } } ], "javascript": [ "/appplugins/AddressLookup/js/editor.controller.js", "/app_plugins/AddressLookup/js/addressLookup.js" ] }

    googlemaps JS:

    function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();
    
    for (var component in componentForm) {
        document.getElementById(component).value = '';
        document.getElementById(component).disabled = false;
    }
    
    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;            
        }
    }
    

    }

Please Sign in or register to post replies

Write your reply to:

Draft