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 177 posts 738 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 1289 posts 2746 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 177 posts 738 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 177 posts 738 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"
    
      ]
    }
    
  • 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