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

    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 6132 posts 23951 karma points MVP 7x 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;
        }
    });
    
Please Sign in or register to post replies

Write your reply to:

Draft