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

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

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"

},

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?

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.

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.

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.

is working on a reply...