"TextField": how to override "TextField.Edit.cshtml" to use my "Custom Settings" in it?

[MarGraz]

Hi Everyone,

I'm continuing to explore Orchard Core. This time, I'm working on customizing the Orchard Core TextField. I've added custom settings that introduce a checkbox in the TextFieldSettings.Edit.cshtml page. I aim to use these custom settings to control whether the field is editable or not-editable when the Admin creates a new instance of a generic Content Item that uses the TextField.

I created my own ContentPartFieldDefinitionDisplayDriver<TextField>, and it works perfectly and the value is correctly saved, here the code:

public class TextFieldCustomSettingsDisplayDriver : ContentPartFieldDefinitionDisplayDriver<TextField>
 {
     public override IDisplayResult Edit(ContentPartFieldDefinition partFieldDefinition)
     {
         return Initialize<TextFieldCustomSettingsViewModel>("TextFieldCustomSettings_Edit", model =>
         {
             var settings = partFieldDefinition.GetSettings<TextFieldCustomSettings>();

             model.IsNotEditable = settings.IsNotEditable;
         })
         .Location("Content");
     }

     public override async Task<IDisplayResult> UpdateAsync(ContentPartFieldDefinition partFieldDefinition, UpdatePartFieldEditorContext context)
     {
         var viewModel = new TextFieldCustomSettingsViewModel();

         if (await context.Updater.TryUpdateModelAsync(viewModel, Prefix))
         {
             var settings = new TextFieldCustomSettings
             {
                 IsNotEditable = viewModel.IsNotEditable
             };
             context.Builder.WithSettings(settings);
         }
         return Edit(partFieldDefinition);
     }
 }

Now, I want to utilize the IsNotEditable property in the TextField.Edit.cshtml page to make the field non-editable if the value is true.
I have created an identical version of the Orchard Core TextField.Edit.cshtml (like this one) and placed it in my module at this path: Views/OrchardCore.ContentFields/TextField.Edit.cshtml. In the TextField.Edit.cshtml page, I have retrieved my customSettings and added an if/else logic, here is an example:

@model OrchardCore.ContentFields.ViewModels.EditTextFieldViewModel
@using MyModule.ContentFields.Models
@using OrchardCore
@using OrchardCore.ContentFields.Settings
@using OrchardCore.ContentManagement.Metadata.Models
@using OrchardCore.Localization
@using OrchardCore.Mvc.Utilities
@{
    var settings = Model.PartFieldDefinition.GetSettings<TextFieldSettings>();
    
    // Access my custom settings
    var customSettings = Model.PartFieldDefinition.GetSettings<TextFieldCustomSettings>();
    
    var culture = await Orchard.GetContentCultureAsync(Model.Field.ContentItem);
}

@if (customSettings.IsNotEditable) // Using my custom settings to conditionally render
{
    <p> Here my new field not editable.</p>
}
else
{
    <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Text)_FieldWrapper">
        <label asp-for="Text" class="@Orchard.GetLabelClasses()">@Model.PartFieldDefinition.DisplayName()</label>
        <div class="@Orchard.GetEndClasses()">
            <input asp-for="Text" class="form-control content-preview-text" dir="@culture.GetLanguageDirection()" />
            @if (!string.IsNullOrEmpty(settings.Hint))
            {
                <span class="hint">@settings.Hint</span>
            }
        </div>
    </div>
}

Now, I'm a bit confused 🤔 My override for TextField.Edit.cshtml is never hit, although I supposed to be because I placed it in the Views/OrchardCore.ContentFields/TextField.Edit.cshtml path. Here my questions:

1. If I define a new DisplayDriver I will define a new MyTextField, and I will never use the Orchard Core TextField, right? But I don't need to define a new custom Text Field.
2. Is there a way to pass my custom settings to the TextField.Edit.cshtml view and override this view?

Thank you

[MarGraz]

@douwinga if you have experience with this, please let me know 😊🙏

Thank you

[MarGraz]

I found a solution 🥳

1. It's not necessary to place the view in the Views/OrchardCore.ContentFields/TextField.Edit.cshtml path to override it. It's sufficient to put the TextField.Edit.cshtml in the Views folder of my module;
2. It is mandatory in my module to add a reference in the Manifest.cs to the OrchardCore.ContentFields module, which contains TextField.Edit.cshtml (the page that we want to override): Dependencies = new[] { "OrchardCore.ContentFields" }.

🤔 I have one more question:

• Instead of copying and pasting the original code of the TextField.Edit.cshtml view in the else part as I have done in the second example here, can I render the original TextField.Edit.cshtml using RenderPartialAsync (see the example below)?

Update: if you don't have time to read the entire thread and are looking for the answer to this question, see here to find out how we managed it.

@model OrchardCore.ContentFields.ViewModels.EditTextFieldViewModel
@using MyModule.ContentFields.Models
@using OrchardCore
@using OrchardCore.ContentFields.Settings
@using OrchardCore.ContentManagement.Metadata.Models
@using OrchardCore.Localization
@using OrchardCore.Mvc.Utilities
@{
    var settings = Model.PartFieldDefinition.GetSettings<TextFieldSettings>();
    
    // Access my custom settings
    var customSettings = Model.PartFieldDefinition.GetSettings<TextFieldCustomSettings>();
    
    var culture = await Orchard.GetContentCultureAsync(Model.Field.ContentItem);
}

@if (customSettings.IsNotEditable) // Using my custom settings to conditionally render
{
    <p> Here is my new field, not editable.</p>
}
else
{
      // Use the original TextField.Edit.cshtml instead of duplicating code in this override
       await Html.RenderPartialAsync("OrchardCore.ContentFields/Views/TextField.Edit.cshtml", Model);
}

Regarding the documentation:

@Piedone, about the override of the Admin views, I didn't find any information in the Orchard Core reference. Could it be useful to add this info here on the Templates page?

Thank you

[Piedone]

Yep, that would be great! If you'd venture into opening a PR, feel free to ping me and I'll review.

[Piedone]

For your second question under #15644 (comment): You can add your own driver for TextField (similar to what TextFieldDisplayDriver does), and both drivers will be applied. So, you can add only your editor's shape (you don't need to recreate what TextFieldDisplayDriver does, they will both be applied).

Overriding shapes like you did is only necessary if you want to fully override a template, not if you want to add to the editor or display of a part/field.

[MarGraz]

@Piedone, thank you again.

The explanation on the three ways to change what a given part/field renders for its editor or display is clear, thank you 👌

I tried what I have implemented here using the Html.RenderPartialAsync method, but it doesn't work. I get the exception that you can see below.

This happens because the Html.RenderPartialAsync method is looking inside the Views folder of my module: /Areas/MyModule.ContentFields/Views/OrchardCore.ContentFields/Views/TextField.Edit.cshtml, and not in the folder of the OrchardCore.ContentFields module: OrchardCore.ContentFields/Views/TextField.Edit.cshtml.

The exception I get:

InvalidOperationException: The partial view 'OrchardCore.ContentFields/Views/TextField.Edit.cshtml' was not found. 
The following locations were searched:
/Areas/MyModule.ContentFields/Views/OrchardCore.ContentFields/Views/TextField.Edit.cshtml

Part of the Stack trace:
Microsoft.AspNetCore.Mvc.ViewFeatures.HtmlHelper.RenderPartialCoreAsync(string partialViewName, object model, ViewDataDictionary viewData, TextWriter writer)
AspNetCoreGeneratedDocument.Views_TextField_Edit.ExecuteAsync() in TextField.Edit.cshtml
+ 33 await Html.RenderPartialAsync("OrchardCore.ContentFields/Views/TextField.Edit.cshtml", Model);
Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context)
Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, bool invokeViewStarts)
Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context)
Microsoft.AspNetCore.Mvc.ViewFeatures.HtmlHelper.RenderPartialCoreAsync(string partialViewName, object model, ViewDataDictionary viewData, TextWriter writer)
Microsoft.AspNetCore.Mvc.ViewFeatures.HtmlHelper.PartialAsync(string partialViewName, object model, ViewDataDictionary viewData)
OrchardCore.DisplayManagement.Implementation.DefaultHtmlDisplay.<ProcessAsync>g__Awaited|11_0(Task<IHtmlContent> task)
OrchardCore.DisplayManagement.Implementation.DefaultHtmlDisplay.ExecuteAsync(DisplayContext context)
OrchardCore.DisplayManagement.Implementation.DefaultHtmlDisplay.ExecuteAsync(DisplayContext context)
CallSite.Target(Closure , CallSite , object )
AspNetCoreGeneratedDocument.Views_ContentPart_Edit.ExecuteAsync()

In conclusion:

I think I can implement it as shown here. From what I understood, it's the best solution to achieve what I need.

However, I'm not entirely happy because I'm duplicating the code of the TextField.Edit.cshtml view (this one), and if one day the TextField.Edit.cshtml view will be updated in the main Orchard Core project, I will need to copy and paste the code again to keep it updated. No good 🫠, I need to find another solution to keep the maintenance reliable.

Thank you

[Piedone]

A more complex approach is to implement IShapeTableProvider (possibly IShapeDisplayEvents) and conditionally prevent the rendering of the original shape, see https://github.com/Lombiq/Orchard-Training-Demo-Module/blob/1c2a32db840b8561f0cfda39fa8951d8b7b41879/Lombiq.TrainingDemo/Services/ShapeHidingShapeTableProvider.cs You can combine this with a custom driver as I mentioned. However, I don't think this is worth the effort.

[MarGraz]

I want to update this discussion because we decided a strategy to avoid code duplication and makes manutention easy.
Here's the plan:

1. Use Html.RenderPartialAsync() in our TextField.Edit.cshtml customized view, this to display the original Orchard Core view when necessary;
2. Place the original Orchard Core view TextField.Edit.cshtml in a path that mirrors its location in the official release branch (not the main) of the OC repository: OrchardCore.Modules\OrchardCore.ContentFields\Views. This strategy makes it easier to identify what needs copying, and give us the flexibility to decide if upgrade to a newer OC release, or not;
3. Use our pipeline script to continuously integrate changes from the Orchard Core release branch (selecting the version we need) and to copy the TextField.Edit.cshtml view into our project in the {Our module}\Views\Original\OrchardCore.Modules\OrchardCore.ContentFields\Views path.

This approach allows us to:

• Automatically update TextField.Edit.cshtml and maintain the code without manual intervention by using the pipeline to specify the content and the release version we want to copy;
• Virtually "eliminate" code duplication because we are directly copying the source page into our code. Unfortunately, as discussed earlier in this thread, this step is necessary because MVC does not allow us to load the TextField.Edit.cshtml view from another library using the method Html.RenderPartialAsync().

This is the best solution we could devise, minimizing maintenance and duplication as much as possible.

Now, our custom page looks like this:

@model OrchardCore.ContentFields.ViewModels.EditTextFieldViewModel
@using MyModule.ContentFields.Models
@using OrchardCore
@using OrchardCore.ContentFields.Settings
@using OrchardCore.ContentManagement.Metadata.Models
@using OrchardCore.Localization
@using OrchardCore.Mvc.Utilities
@{
    var settings = Model.PartFieldDefinition.GetSettings<TextFieldSettings>();
    
    // Access my custom settings
    var customSettings = Model.PartFieldDefinition.GetSettings<TextFieldCustomSettings>();
    
    var culture = await Orchard.GetContentCultureAsync(Model.Field.ContentItem);
}

@if (customSettings.IsNotEditable) // Using my custom settings to conditionally render
{
    <p> Here is my new field, not editable.</p>
}
else
{
    @* It will use the original, unmodified, view, taken from the offical repository, in the "release" branch, thanks to our pipeline script *@
    await Html.RenderPartialAsync("Original/OrchardCore.Modules/OrchardCore.ContentFields/Views/TextField.Edit.cshtml", Model);
}

And in our project, we have organized the Original folder as shown in this image.

• Number 1 is the original view copied from OC;
• Number 2 is our custom view that contains the Html.RenderPartialAsync() method.

Thank you

[Piedone]

Thank you for sharing!

That looks a bit too much work for my taste, since while code duplication is bad in itself, in the end, it's maintenance work. It depends on the level of that maintenance work whether it's feasible to instead do something more complex to avoid code duplication. E.g., if you need to spend 2 minutes to check the file during each OC upgrade then the alternative should be quite simple to do too to make it worth it (or you need to anticipate having many such cases). I'm not trying to curb your enthusiasm but offer some perspective.

[MarGraz]

@Piedone yes, you are right, it involves a lot of work 🫠 that is demanded to the pipeline script. I'm not happy about it either, but right now, it's the best solution we've found instead of embedding the original Orchard Core view inside the else case.

The plan is to target the OC release branch, not the main branch. With all views organized in their original paths, once a new OC release come, if we decide to do the upgrade, it should be easy to check them. However, I agree it's not the ideal solution.

Your perspective, as well as others, is always welcome. It’s through these exchanges that we can learn something new 🤓

Thank you