1. Oracle Integration Generation 2でのプロセスの使用
  2. 開発者のタスク
  3. アプリケーションおよびサービスとの統合
  4. 他のアプリケーションへのプロセスUIコンポーネントの埋込み
機械翻訳について

他のアプリケーションへのプロセスUIコンポーネントの埋込み

jQueryウィジェットとして提供されるProcess UIコンポーネントを組み込むことによって、セルフサービス・アプリケーション、サービス、ポータルなどの外部アプリケーションにプロセス機能を統合します。 外部アプリケーションまたはサービスでは、組込み可能なプロセス・コンポーネントを使用して、適切なモバイル、タブレットまたはWebプラットフォーム上で表示します。

トピック:

組込みに使用可能なプロセスUIコンポーネント

プロセスUIコンポーネントを外部アプリケーションに埋め込んだ後、ユーザーはプロセス・ランタイムではなく主フォーカスのコンテキスト内でタスクを開始できます。 たとえば、ユーザーが安全インシデント・レポートを送信できるように、そのプロセスを開始するためのProcessフォームを構成できます。

safety-incident-report.pngの説明が続きます
図safety-incident-report.pngの説明
jQueryを使用して、選択した再利用可能なプロセスUIコンポーネントを任意のHTMLページに埋め込みます。 以下のカテゴリに関連するコンポーネントが提供されています。

  • タスク

  • アプリケーション: アプリケーションとその開始フォームのリストを表示するか、フォームと添付ファイルまたはドキュメントを開始します。 ドキュメントは、Oracle Content Managementが構成されている場合のみ表示され、アプリケーションでドキュメントが有効になっている場合にのみ表示されます。

  • 動的プロセス: 動的プロセスのさまざまなコンポーネントを表示します。

  • チャート

  • その他

組込み可能プロセスUIコンポーネントでは、使用側アプリケーションで使用できるように、いくつかのオプションおよびイベントが公開されます。 これらのオプションを使用してコンポーネントをカスタマイズし、パブリック・メソッドを使用して内部データにアクセスできます。

重要なユーザー・アクションが発生するたびに、コンポーネントによってイベントがトリガーされます。 たとえば、ユーザーがフォームを送信したときに、インスタンス・データに関連付けてイベントが発生します。 イベントをリスニングし、使用側アプリケーションでアクションを実行できます。 http://learn.jquery.com/events/introduction-to-custom-events/を参照してください。

プロセスUIコンポーネントの組込み前

プロセスUIコンポーネントを外部アプリケーションに組み込む前に、次の要件およびヒントを確認します。

  • コンポーネントを埋め込むには、JavaScript、HTML、jQueryおよびRequire JSに関する知識が必要となります。

  • Process UIコンポーネントのオープン・エンドポイントが提供され、クック・ブックは直接その上にホストされます。 オープン・エンドポイントでは、次のいくつかのオプションが提供されます。

    • コードをzipファイルとしてダウンロードして使用します。

    • アプリケーション内にリソースを含める必要なくJS/CSSリソースをリモートでロードするには、Oracle Integrationサーバーに直接ポインタを置きます

    • HTML Inline Frame Element <iframe>を使用してコンポーネント・ページを組み込みます。

  • 組み込み可能なプロセスUIコンポーネント・ファイルおよび依存関係のライブラリ全体を含むファイルのダウンロードが提供されます。 「プロセスUIコンポーネント・ファイルのダウンロード」を参照してください。

  • リリースごとに最新バージョンのコンポーネント・ファイルが提供されることがありますが、前のバージョンをダウンロードすることもできます。 前のバージョンに加えたカスタマイズは、再度、最新バージョンに加える必要があることに注意してください。

  • UIコンポーネント機能を確認し、試験的に使用するには、クックブックを使用します。 「プロセスUIコンポーネントの試験的使用」を参照してください。

  • 単一コンポーネントまたはUI全体のルック・アンド・フィールを変更するには、カスケーディング・スタイル・シート(CSS)を上書きします。 「プロセスUIコンポーネントの使用」を参照してください。

  • 埋め込み可能なコンポーネントとREST APIは、クロス・オリジン・リソース共有(CORS)をサポートしています。

プロセスUIコンポーネント・ファイルのダウンロード

プロセスUIコンポーネントを試すには、プロセス・ライブラリ、料理のサンプル・コード、依存関係ライブラリなど、埋め込み可能なコンポーネントのコードベース全体にアクセスする必要があります。 ライブラリには、JSおよびCSSファイルのデバッグ(完全)バージョンと縮小バージョンの両方が含まれています。 コンポーネント・ファイルをダウンロードしてホストできます。 または、HTML Inline Frame Element (<iframe>)を使用してコンポーネントを組み込むことができます。

コンポーネント・ファイルをダウンロードしてホストするには:
  1. Oracle Integrationサーバーのオープン・コンポーネント・エンドポイントには、次の形式でアクセスします:
    host:port/ic/pub/components
  2. 「Resources」をクリックします。
  3. 「Download」セクションにリストされているファイルをダウンロードします。

    リリース後、必要に応じてコンポーネント・ファイルをダウンロードして更新してください。 プロセス・ライブラリ・ファイルは、コンポーネント機能のバージョン番号を示します。 将来のリリースで、使用可能な最新の組込みプロセスUIコンポーネントのファイルが確実に使用されるようにするには、現在のバージョン番号と「Resources」ページにリストされるバージョン番号を比較し、必要に応じて最新バージョンをダウンロードします。

コンポーネントをホストするかわりに、<iframe>要素内で使用することもできます。 詳細は、「Resources」ページに移動し、「Server Access」セクションにスクロールして、「HTML」セクションを展開します。

プロセスUIコンポーネントの試験的使用

Cookbookを使用して、プロセスUIコンポーネントの機能を試し、サポートされているメソッド、イベント、およびオプションを表示します。 クックブックはデモを目的としてのみ提供されていることに注意してください。 UIコンポーネントを使用するために使用することはできません。

プロセスUIコンポーネントを試験的に使用するには:
  1. 次のエンドポイントにあるクックブックにアクセスします。
    host:port/ic/pub/components
    ホームページが開きます。 すべての組込み可能プロセスUIコンポーネントに適用される設定および情報が表示されます。
  2. ホームページで、「サーバー設定」フィールドに入力し、Oracle Integrationサーバーを識別します。

    • プロセスUIコンポーネントを試験的に使用する場合は、これらのフィールドを構成する必要があります。

    • 本番データを取得してテストする場合は、「testMode」オプションを選択します。 このオプションは、ランタイム・テスト・モードと同等です。

  3. 「適用」をクリックします。
  4. ホームページで、次の情報を展開してレビューします。

    • 「統合接続」セクションにあります。 Process Serverに接続し、Basic、JWT、またはOAuthアクセス・トークンを使用してユーザーを認証する方法について説明します。

    • 「Configuration」セクション。 外部アプリケーションのmain.jsファイルで組込み可能コンポーネントを使用する方法が示されます。

    この情報は、コンポーネントに接続して使用する準備が整ったときに必要になります。

  5. 「Cookbook」をクリックします。
  6. 左ペインのリンクを使用して、UIコンポーネント(「詳細」、「アプリケーションの起動」、「開始フォーム」、「添付ファイル」または「コメント」)を選択します。
  7. 「Documentation」セクションを展開し、選択したコンポーネントの構成に関する詳細をレビューします。 「Documentation」セクションには次の情報が表示されます。
    • Require: コンポーネントを使用するために必要なRequire JSモジュール名とその他の設定が表示されます。
    • Usage: コンポーネントの使用方法を示すサンプル・コードが表示されます。
    • Options: コンポーネントの動作を変更する方法が表に示されます。 一部のオプションはコンポーネントを使用するために必要となります。 「Component Setup」セクションを展開してオプションを試します。
    • Methods: コンポーネント内の様々なデータにアクセスするためのメソッドがリストされます。 たとえば、applistコンポーネントのgetStartformListメソッドを使用すると、使用可能なフォームのリストを取得できます。 この情報は、「Start Form」コンポーネントを独立して使用する場合に役立ちます。 「Data」セクションを展開し、イベントおよびメソッド・コールの結果を表示します。
    • Events: コンポーネントに対して実行されたときにイベントを起動するユーザー・アクションがリストされます。使用側アプリケーションでは、これらのイベントをリスニングして外部アプリケーションのロジックで使用できます。 「Data」セクションを展開し、イベントおよびメソッド・コールの結果を表示します。
  8. 「Demo Code」セクションを展開して、選択したコンポーネントのサンプルJSおよびHTMLコード、そしてコンポーネントのロード時に現在使用されているコンポーネント・オプションをレビューします。 これらのオプションは、「Component Setup」の値を変更すると変わります。
  9. 「Component Setup」セクションを展開し、オプションを選択または入力します。その後、「Apply」をクリックして、変更がコンポーネントにどのように影響するかを確認します。 たとえば、ボタンの名前を変更したり、ボタンを非表示にしてみます。
component-setup-oic.pngの説明が続きます
図component-setup-oic.pngの説明

プロセスUIコンポーネントの使用

コンポーネントを統合するときには、クックブックで提供される構成、ドキュメントおよびデモ・コードをガイドとして使用してください。

  1. ダウンロードしたライブラリのjs/libsおよびcss/libsを外部アプリケーション内で使用します。

    あるいは、requirejsファイルの'pcs'パスをリモートのOracle Integrationサーバーに直接向けることもできます。 たとえば:

    'pcs' : 'PCS_SERVER_URL/ic/pub/components/js/libs/pcs/v1.2/min'

    このコマンドは、アプリケーションにプロセス・コードを含める必要がなく、代わりにリモートから取得できることを意味します。

  2. アプリケーションのmain.jsファイルにプロセス接続($.pcsConnection)を作成し、サーバーURLと認証を識別するように構成します。 ホームページに移動し、詳細については「接続」セクションを展開してください。

    認証情報は、Basic、JWTまたはOAuthアクセス・トークンを格納できるauthInfoプロパティを通して提供されます。 アプリケーションのmain.jsファイルに基づいて有効なトークンが維持されます。

    Basic認証トークンを提供するには、次のようにします。

    var tok = username + ':' + password;

    $.pcsConnection.authInfo = 'Basic ' + btoa(tok);

    その他のアクセス・トークン(JWTまたはOAuth)を提供するには、次のようにします。

    $.pcsConnection.authInfo = 'Bearer {token string}'

  3. アプリケーションのmain.jsファイルでコンポーネントの使用を構成します。 詳細は、ホームページに移動して「Configuration」セクションを展開します。
  4. クックブックUIのコンポーネント・ページの説明に従って、選択したコンポーネントを構成します。 たとえば、「Require」、「Usage」、「Options」、「Methods」、「Events」の各フィールドを参照してください。
  5. オプションで、カスケーディング・スタイル・シート(CSS)ファイルを上書きして、コンポーネントまたはUI全体のルック・アンド・フィールを変更します。

    各UIコンポーネントはIDとクラスを持ちます。 たとえば、アプリケーション・リストのリンクを円形から四角形に変更するには、.pcs-applist-process-holder-smaller css classを上書きします。

    1. コンポーネントのcssを変更するには、コンポーネント・ページで「Demo Code」および「HTML」セクションを展開し、CSSファイルを特定します。 リストされたCSSファイルをコピー、変更および上書きできます。

    2. CSSセレクタを使用してHTML要素にアクセスし、UIコンポーネントのレンダリング後のルック・アンド・フィールを変更します。

プロセスUIコンポーネントの埋込みのベスト・プラクティス

プロセスUIを外部アプリケーションと統合するには、プロセス・コンポーネントを外部アプリケーションのHTMLまたはJSコードに直接埋め込むか、URL iFrameを使用します。

この項に記載されているヒントとベスト・プラクティスは、最初のアプローチに対応しています。iFramesを使用せずに、必要なコンポーネントを使用するアプリケーションのコードに追加することで、プロセスUIの検索を簡単に統合できるようにすることを意図しています。

  • 必要なすべての依存ライブラリおよびCSSファイルをクライアントのロケーションにダウンロードし、クライアント・インタフェースのロード中に予期しない中断を防止するためにローカル・パスを使用して参照します。 たとえば、次のようにして、oj-alta-min.cssを使用するHTMLsにローカルにダウンロードして参照します。

    <link rel="stylesheet" href="https://<pcsserverhost:port>/ic/pub/components/css/libs/oj/v2.0.0/alta/oj-alta-min.css" type="text/css"/>

  • 標準的な依存ライブラリに加えて、使用するHTMLの対応する埋込み可能コンポーネントのJS構成ファイルをロードします。 たとえば、フォームの開始ウィジェットをロードするには、次のコードが必要です:

    <script data-main="<local_host>/main/startform-main " src="<local_host>/js/libs/require/require.js"></script>

  • 埋込み可能コンポーネントによって起動されるコンポーネント・ロード・イベントを使用するようにクライアント・アプリケーションを構成します。 たとえば、埋込み可能コンポーネントは、さらにポップアップを開いてサイズ変更したり、自分自身を再描画したりできます。

  • iFramesを使用して、UI埋込み可能コンポーネント(スニペット)を使用しないでください。 再ソートにのみ使用します。

  • パフォーマンスを向上させるために、縮小されたJSおよびCSSファイルを使用します。 コンポーネントの縮小バージョンは、ダウンロードされたコードのminフォルダで使用できます。

  • Oracle Content Managementのサイトの一部としてProcessコンポーネントを使用する必要がある場合は、標準(OOTB)コンポーネントを使用して、統合の問題を回避します。 OOTBプロセスUIコンポーネントは、Oracle Content Managementにあります。

  • 新しいバージョンのUI埋込み可能コンポーネントを使用する前に、UIレンダリングでの不一致を回避するために、前のバージョンで実行されたカスタマイズを常にポートしてください。

  • プロセス・サーバーにアタッチしなくても、ビジネス要件の他のjQueryウィジェットと同様の方法で、コメント、添付などのスタンドアロン・ウィジェットを使用できます。 ウィジェットは、コメントや添付ファイルが追加または更新されるたびに、必要なすべてのデータとともにイベントを起動するため、使用側のアプリケーションはこれらのイベントに対して動作します。

  • オプションで、testModeパラメータをデフォルトのURLに追加して、アプリケーション、開始フォームおよびタスク詳細に対応するプロセス・テスト・データを取得します。 次の例では、テスト・プラットフォームにデプロイされたアプリケーションをフェッチします:

    IS_SERVER_UR/ic/pub/components/pages/applist.html?testMode=true

  • 次に、タスク・リストの埋込みおよびアプリケーションの開始用の作業サンプルを示します。

    • Task List:

      <html>
<head lang="en">
	<meta charset="UTF-8">
	<title>TaskList</title>
	<!-- This is the main css file for the default Alta theme -->
	<link rel="stylesheet" href="https:///<local_host>/ic/pub/components/css/libs/oj/v2.0.0/alta/oj-alta-min.css" type="text/css"/>
	<!-- This is where you add application-specific styling -->
	<link rel="stylesheet" href="https://<local_host>/ic/pub/components/css/libs/pcs/v1.3/alta/pcs-tasklist-min.css" type="text/css"/>
	<!-- RequireJS configuration file  -->
	<script data-main="https://<local_host>/main/tasklist-main" src="https://<local_host>/ic/pub/components/js/libs/require/require.js"></script>
<script>
requirejs.config({
baseUrl: "https://<local_host>/ic/pub/components/js",
paths:
{
'knockout': 'libs/knockout/knockout-3.4.0',
'jquery': 'libs/jquery/jquery-2.1.3.min',
'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.11.4.min',
'promise': 'libs/es6-promise/promise-1.0.0.min',
'hammerjs': 'libs/hammer/hammer-2.0.4.min',
'underscore' : 'libs/underscore/underscore-1.8.3.min',
'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0.min',
'ojs': 'libs/oj/v2.0.0/min',
'ojL10n': 'libs/oj/v2.0.0/ojL10n',
'ojtranslations': 'libs/oj/v2.0.0/resources',
'signals': 'libs/js-signals/signals.min',
'text': 'libs/require/text',
'pcsMsg' : 'libs/pcs/v1.3/resources',
'pcs' : 'libs/pcs/v1.3/min',
'rendererMsg': 'libs/pcs/v1.3/rendererMsg'
},
shim: {
'jquery': {
exports: ['jQuery', '$']
}
}
});
require(['jquery', 'pcs/pcs.tasklist' ],
function ($) {
//var tok = 'cloud.admin' + ':' + 'StacKed@7SUitE';
$.pcsConnection = {
serverURL: 'https://<local_host>',
authInfo: 'Basic c2VyZW5lLnRhbkBvcmFjbGUuY29tOk9uQ2U3c2F0MSE=',
};
//$.pcsConnection.authInfo = 'Basic ' + btoa(tok);
var tasklist = $('#tasklist');
$("#tasklist").tasklist({
"hideToolbar": false,
"hideFilter": false,
"hideSystemActions": false,
"hideCustomActions": false,
"hideSearch": false,
"hideSort": false,
"hideRefresh": false,
"hideFromUserName": false,
"hideAssignedDate": false,
"hideDueDate": false,
"hideCreatedDate": false,
"hideSummary": false,
"hideTaskDetails": false,
"pageSize": 10,
"hideSelectAll": true,
"selectedSortType": "assignedDate",
"selectedSortOrder": "ascending",
"taskDetailOptions": "{\"attachmentsOptions\": {\"showDocsInline\":true}}",
"systemActions": "SUSPEND,ESCALATE,RENEW,REASSIGN,INFO_REQUEST,WITHDRAW,ACQUIRE,PURGE,DELETE,RESUME,RELEASE",
"tasklistFilter": "{}"
});
// Defining the event listeners --
tasklist.on('tasklist:taskSelect', function(event, data){
});
tasklist.on('tasklist:taskCheck', function(event, data,instance){
});
}
);
</script>
</head>
<body style="overflow-y:scroll">
<div id="tasklist"></div>
</body>
</html>
    • Start Application:
      <html>
<head lang="en">
	<meta charset="UTF-8">
	<title>Start Application</title>
	<!-- This is the main css file for the default Alta theme -->
	<link rel="stylesheet" href="https://<local_host>/ic/pub/components/css/libs/oj/v2.0.0/alta/oj-alta-min.css" type="text/css"/>
	<!-- This is where you add application-specific styling -->
	<link rel="stylesheet" href="https://<local_host>/ic/pub/components/css/libs/pcs/v1.3/alta/pcs-applist-min.css" type="text/css"/>
	<!-- RequireJS configuration file  -->
	<script data-main="https://<local_host>/main/applist-main" src="https://<local_host>/ic/pub/components/js/libs/require/require.js"></script>
<script>
requirejs.config({
baseUrl: "https://<local_host>/ic/pub/components/js",
paths:
{
'knockout': 'libs/knockout/knockout-3.4.0',
'jquery': 'libs/jquery/jquery-2.1.3.min',
'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.11.4.min',
'promise': 'libs/es6-promise/promise-1.0.0.min',
'hammerjs': 'libs/hammer/hammer-2.0.4.min',
'underscore' : 'libs/underscore/underscore-1.8.3.min',
'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0.min',
'ojs': 'libs/oj/v2.0.0/min',
'ojL10n': 'libs/oj/v2.0.0/ojL10n',
'ojtranslations': 'libs/oj/v2.0.0/resources',
'signals': 'libs/js-signals/signals.min',
'text': 'libs/require/text',
'pcsMsg' : 'libs/pcs/v1.3/resources',
'pcs' : 'libs/pcs/v1.3/min',
'rendererMsg': 'libs/pcs/v1.3/rendererMsg'
},
shim: {
'jquery': {
exports: ['jQuery', '$']
}
}
});
require (['ojs/ojcore', 'ojs/ojmodule', 'pcs/pcs.applist'],
function (oj,$) {
oj.ModuleBinding.defaults.modelPath = './';
oj.ModuleBinding.defaults.viewPath = 'text!./';
}
);
require(['jquery', 'pcs/pcs.applist' ],
function ($) {
//var tok = 'cloud.admin' + ':' + 'StacKed@7SUitE';
$.pcsConnection = {
serverURL: 'https://<local_host>',
authInfo: 'Basic c2VyZW5lLnRhbkBvcmFjbGUuY29tOk9uQ2U3c2F0MSE=',
};
//$.pcsConnection.authInfo = 'Basic ' + btoa(tok);
var appList = $('#applist');
$("#applist").applist({
"hideStartform": false,
"startformDialog": false,
"hideSubmit": false,
"hideSave": false,
"hideDiscard": false,
"submitLabel": "Submit",
"hideAttachment": false,
"hideSearchBox": true,
"hideDefaultCheck": true,
"iconSize": "small",
"hideEmptyText": false,
"hideToolbar": false,
"hideRefresh": false,
"defaultVersion": false
});
// Defining the event listeners --
appList.on('applist:formSelected', function(event, data){
});
appList.on('applist:formSubmited', function(event, data,instance){
});
appList.on('applist:formSaved', function(event, data ,instance){
});
}
);
</script>
</head>
<body>
<div id="applist"></div>
</body>
</html>