Build an Oracle Content and Experience VBCS Data Report Component
You can build a local Oracle Content Management component that uses REST APIs exposed by business objects in VBCS to deliver reports on data collected through forms.
Use data from a public form component to show the number of requests per day in a CSS bar chart. See Build an Oracle Content Management VBCS Public Form Component.
Build an Oracle Content Management Local Component
Assumptions:
-
The VBCS app name is “RequestForm”.
-
The business object name is “requestform”.
Modify assets/render.js
-
Define the component template as follows.
<!-- 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 -->
-
Create the observables for the fields in the Knockout 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(); });
-
Obtain the VBCS connection.
See Build an Oracle Content Management VBCS Public Form Component.
-
Get an Authorization Token.
Requirement: Oracle Content Management and VBCS are deployed in the same identity domain. See Build an Oracle Content Management VBCS Secure Form Component.
-
Get requests.
Use a business object endpoint:/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); } } }); };
-
Set up chart data.
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); };
Use the Component on Oracle Content Management
For information about how to add the component on a page, see Build an Oracle Content Management VBCS Public Form Component.
The component renders as follows.
Description of the illustration vbcs_data_chart.png
This VBCS component works only on secure sites.