Copied to clipboard

Flag this post as spam?

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


  • Konstantin Kožokar 6 posts 86 karma points
    Jan 02, 2018 @ 13:30
    Konstantin Kožokar
    0

    Grid layout in Property editor

    Good afternoon, is there any way how to add basic grid layout to property editor?

  • Rune Hem Strand 147 posts 911 karma points hq c-trib
    Jan 02, 2018 @ 18:01
    Rune Hem Strand
    0

    Hi Konstantin

    Not quite sure what you're asking here? Grid Layout is a property editor already :)

    You'll increase the chance of getting an answer if you add some details about:

    • What you're trying to achieve
    • What you have tried so far
    • What the expected outcome is

    All the best
    Rune

  • Konstantin Kožokar 6 posts 86 karma points
    Jan 03, 2018 @ 12:13
    Konstantin Kožokar
    0

    Hi Rune, I'm trying to create news feed plugin on my admin page. I'm kinda solved it. Here is the result what i have: enter image description here

    I had problem to add grid layout selector. Hopefully, somehow I added it. But now I have no idea how to get data from it. Here is what i have:

    package.manifest:

       {
    "propertyEditors": [
        {
            "alias": "livefeed",
            "name": "LiveFeed",
            "icon": "icon-poll",
            "editor": {
                "view": "~/App_Plugins/LiveFeed/editor.html"
            }
        }
    ],
    "javascript": [
        "~/App_Plugins/LiveFeed/editor.controller.js"
    ],
    "css": [
        "~/App_Plugins/LiveFeed/editor.css"
    ]
    }
    

    editor.controller.js

    function Controller($scope, dataTypeResource, sectionResource) {
     $scope.myProperty = {
    
            label: 'bodyText',
            description: 'Load some stuff here',
            view: 'grid',
            config: {
                items: {
                    "styles": [
    
                    ],
                    "config": [
    
                    ],
                    "columns": "8",
                    "templates": [
                        {
                            "name": "1 column layout",
                            "sections": [
                                {
                                    "grid": 8
                                }
                            ]
                        }
                    ],
                    "layouts": [
                        {
                            "name": "Celá šířka",
                            "areas": [
                                {
                                    "grid": 8,
                                    "allowAll": false,
                                    "allowed": [
                                        "rte",
                                        "media",
                                        "macro"
                                    ]
                                }
                            ],
                            "label": "Celá šířka"
                        },
                        {
                            "name": "2 sloupce",
                            "areas": [
                                {
                                    "grid": 4,
                                    "allowAll": false,
                                    "allowed": [
                                        "rte",
                                        "media",
                                        "macro"
                                    ]
                                },
                                {
                                    "grid": 4,
                                    "allowAll": false,
                                    "allowed": [
                                        "rte",
                                        "media",
                                        "macro"
                                    ]
                                }
                            ],
                            "label": "2 sloupce"
                        }
                    ]
                }
            }
        }; 
    }; 
    angular.module("umbraco").controller("livefeed", Controller);
    

    editor.html:

    <div ng-controller="livefeed" class="timeline">
    //...
            <div class="timeline-content">
                <umb-editor model="myProperty"></umb-editor>
            </div>
    //...
    </div>  
    

    The expected outcome is sending serialized data from grid layout selector to server by pressing save button.

  • Konstantin Kožokar 6 posts 86 karma points
    Jan 03, 2018 @ 13:58
    Konstantin Kožokar
    0

    Ok i found the solution, data are saved in myProperty.value :) thx a lot

  • Rune Hem Strand 147 posts 911 karma points hq c-trib
    Jan 03, 2018 @ 14:19
    Rune Hem Strand
    100

    Hi Konstantin

    Yup, that translates to model.value

    h5yr, sometimes it helps writing things down ;)

    All the best
    Rune

Please Sign in or register to post replies

Write your reply to:

Draft