Component replacement of components inside CRUD modals #6696 | Support

hanakl created 8 months ago

ABP Framework version: v8.0.3
UI Type: Blazor Server
Database System: EF Core (PostgreSQL)
Tiered (for MVC) or Auth Server Separated (for Angular): no

I have generated basic CRUD actions for our objects using default templates. When there is a string property of an object marked for generation as a textarea, input that handles bound data to that property is generated as MemoEdit component from Blazorise library. However, I would like to have a different component in place of MemoEdit, which is RichTextEdit. Is there any way to modify or override the generation process to specify which component should be used? I know it can be done manually, but those changes will not persist when things change and also it wouldn't be applied globally.

Go to accepted answer

7 Answer(s)

0

maliming created 8 months ago
Support Team Fullstack Developer

hi

https://docs.abp.io/en/commercial/latest/abp-suite/editing-templates

hanakl created 9 months ago

HI, I've read through documentation about editing templates prior to my post. I should have mentioned in there, sorry. The problem is that in my template called "Frontend.Blazor.Page.Item.razor.txt" is this block of code:

    <Validations @ref="@Editing%%entity-name%%Validations"
                Mode="ValidationMode.Auto"
                Model="@Editing%%entity-name%%"
                ValidateOnLoad="false">
         %%main-edit-tab-opener%%
        %%razor-modal-fields-edit%%
        %%main-tab-closer%%
        %%razor-modal-navigation-connection-fields-editing%%
    </Validations>%%tab-closer%%

This seems to be responsible for a generation of this code from the app:

<Validations @ref="@NewPageValidations"
            Mode="ValidationMode.Auto"
            Model="@NewPage"
            ValidateOnLoad="false"\>
     
    
    <Validation MessageLocalizer="@LH.Localize">
        <Field>
            <FieldLabel>@L["Title"] *</FieldLabel>
            <TextEdit @bind-Text="@NewPage.Title"  >
                <Feedback>
                    <ValidationError />
                </Feedback>
            </TextEdit>
        </Field>
    </Validation>


    <Validation MessageLocalizer="@LH.Localize">
        <Field>
            <FieldLabel>@L["PublishAt"]</FieldLabel>
            <DateEdit TValue="DateTime?" InputMode="DateInputMode.DateTime" @bind-Date="@NewPage.PublishAt" >
               <Feedback>
                    <ValidationError />
                </Feedback>
            </DateEdit>
        </Field>
    </Validation>


    <Validation MessageLocalizer="@LH.Localize">
        <Field>
            <FieldLabel>@L["Content"] *</FieldLabel>
            <MemoEdit @bind-Text="@NewPage.Content"  >
                <Feedback>
                    <ValidationError />
                </Feedback>
            </MemoEdit>
        </Field>
    </Validation>


    <Field>
        <FieldLabel>@L["Type"]</FieldLabel>
        <Select TValue="PageType" @bind-SelectedValue="@NewPage.Type" >
            @foreach (var itemValue in Enum.GetValues(typeof(PageType)))
            {
                <SelectItem TValue="PageType" Value="@((PageType) itemValue)">
                    @L[$"Enum:PageType.{((PageType) itemValue).ToString("d")}"]
                </SelectItem>
            }
        </Select>
    </Field>


    
    
</Validations>

What I acknowledge is that I'm able to edit the template to the point it would generate what I want, thanks to the present if branching a looping logic, but it feels like a really impractical solution to me. What I'm confused about the most are these variables:

    %%main-edit-tab-opener%%
    %%razor-modal-fields-edit%%
    %%main-tab-closer%%
    %%razor-modal-navigation-connection-fields-editing%%

0
EngincanV created 9 months ago
Support Team .NET Developer
What I acknowledge is that I'm able to edit the template to the point it would generate what I want, thanks to the present if branching a looping logic, but it feels like a really impractical solution to me. What I'm confused about the most are these variables:

%%main-edit-tab-opener%% %%razor-modal-fields-edit%% %%main-tab-closer%% %%razor-modal-navigation-connection-fields-editing%%

%%main-edit-tab-opener%% -> this only creates an opening tab for the TabPanel component (<TabPanel Name="..">) on the code side.

%%razor-modal-fields-edit%% -> this corresponds to the related field components and you can edit the related txt files such as Field.Text.txt, Field.DateTime.txt, Frontend.Blazor.Page.Partials.Modal.Field.Numeric.txt, Frontend.Blazor.Page.Partials.Modal.Field.Bool.txt and Frontend.Blazor.Page.Partials.Modal.Field.Enum.txt

%%main-tab-closer%% -> This is just for the closing tag of the TabPanel component (</TabPanel>)

%%razor-modal-navigation-connection-fields-editing%% -> This is for navigation connections and use the field components again. (So, you can edit the related txt files like in the %%razor-modal-fields-edit%% placeholder)

I will update the Editing Templates documentation.

Best Regards.
2
0

hanakl created 9 months ago

Hi, thank you very much for explanation, it is much more understandable for me now. I can see all of the field templates except the one used for TextArea. Templates in our solution are untouched.

I also tried to manually go through most of the templates, but I have not noticed the one, which would be responsible for generation of MemoEdit component.
0

EngincanV created 9 months ago
Support Team .NET Developer

Hi, thank you very much for explanation, it is much more understandable for me now. I can see all of the field templates except the one used for TextArea. Templates in our solution are untouched.

I also tried to manually go through most of the templates, but I have not noticed the one, which would be responsible for generation of MemoEdit component.

Hi, the Frontend.Blazor.Page.Partials.Modal.Field.Text.txt component is used for text areas. We replace the TextEdit component with MemoEdit on the code side. when it's marked as "textarea".
0

hanakl created 9 months ago

Hi, I see. Is there a way to change this behavior so that it is replaced with a different component?
0

EngincanV created 9 months ago
Support Team .NET Developer

Hi, I see. Is there a way to change this behavior so that it is replaced with a different component?

I'll create an internal issue for that, and try to implement it with 8.1.0-rc.2 or 8.1.0-rc.3.

1

Have an answer to this question? Log in and write your answer.