On Page editing for string with UIHint.Textarea with line breaks support

Vote:
 

Hi,

We have a requirement for a property of type string with option to have line breaks, so we tried to use something like

        [CultureSpecific]
        [Display(Order = 20)]
        [UIHint(UIHint.Textarea)]
        public virtual string SubnavigationText { get; set; }



but it renders the both CMS on-page edit mode and view shown to end user with no line breaks.

Tried to follow that approach http://joelabrahamsson.com/episerver-editing-delight-challenge-mvc-solution/ which fixed the view for end users (renders line breaks) and also shows properly the on-page view BUT when you start edit that property on-page it jumps to one line and you lose all breaks.

That worked just nicely in previous versions (including Epi 10), so that was opening on click the property in popup dialog and allowing to add line breaks

What is the best way how to handle it now? we are running Episerver version 11.3.2.0

#188721
Mar 01, 2018 15:32
Vote:
 

Hi Grzegorz

This could solve your problem: https://gregwiechec.com/2016/05/how-to-render-line-breaks-for-string-property/

David

#188736
Mar 01, 2018 20:43
Vote:
 

Hi David,

But I think it is pretty much the same solution what Joel presented in 2013 for MVC and that is what we used also on some projects in past, but now on latest EpiServer (well missing maybe last 2 updates) it behaves not fully correct: the line breaks are shown as they should in both views but the problem is that when clicking on the property in on-page mode it does not open the popup with the editable value (just like first image in Grzegorz's article), but instead it behaves quite same as editation of regular string property and even after few clicks on that field it seems to notice some changes and goes into autosave + suddenly line breaks are gone.

Maybe it is kind of side effect of some breaking changes in Epi 11? because at that time UIHint.LongString has been obsoleted and replaced with UIHint.Textarea ->> https://world.episerver.com/documentation/upgrading/Episerver-CMS/cms-11/breaking-changes-cms-11/

And as I said same solution was working just fine in Epi 10 and earlier

#188739
Mar 01, 2018 21:10
Vote:
 

Hi Grzegorz

Sorry should have read your first post more closely ;). You could try using a standard Dojo widget and a custom editor descriptor:

public class ContentPage : PageData
{
    [Display(Order = 10)]
    [UIHint(CustomUiHints.TextArea)]
    public virtual string TextArea { get; set; }

    // Other code
}

[EditorDescriptorRegistration(TargetType = typeof(string), UIHint = CustomUiHints.TextArea)]
public class LineBreakTextAreaEditorDescriptor : EditorDescriptor
{
    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
    {
        ClientEditingClass = "dijit/form/Textarea";
        base.ModifyMetadata(metadata, attributes);
    }
}

public static class CustomUiHints
{
    public const string TextArea = "TextArea";
}

Let me know how you get on

David

#188745
Mar 01, 2018 23:00
Vote:
 

Hi, I've used similiar solution as David suggests. But I use custom UIHint so that it is not applied to all string properties. Also it doesn't use the inline editor but the floating editor and sets the width of the editing box.

Custom view for the libe breaks string (/views/shared/displaytemplates/LineBreakString.cshtml):

@model System.String

@{ 
    var strArr = string.IsNullOrEmpty(Model) ? new string[0] : Model.Split('\n');
}

@for (int i = 0; i < strArr.Length; i++)
{
    @strArr[i];

    if (i+1 < strArr.Length)
    {
        @Html.Raw("<br />");
    }
}

Then the editordescriptor looks like this:

[EditorDescriptorRegistration(TargetType = typeof(string), UIHint = SiteUIHints.LineBreakString)]
public class TextareaLineBreaksEditorDescriptor : EditorDescriptor
{
	public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
	{
		ClientEditingClass = "dijit/form/Textarea";

		// open the floating editor and not the inline editing (content editable)
		metadata.CustomEditorSettings["uiWrapperType"] = EPiServer.Shell.UiWrapperType.Floating;

		// set width of the editor
		metadata.EditorConfiguration.Add("style", "width: 300px");

		base.ModifyMetadata(metadata, attributes);
	}
}

The LineBreakString constant and usage on a content type:

// constant for the linebrakstring uihint in SiteUIHints class
public const string LineBreakString = "LineBreakString";

// usage on a content property
[UIHint(SiteUIHints.LineBreakString)]
[Display(GroupName = SystemTabNames.Content, Order = 350)]
[CultureSpecific]
public virtual string MyLineBreaks { get; set; }

And rendering of the property in a content type view:

@Html.PropertyFor(x => x.CurrentPage.MyLineBreaks, new { Tag = "LineBreakString" })

All this based on Joels old post :D The tag "LineBreakString" is used to select the displaytemplate LineBreakString.cshtml to render the string.

Note, the string splitting is just something that I quickly threw in so adjust that part to your rendering needs.

#188748
Mar 02, 2018 6:02
Vote:
 

Hi David and Antti,

Thank you both for your answers, now I have satisfying solution.

So:

   public class SiteUIHints
    {
        public const string LineBreakTextArea = "LineBreakTextArea";
    }

    [EditorDescriptorRegistration(TargetType = typeof(string), UIHint = SiteUIHints.LineBreakTextArea)]
    public class TextareaLineBreaksEditorDescriptor : EditorDescriptor
    {
        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
        {
            ClientEditingClass = "dijit/form/Textarea";

            // open the floating editor and not the inline editing (content editable)
            metadata.CustomEditorSettings["uiWrapperType"] = EPiServer.Shell.UiWrapperType.Floating;

            // set width of the editor
            metadata.EditorConfiguration.Add("style", "width: 500px");

            base.ModifyMetadata(metadata, attributes);
        }
    }

David your answer already pointed me to good direction but to show popup with better UI I set the uiWrapperType to be floating + width as Antti have it. Additionally I used other UiHint than the "TextArea" otherwise all properties with UIHint.Textarea would end up with line breaking too (might be not wanted for some cases).

and still I think there was some breaking change in latest versions which made that the old Joel's code stopped working - so head up for sites doing upgrades

#188752
Mar 02, 2018 8:27
Vote:
 
<p>Bu there is even more to this ;P</p> <p>What if your property is decorated with RequiredAttribute? If the user removes all text from the textarea in the on-page edit -&gt; user can leave the field (close the editor). Next to th epublish is displayed one error that the field is required, so from editor point of view, they get feedback. But if the go to the all properties view the textarea is not highlighted with red rectangle.</p> <p>To fix the missing red rectangle in the all properties view you coul duse the following editordescriptor.</p> <pre class="brush:csharp;auto-links:false;toolbar:false" contenteditable="false">[EditorDescriptorRegistration(TargetType = typeof(string), UIHint = SiteUIHints.LineBreakString)] public class TextareaLineBreaksEditorDescriptor : EPiServer.Cms.Shell.UI.ObjectEditing.EditorDescriptors.TextareaEditorDescriptor { public TextareaLineBreaksEditorDescriptor() { Style = "width:500px"; } public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable&lt;Attribute&gt; attributes) { base.ModifyMetadata(metadata, attributes); // open the floating editor and not the inline editing (content editable) metadata.CustomEditorSettings["uiWrapperType"] = EPiServer.Shell.UiWrapperType.Floating; } }</pre> <p>So inheriting from the default TextareaEditorDescriptor and setting the width and having the floating editor (notice that the style is set differently here).</p> <p>With this implementation you get also the red rectangle in all properties view if no text is entered (and decorated with the requiredattribute).</p> <p>Only drawback, funny ui behavior I noticed in the on-page editing mode is that when you remove all text in the editor:</p> <ul> <li>you cannot leave the editor</li> <li>the last character that was in the edito is displayed on the underlying page ;)</li> </ul>
#188756
Mar 02, 2018 9:49
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.