NgxStSapBp

Angular components for managing SAP Business Partners (BP) with full CRUD operations.

Table of Contents

• Overview
• Installation
• Components
• Models
• Services
• Examples

Overview

The ngx-st-sap-bp library provides a complete suite of components for managing SAP Business Partners including:

• Business Partner list with search and pagination
• Create new Business Partners
• Edit existing Business Partners
• View Business Partner details
• Manage addresses (ship-to and bill-to)
• Manage contact persons
• Support for both Customer and Vendor types

Installation

npm install ngx-st-sap-bp

Import the module in your application:

import { NgxStSapBpModule } from 'ngx-st-sap-bp';

@NgModule({
  imports: [
    NgxStSapBpModule
  ]
})
export class AppModule { }

Components

SapBpList

Displays a searchable, paginated list of Business Partners.

Selector

<ngx-st-sap-bp-list></ngx-st-sap-bp-list>

Inputs

onlyView

• Type: boolean
• Default: false
• Description: When true, hides action buttons (edit/delete).
• Example:

  [onlyView]="true"

userSettings (required)

• Type: SapBpUserSettings
• Description: User permissions and settings for BP operations.
• Example:

  [userSettings]="bpSettings"
    
  bpSettings: SapBpUserSettings = {
    canCreate: true,
    canEdit: true,
    canDelete: true,
    defaultCountry: 'US'
  };

Features

• Search by card code or name
• Pagination with configurable page size
• Shows active/inactive status
• Displays address information
• Edit and delete actions
• Persistent page size in localStorage

Example

<ngx-st-sap-bp-list
  [userSettings]="userSettings"
  [onlyView]="false">
</ngx-st-sap-bp-list>

SapBpCreate

Form component for creating new Business Partners.

Selector

<ngx-st-sap-bp-create></ngx-st-sap-bp-create>

Features

• Complete BP creation form
• Customer and Vendor type selection
• Address management
• Contact person management
• Validation
• Tax configuration

Example

<ngx-st-sap-bp-create
  (created)="onBpCreated($event)">
</ngx-st-sap-bp-create>

onBpCreated(bp: SapBpModel): void {
  this.router.navigate(['/bp', bp.cardCode]);
}

SapBpEdit

Form component for editing existing Business Partners.

Selector

<ngx-st-sap-bp-edit></ngx-st-sap-bp-edit>

Features

• Edit all BP fields
• Update addresses
• Update contact persons
• Activate/deactivate BP
• Validation

Example

<ngx-st-sap-bp-edit
  [cardCode]="selectedBpCode"
  (updated)="onBpUpdated($event)">
</ngx-st-sap-bp-edit>

SapBpDetails

Read-only view of Business Partner details.

Selector

<ngx-st-sap-bp-details></ngx-st-sap-bp-details>

Features

• Display all BP information
• Show addresses
• Show contact persons
• Export/print functionality

Example

<ngx-st-sap-bp-details
  [cardCode]="bpCode">
</ngx-st-sap-bp-details>

SapBpListAddress

List and manage Business Partner addresses.

Selector

<ngx-st-sap-bp-list-address></ngx-st-sap-bp-list-address>

Features

• Display ship-to addresses
• Display bill-to addresses
• Add new addresses
• Edit existing addresses
• Delete addresses
• Set default address

SapBpCreateAddress

Dialog component for creating new addresses.

Selector

Used as a dialog component via MatDialog.

Features

• Address type selection (ship-to/bill-to)
• Complete address form
• Country/state selection
• Address validation

SapBpDetailsAddress

View address details in read-only mode.

Selector

<ngx-st-sap-bp-details-address></ngx-st-sap-bp-details-address>

SapBpListContactPerson

List and manage contact persons for a Business Partner.

Selector

<ngx-st-sap-bp-list-contact-person></ngx-st-sap-bp-list-contact-person>

Features

• Display all contact persons
• Add new contacts
• Edit existing contacts
• Delete contacts
• Primary contact designation

SapBpCreateContactPerson

Dialog component for creating contact persons.

Features

• Name and title
• Email and phone
• Position
• Primary contact flag

SapBpDetailsContactPerson

View contact person details.

Models

SapBpModel

Main Business Partner model:

interface SapBpModel {
  cardCode: string;              // Unique identifier
  cardName: string;              // BP name
  cardType: 'C' | 'S';          // Customer or Supplier
  active: 'Y' | 'N';            // Active status
  cardForeignName: string;       // Foreign name
  groupCode: number;             // BP group
  currency: string;              // Default currency
  phone1: string;                // Primary phone
  phone2: string;                // Secondary phone
  fax: string;                   // Fax number
  emailAddress: string;          // Email
  website: string;               // Website URL
  remarks: string;               // Notes/remarks
  
  // Address lists
  billToAddresses: SapBpAddressModel[];
  shipToAddresses: SapBpAddressModel[];
  
  // Contact persons
  contactPersons: SapBpContactPersonModel[];
  
  // Tax & financial
  taxId: string;                 // Tax ID number
  taxType: BpTaxTypeEnum;        // Tax type
  paymentTerms: number;          // Payment terms code
  priceList: number;             // Price list ID
  
  // Sales
  salesEmployee: number;         // Sales person code
  territory: number;             // Territory code
  
  // Additional
  industry: number;              // Industry code
  sicCode: string;               // SIC classification
}

SapBpAddressModel

interface SapBpAddressModel {
  addressName: string;           // Address identifier
  street: string;                // Street address
  city: string;                  // City
  county: string;                // County
  country: string;               // Country code
  state: string;                 // State code
  zipCode: string;               // Postal code
  addressType: 'B' | 'S';       // Bill-to or Ship-to
  
  // Contact at address
  contactPerson: string;
  phone1: string;
  phone2: string;
  fax: string;
  email: string;
}

SapBpContactPersonModel

interface SapBpContactPersonModel {
  cardCode: string;              // BP code
  name: string;                  // Contact name
  position: string;              // Job title/position
  phone1: string;                // Primary phone
  phone2: string;                // Secondary phone
  mobilePhone: string;           // Mobile number
  fax: string;                   // Fax number
  email: string;                 // Email address
  remarks: string;               // Notes
  isPrimary: boolean;            // Primary contact flag
}

SapBpUserSettings

interface SapBpUserSettings {
  canCreate: boolean;            // Can create new BPs
  canEdit: boolean;              // Can edit BPs
  canDelete: boolean;            // Can delete BPs
  defaultCountry: string;        // Default country code
  defaultCurrency: string;       // Default currency
  defaultPaymentTerms: number;   // Default payment terms
  defaultPriceList: number;      // Default price list
}

Services

SapBpService

Main service for Business Partner operations.

Methods

getList(page: number, pageSize: number, code?: string, name?: string): Observable<SapBpListResponse>

Get paginated list of Business Partners.

getById(cardCode: string): Observable<SapBpModel>

Get single Business Partner by code.

create(bp: SapBpCreateModel): Observable<SapBpModel>

Create new Business Partner.

update(cardCode: string, bp: SapBpEditModel): Observable<SapBpModel>

Update existing Business Partner.

delete(cardCode: string): Observable<void>

Delete Business Partner.

getAddresses(cardCode: string): Observable<SapBpAddressModel[]>

Get all addresses for a BP.

createAddress(cardCode: string, address: SapBpAddressModel): Observable<void>

Add new address to BP.

getContactPersons(cardCode: string): Observable<SapBpContactPersonModel[]>

Get all contact persons for a BP.

createContactPerson(cardCode: string, contact: SapBpContactPersonModel): Observable<void>

Add new contact person to BP.

SapBpHelperService

Helper service for dropdown data.

Methods

getCountries(): Observable<SapBpAddrCountryModel[]>

Get list of countries.

getStates(countryCode: string): Observable<SapBpAddrStateModel[]>

Get states for a country.

getPaymentTerms(): Observable<SapBpPaymentTermsModel[]>

Get payment terms list.

getPriceLists(): Observable<SapBpPricelistModel[]>

Get price lists.

getSalesEmployees(): Observable<SapBpSalesEmployeeModel[]>

Get sales employees.

getTerritories(): Observable<SapBpTerritoryModel[]>

Get territories.

Examples

Basic Business Partner List

<mat-card>
  <mat-card-header>
    <mat-card-title>Business Partners</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <ngx-st-sap-bp-list
      [userSettings]="userSettings">
    </ngx-st-sap-bp-list>
  </mat-card-content>
</mat-card>

export class BpListComponent {
  userSettings: SapBpUserSettings = {
    canCreate: true,
    canEdit: true,
    canDelete: true,
    defaultCountry: 'US',
    defaultCurrency: 'USD',
    defaultPaymentTerms: 1,
    defaultPriceList: 1
  };
}

Create New Business Partner

<mat-dialog-content>
  <ngx-st-sap-bp-create
    (created)="onCreated($event)"
    (cancelled)="onCancelled()">
  </ngx-st-sap-bp-create>
</mat-dialog-content>

export class CreateBpDialogComponent {
  constructor(
    private dialogRef: MatDialogRef<CreateBpDialogComponent>,
    private snackBar: MatSnackBar
  ) {}

  onCreated(bp: SapBpModel): void {
    this.snackBar.open(`Business Partner ${bp.cardCode} created successfully`, 'Close');
    this.dialogRef.close(bp);
  }

  onCancelled(): void {
    this.dialogRef.close();
  }
}

Edit Business Partner

<div class="edit-bp-container">
  <h2>Edit Business Partner: {{ cardCode }}</h2>
  
  <ngx-st-sap-bp-edit
    [cardCode]="cardCode"
    (updated)="onUpdated($event)"
    (cancelled)="goBack()">
  </ngx-st-sap-bp-edit>
</div>

export class EditBpComponent implements OnInit {
  cardCode: string;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private snackBar: MatSnackBar
  ) {}

  ngOnInit() {
    this.cardCode = this.route.snapshot.params['code'];
  }

  onUpdated(bp: SapBpModel): void {
    this.snackBar.open('Business Partner updated successfully', 'Close');
    this.router.navigate(['/bp', bp.cardCode]);
  }

  goBack(): void {
    this.router.navigate(['/bp']);
  }
}

Business Partner Details with Tabs

<mat-card>
  <mat-card-header>
    <mat-card-title>{{ bp?.cardName }}</mat-card-title>
    <mat-card-subtitle>Code: {{ bp?.cardCode }}</mat-card-subtitle>
  </mat-card-header>
  
  <mat-card-content>
    <mat-tab-group>
      <mat-tab label="Details">
        <ngx-st-sap-bp-details
          [cardCode]="cardCode">
        </ngx-st-sap-bp-details>
      </mat-tab>
      
      <mat-tab label="Addresses">
        <ngx-st-sap-bp-list-address
          [cardCode]="cardCode">
        </ngx-st-sap-bp-list-address>
      </mat-tab>
      
      <mat-tab label="Contacts">
        <ngx-st-sap-bp-list-contact-person
          [cardCode]="cardCode">
        </ngx-st-sap-bp-list-contact-person>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
  
  <mat-card-actions>
    <button mat-button (click)="edit()">Edit</button>
    <button mat-button color="warn" (click)="delete()">Delete</button>
  </mat-card-actions>
</mat-card>

Read-Only View

<ngx-st-sap-bp-list
  [onlyView]="true"
  [userSettings]="viewOnlySettings">
</ngx-st-sap-bp-list>

viewOnlySettings: SapBpUserSettings = {
  canCreate: false,
  canEdit: false,
  canDelete: false,
  defaultCountry: 'US'
};

Build

Run ng build ngx-st-sap-bp to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build ngx-st-sap-bp, go to the dist folder cd dist/ngx-st-sap-bp and run npm publish.