Activities of "sumeyye.kurtulus"

Thank you for the detailed explanation of the issue. I was not able to reproduce the problem on my end.

Could you please confirm which Suite version you used for the generation? You can find the version details in the documentation: https://abp.io/docs/latest/studio/working-with-suite

Additionally, it would be very helpful if you could share the dependency information from your package.json file.

Thank you in advance for your cooperation.

Hello,

Thank you for reporting this problem. We will be fixing it on our side in the next patch release, and I will also process a refund for this ticket. Until we release a fix, you can add these resolutions to your package.json file. After you re-install the dependencies, the problem should be solved.

  "resolutions": {
    "@ng-bootstrap/ng-bootstrap": "~19.0.0",
    "@volo/abp.commercial.ng.ui": "~10.0.3",
    "@volo/abp.ng.account": "~10.0.3"
  },
    
  "dependencies": { ... }
  "devDependencies": { ... }

You can let us know if you need further assistance. Thank you for your cooperation.

Hello,

The recommended way to customize the related toolbar is to follow the approach described here: https://abp.io/support/questions/5889/Use-user-first-name-and-last-name-on-the-menu-profile--instead-of-user-name-in-ABPUSer-table

First, create a custom toolbar component like the example below:

import { Component, ViewEncapsulation } from '@angular/core';
import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
import { LpxAvatarModule } from '@volo/ngx-lepton-x.core';
import { ToolbarComponent, LpxToolbarModule } from '@volosoft/ngx-lepton-x/layouts';

@Component({
  selector: 'lpx-toolbar',
  template: `
    <div class="lpx-toolbar">
      @if (userProfileService.user$ | async; as user) {
        <ng-content></ng-content>
        <nav class="lpx-toolbar">
          <ul class="lpx-nav-menu">
            @if (authService.isUserExists$ | async) {
              <li #profileLink class="outer-menu-item lpx-user-menu" (click)="profileClick.emit()">
                <a class="lpx-menu-item-link">
                  <lpx-avatar [avatar]="user.avatar"></lpx-avatar>
                  <!--UPDATE HERE-->
                  <span class="lpx-menu-item-text">{{ user.fullName || user.userName }}</span>
                  <!--UPDATE HERE-->
                </a>
              </li>
            } @else {
              <li class="outer-menu-item lpx-user-menu text-center">
                <a class="lpx-menu-item-link" (click)="navigateToLogin()">
                  <i class="bi bi-box-arrow-right"></i>
                </a>
              </li>
            }
          </ul>

          <ng-container
            *ngTemplateOutlet="
              itemsTmp || defaultItemsTmp;
              context: { $implicit: toolbarService.items$ | async }
            "
          ></ng-container>
        </nav>
      }
      <ng-template #defaultItemsTmp let-items>
        <lpx-toolbar-items [items]="items"></lpx-toolbar-items>
      </ng-template>
    </div>
  `,
  imports: [AsyncPipe, NgTemplateOutlet, LpxAvatarModule, LpxToolbarModule],
  encapsulation: ViewEncapsulation.None,
})
export class MyToolbarComponent extends ToolbarComponent {}

Next, create a toolbar container component:

import { Component } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { observeOn } from 'rxjs/operators';
import { asyncScheduler } from 'rxjs';
import {
  LpxCoreModule,
  LpxNavbarModule,
  LpxAvatarModule,
  LpxClickOutsideModule,
} from '@volo/ngx-lepton-x.core';
import { LpxContextMenuModule } from '@volosoft/ngx-lepton-x';
import { ToolbarContainerComponent } from '@volosoft/ngx-lepton-x/layouts';
import { MyToolbarComponent } from '../my-toolbar/my-toolbar.component';

@Component({
  selector: 'app-toolbar-container',
  template: `
    <lpx-toolbar [profileRef]="profileRef$" (profileClick)="toggleCtxMenu()">
      @if (
        {
          user: userProfileService.user$ | async,
          profileRef: profileRefForMenu$ | async,
        };
        as data
      ) {
        @if (data.profileRef) {
          <lpx-context-menu
            #menu="lpx-context-menu"
            (lpxClickOutside)="menu.close()"
            [exceptedRefs]="[data.profileRef]"
          >
            <lpx-context-menu-header>
              <div class="lpx-user-ctx-header">
                <div class="lpx-user-ctx-img">
                  <lpx-avatar [avatar]="data.user?.avatar"></lpx-avatar>
                </div>
                <div class="lpx-user-ctx-info">
                  <span class="lpx-context-menu-user-name">{{
                    data.user?.fullName || data.user?.userName
                  }}</span>
                  @if (data.user?.tenant?.name; as tenantName) {
                    <span class="lpx-context-menu-user-tenant">{{ tenantName }}</span>
                  }
                  <span class="lpx-context-menu-user-email">{{ data.user?.email }}</span>
                </div>
              </div>
            </lpx-context-menu-header>

            @for (actions of data.user?.userActionGroups; track actions.id) {
              <lpx-context-menu-action-group>
                <lpx-navbar-routes [navbarItems]="actions" [routerItem]="false"></lpx-navbar-routes>
              </lpx-context-menu-action-group>
            }
          </lpx-context-menu>
        }
      }
    </lpx-toolbar>
  `,
  imports: [
    AsyncPipe,
    LpxAvatarModule,
    LpxClickOutsideModule,
    LpxContextMenuModule,
    LpxCoreModule,
    LpxNavbarModule,
    MyToolbarComponent,
  ],
})
export class MyToolbarContainerComponent extends ToolbarContainerComponent {
  /** Deferred so NG0100 is avoided when profileRef$ emits after the same CD cycle. */
  protected profileRefForMenu$ = this.profileRef$.pipe(observeOn(asyncScheduler));
}

Finally, replace the default toolbar component in your root app component:

import { eThemeLeptonXComponents } from '@volosoft/abp.ng.theme.lepton-x';
import { MyToolbarContainerComponent } from './my-toolbar-container/my-toolbar-container.component';

@Component({
  selector: 'app-root',
  template: `
    <abp-loader-bar />
    <abp-dynamic-layout />
    <abp-gdpr-cookie-consent />
  `,
  imports: [LoaderBarComponent, DynamicLayoutComponent, GdprCookieConsentComponent],
})
export class AppComponent {
  protected readonly replaceableService = inject(ReplaceableComponentsService);

  constructor() {
    this.replaceableService.add({
      key: eThemeLeptonXComponents.Toolbar,
      component: MyToolbarContainerComponent,
    });
  }
}

You mentioned that this approach seems complicated and might break if the LeptonX theme is updated.

There’s no need for concer since we do not frequently introduce breaking changes that would affect this structure, it should remain stable.

Thank you for your cooperation.

Hello,

If the Suite tooling does not directly include the packages you need, you can install them along with their source code using the following CLI commands:

abp add-package @volosoft/ngx-lepton-x --with-source-code
abp add-package @volo/abp.ng.lepton-x.core --with-source-code
abp add-package @volo/abp.commercial.ng.ui --with-source-code

Please let us know if you need any further assistance.

Hello,

You can obtain the source code using the Suite tool, as described in the documentation: https://abp.io/docs/latest/suite/source-code

You may also find the CLI tool helpful, as it provides related commands for retrieving the source code: https://abp.io/docs/latest/cli#get-source

You can let us know if you need further assistance.

Thank you for your cooperation.

Thank you for your response. We will investigate this issue further on our end. In the meantime, you can access the source code for the core package at the following link: https://github.com/abpframework/abp/tree/dev/npm/ng-packs/packages/core

Hello,

You can obtain the source code using the Suite tool, as described in the documentation: https://abp.io/docs/latest/suite/source-code You may also find the CLI tool helpful, as it provides related commands for retrieving the source code: https://abp.io/docs/latest/cli#get-source

If you could share the detailed steps to reproduce the issue, we would be happy to assist you further.

Thank you for your cooperation.

Hello again,

If you are unable to share a full example, could you please provide the following details from your application:

• Your angular.json file, so we can review the build and configuration settings.

• Your app.config.ts file (if you're using the standalone API). Alternatively, if your project uses the NgModule-based structure, please share your app.module.ts file instead.

Thank you for your cooperation.

ABP Suite does not support making these properties selectable through the UI, and this behavior cannot be centralized or managed via Git as you described.

Custom template changes are project-specific, and we are not able to implement custom modifications in your codebase.

At this time, manually modifying the generated templates is the only available approach.

Thank you for your understanding.

Thank you for your attention.

You can follow the latest releases using the links below:

• https://github.com/abpframework/abp/releases
• https://abp.io/docs/latest/release-info

Please feel free to reach out if you need any further assistance. Thank you for your cooperation.