Hi, I'm trying to add a custom property to the tenant entity through the dynamic form extension. In the end I want to be able to upload a file in the create and edit form which is then saved to the tenant. As a first step I wanted to add a simple string property and followed the documentation for that: https://docs.abp.io/en/abp/latest/UI/Angular/Dynamic-Form-Extensions After doing that I got the new input field but the value that I put there didn't get saved in the database. However when I added the same property through the Extension Manager in the backend it worked but then I got 2 input fields in the form. What am I doing wrong?
This is my form prop contributor:
import {
eSaasComponents,
SaasCreateFormPropContributors,
} from '@volo/abp.ng.saas';
import { SaasTenantDto } from '@volo/abp.ng.saas/proxy';
import { ePropType, FormProp, FormPropList } from '@abp/ng.components/extensible';
const imageProp = new FormProp<SaasTenantDto>({
type: ePropType.String,
name: 'Image',
displayName: 'AbpTenantManagement::Image',
formText: 'Upload an image for the tenant',
isExtra: true,
//template: ImageUploadComponent
});
export function imagePropContributor(propList: FormPropList<SaasTenantDto>) {
propList.addTail(imageProp);
}
export const saasCreateFormPropContributors: SaasCreateFormPropContributors = {
[eSaasComponents.Tenants]: [
imagePropContributor,
// You can add more contributors here
],
};
export const saasEditFormPropContributors = saasCreateFormPropContributors;
This is how I use it in my routing module:
const routes: Routes = [
//other routes
{
path: 'saas',
loadChildren: () => import('@volo/abp.ng.saas').then(m =>
m.SaasModule.forLazy({
createFormPropContributors: saasCreateFormPropContributors,
editFormPropContributors: saasEditFormPropContributors,
})
),
},
//other routes
];
@NgModule({
imports: [RouterModule.forRoot(routes, {})],
exports: [RouterModule],
})
export class AppRoutingModule {}
- ABP Framework version: v8.0.2
- UI Type: Angular
- Database System: EF Core (MySQL)
- Tiered (for MVC) or Auth Server Separated (for Angular): no
- Exception message and full stack trace:
- Steps to reproduce the issue:
3 Answer(s)
-
0
Hi, Having your:
const imageProp = new FormProp<SaasTenantDto>({ type: ePropType.String, name: 'Image', displayName: 'AbpTenantManagement::Image', formText: 'Upload an image for the tenant', isExtra: true, //template: ImageUploadComponent });Make sure that name field form your prop to have exact value as your field in database. So in your database, you should have "Image".
Have a great day.
-
0
Thank you for the response.
This is the code from the backend where I already put the exact same name. But I still get the behavior that I see the property twice in the form:
private static void ConfigureExtraProperties() { ObjectExtensionManager.Instance.Modules() .ConfigureSaas(saas => { saas.ConfigureTenant(tenant => { tenant.AddOrUpdateProperty<string>("Image"); }); }); }
-
0
Hello @lukas.augustin. Considering your case, there is no need to add extra configurations for the frontend side to extend the form properties. Extending the related object by using module entity extensions system would be enough.
