Oracle Content and Experience VBCSデータ・レポート・コンポーネントのビルド

機械翻訳について

Oracle Content and Experience VBCSデータ・レポート・コンポーネントのビルド

VBCSのビジネス・オブジェクトによって公開されるREST APIを使用して、フォームを介して収集されたデータに関するレポートを提供するローカルOracle Content Managementコンポーネントを作成できます。

パブリック・フォーム・コンポーネントのデータを使用して、CSS棒チャートで1日当たりのリクエスト数を示します。「Oracle Content Management VBCSパブリック・フォーム・コンポーネントの構築」を参照してください。

Oracle Content Managementローカル・コンポーネントの構築

前提:

VBCSアプリケーション名はRequestFormです。
ビジネス・オブジェクト名は、requestformです。

変更assets/render.js

コンポーネント・テンプレートを次のように定義します。

<!-- ko if: initialized -->
<h1 style="text-align: center;">Number of requests per day</h1>
<div class="chartrow">
<div class="chartbody">
    <div class="chartbody">
        <table id="q-graph">
            <tbody data-bind="foreach: requests">
                <tr class="qtr" data-bind="css: barcss">
                    <td class="day bar" data-bind="style: {height: height}">
                        <p><span data-bind="text: value"></span></p>
                    </td>
                 </tr>
            </tbody>
        </table>

        <div id="ticks" data-bind="foreach: ticks">
            <div class="tick" style="height: 59px;">                
                <p><span data-bind="text: value"></span></p>
            </div>
        </div>
    </div>
    <div class="chartlabel">
        <div class="labelrow">
            <div class="colorindex sunday"></div>
            <span>Sunday</span>
        </div>
        <div class="labelrow">
            <div class="colorindex monday"></div>
            <span>Monday</span>
        </div>
        <div class="labelrow">
            <div class="colorindex tuesday"></div>
            <span>Tuesday</span>
        </div>
        <div class="labelrow">
            <div class="colorindex wednesday"></div>
            <span>Wednesday</span>
        </div>
        <div class="labelrow">
            <div class="colorindex thursday"></div>
            <span>Thursday</span>
        </div>
        <div class="labelrow">
            <div class="colorindex friday"></div>
            <span>Friday</span>
        </div>
        <div class="labelrow">
            <div class="colorindex saturday"></div>
            <span>Saturday</span>
        </div>
    </div>
</div>
<!-- note that the component has completed rendering into the page -->
<div class="scs-hidden" data-bind="scsRenderStatus: {'id': id, 'status': 'complete'}"></div>
<!-- /ko -->

ノック・アウトViewModelのフィールドの監視可能ファイルを作成します。

self.initialized = ko.observable(false);
self.VBCSServerUrl = ko.observable();

self.requests = ko.observableArray();
self.ticks = ko.observableArray();		
	
// Get VBCS server
var serverPromise = getVBCSServerURL();
serverPromise.then(function (result) {
    self.VBCSServerUrl(result.url);
    self.initialized(true);
    self.getRequests();
});

VBCS接続を取得します。

「Oracle Content Management VBCSパブリック・フォーム・コンポーネントの構築」を参照してください。
認可トークンを取得します。

要件: Oracle Content ManagementとVBCSは同じアイデンティティ・ドメインにデプロイされます。「Oracle Content Management VBCSセキュア・フォーム・コンポーネントの構築」を参照してください。

リクエストを取得します。

ビジネス・オブジェクト・エンドポイントを使用します:

/Requestform

self.getRequests = function () {
    var vbcsServer = self.VBCSServerUrl();
    var authorization, token;
    var appName = 'requestform',
        mode = 'rt',
        appVersion = 'live'
        businessObject = 'Requestform';
    var url = vbcsServer + '/' + mode + '/' + appName + '/' + appVersion + '/resources/data/' + businessObject;

    // get token first
    getAuthToken({
        'serverURL': self.VBCSServerUrl(),
        successCallback': function (data) {
            token = data;
            authorization = (token.token_type ? token.token_type : 'Bearer') + ' ' + token.access_token;
            url = url + '?limit=999&orderBy=creationDate:desc';
            $.ajax({
                type: 'GET',
                url: url,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Authorization', authorization);
                },
                success: function (data) {
                    if (data && data.count > 0) {
                        self.showChart(data.items);
                    }
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    console.log('Error:');
                    console.log(jqXhr);
                }
            });
        },
        'errorCallback': function (xhr, status, err) {
            if (xhr && xhr.status === 200) {
                token = xhr.responseText;
                console.log('Got token');
            } else {
                console.error('getToken: xhr: ' + JSON.stringify(xhr) + ' status: ' + status + ' error: ' + err);
            }
        }
    });
};

チャート・データを設定します。

self.showChart = function (items) {
    var weekDayCounts = [0, 0, 0, 0, 0, 0, 0];
    var weekDayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    for(var i = 0; i < items.length; i++) {
        var d = new Date(items[i].creationDate);
        var day = d.getDay();
        if (day >= 0 && day < 7) {
            weekDayCounts[day] = weekDayCounts[day] + 1;
        }
    }	
    var max = 0;
    var results = [];
    for(var i = 0; i < weekDayCounts.length; i++) {
        if (max < weekDayCounts[i]) {
            max = weekDayCounts[i];
        }
    }
    var lines = 7,
    buckets = 5;
    var gap = Math.round(max / buckets);
    var top = gap * (lines - 1);
    if (max > top) {
       gap += 1;
    }
    var ticks = [];
    for(var i = 0; i < lines; i++) {
        ticks[i] = {
            value: i * gap
        };
    }
    self.ticks(ticks.reverse());
			
    for(var i = 0; i < weekDayCounts.length; i++) {
        var height = (weekDayCounts[i] / gap) * 60;
        results.push({
            height: height.toString() + 'px',
            value: weekDayCounts[i],
            barcss: weekDayNames[i].toLowerCase()
        });
    }
    self.requests(results);
};

Oracle Content Managementでのコンポーネントの使用

ページにコンポーネントを追加する方法の詳細は、「Oracle Content Management VBCSパブリック・フォーム・コンポーネントの構築」を参照してください。

コンポーネントは次のようにレンダリングされます。

「図vbcs_data_chart.pngの説明」

このVBCSコンポーネントは、セキュアなサイトでのみ機能します。