Open Closed

Update of abp-lookup-input for LeptonX design #3895


User avatar
0
Pinebits created
  • ABP Framework version: v6

  • UI type: Angular

  • DB provider: EF Core

  • Tiered (MVC) or Identity Server Separated (Angular): MVC

I have upgraded to v6 and LeptonX Pro theme, but the abp-lookup-input components are not following the LeptonX Pro design theme. When is that changed or can I update it my self?


3 Answer(s)
  • User Avatar
    0
    muhammedaltug created

    Hello,

    Can you send screenshots?

    I checked in version ABP 6.0.0 version and Lepton 1.0.0 version

    Screen Shot 2022-10-21 at 15.49.21.png
    Screen Shot 2022-10-21 at 15.49.34.png

  • User Avatar
    0
    Pinebits created

    Yes - currently it looks like this:

    pic1.png

    And it should look like this:

    pic2.png

    (I have hacked the code directly in the browser so it does not work properly)

  • User Avatar
    0
    muhammedaltug created

    Hello,

    I opened an internal issue about this bug. Thanks for reporting.

    For now, you can change abp-lookup-component with yours.

    • Create folder named my-lookup and create a file inside this folder named my-lookup-input.module.ts

      import { CoreModule } from '@abp/ng.core';
      import { ThemeSharedModule } from '@abp/ng.theme.shared';
      import { NgModule } from '@angular/core';
      import { CommercialUiModule } from '@volo/abp.commercial.ng.ui';
      import { MyLookupInputComponent } from './my-lookup-input.component';
      
      @NgModule({
        declarations: [MyLookupInputComponent],
        imports: [ThemeSharedModule, CoreModule, CommercialUiModule],
        exports: [MyLookupInputComponent],
      })
      export class MyLookupInputModule {}
      
    • Create a file named my-lookup-input.component.ts

      import { Component } from '@angular/core';
      import { LookupInputComponent } from '@volo/abp.commercial.ng.ui';
      
      @Component({
        selector: 'my-lookup-input',
        templateUrl: './my-lookup-input.component.html',
      })
      export class MyLookupInputComponent extends LookupInputComponent {}
      
    • Create a file named my-lookup-input.component.html

      <div class="input-group">
        <input
          [id]="cid"
          type="text"
          class="form-control"
          disabled
          [ngModel]="selectedName"
          [class.input-validation-error]="isInvalid"
        />
        <button
          *ngIf="pickButton.show"
          [disabled]="pickButton.disabled"
          class="btn btn-info"
          type="button"
          (click)="onClickPick()"
        >
          {{ { key: '::Pick', defaultValue: 'Pick' } | abpLocalization }}
        </button>
        <button
          *ngIf="clearButton.show"
          [disabled]="clearButton.disabled"
          class="btn btn-danger"
          type="button"
          (click)="onClickClear()"
        >
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <abp-modal [(visible)]="isModalVisible">
        <ng-template #abpHeader>
          <h3>{{ { key: '::Pick', defaultValue: 'Pick' } | abpLocalization }}</h3>
        </ng-template>
      
        <ng-template #abpBody>
          <abp-lookup-table
            [getFn]="getFn"
            [lookupNameProp]="lookupNameProp"
            (pick)="pick($event)"
          ></abp-lookup-table>
        </ng-template>
      
        <ng-template #abpFooter>
          <button type="button" class="btn btn-secondary" abpClose>
            {{ 'AbpUi::Cancel' | abpLocalization }}
          </button>
        </ng-template>
      </abp-modal>
      
      
    • Import MyLookupInputModule to your module's imports array

    • Change abp-lookup-input to my-lookup-input

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
Do you need assistance from an ABP expert?
Schedule a Meeting
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v9.2.0-preview. Updated on March 19, 2025, 05:30