NgxStSfAccountMap

Angular component for mapping Salesforce accounts to SAP Business Partners with candidate search and linking functionality.

Table of Contents

• Overview
• Installation
• Component
• State Management
• Examples

Overview

The ngx-st-sf-account-map library provides a comprehensive solution for mapping Salesforce accounts to SAP Business Partners. Features include:

• Display Salesforce account details
• Search for SAP BP candidates
• Link SF account to existing SAP BP
• Create new SAP BP from SF account
• Link to specific BP addresses
• Skip linking (mark as non-mappable)
• Unlink existing mappings
• Update SF account data from SAP

Installation

npm install ngx-st-sf-account-map

Import the module in your application:

import { NgxStSfAccountMapModule } from 'ngx-st-sf-account-map';
import { StoreModule } from '@ngrx/store';
import { sfAccountMapReducer } from 'ngx-st-sf-account-map';

@NgModule({
  imports: [
    NgxStSfAccountMapModule,
    StoreModule.forFeature('sfAccountMap', sfAccountMapReducer)
  ]
})
export class AppModule { }

Component

AccountMap

Main component for the SF to SAP BP mapping interface.

Selector

<ngx-st-sf-account-map></ngx-st-sf-account-map>

Inputs

userAuths (required)

• Type: SfUserAuthEnum
• Description: User authorization level determining available actions.
• Values:
  • SfUserAuthEnum.ReadOnly - Can only view
  • SfUserAuthEnum.Standard - Can link to existing BPs
  • SfUserAuthEnum.Admin - Can create new BPs and unlink
• Example:

  [userAuths]="userAuthLevel"

sfId

• Type: string | null
• Description: Salesforce account ID to display and map. If null, shows dialog to enter ID.
• Example:

  [sfId]="accountId"

Outputs

enterNewIdEmitter

• Type: EventEmitter<string | null>
• Description: Emitted when user enters or changes the SF account ID.
• Example:

  (enterNewIdEmitter)="onIdChanged($event)"

Features

1. SF Account Details Display

   • Account name
   • Account number
   • Billing address
   • Shipping address
   • Company information

2. Mapping Status

   • Shows if account is already linked
   • Displays linked BP details
   • Shows if account is skipped

3. BP Candidate Search

   • Search by name or ID
   • View candidate details
   • Compare candidate data with SF account

4. Linking Actions

   • Link to selected BP
   • Link to specific address
   • Create new BP from SF data
   • Create new address for existing BP

5. Management Actions

   • Skip linking
   • Remove skip
   • Unlink address
   • Update SF account from SAP

State Management

The component uses NgRx for state management:

Actions

• SetGlobalLoader(loading: boolean) - Show/hide loading spinner

Selectors

• getGlobalLoader - Get loading state

Usage

import { Store } from '@ngrx/store';
import { SetGlobalLoader } from 'ngx-st-sf-account-map';

constructor(private store: Store) {}

showLoader() {
  this.store.dispatch(new SetGlobalLoader(true));
}

Models

SfAccountModel

interface SfAccountModel {
  id: string;                    // SF Account ID
  name: string;                  // Account name
  accountNumber: string;         // Account number
  companyId: string;             // Company ID
  billingStreet: string;         // Billing address
  billingCity: string;
  billingState: string;
  billingPostalCode: string;
  billingCountry: string;
  shippingStreet: string;        // Shipping address
  shippingCity: string;
  shippingState: string;
  shippingPostalCode: string;
  shippingCountry: string;
  phone: string;                 // Phone number
  website: string;               // Website
}

SapBpModel

interface SapBpModel {
  cardCode: string;              // BP code
  cardName: string;              // BP name
  shipToAddressList: SapShipAddressCandidateModel[];
}

SapBpCandidateModel

interface SapBpCandidateModel {
  isLinked: boolean;             // Is SF account already linked
  isSkipped: boolean;            // Is linking skipped
  bpLinked: SapBpModel | null;   // Linked BP if any
  sapBpAddressId: string;        // Linked address ID
  candidates: SapBpModel[];      // Search results
}

LinkBpRequestModel

interface LinkBpRequestModel {
  linkType: LinkTypeEnum;        // Type of linking action
  sfId: string;                  // SF Account ID
  sfCompanyId: string;           // SF Company ID
  sapBpId: string;               // SAP BP code
  sapBpAddressId: string;        // SAP address ID
  sapBpAddressName: string;      // Address name
  sapCardCode: string;           // Card code
  sapBpDocEntry: number | null;  // Doc entry
  newSapBp: any | null;          // New BP data
  newSapBpShippingAddress: any | null;  // New shipping address
  newSapBpBillingAddress: any | null;   // New billing address
}

LinkTypeEnum

enum LinkTypeEnum {
  Link = 'Link',                 // Link to existing BP
  LinkToNewAddress = 'LinkToNewAddress',  // Link to new address
  Create = 'Create',             // Create new BP
  Skip = 'Skip',                 // Skip linking
  Remove = 'Remove'              // Remove link/skip
}

SfUserAuthEnum

enum SfUserAuthEnum {
  ReadOnly = 'ReadOnly',         // View only
  Standard = 'Standard',         // Link to existing
  Admin = 'Admin'                // Full permissions
}

Examples

Basic Usage with SF Account ID

<ngx-st-sf-account-map
  [sfId]="salesforceAccountId"
  [userAuths]="authLevel"
  (enterNewIdEmitter)="onAccountIdChange($event)">
</ngx-st-sf-account-map>

export class MappingComponent {
  salesforceAccountId = '001XXXXXXXXXXXXXXX';
  authLevel = SfUserAuthEnum.Admin;

  onAccountIdChange(newId: string | null) {
    if (newId) {
      this.salesforceAccountId = newId;
    }
  }
}

Admin User with Full Permissions

<div class="mapping-page">
  <mat-toolbar color="primary">
    <span>SF Account Mapping</span>
  </mat-toolbar>

  <ngx-st-sf-account-map
    [sfId]="accountId"
    [userAuths]="SfUserAuthEnum.Admin">
  </ngx-st-sf-account-map>
</div>

export class AdminMappingComponent {
  accountId: string;
  SfUserAuthEnum = SfUserAuthEnum;

  constructor(private route: ActivatedRoute) {
    this.accountId = this.route.snapshot.params['id'];
  }
}

Read-Only View

<ngx-st-sf-account-map
  [sfId]="accountId"
  [userAuths]="SfUserAuthEnum.ReadOnly">
</ngx-st-sf-account-map>

export class ViewMappingComponent {
  accountId = '001XXXXXXXXXXXXXXX';
  SfUserAuthEnum = SfUserAuthEnum;
}

Standard User (Link Only)

export class StandardUserMappingComponent {
  // Standard users can:
  // - Search for BPs
  // - Link to existing BPs
  // - View linked BPs
  // Cannot:
  // - Create new BPs
  // - Unlink BPs
  // - Skip linking
  
  authLevel = SfUserAuthEnum.Standard;
}

Without Initial Account ID

<!-- Shows dialog to enter SF Account ID -->
<ngx-st-sf-account-map
  [sfId]="null"
  [userAuths]="authLevel"
  (enterNewIdEmitter)="onAccountSelected($event)">
</ngx-st-sf-account-map>

export class SelectAccountComponent {
  authLevel = SfUserAuthEnum.Admin;
  
  onAccountSelected(accountId: string | null) {
    if (accountId) {
      console.log('Selected account:', accountId);
      // Could navigate to route with ID
      this.router.navigate(['/mapping', accountId]);
    }
  }
}

Complete Mapping Workflow Page

export class MappingWorkflowComponent implements OnInit {
  currentAccountId: string | null = null;
  unmappedAccounts: string[] = [];
  currentIndex = 0;
  authLevel = SfUserAuthEnum.Admin;
  
  constructor(
    private accountService: SfAccountService,
    private router: Router
  ) {}
  
  ngOnInit() {
    this.loadUnmappedAccounts();
  }
  
  loadUnmappedAccounts() {
    this.accountService.getUnmappedAccounts().subscribe(accounts => {
      this.unmappedAccounts = accounts.map(a => a.id);
      if (this.unmappedAccounts.length > 0) {
        this.currentAccountId = this.unmappedAccounts[0];
      }
    });
  }
  
  onMappingComplete(accountId: string | null) {
    // Move to next account
    this.currentIndex++;
    if (this.currentIndex < this.unmappedAccounts.length) {
      this.currentAccountId = this.unmappedAccounts[this.currentIndex];
    } else {
      // All accounts processed
      this.router.navigate(['/mapping/complete']);
    }
  }
}

<div class="mapping-workflow">
  <mat-card>
    <mat-card-header>
      <mat-card-title>Account Mapping Workflow</mat-card-title>
      <mat-card-subtitle>
        Account {{ currentIndex + 1 }} of {{ unmappedAccounts.length }}
      </mat-card-subtitle>
    </mat-card-header>
    
    <mat-card-content>
      <mat-progress-bar 
        mode="determinate" 
        [value]="(currentIndex / unmappedAccounts.length) * 100">
      </mat-progress-bar>
      
      <ngx-st-sf-account-map
        *ngIf="currentAccountId"
        [sfId]="currentAccountId"
        [userAuths]="authLevel"
        (enterNewIdEmitter)="onMappingComplete($event)">
      </ngx-st-sf-account-map>
    </mat-card-content>
    
    <mat-card-actions>
      <button mat-button (click)="skipToNext()" [disabled]="currentIndex >= unmappedAccounts.length - 1">
        Skip & Next
      </button>
    </mat-card-actions>
  </mat-card>
</div>

With Custom Error Handling

export class MappingWithErrorHandlingComponent {
  accountId: string;
  authLevel = SfUserAuthEnum.Admin;
  errorMessage: string | null = null;
  
  constructor(private accountMapService: AccountMapService) {}
  
  handleError(error: any) {
    if (error.status === 404) {
      this.errorMessage = 'Salesforce account not found';
    } else if (error.status === 403) {
      this.errorMessage = 'You do not have permission to map this account';
    } else {
      this.errorMessage = 'An error occurred while mapping the account';
    }
  }
}

User Authorization Levels

ReadOnly

• View SF account details
• View linked BP details
• View candidates
• Cannot perform any linking actions

Standard

• All ReadOnly permissions
• Search for BP candidates
• Link to existing BP
• Link to existing BP address
• Cannot create new BP
• Cannot unlink
• Cannot skip

Admin

• All Standard permissions
• Create new BP from SF account
• Create new address for BP
• Skip linking
• Remove skip
• Unlink BP
• Update SF from SAP
• Delete mappings

Features

Smart Candidate Search

• Searches SAP BPs by name similarity
• Shows matching score
• Displays key BP information
• Compare with SF account data

Flexible Linking

• Link to existing BP
• Link to specific address
• Create new BP with SF data
• Create new address on existing BP

Status Management

• Track linked status
• Skip unmappable accounts
• Undo skip/unlink
• View linking history

Data Synchronization

• Update SF account from SAP data
• Maintain data consistency
• Audit trail

Build

Run ng build ngx-st-sf-account-map to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

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