Ends in:
3 DAYS
21 HRS
13 MIN
38 SEC
Ends in:
3 D
21 H
13 M
38 S
Open Closed

Component replacement of components inside CRUD modals #6696


User avatar
0
hanakl created
  • 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.


7 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

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

  • User Avatar
    0
    hanakl created

    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%%
    
  • User Avatar
    0
    EngincanV created
    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.

  • User Avatar
    0
    hanakl created

    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.

  • User Avatar
    0
    EngincanV created
    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".

  • User Avatar
    0
    hanakl created

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

  • User Avatar
    0
    EngincanV created
    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.

Made with ❤️ on ABP v9.1.0-preview. Updated on December 02, 2024, 12:35