Copied to clipboard

Flag this post as spam?

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


  • Carlos Casalicchio 138 posts 561 karma points
    Mar 26, 2021 @ 18:01
    Carlos Casalicchio
    0

    Custom Grid Editor Model

    I have created a custom grid editor for a CTA box CTA Boxes

    Got it saving, and displaying on the front-end just fine. But, when I add multiple CTA boxes (before saving) all of them end up using the same model, so whatever changes I make to one of them, all three show the same thing.

    I know that the quote grid editor works fine without that issue, but I haven't been able to find where they implement this, so I can make it the same.

    How can I separate the model for each area? Other CTA Boxes

  • Amir Khan 1269 posts 2681 karma points
    Mar 26, 2021 @ 18:07
    Amir Khan
    0

    Possibly a scope issue with Angular? What does your editor view look like?

  • Carlos Casalicchio 138 posts 561 karma points
    Mar 26, 2021 @ 18:10
    Carlos Casalicchio
    0

    Hey Amir,

    This is the editor

    <div class="cta-box" ng-controller="CtaBoxController">
        <div class="card">
            <div class="card-body flex-fill">
                <h4 class="card-title"><textarea id="{{control.uniqueId}}_title" type="text" class="card-title-control transparent" ng-model="control.value.title" placeholder="the title of the box" title="Edit Title"></textarea></h4>
                <p class="card-text"><textarea id="{{control.uniqueId}}_subheader" class="card-sub-header transparent" type="text" ng-model="control.value.subheader" placeholder="the sub header for the box" title="Edit Sub-header"></textarea></p>
                <div class="button-block" ng-style="{'text-align': control.value.btnPosition}">
                    <div class="btn btn-rounded" ng-class="control.value.btnClass.value" role="button" data-href="{{control.value.btnLink}}" data-target="{{control.value.btnTarget}}">{{control.value.btnText}}</div>
                </div>
            </div>
        </div>
        <div class="show-url-button" ng-click="openDialog($scope.control)" title="edit button link"><i class="icon-link"></i></div>
    
        <!-- Edit Overlay -->
        <umb-overlay ng-if="overlay.show"
                     model="overlay"
                     view="overlay.view"
                     position="right">
        </umb-overlay>
    </div>
    

    And this is the controller

    angular.module("umbraco").controller("CtaBoxController", function ($scope) {
    
        if (!$scope.control.value || $scope.control.value === "") {
            $scope.control.value = $scope.control.editor.config;
            $scope.control.value.btnClass = $scope.control.editor.config.btnDefaults.btnClass;
            $scope.control.value.btnLink = $scope.control.editor.config.btnDefaults.btnLink;
            $scope.control.value.btnTarget = $scope.control.editor.config.btnDefaults.btnTarget;
            $scope.control.value.btnPosition = $scope.control.editor.config.btnDefaults.btnPosition;
            $scope.control.value.btnText = $scope.control.editor.config.btnDefaults.btnText;
        }
        $scope.control.uniqueId = uuidv4();
    
        function uuidv4() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }
    
        $scope.openDialog = function () {
    
            $scope.overlay = {
                title: "Edit CTA Button",
                view: "/App_Plugins/CtaBox/dialog.html",
                editModel: $scope.control.value,
                btnColor: $scope.control.editor.config.btnColor,
                show: true,
                submit: function (model) {
                    $scope.overlay.show = false;
                    $scope.overlay = null;
                },
                close: function (oldModel) {
                    $scope.overlay.show = false;
                    $scope.overlay = null;
                }
            }
        }
    });
    
  • Carlos Casalicchio 138 posts 561 karma points
    Apr 13, 2021 @ 22:50
    Carlos Casalicchio
    100

    I have figured it out. I need to create a clone of the objects, instead of just referencing them. So here is the full source code.

    CONTROLLER

    angular.module('umbraco').controller('CtaBoxController', function ($scope) {
    
        if (!$scope.control.value || $scope.control.value === '') {
            $scope.control.value = {};
            Object.assign($scope.control.value, $scope.control.editor.config.defaultValue);
        }
    
        $scope.openDialog = function () {
            var editModel = {};
            Object.assign(editModel, $scope.control.value.button);
            $scope.overlay = {
                title: 'Edit CTA Button',
                view: '/App_Plugins/CtaBox/dialog.html',
                editModel: editModel,
                btnColors: $scope.control.editor.config.btnColors,
                show: true,
                submit: function (model) {
                    $scope.control.value.button = model.editModel;
                    $scope.overlay.show = false;
                    $scope.overlay = null;
                },
                close: function () {
                    $scope.overlay.show = false;
                    $scope.overlay = null;
                }
            }
        }
    });
    

    EDITOR

    <div class="cta-box" id="{{::$id}}_cta" ng-controller="CtaBoxController">
        <div class="card">
            <div class="card-body flex-fill">
                <h4 class="card-title"><textarea id="{{::$id}}_title" name="{{::$id}}.title" type="text" class="card-title-control transparent" ng-model="control.value.title" placeholder="the title of the box" title="Edit Title"></textarea></h4>
                <p class="card-text"><textarea id="{{::$id}}_subheader" name="{{::$id}}.subheader" class="card-sub-header transparent" type="text" ng-model="control.value.subheader" placeholder="the sub header for the box" title="Edit Sub-header"></textarea></p>
                <div class="button-block" ng-style="{'text-align': control.value.button.position}">
                    <div class="btn btn-rounded" ng-class="control.value.button.cssclass.value" role="button" data-href="{{control.value.button.link}}" data-target="{{control.value.button.blank}}">{{control.value.button.text}}</div>
                </div>
            </div>
        </div>
        <div class="show-url-button" ng-click="openDialog($scope.control)" title="edit button link"><i class="icon-link"></i></div>
    
        <!-- Edit Overlay -->
        <umb-overlay ng-if="overlay.show"
                     model="overlay"
                     view="overlay.view"
                     position="right">
        </umb-overlay>
    </div>
    

    OVERLAY (DIALOG)

        <div>
    
        <!-- Button Text -->
        <div class="control-group umb-control-group">
            <div class="umb-el-wrap">
                <div class="controls">
                    <label class="control-label" for="text">
                        Button Text
                    </label>
                    <input type="text" ng-model="model.editModel.text" name="BtnText" />
                </div>
            </div>
        </div>
    
        <!-- Button Link -->
        <div class="control-group umb-control-group">
            <div class="umb-el-wrap">
                <div class="controls">
                    <label class="control-label" for="link">
                        Button Link
                    </label>
                    <input type="url" ng-model="model.editModel.link" name="link" />
                </div>
            </div>
        </div>
    
        <!-- Button Color -->
        <div class="control-group umb-control-group">
            <div class="umb-el-wrap">
                <div class="controls">
                    <label class="control-label" for="color">
                        Button Color
                    </label>
                    <select ng-model="model.editModel.cssclass" ng-options="option.label for option in model.btnColors track by option.value">
                    </select>
                </div>
            </div>
        </div>
    
        <!-- Button Position -->
        <div class="control-group umb-control-group">
            <div class="umb-el-wrap">
                <div class="controls">
                    <label class="control-label" for="position">
                        Button Position
                    </label>
                    <input type="radio" name="position" value="left" ng-model="model.editModel.position" />&nbsp;Left&nbsp;&nbsp;
                    <input type="radio" name="position" value="center" ng-model="model.editModel.position" />&nbsp;Center&nbsp;&nbsp;
                    <input type="radio" name="position" value="right" ng-model="model.editModel.position" />&nbsp;Right&nbsp;&nbsp;
                </div>
            </div>
        </div>
    
        <!-- Button Target -->
        <div class="control-group umb-control-group">
            <div class="umb-el-wrap">
                <div class="controls">
                    <label class="control-label" for="target">
                        Open in new window?
                    </label>
                    <input type="checkbox" ng-model="model.editModel.blank" value="{{model.editModel.blank}}" name="target" />
                    Yes, open in new window
                </div>
            </div>
        </div>
    
    </div>
    

    PACKAGE MANIFEST

       {
      "gridEditors": [
        {
          "name": "CTA Box",
          "alias": "ctaBox",
          "description": "Call-to-action box",
          "view": "/App_Plugins/CtaBox/editor.html",
          "render": "/App_Plugins/CtaBox/ctaBox.cshtml",
          "icon": "icon-shipping-box color-green",
          "config": {
            "defaultValue": {
              "title": "This is a title",
              "subheader": "Subheader here",
              "button": {
                "text": "Click me!",
                "cssclass": {
                  "value": "btn-primary"
                },
                "link": "http://umbraco.com",
                "blank": false,
                "position": "center"
              }
            },
            "btnColors": [
              {
                "label": "Default",
                "value": "btn-primary"
              },
              {
                "label": "Green",
                "value": "btn-success"
              },
              {
                "label": "Orange",
                "value": "btn-warning"
              },
              {
                "label": "Gray",
                "value": "btn-info"
              },
              {
                "label": "Red",
                "value": "btn-danger"
              }
            ],
            "btnPositions": [
              {
                "label": "Left",
                "value": "left"
              },
              {
                "label": "Center",
                "value": "center"
              },
              {
                "label": "Right",
                "value": "right"
              }
            ]
          }
        }
      ],
      "javascript": [
        "/App_Plugins/CtaBox/editor.controller.js"
      ],
      "css": [
        "/App_Plugins/CtaBox/style.css"
    
      ]
    }
    
Please Sign in or register to post replies

Write your reply to:

Draft