Copied to clipboard

Flag this post as spam?

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


  • ismini 14 posts 135 karma points
    Jul 04, 2017 @ 08:54
    ismini
    0

    Create MyDataType

    Hi,

    I would like to create my data type in which i would like put together a text area with a checkBox as a table with two columns (in which the first column contains the text area and the second contains the checkbox).

    Can someone tell me how can i create this ? (i'm new in umbraco and i work in a company which use the Umbraco platform quite a bit).

    Thanks in advance.

  • Alex Skrypnyk 6182 posts 24284 karma points MVP 8x admin c-trib
    Jul 04, 2017 @ 08:57
    Alex Skrypnyk
    0

    Hi Ismini

    You have to create custom property editor, look here how to do it - https://our.umbraco.org/documentation/tutorials/Creating-a-Property-Editor/

    Thanks,

    Alex

  • ismini 14 posts 135 karma points
    Jul 04, 2017 @ 09:58
    ismini
    0

    I have already read it but i will try it one more time.

    If i have problem again maybe i need a little bit more help.

    Thanks

  • ismini 14 posts 135 karma points
    Jul 05, 2017 @ 11:53
    ismini
    100

    Hi,

    I want to add functionality on the checkbox and i don't know how i can save the stage after the save. (In all tries where i done after the save the checkbox lost its value)

    For more informations : In my template i want to show only fields which have selected the checkbox

    Here is my code :

    package.manifest :

    {
        propertyEditors: [
            {
                alias: "XMLGames",
                name: "XML Games",
                editor: {
                view: "~/App_Plugins/XMLGames/xmlgameseditor.html",
                valueType: "JSON"
            },
            prevalues: {
                fields: [
                    {
                        label: "Number of columns",
                        description: "Enter the number of columns",
                        key: "cols",
                        view: "number",
                        validation: [
                            {
                                type: "Required" 
                            }                       
                        ]
                    },
                    {
                        label: "Number of rows",
                        description: "Enter the number of rows",
                        key: "rows",
                        view: "number",
                        validation: [
                            {
                                type: "Required" 
                            }                       
                        ]
                    },
                    {
                        label: "Manage rows",
                        description: "Let user add/remove and sort rows",
                        key: "manageRows",
                        view: "boolean"
                    }               
                ]
            }  
            },
        ],
        javascript: [
            '~/App_Plugins/XMLGames/xmlgames36.controller.js'
        ]
    }
    

    the HTML file :

    <div ng-controller="XMLGames.XMLGamesController">
        <table>
            <tbody ui-sortable="sortableOptions" ng-model="model.value">
                <tr ng-repeat="row in model.value">
    
                    <td ng-repeat="col in row track by $id($index)">
                        <textarea type="text" ng-model="row[$index]" ng-class="{dimmed: isDisabled(fieldset)}"></textarea>
                    </td>
                    <td>
                             <input type="checkbox" name="checkboxlist"/>
                    </td>
                    <td ng-show="model.config.manageRows">
                        <div class="row-buttons">
                            <a href="#" prevent-default ng-click="addRow($index)" ng-show="canAddRow()">
                                <i class="icon icon-add blue"></i>
                            </a>
                            <a href="#" prevent-default="" ng-click="removeRow($index)" ng-show="canRemoveRow()">
                                <i class="icon icon-delete red hover-show"></i>
                            </a>
                            <a>
                                <i class="icon icon-navigation handle" ng-show="canSort()"></i>
                            </a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    

    and the controller.js :

    angular.module("umbraco").controller("XMLGames.XMLGamesController", function ($scope, contentResource) {
        var rows = 2;
        var cols = 1;
    
        if ($scope.model.config != null) {
            if ($scope.model.config.rows != null) { rows = parseInt($scope.model.config.rows) }
            if ($scope.model.config.cols != null) { cols = parseInt($scope.model.config.cols) }
        }
    
        if (!$scope.model.value) {
            $scope.model.value = createArray(rows, cols);
        }
    
        //add row to the model
        $scope.canAddRow = function () {
            if (isNaN(parseInt($scope.model.config.maxRows, 10))) {
                return true;
            }
    
            return ($scope.model.config.maxRows > $scope.model.value.length);
        }
    
        $scope.addRow = function ($index) {
            var newRow = [];
            newRow = createArray(cols);
            $scope.model.value.splice($index + 1, 0, newRow);
        }
    
        //remove a row from the model
        $scope.canRemoveRow = function () {
            return ($scope.model.value.length > 1);
        }
    
        $scope.removeRow = function ($index) {
            if ($scope.model.value.length > 1) {
                if (confirm('Are you sure you want to remove this?')) {
                    $scope.model.value.splice($index, 1);
                }
            }
        }
    
        //sort config  
        $scope.canSort = function () {
            return ($scope.model.value.length > 1);
        }
    
        $scope.sortableOptions = {
            axis: 'y',
            cursor: "move",
            handle: ".handle",
            update: function (ev, ui) {
    
            },
            stop: function (ev, ui) {
    
            }
        };
        function createArray(length) {
            var arr = new Array(length || 0),
                i = length;
    
            if (arguments.length > 1) {
                var args = Array.prototype.slice.call(arguments, 1);
                while (i--) arr[length - 1 - i] = createArray.apply(this, args);
            }
    
            return arr;
        }
    });
    
  • 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