Open Closed

Custom Angular UI Sidebar #120


User avatar
0
ian@order2invoice.com created

We need to implement a sidebar which is different to the one provided by Leton that include dual menus. Can we replace the sidebar.? Futher to this can we do the same to the TopBar. For example, we want to place a glabal search in the top bar?


8 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    See https://docs.abp.io/en/abp/latest/Customizing-Application-Modules-Overriding-User-Interface for more information.

  • User Avatar
    0
    ian@order2invoice.com created

    Looks promising. I can't find the ApplicationLayoutComponent. I am assuming that if I could I would just be able to change that. Consequently so I don't have an example to know how to write this component and link it to the rest of the app, etc? Are you ableto provide an example or the source of the ApplicationLayoutComponent.

  • User Avatar
    0
    ian@order2invoice.com created

    FYI I am using Angular

  • User Avatar
    0
    Mehmet created

    Hi,

    See the component replacement document. The layout replacement has been documented.

    You can import eThemeLeptonComponents enum from @abp/ng.theme.lepton as shown below:

    import { ..., AddReplaceableComponent } from '@abp/ng.core'; // imported AddReplaceableComponent
    import { eThemeLeptonComponents } from '@abp/ng.theme.lepton'; // imported eThemeLeptonComponents enum for component keys
    import { Store } from '@ngxs/store'; // imported Store
    //...
    export class AppComponent {
      constructor(..., private store: Store) {} // injected Store
    
      ngOnInit() {
        // added below content
        this.store.dispatch(
          new AddReplaceableComponent({
            component: YourApplicationComponent,
            key: eThemeBasicComponents.ApplicationLayout,
          }),
        );
    
        //...
      }
    }
    
  • User Avatar
    0
    ian@order2invoice.com created

    Sorry Mehmet. Thank you for the above. However I don't think I have explained well enough. What I am looking for a simple exmaple of the Angular template I need to write. In asp. In ABP Zero the the sidebar and top bar componets were available and easy to customise. In Abp IO they are "hidden". Why is this the case? Do I need to buy a higher license?

    Anyway, are you able to provide simple example of the Angular template I need to write

  • User Avatar
    0
    alper created
    Support Team Director

    We are working on customization, so that you can replace these components easier (next version). You can uprade to Business plan, and access to the source code of the Angular and backend source-code. So you can easily change every part of it.

  • User Avatar
    0
    ian@order2invoice.com created

    The Busines Plan in way above my pay grade. What's the eta on the next version?

  • User Avatar
    0
    alper created
    Support Team Director

    tuesday 05-05-2020

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11