Creating a block shows 'additional properties'

Vote:
 

Each time i create a block through 'Create a new block' link in page-edit mode it sums up all properties as 'additional properties'; none of the defined tabs show. However if i create a new block by clicking on the '+' - button it shows all the properties, categorized in tabs. This last one is the required behaviour. How can i prevent episerver from showing the ' additional properties' view?

Thanks in advance

#142961
Jan 07, 2016 11:27
Vote:
 

The additional properties view exists so that the editor, through a one step process, can create a block that automatically gets added to the content area without having to leave the page (load the preview controller that handles the block editing). I kind of like this feature but it would be better if the "Additional properties" was grouped in tabs in the same way as when you are editing a block or by clicking the '+'-button.

However, if you want the same behavior for the 'Create new block' link you can achieve this with small effort by adding a new editor descriptor and override the client editors used for content area.

Editor descriptor

[EditorDescriptorRegistration(TargetType = typeof(ContentArea), EditorDescriptorBehavior = EditorDescriptorBehavior.OverrideDefault)]
public class SiteContentAreaEditorDescriptor : ContentAreaEditorDescriptor
{
    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
    {
        base.ModifyMetadata(metadata, attributes);
        metadata.ClientEditingClass = "alloy.editors.ContentAreaEditor";
        metadata.OverlayConfiguration["customType"] = "alloy.overlay.ContentArea";
    }
}

~/ClientResources/Scripts/overlay/ContentArea.js

define(
    [
        "dojo/_base/declare",
        "dojo/_base/lang",

        "epi-cms/widget/overlay/ContentArea",
        "epi-cms/widget/command/CreateContentFromSelector"
],
    function (
        declare,
        lang,

        ContentArea,
        CreateContentFromSelector
    ) {
        return declare("alloy.overlay.ContentArea", [ContentArea], {
            executeAction: function (actionName) {
                if (actionName == "createnewblock") {
                    var command = new CreateContentFromSelector({
                        creatingTypeIdentifier: "episerver.core.blockdata",
                        editAllPropertiesOnCreate: false,
                        createAsLocalAsset: true,
                        treatAsSecondaryView: true,
                        autoPublish: false,
                        allowedTypes: this.allowedTypes,
                        restrictedTypes: this.restrictedTypes
                    });

                    command.execute();
                } else {
                    this.inherited(arguments);
                }
            }
        });
    }
);

~/ClientResources/Scripts/editors/ContentAreaEditor.js

define(
    [
        "dojo/_base/declare",
        "dojo/_base/lang",

        "epi-cms/contentediting/editors/ContentAreaEditor",
        "epi-cms/widget/command/CreateContentFromSelector"
    ],
    function (
        declare,
        lang,

        ContentAreaEditor,
        CreateContentFromSelector
    ) {
        return declare("alloy.editors.ContentAreaEditor", [ContentAreaEditor], {
            executeAction: function (actionName) {
                if (actionName == "createnewblock") {
                    // HACK: Preventing the onBlur from being executed so the editor wrapper keeps this editor in editing state
                    this._preventOnBlur = true;

                    // since we're going to create a block, we need to hide all validation tooltips because onBlur is prevented here
                    this.validate(false);

                    var command = new CreateContentFromSelector({
                        creatingTypeIdentifier: "episerver.core.blockdata",
                        editAllPropertiesOnCreate: false,
                        createAsLocalAsset: true,
                        treatAsSecondaryView: true,
                        autoPublish: false,
                        allowedTypes: this.allowedTypes,
                        restrictedTypes: this.restrictedTypes
                    });

                    command.execute();
                } else {
                    this.inherited(arguments);
                }
            }
        });
    }
);

If you don't already have a mapping from "alloy" to the ClientResources/Scripts folder in ~/module.config you need to add it:

<?xml version="1.0" encoding="utf-8"?>
<module clientResourceRelativePath="" loadFromBin="false">
    <dojo>
        <paths>
            <add name="alloy" path="ClientResources/Scripts" />
        </paths>
    </dojo>
</module>
#143098
Jan 12, 2016 13:59
Vote:
 

Mattias: This is good. The "problem" with additonal properties compared to by adding block via tha "+-sign" is that the layout can be controlled via a "preview controller". This is a very nice thing to be enable to do. I can not affect the layout in the additional properties-view. This is not very nice for the editors.

Your code solves this, but there is one issue. The block is not added to the ContentArea. (Its added to local assets though). Is it possible to also add it to the ContentArea where the block was created from?

#186276
Dec 15, 2017 9:38
Vote:
 

Yes, this is unfortunately an expected issue. One of the good things about "Additional properties" is that you can stay on the page and don't loose context by getting redirected to another route. I'm sorry but I don't have a good solution for you that doesn't involve ugly hacks. :) You could of course for example set a cookie or session and listen to content events and add the block when it's saved but I wouldn't go down that road. ;)

#186395
Dec 19, 2017 9:24