Sign in Register
Go to solution
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

    Extending Umbraco and using the API
    Umbraco 7

    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
Please Sign in or register to post replies

Write your reply to:

Draft