- ABP Framework version: 7.1
- UI type: Angular
- DB provider: MongoDB
- Tiered (MVC) or Identity Server Separated (Angular): yes
- Exception message and stack trace:
- Steps to reproduce the issue:"
I have seem people raise it on abp framework GitHub as well. Is it possible to replace or extend Extensible table components. All these components are useful to change default layout of existing abp pages and will be really helpful if we can replace or extend them somehow.
@Component({ exportAs: 'abpExtensibleTable', selector: 'abp-extensible-table', templateUrl: './extensible-table.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) export class ExtensibleTableComponent<R = any> implements OnChanges { protected _actionsText: string; @Input()
9 Answer(s)
-
0
any update on this guys. its really hard to override listing pages without this feature. Do i need to raise it somewhere else. As a commercial customer we need this as a feature. Ui consistency with design is important in our project and existing pages look quite different if we cannot edit this component.
-
0
The extensible table component has the ability to add or remove new properties or functions. You can read the documentation https://docs.abp.io/en/abp/latest/UI/Angular/Extensions-Overall https://docs.abp.io/en/abp/latest/UI/AspNetCore/Data-Table-Column-Extensions
but if you want to customize an extensible table. You can do it. I would wrap the existing extensible table component. Then I would replace the new component with the one that existed with DI. These are a little bit advanced topics. Maybe I can't explain "how to customize that exactly to what you want," but I want to help step by step when you get stuck.
An extensible system exists in ABP (open source version). So you can read the code. https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.html
-
0
https://docs.abp.io/pt-BR/abp/latest/UI/Angular/Component-Replacement
UI Extension module does not define replaceable interface for these components. I have replaced some components like User and tenant which are relatively easy. Even if I create new selector: 'abp-extensible-table', component, how do I use DI to insert it to replace existing component.
-
0
I have seen current extensible component it does not provide any way to replace its template
-
0
This is critical for our application as I am trying to replace exiting pages UI to be consistent with design. and default ngx-datatable is not going to work with it.
-
0
This is critical for our application as I am trying to replace exiting pages UI to be consistent with design. and default ngx-datatable is not going to work with it.
by default we don't provide replaceable key for extensible table. You can dowload the source code and add the project as local reference. I have a add source code feature, I have asked my teammate. How the user add package from open source sides. I will send answer next business day.
-
0
I tried to add source code of theme shared module which is parent of extension module using
abp add-package @abp/ng.theme.shared -v 7.1.0 --with-source-codeModule does get added but I get build errors `./projects/abc/src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):Error: Debug error: DtsModuleScopeResolver.read(UiExtensionsModule from D:/Projects/abc/apps/angular/projects/abp-ng.theme.shared/extensions/src/lib/ui-extensions.module.ts), but not a .d.ts file
./projects/abc/src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: Debug error: DtsModuleScopeResolver.read(UiExtensionsModule from D:/Projects/abc/apps/angular/projects/abp-ng.theme.shared/extensions/src/lib/ui-extensions.module.ts), but not a .d.ts file
Error: projects/abp-ng.theme.shared/extensions/src/lib/components/grid-actions/grid-actions.component.ts:27:21 - error TS2612: Property 'index' will overwrite the base property in 'AbstractActionsComponent<EntityActionList
27 @Input() readonly index?: number; ~~~~~
Error: projects/abp-ng.theme.shared/extensions/src/lib/directives/prop-data.directive.ts:25:32 - error TS2612: Property 'index' will overwrite the base property in 'PropData<InferredData
25 @Input('abpPropDataAtIndex') index?: number; ~~~~~
Error: projects/abp-ng.theme.shared/extensions/src/lib/models/form-props.ts:70:12 - error TS2612: Property 'template' will overwrite the base property in 'Prop
70 readonly template?: Type
Please advice how to approach this problem. This issue is currently blocking my work , and I will appreciate if you can provide some solution. And I am using Commercial subscription with business account so I will be using source code of commercial module. which I already have.
-
0
Also I dont know why my support account seems to be pointing to wrong organization which was trail. It keep saying your trail is expired when I am already part of or Organization account which has 10 dev licenses.
-
0
I tried to add source code of theme shared module which is parent of extension module using
abp add-package @abp/ng.theme.shared -v 7.1.0 --with-source-codeModule does get added but I get build errors `./projects/abc/src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):Error: Debug error: DtsModuleScopeResolver.read(UiExtensionsModule from D:/Projects/abc/apps/angular/projects/abp-ng.theme.shared/extensions/src/lib/ui-extensions.module.ts), but not a .d.ts file
./projects/abc/src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: Debug error: DtsModuleScopeResolver.read(UiExtensionsModule from D:/Projects/abc/apps/angular/projects/abp-ng.theme.shared/extensions/src/lib/ui-extensions.module.ts), but not a .d.ts file
Error: projects/abp-ng.theme.shared/extensions/src/lib/components/grid-actions/grid-actions.component.ts:27:21 - error TS2612: Property 'index' will overwrite the base property in 'AbstractActionsComponent<EntityActionList
27 @Input() readonly index?: number; ~~~~~
Error: projects/abp-ng.theme.shared/extensions/src/lib/directives/prop-data.directive.ts:25:32 - error TS2612: Property 'index' will overwrite the base property in 'PropData<InferredData
25 @Input('abpPropDataAtIndex') index?: number; ~~~~~
Error: projects/abp-ng.theme.shared/extensions/src/lib/models/form-props.ts:70:12 - error TS2612: Property 'template' will overwrite the base property in 'Prop
70 readonly template?: Type
Please advice how to approach this problem. This issue is currently blocking my work , and I will appreciate if you can provide some solution. And I am using Commercial subscription with business account so I will be using source code of commercial module. which I already have.
I have got the same error, and I couldn't fix yet. We have planned, add replace key for "replacable-system-table" componant in 7.4 (probably). until then I can found a workaround.
I have created app . execute
abp add-package @abp/ng.theme.shared -v 7.1.0 --with-source-code(it have added source code and mutate angular.json). then go to typescript.json. change path"@abp/ng.theme.shared": [ "dist/packages/theme-shared/", ], "@abp/ng.theme.shared/extensions": [ "dist/packages/theme-shared/extensions/", ]then runng build abp-ng.theme.sharedthe code will compile the code. Finally yarn start your app will work compiled local source code.
it is just a workaround. I am looking the main reason that why it doesn't work.
