https://discord.umbraco.com logo
Join Discord
Powered by
Content Delivery API - Custom Property Editor Valu...
# help-with-umbraco
b
I'm not really sure whats going on. My custom property editor stores it's value as a json object, I don't have any converters in between. The first screenshot is rendered directly from Razor, the second one is the response from Umbracos Content Delivery API
s
How are you storing your property editor data? It looks a lot like you're just storing it as a string.. 2 options come to mind: 1. Create a proper POCO in his current value converter instead of relying on JObject (JArray, whatever you're using) 2. Implement 
IDeliveryApiPropertyValueConverter
in your value converter and create the POCO there // cc: @Corné Hoskam as I saw him in the discussion too
b
I have set the valueType to "JSON" in package.manifest The editor is pure Angularjs/Frontend code, so I currently let Umbraco deal with the conversion, but I will look into it
s
Gotcha! I didn't foresee that one.. lol Let me ask around, will get back to you!
Okay, seems like you've opened a can of 🪱 haha So right now it's not possible to do something automatic, but at the very least we should be able to give you some example C# code to add when doing pure frontend property editors. It's not the best, but it's the best we can do right now. 😅
FYI : screenshots of code are extremely unhelpful 🙈 Do you have the first screenshot output for me as plain text please?
b
The expected output of my sample gist is:
Copy code
{
  "message": "Hello World!"
}
But the actual output is:
Copy code
{
  "message": []
}
s
No, I wanted this one 😉
b
Copy code
{
  "name": "Generated",
  "breakpoints": [
    1280
  ],
  "elements": [
    {
      "index": 0,
      "id": "item-hrraxv3h3",
      "content": {
        "en": "Hello World"
      },
      "style": {
        "_1280": {}
      },
      "selected": false,
      "editing": false,
      "transitions": [
        {
          "key": ""
        }
      ]
    }
  ],
  "version": 5,
  "style": {
    "width": "128rem",
    "height": "96rem",
    "_1280": {
      "height": {
        "en": "6rem"
      }
    }
  }
}
s
Thanks! 🙌
I see, it's going to be very hard to create a C# model for this isn't it.. since this is dynamically generated fore ach breakpoint:
Copy code
json
      "style": {
        "_1280": {}
      },
b
Yup
I also regret that structure a bit
type Style = Record<string, string | Record<string, string | Record<string, string>>>
in typescript
s
FYI - I haven't forgotten, will need to get back to you 🙂
Results!
And after cleaning up the code a bit, I think you can drop this as a .cs file into your project and it should "just" work.
Copy code
csharp
using System.Text.Json.Nodes;
using Umbraco.Cms.Core.Models.PublishedContent;
using Umbraco.Cms.Core.PropertyEditors;

public class SampleEditorValueConverter : IPropertyValueConverter
{
    public bool IsConverter(IPublishedPropertyType propertyType)
    {
        return propertyType.EditorAlias.Equals("SampleEditor");
    }

    public bool? IsValue(object? value, PropertyValueLevel level)
    {
        return true;
    }

    public Type GetPropertyValueType(IPublishedPropertyType propertyType)
    {
        return typeof(IPublishedContent);
    }

    public PropertyCacheLevel GetPropertyCacheLevel(IPublishedPropertyType propertyType)
    {
        return PropertyCacheLevel.Element;
    }

    public object? ConvertSourceToIntermediate(IPublishedElement owner, IPublishedPropertyType propertyType,
        object? source, bool preview)
    {
        if (source == null) return null;

        var jsonValue = JsonNode.Parse(source.ToString() ?? string.Empty);
        return jsonValue;
    }

    public object? ConvertIntermediateToObject(IPublishedElement owner, IPublishedPropertyType propertyType,
        PropertyCacheLevel referenceCacheLevel, object? inter, bool preview)
    {
        return inter ?? null;
    }

    public object? ConvertIntermediateToXPath(IPublishedElement owner, IPublishedPropertyType propertyType,
        PropertyCacheLevel referenceCacheLevel, object? inter, bool preview)
    {
        return inter?.ToString();
    }
}
You do need to update 
return propertyType.EditorAlias.Equals("SampleEditor");
to your custom editor's alias though. The highlighted one in the screenshot.
b
It works! 🙂
s
Yay! Please note that this now also changes the value in Razor, in case you were outputting it there for some reason.
90 Views
PreviousNext
Powered by