Copied to clipboard

Flag this post as spam?

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


  • Sören Deger 726 posts 2833 karma points c-trib
    Feb 26, 2015 @ 14:38
    Sören Deger
    0

    Restrict macros per grid

    Hello,

    is there a way to restrict specific macros per grid? In my specific example I have tree grid property editors and 5 macros. I will set which macros are available in the indivual grid:

    grid1:

    • macro1 
    • macro 2
    • macro 3
    • macro 4
    grid2:
    • macro2 
    • macro5
    grid3:
    • macro1
    • macro2
    • macro5
    Is this possible? I can only allow the macro for all grids or not, but I can'f found a settings to select individuals macros in the grid property editor.
    Best,
    Sören

  • Dennis Aaen 4437 posts 17900 karma points admin hq c-trib
    Feb 26, 2015 @ 14:52
    Dennis Aaen
    0

    Hi Sören,

    You can limit which property editors that´s allowed in the row configuration, so for a specific row configuration only have the property editors that you allow, and not all. try to see this documentation in the row configuration section.

    https://our.umbraco.org/documentation/using-umbraco/backoffice-overview/property-editors/built-in-property-editors-v7/grid-layout#Rowconfigurations

    Hope this helps,

    /Dennis

  • Sören Deger 726 posts 2833 karma points c-trib
    Feb 26, 2015 @ 15:20
    Sören Deger
    0

    Hi Denniy,

    thank you. You're right, but there is the requirement to use the default macro property editor from grid. But with this I see ALL macros that are allowed for a grid. And I can't select individual grids. 

    If this is not supported, you have now given me another idea :-)

    I make a copy of the default macro grid property editor and his angularJS controller and edit this for my requirements. Really, after this it's not the default macro property editor, but it seems like this. I have to still think how I do the configuration, so as I select which macro to be available in which grid. Maybe I solve this via a custom dashboard or a custom section. 

    Thanks!

     

    Sören

  • Ismael 65 posts 337 karma points
    Feb 27, 2015 @ 03:49
    Ismael
    0

    Hi,

    I have the same situation, although I don't have solution yet.  Is it possible to limit what maros are availble via the grid config somehow?

    {

       "name": "Macro",

       "alias": "macro",

       "view": "macro",

       "icon": "icon-settings-alt"

    },

    Maybe passing a prevalue list of some kind?  I can't see how the Macro property editor works, i'm guessing it's complied rather than just plain html+js so I may have to try dig through the source, but if anyone else has an idea, i'd love to hear it!
    cheers

     

  • Jonathan L Folland 6 posts 27 karma points
    Apr 18, 2015 @ 23:55
    Jonathan L Folland
    0

    Following up on this as it does not seem like a real answer has been provided. I am finding in the umbraco.controllers.js file a section related to limiting the allowed templates:

    if (angular.isArray($scope.dialogData.allowedMacros) && $scope.dialogData.allowedMacros.length > 0) {
                    $scope.macros = _.filter(data, function(d) {
                        return _.contains($scope.dialogData.allowedMacros, d.alias);
                    });
                }

    I would like to restrict the macros by the row type. For example, if the row type were a Header; I would like only section header, section footer, section sub header and section subfooter for that type of row.

    I think it would be easy to do if I could identify the currently edited row (possibly area for future purposes) at the point of checking the allowedMacros or at the point of setting the config. Any idea how I can identify the currently edited row and area from this location of the javascript?

  • Thomas 49 posts 78 karma points c-trib
    May 13, 2015 @ 13:58
    Thomas
    1

    Hi - I managed to solve this in version 7.2.4 as below. As an example I am using a TextWithPicsMacro macro.

     

    1. Add a new custom grid editor into the grid.editors.config.js file:

    , {
              "name": "Text With Picture"
            , "alias": "text_with_picture"
            , "view": "/App_Plugins/MyGrid/Views/macroCustom.htm"
            , "render": "/Views/Partials/Grid/Editors/Macro.cshtml"
            , "icon": "icon-picture"
            , "config": {
                "allowedMacros": [ "RichTextBlockquote" ]
            }
        }
    

    Note that his has a allowedMacros config setting.

     

    2. Into the /App_Plugins/MyGrid/Views/macroCustom.htm I have copied the standard Umbraco macro property editor from \Umbraco\Views\propertyeditors\grid\editors\macro.html - but I have changed the controller to point to my own custom controller as below:

     

    <div ng-controller="MyDomain.com.MyGrid.Controllers.CustomMacro">
    
        <div class="usky-editor-placeholder" ng-click="setMacro()">
            <div ng-if="!preview">
                <i class="icon icon-settings-alt"></i>
                <div class="help-text">{{title}}</div>
            </div>
            <div ng-if="preview">
                <div
                    ng-if="preview" style="text-align: left"
                    ng-bind-html-unsafe="preview">
                </div>
            </div>
        </div>
    
    </div>
    

     

    3. This allows us to change the SetMacro() method take account of the allowedMacros config setting.
    Again I copied the standard Umbraco macro controller from \Umbraco\Js\umbraco.controllers.js into my own control js file (so update your package.manifest etc etc).  Modified controller looks like this:

    angular.module("umbraco")
        .controller("MyDomain.com.MyGrid.Controllers.CustomMacro",
    function ($scope, $rootScope, $timeout, dialogService, macroResource, macroService, $routeParams) { $scope.title = "Click to insert macro"; $scope.setMacro = function () { dialogService.macroPicker({ dialogData: { richTextEditor: true, allowedMacros: $scope.control.editor.config.allowedMacros, macroData: $scope.control.value || { macroAlias: $scope.control.editor.config && $scope.control.editor.config.macroAlias ? $scope.control.editor.config.macroAlias : "" } }, callback: function (data) { $scope.control.value = { macroAlias: data.macroAlias, macroParamsDictionary: data.macroParamsDictionary }; $scope.setPreview($scope.control.value); } }); }; $scope.setPreview = function (macro) { var contentId = $routeParams.id; macroResource.getMacroResultAsHtmlForEditor(macro.macroAlias, contentId, macro.macroParamsDictionary) .then(function (htmlResult) { $scope.title = macro.macroAlias; if (htmlResult.trim().length > 0 && htmlResult.indexOf("Macro:") < 0) { $scope.preview = htmlResult; } }); }; $timeout(function () { if ($scope.control.$initializing) { $scope.setMacro(); } else if ($scope.control.value) { $scope.setPreview($scope.control.value); } }, 200); });

    Only difference from the Umbraco version is that the dialogData.allowedMacros is being set to our array.
    If you look at the code in the InsertMacroController in \Umbraco\Js\umbraco.controllers.js you will see that the macros in the dropdown are filtered by this.

     

    The above solves a general problem I had, where I wanted to add more advanced components into the Grid - but was struggling to make custom grid editors handle advanced admin/edtior UI components.

    Using the approach described here: http://24days.in/umbraco/2014/grid-macros/ you can use the details above to create what looks like custom grid editors (but is in fact a macro insert) - and utilise the Macro edting pane for the advanced UI components - and then finally use the preview method described in the mentioned post to make the macro look nice in the Umbraco backend grid layout.

     

     

     

     

  • Gavin Faux 14 posts 157 karma points
    Oct 13, 2016 @ 03:03
    Gavin Faux
    1

    Another way (as of 7.5.3 at least) is to to create entries in grid.editors.config.js for each macro you want to use in grid passing the macro alias in the config and then configure your grid layouts as usual.

    Example using the App_Plugins approach with a package.manifest:

    { 
      "gridEditors": [
       {
        "name": "Widget: Twitter Feed",
        "alias": "widgetTwitterFeed",
        "view": "macro",
        "icon": "icon-bird color-blue",
        "config": {
          "macroAlias": "widgetTwitterFeed"
        }
     },
    {
      "name": "Widget: Site News Feed",
      "alias": "widgetSiteNewsFeed",
      "view": "macro",
      "icon": "icon-newspaper-alt",
      "config": {
        "macroAlias": "widgetSiteNewsFeed"
      }
     }    
    ],  
     "css": [
    "~/App_Plugins/Grid/backoffice/editors.css"
      ]
    }
    

    This does mean you may have quite a few grid editors to choose from when configuring your grid layouts, but does not require customisation of back office code and should work with Courier / UaaS as your not using a custom view. Then either use CSS for styling in back office or static content for complex things like Twitter as per the 24 days article.

  • George 24 posts 86 karma points
    Jan 31, 2020 @ 19:00
    George
    0

    I was able to use Gavin's method successfully. Just want to add that if you take this route, you'll still need to check the box in the macro for use in the Grid Editor.

Please Sign in or register to post replies

Write your reply to:

Draft