Hi Graham,

Angularjs has something called httpinterceptor. With this you can basically point requests to different files.

Regards David

I have started the work of creating my own custom Content Overlay and could use some advice.

1. I haven't been able to find a way to "overide" Ubraco's itempicker at \Umbraco\Views\common\overlays\itempicker\itempicker.html, and have replaced it with my own version. My concern is "my version" will be replaced with the next Umbraco update.

2. AngularJS issues - How to NOT show duplicate values in the Content Class(group) box. Angular also seems to ignore null or empty values causing the default content controls that come with umbraco to no longer show in the list.

3. How to resize the window? Umbaco seems to be doing this via code, thus canceling out anything done by css.

Package.manifest sample

{
  "group": "Search",
  "name": "Property Search Form with Location Lookup",
  "alias": "SearchAnyProperty",
  "view": "/App_Plugins/zpmControls/search/SearchAnyProperty.html",
  "render": "/Views/Partials/MLS-Search/_SearchAnyProperty.cshtml",
  "icon": "icon-search",
  "config": {
    "group": "search",
    "remark": "General search form that can be used with most property types and location by a lookup."
  }
},

\Umbraco\Views\common\overlays\itempicker\itempicker.html

<div ng-controller="Umbraco.Overlays.ItemPickerOverlay" class="umb-itempicker">
<hr />
<div style="float:left; padding-top:10px;margin-right:15px; ">
    <h4>Content Class</h4>
    <select ng-model="searchTerm" size="20" style=" height:300px;">
        <option value=null>Default</option>
        <option ng-repeat="g in model.availableItems" value="{{g.config.group}}">{{g.config.group}}</option>
    </select>
</div>
<div style="display:inline-block; overflow-y:scroll; max-height:500px; width:600px;">
    <h4>Content Control</h4>
    <table class="umb-card-grid table">
        <tr class="zBestPM-grid-item" ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:model.orderBy | filter:searchTerm"
            ng-click="selectItem(availableItem)">
            <td><i class="{{ availableItem.icon }}"></i></td>
            <!--<td>{{availableItem.config.group}} </td>-->
            <td><b>{{ availableItem.name }} </b><br>{{availableItem.config.remark}}</td>
        </tr>
    </table>
</div>

The window currently looks like this:

Hi Graham,

I was looking for similar kind of solution and pointed me to this thread. Did you able to manage this to work? Is it possible to share more about how you achieve this?

Thanks

Regards Pasang

Yes I got it to work. There are over 50 controls and you can see they work at: https://www.youtube.com/watch?v=vsU2l1pyufs

Hi Graham,

It looks really a great.

Thanks

Regards, Pasang

This is something I would like to try, just wondering Ive edited my grid.editors.config to all have group xxx i.e.

   {
        "group": "Default",
        "name": "Rich text editor",
        "alias": "rte",
        "view": "rte",
        "icon": "icon-article"
    }

Should that then pick up automatically after editing the itempicker.html

Lori and Pasang,

I was not able to get everything to work in angular and had to do some backdoor coding to make it happen. Maybe an Angular expert can tell us how make these pieces function in a better way.

There were many pieces across Umbraco. If you do an update from Umbraco, these files will get overwritten, and you will have to go back and restore them. The Final version of it is included in the project that can be downloaded at: https://zBestPartners.com

FILE STRUCTURE

The core files for the Backoffice is at /App_Plugins/zpmControls

The matching front end part of the controls are at /Views/Partials/zpmControls

The modified item picker will get overwritten during an Umbraco Update: \Umbraco\Views\common\overlays\itempicker\itempicker.html

To get the Umbraco Controls to show up in the list, you will need to modify the file at \config\grid.editors.config.js. This file will also get overwritten during an umbraco update.

SAVING CONFIGURATIONS

The config settings are saved to a table in the Umbraco Database linked by the PageID or NodeId. The project uses a SQL Compact db since it's main data is provided by an external API.

Saving the settings happens upon selection, not when the "Save and Publish" button in pressed(one of the things I could not get to work.)

Control settings to the database are handled by /Controllers/zpmControlsController.cs The functions are called LoadSettings and UpdateSettings

The main javascript library needed for handling these functions is at: \Scripts\zpm\zpmLibrary.js

Lori,

It is telling you that you can't log into umbraco's backoffice? or are you getting the message from one of the front pages? Trying to figure if it is a block on the API's in Azure.

Hey its when I go to login via fb

Graham, Pasang just to ask the question I have a nested content type, its a slider on my homepage. Embed not as a grideditor but directly onto the page, this also uses the itempicker.html. Its not possible to add a config with a group to it. The dialog displays with nothing, any suggestions?

Thanks guys any help would be great

Pasang and Lori,

Is the new window still working for you? I am now getting syntax errors on the arrow functions and don't know why?

(() => {
function interceptor($q) {
    return {
        request: req => {
            alert(req.url.toLowerCase());
            if (req.url.toLowerCase().indexOf('itempicker.html') !== -1) {
                if (location.hash.indexOf('content') !== -1) {
                    req.url = '/App_Plugins/zpmControls/zpmItemOverlay.html';
                }
            }
            return req || $q.when(req);
        }
    };
}

is working on a reply...