コラボフローのクラウド申請フォームでIBM Cloud Object Storage データをLookup 参照する

クラウドワークフローのコラボフローで、 API Server 経由でIBM Cloud Object Storage データをLookup 参照する方法

コラボフロー(www.collabo-style.co.jp/ )は誰でも簡単に作れるクラウドベースのワークフローサービスです。コラボフローでは、申請フォームにJavaScriptを組み込むことで、外部のREST APIをコールして入力補完や連携を行うことができる機能を提供しています。この記事では、IBM Cloud Object Storage データをCData API Server 経由でコラボフローの申請書入力画面から参照できるようにします。このLookup 参照により、申請フォームの入力を便利にすることができます。

API Server の設定

次のステップに従い、セキュアな REST API サービスを立ち上げます。

デプロイ

API Server はサーバー上で稼働します。Windows 版は、製品に組み込まれているスタンドアロンのサーバーかIIS に配置して稼働させることができます。Java 版では、Java servlet コンテナにAPI Server のWAR ファイルを配置します。 デプロイの詳細は製品ヘルプを参照してください。API Server を Microsoft AzureAmazon EC2Heroku にデプロイする方法はKB に記事があります。

IBM Cloud Object Storage への接続

  • API Server の管理コンソールで[設定]→[接続]から新しい接続を追加します。
  • IBM Cloud Object Storage のアイコンがデフォルトのAPI Server の接続先にない場合には、API Server がJava 版の場合はJDBC Drivers、API Server がWindows 版の場合はADO.NET Data ProvidersからIBM Cloud Object Storage ドライバーをAPI Server と同じマシンにインストールして、API Server を再起動します。
  • IBM Cloud Object Storage への接続に必要な認証情報を入力します。接続のテストを行い、接続を確認して、設定を保存します。
  • Register a New Instance of Cloud Object Storage

    If you do not already have Cloud Object Storage in your IBM Cloud account, follow the procedure below to install an instance of SQL Query in your account:

    1. Log in to your IBM Cloud account.
    2. Navigate to the page, choose a name for your instance and click Create. You will be redirected to the instance of Cloud Object Storage you just created.

    Connecting using OAuth Authentication

    There are certain connection properties you need to set before you can connect. You can obtain these as follows:

    API Key

    To connect with IBM Cloud Object Storage, you need an API Key. You can obtain this as follows:

    1. Log in to your IBM Cloud account.
    2. Navigate to the Platform API Keys page.
    3. On the middle-right corner click "Create an IBM Cloud API Key" to create a new API Key.
    4. In the pop-up window, specify the API Key name and click "Create". Note the API Key as you can never access it again from the dashboard.

    Cloud Object Storage CRN

    If you have multiple accounts, you will need to specify the CloudObjectStorageCRN explicitly. To find the appropriate value, you can:

    • Query the Services view. This will list your IBM Cloud Object Storage instances along with the CRN for each.
    • Locate the CRN directly in IBM Cloud. To do so, navigate to your IBM Cloud Dashboard. In the Resource List, Under Storage, select your Cloud Object Storage resource to get its CRN.

    Connecting to Data

    You can now set the following to connect to data:

    • InitiateOAuth: Set this to GETANDREFRESH. You can use InitiateOAuth to avoid repeating the OAuth exchange and manually setting the OAuthAccessToken.
    • ApiKey: Set this to your API key which was noted during setup.
    • CloudObjectStorageCRN (Optional): Set this to the cloud object storage CRN you want to work with. While the connector attempts to retrieve this automatically, specifying this explicitly is recommended if you have more than Cloud Object Storage account.

    When you connect, the connector completes the OAuth process.

    1. Extracts the access token and authenticates requests.
    2. Saves OAuth values in OAuthSettingsLocation to be persisted across connections.
  • 接続を確立後、[設定]→[リソース]の画面でテーブル一覧からREST API として公開するエンティティを選択します。

API Server のユーザー設定

[設定]→[ユーザー]からAPI にアクセスできるユーザーの認証設定を行います。API Server はトークンでの認証を行うことができます。 IP アドレスでAPI へのアクセスを制限することも可能です。デフォルトではローカルマシンからのアクセスのみが許可されています。SSL の設定も可能です。

コラボフローで、IBM Cloud Object Storage データに連携する

コラボフローからAPI Server に連携するためのJavaScript の準備

コラボフロー上で使用するAPI Server との接続用JavaScriptを準備します。

(function () { 'use strict'; // Setting Propeties const AutocompleteSetting = { // Autocomplete target field for Collaboflow InputName: 'fid0', // Collaboflow item detils line number ListRowNumber : 15, // Autocomplete tartget field for API Server ApiListupFiledColumn : 'ibmcloudobjectstorage_column', // Key Column Name for API Server resource ApiListupKeyColumn : 'ibmcloudobjectstorage_keycolumn', // Mapping between Collaboflow field and API Server column Mappings: [ { PartsName: 'fid1', // Collabo flow field name APIName: 'ibmcloudobjectstorage_column1' // API Server column name }, { PartsName: 'fid2', APIName: 'ibmcloudobjectstorage_column2' }, { PartsName: 'fid3', APIName: 'ibmcloudobjectstorage_column3' }, { PartsName: 'fid4', APIName: 'ibmcloudobjectstorage_column4' } ] }; const CDataAPIServerSetting = { // API Server URL ApiServerUrl : 'http://XXXXXX', // API Server Resource Name ApiServerResourceName : 'ibmcloudobjectstorage_table', // API Server Key Headers : { Authorization: 'Basic YOUR_BASIC_AUTHENTICATION' }, // General Properties ParseType : 'json', get BaseUrl() { return CDataAPIServerSetting.ApiServerUrl + '/api.rsc/' + CDataAPIServerSetting.ApiServerResourceName } } let results = []; let records = []; // Set autocomplete processing for target input field collaboflow.events.on('request.input.show', function (data) { for (let index = 1; index < AutocompleteSetting.ListRowNumber; index++) { $('#' + AutocompleteSetting.InputName + '_' + index).autocomplete({ source: AutocompleteDelegete, autoFocus: true, delay: 500, minLength: 2 }); } }); // This function get details from API Server, Then set values at each input fields based on mappings object. collaboflow.events.on('request.input.' + AutocompleteSetting.InputName + '.change', function (eventData) { debugger; let tartgetParts = eventData.parts.tbl_1.value[eventData.row_index - 1]; let keyId = tartgetParts[AutocompleteSetting.InputName].value.split(':')[1\; let record = records.find(x => x[AutocompleteSetting.ApiListupKeyColumn] == keyId); if (!record) return; AutocompleteSetting.Mappings.forEach(x => tartgetParts[x.PartsName].value = ''); AutocompleteSetting.Mappings.forEach(x => tartgetParts[x.PartsName].value = record[x.APIName]); }); function AutocompleteDelegete(req, res) { let topParam = '&$top=10' let queryParam = '$filter=contains(' + AutocompleteSetting.ApiListupFiledColumn + ',\'' + encodeURIComponent(req.term) + '\')'; collaboflow.proxy.get( CDataAPIServerSetting.BaseUrl + '?' + queryParam + topParam, CDataAPIServerSetting.Headers, CDataAPIServerSetting.ParseType).then(function (response) { results = []; records = []; if (response.body.value.length == 0) { results.push('No Results') res(results); return; } records = response.body.value; records.forEach(x => results.push(x[AutocompleteSetting.ApiListupFiledColumn] + ':' + x[AutocompleteSetting.ApiListupKeyColumn])); res(results); }).catch(function (error) { alert(error); }); } })();
  • 「CDataAPIServerSetting」のそれぞれのプロパティには構成したSSH ServerのURLとAPI Serverの認証情報をそれぞれ設定してください。
  • 「AutocompleteSetting」はどのフィールドでオートコンプリートを動作させるか? といった設定と、APIのプロパティとのマッピングを行います。
  • 今回はCollaboflowのデフォルトテンプレートで提供されている「12a.見積書・注文書」で利用しますので、デフォルトでは商品名のフィールドを、ProductテーブルのNameと紐付けて、Autocompleteを行うように構成しています。値が決定されたら、KeyとなるProductIDを元に「型番、標準単価、仕入単価、御提供単価」をそれぞれAPIから取得した値で自動補完するようになっています。

コラボフロー側でJavaScriptを登録

JavaScriptを作成したら、後はコラボフローにアップするだけです。

  • コラボフローにログインし「アプリ設定」→「フォーム設定」に移動します。
  • フォーム一覧から使用するフォームを選択します。
  • フォーム編集画面に移動後、「カスタマイズ」タブをクリックし、ファイルをアップロードから作成したJSファイルをアップロードし、保存します。
  • これでAPI Server 経由でIBM Cloud Object Storage データを取得し、自動入力補完する機能がコラボフローの申請フォームに追加できました。

まとめと30日の無償評価版のご案内

このように IBM Cloud Object Storage 内のデータをコラボフローで利用することができるようになります。CData API Server は、30日の無償評価版があります。是非、お試しいただき、コラボフローからのデータ参照を体感ください。

 
 
ダウンロード