creating a grid editor with settings in 742 - Extending Umbraco and using the API

John Botibol 7 posts 87 karma points

Apr 06, 2016 @ 14:07

Creating a grid editor with settings in 7.4.2

Hi Guys

I have created a really simple grid editor called "Price" by editing grid.editors.config. The purpose of the editor is to display a price. So, when you place the editor on a grid area, you actually enter a price (say 50.00).

It is a simple textstring editor and I have specified markup to add some additional elements when it is rendered. The additional elements add a span containing a currency code before the #value# and some text after #value#.

{
  "name": "Price",
  "alias": "price",
  "view": "textstring",
  "icon": "icon-font",
  "config": {
    "style": "",
    "markup": "<div class='price-block'><span class='price-symbol'>&#163;</span><span class='price-value'>#value#</span><small class='price-interval'>USER/ MONTH</small></div>"
   }
}

So far, this works just fine.

I now want to add a "Setting" called "productType" to the editor the contents of which I can access in the markup. So, I want value of "productType" to be set as the class for the enclosing div. I can then have some Javascript to find each "price" div, check the class added from the setting and make changes accordingly (e.g. change the currency, value and so on).

I have been unable to figure out how to add settings to the json in grid.editors.config.js and of course how you would reference them in the markup.

I have read numerous articles and documentation on editors but it seems from 7.4 something is quite different.

Any help from an Umbraco guru would be much appreciated.

Many thanks

John

Copy Link

John Botibol 7 posts 87 karma points

Apr 22, 2016 @ 07:52

This is a subject I have seen before on these forums with no-one answering. So, I found one simple way to achieve this and am sharing it just in case any other novices are interested. It is based on the grid editor called “quotewithdescription” which comes with the Fanoe starter kit and does not require any AngularJS since it re-uses a standard controller.

I started with the backoffice editor – App_Plugins/Grid/Editors/Views/price.html. This provides the editor control for entering the “settings” or “parameters” for the control:

<div ng-controller="Umbraco.PropertyEditors.Grid.TextStringController">
<textarea
    rows="1"
    umb-auto-resize
    umb-auto-focus
    class="textstring input-block-level" id="{{control.uniqueId}}_text"
    ng-model="control.value.producttype"
    ng-attr-style="{{control.editor.config.style}}" placeholder="Enter Product Type..."></textarea>
<textarea
    rows="1"
    umb-auto-resize
    class="textstring input-block-level" id="{{control.uniqueId}}_text"
    ng-model="control.value.currencysymbol"
    ng-attr-style="{{control.editor.config.style}}" placeholder="Enter currency symbol..."></textarea>
<textarea
    rows="1"
    umb-auto-resize
    class="textstring input-block-level" id="{{control.uniqueId}}_text"
    ng-model="control.value.pricevalue"
    ng-attr-style="{{control.editor.config.style}}" placeholder="Enter the value..."></textarea>
<textarea rows="1"
    umb-auto-resize
    class="textstring input-block-level" id="{{control.uniqueId}}_text"
    ng-model="control.value.priceinterval"
    ng-attr-style="{{control.editor.config.style}}" placeholder="Enter the interval description..."></textarea>
</div>

The clever bits here are the ng-model attributes which add your property to the model (by magic!).

Lets say we enter “Motor”, “£”, 12.00, “Each”. What we want to render on the page would be something like “£12.00 Each”. The first parameter “Motor” is used to identify the price block to javascript code which will update the values when the currency is changed (another piece of work of course).

Now the renderer which takes care of generating the html to display this on the website App_Plugins/Grid/Editors/Render/price.cshtml:

@inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>

@if (Model.editor.config.markup != null)
{
string markup = Model.editor.config.markup.ToString();

markup = markup.Replace("#value#", Model.value.ToString());
markup = markup.Replace("#style#", Model.editor.config.style.ToString());

<text>
    @Html.Raw(markup)
</text>
}
else
{
<text>
    <div class="price-block" data-product="@Model.value.producttype">
        <span class="price-symbol">@Model.value.currencysymbol</span>
        <span class="price-value">@Model.value.pricevalue</span>
        <small class="price-interval">@Model.value.priceinterval</small>
    </div>
</text>
}

The Model is dynamic with the additional properties identified in the backoffice editor created at runtime.

Finally we need to create the definition in Config/grid.editors.config.js:

{
"name": "Price",
"alias": "price",
"icon": "icon-grid",
"view": "/App_Plugins/Grid/Editors/Views/price.html",
"render": "/App_plugins/Grid/Editors/Render/price.cshtml"
}

That's it! Now you can use “Price” as a Grid editor. It provides 4 fields for entering data. These are then used to create the required html when rendering a page.

Bear in mind that I don't pretend to understand all of the workings of this just yet however I needed a quick solution and this appears to work just fine.

Copy Link

is working on a reply...

Flag this post as spam?

Creating a grid editor with settings in 7.4.2