Copied to clipboard

Flag this post as spam?

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


  • Graham Davis 45 posts 209 karma points
    1 week ago
    Graham Davis
    0

    How to create custom itempicker.html

    I have many custom content items for the Grid Editor and need a way to better organize and group them for the user. The window is cluddered and currently looks like this with more items on the way.

    enter image description here

    I would like to create something that looks like this:

    enter image description here

    I "THINK" it need to overide or replace itempicker.html, but I am not sure how that is done within the angularjs framework. The closest "how to" I have found so far is at....

    https://our.umbraco.com/forum/developing-packages/92518-use-grid-rte-in-umb-overlay-with-working-link-selector#comment-303470

    ... but am having difficulity getting things to work. Any guidance would be appreciated. I am using Version 8.

  • David Brendel 752 posts 2819 karma points c-trib
    1 week ago
    David Brendel
    0

    Hi Graham,

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

    Regards David

  • Graham Davis 45 posts 209 karma points
    1 week ago
    Graham Davis
    1

    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.

    enter image description here 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:

    enter image description here

  • Graham Davis 45 posts 209 karma points
    6 days ago
    Graham Davis
    0

    An Update for anyone following this thread

    The overlay now looks like the image below, but not without some "hacks" that I would like to make cleaner. My knowledge of Angular is Basic and I don't know how(or if it is possible) to override some functions. The issues I am now facing are:

    1. How to load the Class List dynamically without duplicated values
    2. How to "remember" the last class selected and reload it and its corresponding list the next time the overlay is opened
    3. How to load the itempicker.html file from another location so it does not conflict with Umbraco's framework

    Any help with this would be appreciated.

    enter image description here

Please Sign in or register to post replies

Write your reply to:

Draft