Open Closed

Replacing Extensible Table Component #10984 #5168


User avatar
0
ndeol created
  • 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)
  • User Avatar
    0
    ndeol created

    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.

  • User Avatar
    0
    mahmut.gundogdu created

    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

  • User Avatar
    0
    ndeol created

    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.

  • User Avatar
    0
    ndeol created

    I have seen current extensible component it does not provide any way to replace its template

  • User Avatar
    0
    ndeol created

    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.

  • User Avatar
    0
    mahmut.gundogdu created

    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.

  • User Avatar
    0
    ndeol created

    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-code

    Module 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.

  • User Avatar
    0
    ndeol created

    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.

  • User Avatar
    0
    mahmut.gundogdu created

    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-code

    Module 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 run ng build abp-ng.theme.shared the 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.

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