ABP Framework customize Crud UI on Mvc Razor

Question

I am a new user to Abp Framework. Abp performs many operations automatically. This is great, you don't need to do anything for most transactions.

But how can I implement a structure like the one below without breaking the existing rules, localization and security controls in the UI part?

Order (Customer, OrderDate, Currency, ExchangeRate, DeliveryDate, Notes...),

OrderDetails(StockCode, Explanation, Price, Quantity, DiscountRate,... multi-line entry)

I design a complex UI and ensure its seamless validation and registration on the database side.

<abp-dynamic-form abp-model="Bank" asp-page="/Banks/CreateModal">
    <abp-modal>
        <abp-modal-header title="@L["NewBank"].Value"></abp-modal-header>
        <abp-modal-body>
            <abp-form-content />
            <div class="row">
                <div class="col">
                    Hello Col1
                </div>
                <div class="col">
                    Hello Col2
                </div>
                <p>My Form Content</p>
            </div>
        </abp-modal-body>
        <abp-modal-footer buttons="@(AbpModalButtons.Cancel|AbpModalButtons.Save)"></abp-modal-footer>
    </abp-modal>
</abp-dynamic-form>

The existing structure is intervened with the above code. But how to change the form size and width controls or adjust the localization?

How can I make an example design like Order OrderDetails regarding this?

Answer 1

https://docs.abp.io/en/abp/latest/UI/AspNetCore/Tag-Helpers/Dynamic-Forms you can customize it like here.

Example:

public class DynamicFormsModel : PageModel
{
    [BindProperty]
    public DetailedModel MyDetailedModel { get; set; }

    public List<SelectListItem> CountryList { get; set; } = new List<SelectListItem>
    {
        new SelectListItem { Value = "CA", Text = "Canada"},
        new SelectListItem { Value = "US", Text = "USA"},
        new SelectListItem { Value = "UK", Text = "United Kingdom"},
        new SelectListItem { Value = "RU", Text = "Russia"}
    };

    public void OnGet()
    {
            MyDetailedModel = new DetailedModel
            {
                Name = "",
                Description = "Lorem ipsum dolor sit amet.",
                IsActive = true,
                Age = 65,
                Day = DateTime.Now,
                MyCarType = CarType.Coupe,
                YourCarType = CarType.Sedan,
                Country = "RU",
                NeighborCountries = new List<string>() { "UK", "CA" }
            };
    }

    public class DetailedModel
    {
        [Required]
        [Placeholder("Enter your name...")]
        [Display(Name = "Name")]
        public string Name { get; set; }
        
        [TextArea(Rows = 4)]
        [Display(Name = "Description")]
        [InputInfoText("Describe Yourself")]
        public string Description { get; set; }

        [Required]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }

        [Display(Name = "Is Active")]
        public bool IsActive { get; set; }

        [Required]
        [Display(Name = "Age")]
        public int Age { get; set; }

        [Required]
        [Display(Name = "My Car Type")]
        public CarType MyCarType { get; set; }

        [Required]
        [AbpRadioButton(Inline = true)]
        [Display(Name = "Your Car Type")]
        public CarType YourCarType { get; set; }

        [DataType(DataType.Date)]
        [Display(Name = "Day")]
        public DateTime Day { get; set; }
        
        [SelectItems(nameof(CountryList))]
        [Display(Name = "Country")]
        public string Country { get; set; }
        
        [SelectItems(nameof(CountryList))]
        [Display(Name = "Neighbor Countries")]
        public List<string> NeighborCountries { get; set; }
    }

    public enum CarType
    {
        Sedan,
        Hatchback,
        StationWagon,
        Coupe
    }
}

Or you can shape it as you like instead of making it dynamic by using the tag helper at https://docs.abp.io/en/abp/latest/UI/AspNetCore/Tag-Helpers/Form-elements.

Example:

<form method='post' asp-page="/Banks/CreateModal">
    <abp-modal>
        <abp-modal-header title="@L["NewBank"].Value"></abp-modal-header>
        <abp-modal-body>
            <abp-input asp-for="@Model.Bank.Name"/>
<abp-input asp-for="@Model.Bank.Description"/>
<abp-input asp-for="@Model.Bank.Password"/>
<abp-input asp-for="@Model.Bank.IsActive"/>
            <div class="row">
                <div class="col">
                    Hello Col1
                </div>
                <div class="col">
                    Hello Col2
                </div>
                <p>My Form Content</p>
            </div>
        </abp-modal-body>
        <abp-modal-footer buttons="@(AbpModalButtons.Cancel|AbpModalButtons.Save)"></abp-modal-footer>
    </abp-modal>
</form>