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 93 posts 325 karma points
    Nov 09, 2019 @ 14:53
    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 774 posts 2841 karma points c-trib
    Nov 09, 2019 @ 17:37
    David Brendel
    0

    Hi Graham,

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

    Regards David

  • Graham Davis 93 posts 325 karma points
    Nov 11, 2019 @ 17:47
    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 93 posts 325 karma points
    Nov 15, 2019 @ 18:11
    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

  • lori ryan 141 posts 448 karma points
    1 week ago
    lori ryan
    0

    Just following your threads and seem to be running into the same issues, how did you end up deduping the main list. Did you ever get the unique to work or did you get Alex's suggestion to work? https://our.umbraco.com/forum/using-umbraco-and-getting-started/100024-how-to-remove-duplates-in-ng-repeat.

    Also how did you resize the overlay?

    I've asked the question on the facebook forum on best way to implement this kind of functionality. https://www.facebook.com/groups/202933450108554

  • Pasang Tamang 251 posts 386 karma points
    1 week ago
    Pasang Tamang
    0

    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

  • Graham Davis 93 posts 325 karma points
    1 week ago
    Graham Davis
    2

    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

  • Pasang Tamang 251 posts 386 karma points
    1 week ago
    Pasang Tamang
    0

    Hi Graham,

    It looks really a great.

    Thanks

    Regards, Pasang

  • Graham Davis 93 posts 325 karma points
    1 week ago
    Graham Davis
    0

    Thank you!

  • lori ryan 141 posts 448 karma points
    1 week ago
    lori ryan
    0

    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

  • Pasang Tamang 251 posts 386 karma points
    1 week ago
    Pasang Tamang
    1

    Hi Iori,

    As per Graham's post above, grid.editors.config should looks like below:

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

    This way I am able to see the desired output.

    Thanks

    Regards, Pasang

  • lori ryan 141 posts 448 karma points
    1 week ago
    lori ryan
    0

    Thanks sorry more coffee needed only saw the second one after :-)

    Thanks

  • Graham Davis 93 posts 325 karma points
    1 week ago
    Graham Davis
    1

    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 ryan 141 posts 448 karma points
    1 week ago
    lori ryan
    0

    thanks so much two big items I had where customising the itempicker and then adding custom icons to that item picker for a better UI. Ive managed to get both done now with your help so thanks so much.

  • lori ryan 141 posts 448 karma points
    1 week ago
    lori ryan
    0

    Am in Ireland and it looks as though its locked down :-(

    We could not log you in: You can't log in to this app or website because you do not meet the requirements for country, age or other criteria.

  • Pasang Tamang 251 posts 386 karma points
    1 week ago
    Pasang Tamang
    1

    Hi Graham,

    For this entire expected output, it's better we use own custom AngularJs controller and custom item picker file with interceptor. I did a quick look into the project and did some update in the code. Below code shows how we can overwrite the itempicker.html without modifying the core file.

    (() => {
        function interceptor($q) {
            return {
                request: req => {
                    if (req.url.toLowerCase().indexOf('itempicker.html') !== -1) {
                        if (location.hash.indexOf('content') !== -1) {
                            req.url = '../app_plugins/myplugins/views/customitemoverlay.html?v=11';
                        }
                    }
                    return req || $q.when(req);
                }
            };
        }
    
        angular.module('umbraco').factory('umbracoOverlayInterceptor', ['$q', interceptor]);
    })();
    

    After this we have to register interceptor as shown in below code.

    (() => {
        'use strict';
    
        angular.module('umbraco')
            .config(function ($httpProvider) {
                $httpProvider.interceptors.push('umbracoOverlayInterceptor');
            });
    })();
    

    After these steps you can have your own html and AngularJs controller files in app_plugins. I have shared my code here https://gist.github.com/pasangtamang/ec225024f9a614f82c233b2c6a8ce5c0. I hope this will help you to fix the problem

    Thanks

    Regards, Pasang

  • Graham Davis 93 posts 325 karma points
    1 week ago
    Graham Davis
    0

    Pasang! Thank you! That is what I could not figure out how to do and it works beautifully!

    How do we sort the Class list alphabetically?

  • Pasang Tamang 251 posts 386 karma points
    1 week ago
    Pasang Tamang
    1

    Hi Graham,

    Below code example sort the class names alphabetical ascending order.

    <option ng-repeat="g in groups | orderBy" value="{{g}}">{{g}}</option>
    

    Thanks

    Regards, Pasang

  • Graham Davis 93 posts 325 karma points
    1 week ago
    Graham Davis
    0

    E X C E L L E N T ! !

    Thanks!

  • Graham Davis 93 posts 325 karma points
    1 week ago
    Graham Davis
    0

    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.

  • lori ryan 141 posts 448 karma points
    1 week ago
    lori ryan
    0

    Hey its when I go to login via fb

  • lori ryan 141 posts 448 karma points
    1 week ago
    lori ryan
    0

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

  • Graham Davis 93 posts 325 karma points
    7 days ago
    Graham Davis
    0

    Hmmmmmmm.......

    Try checking the file path and spelling in the package manifest file

  • Pasang Tamang 251 posts 386 karma points
    6 days ago
    Pasang Tamang
    0

    Hi Iori,

    To be honest I have not checked the code against nested content. I will check it and will share my findings.

    Thanks

    Regards, Pasang

Please Sign in or register to post replies

Write your reply to:

Draft