umbraco / Umbraco.UIBuilder.Issues

Back office UI builder for Umbraco
3 stars 2 forks source link

using a 'blocklist editor' datatype for a field causes a 'Could not find umbVariantContent in the $scope chain' console error #11

Open ribsdigital opened 2 years ago

ribsdigital commented 2 years ago

hi matt,

just checking if there is support for the blocklist editor datatype? we've double checked https://docs.getkonstrukt.net/extras/known-issues and it's not mentioned as not supported...

we've created a very basic doctype with one text property on it and then created a datalist datatype that uses the doctype:

image image

we'added a Data column to our table in sql server with a data type of nvarchar(MAX):

image

added it to our poco:

using NPoco;
using Umbraco.Cms.Infrastructure.Persistence.DatabaseAnnotations;

namespace KonstruktTesting.Core
{
    [TableName("Person")]
    [PrimaryKey("Id")]
    public class Person
    {
        [PrimaryKeyColumn]
        public int Id { get; set; }
        public string Name { get; set; }
        public string JobTitle { get; set; }
        public string Email { get; set; }
        public string Telephone { get; set; }
        public int Age { get; set; }
        public string Avatar { get; set; }
        public string Data { get; set; }
    }
}

and set the datatype for the property in our konstructor using .AddField(p => p.Data).SetDataType("Blocklist editor test"):

using Konstrukt.Configuration;
using Konstrukt.Configuration.Builders;

namespace KonstruktTesting.Core
{
    public class MyKonstruktConfigurator : IKonstruktConfigurator
    {
        public void Configure(KonstruktConfigBuilder builder)
        {
            builder.AddSectionAfter("media", "Repositories", sectionConfig => sectionConfig
                .Tree(treeConfig => treeConfig
                    .AddCollection<Person>(x => x.Id, "Person", "People", "A person entity", "icon-umb-users", "icon-umb-users", collectionConfig => collectionConfig
                        .SetConnectionString("dataDbDSN")
                        .SetNameProperty(p => p.Name)
                        .ListView(listViewConfig => listViewConfig
                            .AddField(p => p.JobTitle).SetHeading("Job Title")
                            .AddField(p => p.Email)
                        )
                        .Editor(editorConfig => editorConfig
                            .AddTab("General", tabConfig => tabConfig
                                .AddFieldset("General", fieldsetConfig => fieldsetConfig
                                    .AddField(p => p.JobTitle).MakeRequired()
                                    .AddField(p => p.Age)
                                    .AddField(p => p.Email).SetValidationRegex("[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+")
                                    .AddField(p => p.Telephone).SetDescription("inc area code")
                                )
                                .AddFieldset("Media", fieldsetConfig => fieldsetConfig
                                    .AddField(p => p.Avatar)
                                )
                                .AddFieldset("Data", fieldsetConfig => fieldsetConfig
                                    .AddField(p => p.Data).SetDataType("Blocklist editor test")
                                )
                            )
                        )
                    )
                )
            );
        }
    }
}

attempting to create a new 'person' in the backoffice results in the following error:

Could not find umbVariantContent in the $scope chain

image

if we put the same datatype on a doctype and add content in the content tree, everything works as expected.

we've had a search, and it appears that this error has been reported in earlier versions of umbraco 8 https://github.com/skttl/umbraco-doc-type-grid-editor/issues/226 but has been fixed in later versions.

just to double check that its not a core issue, we've tried this in a projects running v9.3.1 and v9.4.1 of umbraco and get the same results.

if you could let us know if this is a bug or the blocklist editor is an unsupported datatype, that'd be great :thumbsup:


This item has been added to our backlog AB#34774

mattbrailsford commented 2 years ago

Hey @ribsdigital

To be honest, I hadn't tried using a block list editor but I know they are pretty complex in their implementation so I'm guessing it's built to expect to be in the content editor and it's looking for a specific control in the $scope chain to read some values (which is bad angular practice to be honest).

I'll have to look into what it's doing and whether it can be faked, but for now I think it's probably a case of it being too complex and built for a specific purpose with a few assumptions made in it's code base.

FransLammers commented 2 years ago

Hi Matt,

We came upon the same issue when we were making a custom property editor containing a block list property. We use this property editor to let the user overwrite standard value of a property inside the block list property in certain cases.

We got this working with a few changes in the controllers and views:

umbBlockListPropertyEditor.component.js:

if (liveEditing === false) {
                        // transfer values when submitting in none-liveediting mode.
                        blockObject.retrieveValuesFrom(blockEditorModel.content, blockEditorModel.settings);
                    }

to

if (liveEditing === false) {
                        // transfer values when submitting in none-liveediting mode.
                        let saveOld = blockObject.config.settingsElementTypeKey;
                        blockObject.config.settingsElementTypeKey = null;
                        blockObject.retrieveValuesFrom(blockEditorModel.content, blockEditorModel.settings);
                        blockObject.config.settingsElementTypeKey = saveOld;
                    }

umb-block-list-row.html:

For now this is working for our project and although it only has one culture, perhaps this can be a starting point for a more definitive solution?