Angular対応のIgnite UI for Angularを使ってSAP のデータをグリッドに表示



Angularはデータバインディング、ルーティング、サービスなど業務用のモダンWebアプリケーション構築に適しているWebアプリケーションフレームワークです。

この記事ではCData Software Japanが提供するAPI Serverと連携し、取得したデータをAngular対応のIgnite UI for Angularデータグリッドに表示する方法をご紹介します。

はじめに

---

API Server の設定

以下のリンクからAPI Server の無償トライアルをスタートしたら、セキュアなSAP OData サービスを作成していきましょう。

SAP への接続

Angular からSAP のデータを操作するには、まずSAP への接続を作成・設定します。

1. API Server にログインして、「Connections」をクリック、さらに「接続を追加」をクリックします。
2. 「接続を追加」をクリックして、データソースがAPI Server に事前にインストールされている場合は、一覧から「SAP」を選択します。
3. 事前にインストールされていない場合は、コネクタを追加していきます。コネクタ追加の手順は以下の記事にまとめてありますので、ご確認ください。
   CData コネクタの追加方法はこちら >>
4. それでは、SAP への接続設定を行っていきましょう！

5. SAP への接続はlibrfc32.dll、librfc32u.dll、NetWeaver、Web Services (SOAP) のどれかで行います。 ConnectionType 接続プロパティをCLASSIC (librfc32.dll)、CLASSIC_UNICODE (librfc32u.dll)、NETWEAVER、SOAP に設定します。

   SOAP を使う場合、Client、RFCUrl、SystemNumber、User、Password のプロパティを設定します。

   それ以外の方法の場合、Host、User、Password、Client、SystemNumber を指定します。

   Note: librfc32.dll やその他のSAP 接続には対応しておりません。SAP インストールから対応する接続モジュールをマシンにインストールしておいてください。

   詳細情報はobtaining the connection properties を参照してください。

6. 接続情報の入力が完了したら、「保存およびテスト」をクリックします。

Java 版では、SAP system にJCo JAR ファイルで接続します。Jco JAR ファイルの使い方は、ヘルプドキュメントの「はじめに」を参照してください。

Windows 版では、SAP への接続はlibrfc32.dll、librfc32u.dll、NetWeaver、Web Services (SOAP) のどれかで行います。 ConnectionType 接続プロパティをCLASSIC (librfc32.dll)、CLASSIC_UNICODE (librfc32u.dll)、NETWEAVER、SOAP に設定します。

Note: librfc32.dll やその他のSAP 接続には対応しておりません。SAP インストールから対応する接続モジュールをマシンにインストールしておいてください。

すべてのSync はSAP にSOAP Web Service 経由での接続をサポートしています。SOAP アクセスには、Client、RFCUrl、User、Password の接続プロパティを入力します。ConnectionType はSOAP に設定します。

詳細情報はobtaining the connection properties を参照してください。

API Server のユーザー設定

次に、API Server 経由でSAP にアクセスするユーザーを作成します。「Users」ページでユーザーを追加・設定できます。やってみましょう。

1. 「Users」ページで ユーザーを追加をクリックすると、「ユーザーを追加」ポップアップが開きます。
2. 次に、「ロール」、「ユーザー名」、「権限」プロパティを設定し、「ユーザーを追加」をクリックします。
3. その後、ユーザーの認証トークンが生成されます。各ユーザーの認証トークンとその他の情報は「Users」ページで確認できます。

SAP 用のAPI エンドポイントの作成

ユーザーを作成したら、SAP のデータ用のAPI エンドポイントを作成していきます。

1. まず、「API」ページに移動し、 「 テーブルを追加」をクリックします。
2. アクセスしたい接続を選択し、次へをクリックします。
3. 接続を選択した状態で、各テーブルを選択して確認をクリックすることでエンドポイントを作成します。

OData のエンドポイントを取得

以上でSAP への接続を設定してユーザーを作成し、API Server でSAP データのAPI を追加しました。これで、OData 形式のSAP データをREST API で利用できます。API Server の「API」ページから、API のエンドポイントを表示およびコピーできます。

クロスオリジンリソースシェアリング （CORS）

複数の異なるドメインへのアクセス・接続を行う場合、クロスサイトスクリプティングの制限に抵触する可能性があります。その場合は、「設定」→「サーバー」タブ内の「クロスオリジンリソースシェアリング （CORS）」の設定を行います。

Ignite UI for Angularを組み込んだAngularプロジェクトを準備

IgxGridを利用するためには、Ignite UI for Angularパッケージの組み込みやモジュールの参照が必要になります。下記に必要パッケージを組み込んだ状態のサンプルプロジェクトが公開されています。

GitHub - neri78/IgxGridBasicDemo

リポジトリをクローンしたのち、下記コマンドで現時点の実行結果を確認できます。

npm start

左側のナビゲーションからigxGrid1を選択するとローカルデータがバインドされたIgxGridが表示されます。

APIサーバーからデータを取得するサービスを作成

AngularではAPIサーバーのような外部リソースからデータを取得する場合、サービスを作成しViewとは直接関係のないデータアクセス部分を分離させることが一般的です。 ng generateコマンドを利用し、ApiServerServiceを作成します。

ng generate service service/ApiServer

serviceフォルダーとapi-server.service.spec.ts, api-server.sergice.tsファイルがそれぞれ作成されます。

レスポンスおよび SAP のデータのインターフェースを宣言

APIサーバーから SAP の情報がvalueに保存されたデータが返されるため、レスポンスおよび、 SAP のデータのインターフェースを作成された ApiServerServiceクラスのスコープの外側に宣言します。

api-server.service.ts

    // response
    interface CustomersResponse {
      value: Customer[];
    }

    // SAP Data Excample
    export interface Customer {
      rowguid: string; // "3f5ae95e-b87d-4aed-95b4-c3797afcb74f"
      LastName: string; // "Gee"
      PasswordHash: string; // "L/Rlwxzp4w7RWmEgXX+/A7cXaePEPcp+KwQhl2fJL7w="
      Suffix: string; // null
      Title: string; // "Mr."
      EmailAddress: string; // "[email protected]"
      Phone: string; // "245-555-0173"
      CustomerID: string; // 1
      PasswordSalt: string; // "1KjXYs4="
      SalesPerson: string; // "adventure-works\pamela0"
      GUID: string; // "3F5AE95EB87D4AED95B4C3797AFCB74F"
      CompanyName: string; // "A Bike Store"
      FirstName: string; // "Orlando"
      NameStyle: boolean;	// false
      MiddleName: string; // "N."
      ModifiedDate: Date; // "2005-08-01T00:00:00.0000+00:00"
    }

必要なモジュールをインポート

api-server.service.tsファイルの先頭に戻り、通信、データ処理にに必要なモジュールをそれぞれインポートします。

api-server.service.ts

    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { catchError, map} from 'rxjs/operators';

APIサーバーへの接続に必要なAuthToken、URL、リクエストヘッダを宣言

次に最初に設定したAPIサーバーに接続するためのAuthToken、URL、そして認証に必要なリクエストヘッダをApiServerServiceのプライベート変数として宣言します。

api-server.service.ts

    // Auth Token
    private authToken = '設定したAuthToken';
    // APIサーバーRestAPIのURL、今回は SAP のデータを返すRest APIのURLに固定
    private baseUrl = ' SAP のデータのRest API URL';
    // リクエストヘッダ
    private headers = new HttpHeaders({
      'x-cdata-authtoken': this.authToken
    });

コストラクタで依存関係の注入を利用し、HttpClientのインスタンスを取得

コンストラクタの引数として、HttpClientを受け取るように変更します。クラスインスタンスはAngularフレームワークにより作成されます。

api-server.service.ts

    constructor(private httpClient: HttpClient) { }

リクエストの設定とレスポンスの処理

SAP のデータを取得するgetCustomers()メソッドを宣言し、HttpClient、pipeを利用してリクエストの設定と、レスポンスの処理、エラーハンドリングを実装します。

api-server.service.ts

    public getCustomers() {
      // HttpClientを利用し、APIサーバーにアクセス
      return this.httpClient.get(
        `${this.baseUrl}/`, {headers: this.headers})
      .pipe(
        // エラー時の処理
        catchError(this.handleError('getData:Customer', [])),
        // 返されたデータからCustomerの配列を取得
        map(response =>  (response as CustomersResponse).value)
      );
    }

    // Error時の処理。デモ用に簡略化
    private handleError(operation = 'operation', result?: T) {
      return (error: any): string => {
        console.error('An error occurred', error);
        return error;
      };
    }

これでサービスの準備が整いました。

グリッド画面でデータを取得

次にグリッドを表示している画面側のコードを実装します。

必要なモジュールをインポート

igxgrid1\igxgrid1.component.tsでは先ほど実装したApiServerServiceと、サービス呼び出しの結果返されるObservableを利用するため、必要なモジュールをインポートします。

igxgrid1\igxgrid1.component.ts

    import { ApiServerService, Customer } from '../service/api-server.service';
    import { Subscription } from 'rxjs';

購読を管理するためのSubScription変数を宣言

このApiServerServiceはデータを非同期で取得します。そのため、呼び出しが完了した後にロジックを実行するための購読処理を後ほど実装します。この購読は最終的には購読解除を行う必要があるtまえ、プライベート変数を宣言します。

igxgrid1\igxgrid1.component.ts

    subscription: Subscription;

コストラクタで依存関係の注入を利用し、ApiServerServiceのインスタンスを取得

igxgrid1\igxgrid1.component.ts

    constructor(private apiServerService: ApiServerService) { }

ngOnInitでデータを取得しグリッドにデータを表示

igxgrid1\igxgrid1.component.tsには、ngOnInit()メソッドが実装されており、データグリッド画面の初期化時に、あらかじめ用意されているサンプルデータを読み込むコードが実装されています。このlocalDataにコレクションを代入することでグリッドにデータが表示されます。このコードをコメントアウトします。

igxgrid1\igxgrid1.component.ts

    ngOnInit() {
      // コメントアウト
      // this.localData = employeesData;
    }

コメントアウトしたコードの代わりに、ApiServerServiceを利用してデータを取得し、localDataに割り当てるコードを実装します。

igxgrid1\igxgrid1.component.ts

    ngOnInit() {
      // APIServerを呼び出し、SAP のデータを取得
      this.subscription = this.apiServerService.getCustomers()
      .subscribe( (data: Customer[]) => {
        this.localData = data;
      });
    }

ngOnDestoryで購読を解除

このコンポーネントが破棄されるタイミングでメモリーリークを防ぐため、購読を解除します。

igxgrid1\igxgrid1.component.ts

    // unsubscribe
  ngOnDestroy() {
    if (this.subscription !== undefined) {
      this.subscription.unsubscribe();
    }
  }

サービス、モジュールの登録

最後に作成したサービスや必要なモジュールをアプリケーションに登録します。

モジュール参照のインポート

app.module.tsにApiServerServiceおよびHttpClientModuleをインポートします。

app.module.ts

    import { ApiServerService } from './service/api-server.service';
    import { HttpClientModule } from '@angular/common/http';

importsセクションでHttpClientModuleをインポート

@NgModuleのimportsセクションにHttpClientModuleをインポートします。

app.module.ts

    imports: [
    ...

    ,HttpClientModule
  ],

providersセクションでApiServerServiceを宣言

@NgModuleのimportsセクションにHttpClientModuleをインポートします。

app.module.ts

    providers: [ApiServerService],

これで設定は完了です。再度 __npm start__ コマンドで実行してみましょう！

全てのコードはこちらのBranchでご覧いただけます（AuthToken、並びにURLは空白のため適宜設定してください）

GitHub - neri78/IgxGridApiServerDemo