Can data source items be available in Configuration Field?

[skartknet]

I'm creating a new DataListEditor and I have a configuration field that would benefit from having available the data items that are passed to the actual editor. Is that somehow possible to have?

The DataListEditor is for Conditional Displayers, so it would be good to have the available items from the data source to configure the show/hide items.

[leekelleher]

Hi @skartknet,

To clarify, do you mean when configuring the options of a custom IDataListEditor, as in within the Data Type section of the backoffice?
I think at that point, all the configuration fields of both the data-sources and list-editors are already created (in the initial JSON payload).

I'm wondering if an API call (JSON fetch/request) from the configuration field's AngularJS controller could be made. 🤔

I already have a backoffice API controller, backoffice/Contentment/DataListApi/GetDataSourceItems, that I use for the Data List preview (read-only) editor.
https://github.com/leekelleher/umbraco-contentment/blob/4.1.1/src/Umbraco.Community.Contentment/DataEditors/DataList/DataListApiController.cs#L67-L91

Example of how it's called in the AngularJS controller...
https://github.com/leekelleher/umbraco-contentment/blob/4.1.1/src/Umbraco.Community.Contentment/DataEditors/DataList/data-source.preview.js#L63-L74

My doubt is how the configuration field for the custom list-editor would be able to read the configuration of the data-source? 🤔🤔🤔
There might be some funky $scope traversal needed to get the data-source config data, but I can't quite get my head around what that code/query would look like. 🤯

I hope some of this helps? I'm happy to brainstorm ideas on it.

[skartknet]

Thanks @leekelleher ,

I'm pretty sure we're on the same page, but just for the sake of completeness this is where I need the Data Source values to be used:

I have tried to check if I could use that DataListApiController, and reviewing the preview controller that you shared I see that would need the dataSource to pass it to the GetDataSourceItems endpoint.

Unfortunately the Configuration Field is not getting that data in the $scope.model:

As you said it looks that we need some $scope traversal :/

This is my DataList editor:

public class ConditionalDisplayerDropdownDatalistEditor : IDataListEditor
    {        
        public Dictionary<string, object> DefaultConfig => default;

        public string View => "~/App_Plugins/ConditionalDisplayers.Contentment/dropdownFlexible/dropdownFlexible.html";

        public Dictionary<string, object> DefaultValues => new Dictionary<string, object>();

        public IEnumerable<ConfigurationField> Fields => new ConfigurationField[]
        {
            new ConfigurationField
            {
                Key = "prevalues",
                Name = "Add prevalues",
                Description = "Configure the values that will have conditional behaviour",
                View = "/App_Plugins/ConditionalDisplayers.Contentment/prevalueeditors/cdMultivalues.html"
            }
        };

        public string Group => "Conditional Displayers";

        public OverlaySize OverlaySize => OverlaySize.Large;

        public string Name => "Conditional Displayers - Dropdown";

        public string Description => "Dropdown mising Contentment and Conditional Displayers functionalities.";

        public string Icon => "icon-code";

        public bool HasMultipleValues(Dictionary<string, object> config) => false;
    }

[leekelleher]

I had a try traversing up the scope tree, I got as far as I could until the $parent was null...

$scope.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent

(Yup, that's 18 $parents!)

...and that brings you to the scope of the List Editor property. I couldn't figure out how to traverse beyond that. I'm sure there'll be a way, but my AngularJS knowledge may be somewhat lacking here. 😬

If I can think of anything else to try, I'll let you know.

[skartknet]

How does the preview controller know that a dataSource has been removed or added? Can we use the same technique with the list editor controller?

[leekelleher]

(just to save me re-typing, I've copy/pasted the bit I replied on the Data List: Conditional Data types thread)

I've used the eventsService.emit for the Data List preview (on the Data Type). It's set up on another one of the Contentment editors (an internal one called Configuration Editor), that broadcasts when a value has changed... e.g. https://github.com/leekelleher/umbraco-contentment/blob/2.1.0/src/Umbraco.Community.Contentment/DataEditors/ConfigurationEditor/configuration-editor.js#L188
Then in the Data List preview editor, it is notified of any changes and updates accordingly. e.g. https://github.com/leekelleher/umbraco-contentment/blob/2.1.0/src/Umbraco.Community.Contentment/DataEditors/DataList/data-list.preview.js#L49

I doubt eventsService would work in the scenario you need, as the controller code for the list-editor's configuration field (property-editor) wouldn't be running at that point, (because the side panel wouldn't be activated).

[skartknet]

Do you know if it would be possible to register some kind of service in Angular whose only function would be to listen for that event and save the dataSource model? If that would be possible, the configuration field's controller could get the value from there. (I might be saying something crazy here, but hey!)

[leekelleher]

With the way that I've built the data-source and list-editor fields - reusing the internal generic "Configuration Editor" editor, it wouldn't be possible to keep it generic by adding events/hooks that are specific to those fields, (which I wouldn't want to do as the same editor is reused for the Content Blocks editor config).

The only ways I could see this working is if the entire Data List configuration was a single editor with multiple fields (much like how Umbraco's RTE and Block List editors do it), then the overall JSON value would be accessible throughout. Personally, I don't like that approach, I'd prefer smaller granular (reusable) editors, and have some mechanism for them to talk to each other, (but I guess we'd hit the same issue with using the eventsService).

Or that the Conditional Displayers logic took an alternative approach? I'm wondering about at Content Type level, (as opposed to at Data Type level). But that'd need far more brainstorming - I'm just spitballing.

Sorry it's not working out as straight forward as it could be. 😬

[leekelleher]

@skartknet I've been hacking around and remembered editorState.current (and I'm now kicking myself! 🤦)

...and because the sort order of the properties is fixed for the Data List configuration, you should be able to get the value like so... editorState.current.preValues[0].value[0].value

Then it'd be a case of making gathering the data together and making a call to the backoffice/Contentment/DataListApi/GetDataSourceItems API.

https://github.com/leekelleher/umbraco-contentment/blob/4.1.1/src/Umbraco.Community.Contentment/DataEditors/DataList/DataListApiController.cs#L68-L70

[skartknet]

Ah awesome! I was able to see the data source BUT there's a weird issue now. The value of the dataSource is null after I have selected one. The following screenshot is from my Conditional Displayers controller:

If I save and reload then I can see the value. The strange thing is that if I choose a different data source, I can see the value updated straight away!

[leekelleher]

Hmmm, that is strange, as it wasn't null for me, it contained the data-source's configuration values. 🤔