Copied to clipboard

Flag this post as spam?

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


  • Kristoffer L. Jakobsen 9 posts 89 karma points
    Jul 08, 2016 @ 17:53
    Kristoffer L. Jakobsen
    0

    Make custom contentPicker

    Hi,

    I am working on my own first test project, and I have some minor issues, I hope some of you can help with. I write this, because it can maybe be a little newbie´sh...;-)

    I have used copied the source code from the std treepicker: https://github.com/umbraco/Umbraco-CMS/blob/release-7.1.7/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.html#L37

    The I try to lazyload it into a dialog with these properties: { label: 'Ajour Mapper', description: 'Vælg mappe:', view: '~/App_plugins/Solution/Editors/customTreePicker/customTreePicker.html', multiPicker: '1', config: { multiPicker: "1", entityType: "Document", section: 'document', treeAlias: 'documentTree', filter: "", minNumber: 0, maxNumber: 5 }, }

    The Html file is located at that path. These properties works if I switch the View out with 'contentPicker'.

    The error in the developer console is File Not Found 404. And it gives the Url localhost.XXXXX/Umbraco/~/App_plugins/Solution/Editors/customTreePicker/customTreePicker.html.

    Hope some or just one of can help...:)

    Nice Weekend to you all!

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jul 08, 2016 @ 19:23
    Jan Skovgaard
    1

    Hi Kristoffer and welcome to the Umbraco developer forum :)

    What does your package.manifest file look like? Does it contain the proper path to the editor view?

    /Jan

  • Kristoffer L. Jakobsen 9 posts 89 karma points
    Jul 08, 2016 @ 19:43
    Kristoffer L. Jakobsen
    0

    Hi Jan

    Thanks.:)

    I have included the controller file, and it gets loaded. I do not have anything about the custom contentPicker. Should I have that?

    :)

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jul 08, 2016 @ 19:50
    Jan Skovgaard
    1

    Hi Kristoffer

    Could you please post what the content of your package.manifest is? That will make it easier to figure out what you're currently doing and where things might go wrong :)

    /Jan

  • Kristoffer L. Jakobsen 9 posts 89 karma points
    Jul 08, 2016 @ 19:55
    Kristoffer L. Jakobsen
    0

    Okay, here it is the one covering my treepicker.:) Hopes it helps.

    {
       propertyEditors: [      
            {
                /*this must be a unique alias*/ 
                alias: "customTree",
                /*the name*/
                name: "Custom Tree",
                /*the html file we will load for the editor*/
                editor: {
                    view: "~/App_plugins/Solution/Editors/customTreePicker/customTreePicker.html"
                }
            }
        ]
        ,
      "gridEditors": [
        {
          "valueType": "JSON",
          "name": "Pic_Article",
          "alias": "Pic_Article",
          "view": "~/App_Plugins/Solution/Editors/Article/article.html",
          "render": "~/App_Plugins/Solution/Editors/Article/article.cshtml",
          "icon": "icon-article",
          "config": {
            "enablePreview": true
          }
        },
        {
          "valueType": "JSON",
          "name": "Folder View",
          "alias": "FolderView",
          "view": "~/App_Plugins/Solution/Editors/FolderView/folderView.html",
          "render": "~/App_Plugins/Solution/Editors/FolderView/folderView.cshtml",
          "icon": "icon-article",
          "config": {
            "enablePreview": true
          }
        },
        {
          "valueType": "JSON",
          "name": "Header",
          "alias": "Header",
          "view": "~/App_Plugins/Solution/Editors/Header/Header.html",
          "render": "~/App_Plugins/Solution/Editors/Header/Header.cshtml",
          "icon": "icon-article",
          "config": {
            "enablePreview": true
          }
        },
        {
          "valueType": "JSON",
          "name": "GreyBar",
          "alias": "GreyBar",
          "view": "~/App_Plugins/Solution/Editors/GreyBar/GreyBar.html",
          "render": "~/App_Plugins/Solution/Editors/GreyBar/GreyBar.cshtml",
          "icon": "icon-article",
          "config": {
            "enablePreview": true
          }
        },
        {
          "valueType": "JSON",
          "name": "Theme View",
          "alias": "ThemeView",
          "view": "~/App_Plugins/Solution/Editors/ThemeView/ThemeView.html",
          "render": "~/App_Plugins/Solution/Editors/ThemeView/ThemeView.cshtml",
          "icon": "icon-article",
          "config": {
            "enablePreview": true
          }
        }
      ],
      javascript: [
        "~/App_Plugins/Solution/Editors/Header/Header.Resource.js",
        "~/App_Plugins/Solution/Editors/Header/Header.service.js",
        "~/App_Plugins/Solution/Editors/Header/Header.Controller.js",
        "~/App_Plugins/Solution/Editors/Article/article.Resource.js",
        "~/App_Plugins/Solution/Editors/Article/article.service.js",
        "~/App_Plugins/Solution/Editors/Article/article.Controller.js",
        "~/App_Plugins/Solution/Editors/FolderView/folderView.Resource.js",
        "~/App_Plugins/Solution/Editors/FolderView/folderView.service.js",
        "~/App_Plugins/Solution/Editors/FolderView/folderView.Controller.js",
        "~/App_Plugins/Solution/Editors/GreyBar/GreyBar.Resource.js",
        "~/App_Plugins/Solution/Editors/GreyBar/GreyBar.service.js",
        "~/App_Plugins/Solution/Editors/GreyBar/GreyBar.Controller.js",
        "~/App_Plugins/Solution/Editors/ThemeView/ThemeView.Resource.js",
        "~/App_Plugins/Solution/Editors/ThemeView/ThemeView.service.js",
        "~/App_Plugins/Solution/Editors/ThemeView/ThemeView.Controller.js",   "~/App_Plugins/Solution/Editors/customTreePicker/customTreePicker.controller.js"
      ],
      "css": [
        "/css/backoffice.css"
      ]
    
    }
    
  • Ian 178 posts 752 karma points
    Jul 08, 2016 @ 20:58
    Ian
    1

    No idea if this will sort your problem but I notice you have a lowercase p on Appplugins instead of AppPlugins. Since the use of the tilde at the start (which should remain) indicates a serverpath umbraco might do some manipulation to make it compatible with angular which may fail with that typo... only guessing.

  • Kristoffer L. Jakobsen 9 posts 89 karma points
    Jul 08, 2016 @ 21:09
    Kristoffer L. Jakobsen
    0

    It is a good guess, but unfortunately not a solution. It still fails, when I try to lazy load the property. it gives precise this result: http://localhost:57221/umbraco/~/App_Plugins/Solution/Editors/customTreePicker/customTreePicker.html 404 (Not Found)

  • Ian 178 posts 752 karma points
    Jul 08, 2016 @ 21:35
    Ian
    0

    Forgive me for two things

    1. I re-read what you are doing
    2. I may have been doing things incorrectly when loading dialogs and I don't have access to my code to check

    What is your full function for loading the dialog? I don't think I used the leading tilde in this situation at all instead an absolute path i.e leading slash see an example here looks more like I remember.

  • Kristoffer L. Jakobsen 9 posts 89 karma points
    Jul 08, 2016 @ 21:45
    Kristoffer L. Jakobsen
    0

    I wants to load the dialog with a custom tree with data from outside Umbraco. When data is comming from outside Umbraco the normal treePicker returns an error, because it cannot load information from the entityResource. I just want to return a nice JSON object, there can be stored.

    Does this give any sense?

  • Ian 178 posts 752 karma points
    Jul 08, 2016 @ 22:01
    Ian
    101

    whilst i might not know all the details of your situation, the starting point as you say will be to load your own view in the dialog which specifies your own angular contoller able to use an angular resource you've created to load data. The problem you have as I understand it is that your dialog view won't load.

    Try changing

    ~/App_plugins/Solution/Editors/customTreePicker/customTreePicker.html
    

    to

    /App_plugins/Solution/Editors/customTreePicker/customTreePicker.html
    

    and if that does not work post the code snippet which triggers your dialog.

  • Kristoffer L. Jakobsen 9 posts 89 karma points
    Jul 08, 2016 @ 22:13
    Kristoffer L. Jakobsen
    0

    It was the solution. While you wrote the answer Ian, I found the solution by try and error... But you were right...:)

    I think the typo you found earlier and the tilde, was the two things there together made it hard to find the solution.

    Thanks for your help. Now I can concentrate on the next small but issue, maybe a post comes up tomorrow...;-)

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jul 09, 2016 @ 08:07
    Jan Skovgaard
    0

    Good to see you managed to get this solved before I visited the forums again after responding last night :)

    If you're new to making your own property editors etc. then it might be handy for you to know about these resources to easier look up things etc.

    https://github.com/umbraco/AngularWorkbook https://our.umbraco.org/apidocs/ui/#/api https://our.umbraco.org/documentation/Tutorials/Creating-a-Property-Editor/

    Hope these can help you understand property editors better if you have not seen these links already.

    Happy coding!

    /Jan

Please Sign in or register to post replies

Write your reply to:

Draft