Copied to clipboard

Flag this post as spam?

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


  • Chriztian Steinmeier 2800 posts 8791 karma points MVP 8x admin c-trib
    May 16, 2020 @ 12:01
    Chriztian Steinmeier
    0

    How to access another property's value inside a property editor?

    I have created a property editor for Umbraco 7 that lets me add a hotspot to an image ( it's here on GitHub ).

    Right now, the image is set when creating the data-type, but I'd much rather have it be able to pick that up from the document it's being used on (e.g. by just specifying a propertyAlias) but I can't figure out how to get to another property on the document being edited.

    I kind of know I need to inject a service, but the API docs leave me with more questions than answers...

    Does anybody know how to do this, or maybe know of another property editor that does something similar that I could take a look at?

  • Chriztian Steinmeier 2800 posts 8791 karma points MVP 8x admin c-trib
    May 17, 2020 @ 08:14
    Chriztian Steinmeier
    0

    Update:

    So I managed to atleast find the other properties (through Inception-level amounts of .$parent) and I can find a property with a requested alias.

    But when I get the value of the property, I get (of course) something like umb://media/12345678 and need to get the path to the image instead.

    Goes looking for a service...

  • Anders Bjerner 487 posts 2995 karma points MVP 8x admin c-trib
    May 17, 2020 @ 14:33
    Anders Bjerner
    100

    Hi Chriztian,

    It seems like you've figured out how to get the property value, so I'll skip that part.

    Once you have the value (the media UDI), you can use the entityResource service in Angular to look up the underlying entity.

    The function you'll need is called getById, and takes the ID or UDI as the first parameter (IIRC older versions of Umbraco didn't support UDIs for this function) and then the entity type as the second parameter (which is this case should be Media).

    Once you get the entity object from the API, you can use the mediaResource to get the file path.

    angular.module("umbraco").controller("MyController", function ($scope, entityResource, mediaHelper) {
    
        var value = "umb://media/cf1ab8dcad0f4a8e974b87b84777b0d6";
    
        entityResource.getById(value, "Media").then(function (media) {
    
            console.log(JSON.stringify(media, null, "  "));
    
            var file = mediaHelper.resolveFileFromEntity(media, false);
    
            console.log(file);
        });
    
    });
    

    With this example, the media object will look something like:

    {
      "name": "Jan Skovgaard",
      "id": 1131,
      "udi": "umb://media/cf1ab8dcad0f4a8e974b87b84777b0d6",
      "icon": "icon-picture",
      "trashed": false,
      "key": "cf1ab8dc-ad0f-4a8e-974b-87b84777b0d6",
      "parentId": 1120,
      "alias": null,
      "path": "-1,1120,1131",
      "metaData": {
        "ContentTypeAlias": "Image",
        "MediaPath": "/media/cf1ab8dcad0f4a8e974b87b84777b0d6/00000006000000000000000000000000/18720470241_ff77768544_h.jpg",
        "IsContainer": false
      }
    }
    

    Technically you can grab the file path via media.metaData.MediaPath, but it may be safer to use the media helper. Either way, the file path is then in this case:

    /media/cf1ab8dcad0f4a8e974b87b84777b0d6/00000006000000000000000000000000/18720470241_ff77768544_h.jpg
    

    Hope that helps ;)

  • Chriztian Steinmeier 2800 posts 8791 karma points MVP 8x admin c-trib
    May 17, 2020 @ 14:57
    Chriztian Steinmeier
    0

    Hi Anders,

    Thank you very much - I've got it working now.

    I'm actually using the mediaResource's getById() method which also works with a UDI (even though the docs say it should be an int). The media returned from that has a .mediaLink property with the path in it.

    /Chriztian

Please Sign in or register to post replies

Write your reply to:

Draft