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

1. 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 -->

2. 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();
   });
   

3. Obtain the VBCS connection.

   See Build an Oracle Content Management VBCS Public Form Component.

4. 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.

5. 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);
               }
           }
       });
   };
   

6. 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.