Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Max 80 posts 437 karma points
    Nov 28, 2016 @ 15:03
    Max
    2

    Custom Section - Reuse Datatype dropdownlist

    I'm trying to reuse a custom datatype in my custom section... I've been following a few different tutorials and have have successfully gotten my user control rendering with the correct prevalues. However, I cannot figure out how to set the dropdown value when I load an existing record.

    i'm initializing the datatype control model:

    angular.module("umbraco").controller("BoardMember.editController", function ($scope, $routeParams, boardMemberResource, notificationsService, navigationService, entityResource, dataTypeResource) {

...

    $scope.board_titles = []; // { model: {} };
var bt_model = {
    name: "board_title",
    alias: "board_title",
    label: "Board Position",
    view: "dropdown",
    description: 'Enter the position on the board this member currently holds.',
    config: {
        items: [],
        multiple: false,
        hideLabel: true
    },
    hideLabel: true,
    value: "",
    existingValue: null,
    hasValue: false
};

    ... Then if a record is being edited:

     // GET BOARD MEMBER POSITION
        dataTypeResource.getByName("Commissioner - Title - Dropdown list").then(function (datatype) {
            $scope.board_titles[0] = {
                model: bt_model,
                alias: "xxxxx",
                label: "weeeeeeeeeee",
                hideLabel: true,
                existingValue: $scope.model.boardMember.board_title
            };

            $scope.board_titles[0].model.config = {
                items: datatype.preValues[0].value,
                multiple: false,
                hideLabel: true
            };

            $scope.board_titles[0].model.value = $scope.model.boardMember.board_title;
        });

    ... my custom view for the section looks like this:

     <umb-control-group ng-if="loaded" label="Board Position" >
         <umb-property ng-repeat="bt in board_titles" property="bt">
                <umb-editor model="bt.model" ></umb-editor>
         </umb-property>
 </umb-control-group>

    Is there an "easier" way or a "more appropriate" way to accomplish this task (reusing custom datatypes in sections)?

    Copy Link
  • Max 80 posts 437 karma points
    Nov 28, 2016 @ 15:04
    Max
    0

    One thing I noticed, when the form is rendered the dropdown control is given the name "dropdownlist" from the view, not my alias...some of my model properties have been created as a part of my testing...

    Copy Link
  • Max 80 posts 437 karma points
    Nov 28, 2016 @ 18:47
    Max
    0

    This is what has been rendered.

    This is a screen shot of whats being rendered...

    Copy Link
  • Max 80 posts 437 karma points
    Dec 02, 2016 @ 14:06
    Max
    0

    So I've figured a few things out... The model="model.value" needs to be an object:

     $scope.board_titles[0].model.value = {value,"[your value]", sortOrder="n"};

    I had to create a custom property editor essentially. I copied the dropdown.html from Umbraco/views/propertyeditors/ as the foundation for my custom dropdown editor:

    <div ng-controller="BoardMember.BoardPositionDropdownController" ng-switch="model.config.multiple">
    <select name="dropDownList{{model.alias}}"
            class="umb-editor umb-dropdown"
            ng-switch-default
            ng-model="model.value"
            ng-options="item.id as item.value for item in model.config.items track by item.value" 
            ng-change="changed()">
    </select>
    <span ng-model="model.value"></span><span ng-bind="model.value"></span>
</div>

    Note the select name property: I tacked on my property model.alias to avoid any DOM conflicts that might occur (this was an edit from the Umbraco view).

    I also added the "..track by..." statement to the ng-options.

    Now my dropdown is loading the prevalues from my custom datatype I created in the Developer / datatypes area of the backoffice... and my saved record in the database is loading the correct value on the edit page...However...when I change or select a new option, the select control clears itself, the list is still there, but no values can be actually selected...

    I put a function on ng-change and write $scope.model to console and it's now undefined...

    Copy Link
  • Max 80 posts 437 karma points
    Dec 05, 2016 @ 14:14
    Max
    0

    So after a bit more debugging I had to add a $watch to the controller for my custom view:

    angular.module("umbraco")
.controller("BoardMember.BoardPositionDropdownController",
function ($scope) {
    var _mod = this;
    var _scp = $scope;

    $scope.$watch('model.value', function (newVal, oldVal, scope) {
        scope.model.value = (typeof newVal === "undefined") ? oldVal : newVal;
    });
});

    So now it loads my saved value, and I can selected the new value if I want to edit it... BUT NOW... I can't find the new value in scope to pass to my parent controller scope...

    Copy Link
  • Max 80 posts 437 karma points
    Dec 06, 2016 @ 15:06
    Max
    100

    well... I solved the final issue of not being able to save the selected value upon editing...

     ng-options="item.id as item.value for item in model.config.items track by item.value"

    Changed to (removed "item.id as"):

     ng-options="item.value for item in model.config.items track by item.value"
    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies