3

in the oracle jet quick basic example i have this table in dashboard.htm :

 <table id="table" data-bind="ojComponent: {component: 'ojTable', 
                                            data: dataSource,

                                            columns: [
                                                     {headerText: 'Task number', field: 'number'},
                                                     {headerText: 'Task title', field: 'title'},
                                                     {headerText: 'Task priority', field: 'priority'},
                                                     {headerText: 'Assigned Date', field: 'assignedDate'},
                                                     {headerText: 'Creator Name', field: 'creatorName'},
                                                     {headerText: 'From User Name', field: 'fromUserName'},
                                                     {headerText: 'Created Date', field: 'createdDate'},
                                                     {headerText: 'Process Name', field: 'processName'},
                                                     {headerTemplate: 'oracle_link_hdr',template: 'oracle_link'}],
                                                      rootAttributes: {'style':'width: 100%;'}}">

                            </table>

what i want that when i select a row a alert of the number of the selected row appear. This what i have in the dashboard.js file :

define(['ojs/ojcore', 'knockout','jquery','ojs/ojknockout', 
'ojs/ojarraytabledatasource',  
'ojs/ojoffcanvas','ojs/ojtable'],  
 function (oj, ko,$) {  

function DashboardViewModel() {  
        var self = this;  
        self.data = ko.observableArray();  
        $.ajax({  
            'global': false,  
            'url': "aaaa",  
            'dataType': "json",  
            'beforeSend': function (xhr) {xhr.setRequestHeader ("Authorization", "Basic " + btoa("aaaa:aaaa"));},  
            'success': function (taches) {  
                $.each(taches.tasks, function () {  
                    self.data.push({  
                        title: this.title,  
                        number: this.number,  
                        priority: this.priority,  
                        assignedDate: this.assignedDate,  
                        creatorName: this.creatorName,  
                        fromUserName: this.fromUserName,  
                        createdDate: this.createdDate,  
                        processName: this.processName,  
                        link: this.href  

                    });  
                });  

            }  
        });  


        self.dataSource = new oj.ArrayTableDataSource(  
            self.data,   
            {idAttribute: 'number'}  
        );  


        $('#table').on("ojbeforecurrentrow", currentRowListener);  


    }  



    function taskFlow (url)  
        {  
            var myjson = null;  
            $.ajax({  
                'async': false,  
                'global': false,  
                'url': url,  
                'dataType': "json",  
                'beforeSend': function (xhr) {xhr.setRequestHeader ("Authorization", "Basic " + btoa("aaaa:aaaa"));},  
                'success': function (data) {myjson = data.detailsURL.href;}  
            });  
            return myjson;  
        };  


        function currentRowListener (event, data)  
        {  

            if (data['option'] == 'selection')  
        {  
            var selectionObj = data['value'];  


            var i = 0;  
            for (i = 0; i < selectionObj.length; i++)  
            {  
                var range = selectionObj[i];  


                var startKey = range.startKey;  




                if (startKey != null && startKey.row != null)  
                {  
                    alert (startKey.row );  
                    $("a[href^='aaaa']")  
                    .each(function()  
                        {   
                             this.href = this.href.replace('aaaa',   
                              taskFlow("aaaa/"+startKey.row));  
                        });  
                };                
            }        
        }  
        };  



  return new DashboardViewModel();  
}  
 );

i found this blog but does not work should i add somthing to the main.js or what ? for more information this is how the files looks like:

project files

thanks for helping .

Ameur Baccoucha
  • 559
  • 1
  • 8
  • 17

2 Answers2

2

Here is the sample for html and js datamodel. Please try.

HTML

<table id="table" summary="Department List" aria-label="Departments Table"
       data-bind="ojComponent: {component: 'ojTable', 
                                data: datasource, 
                                selectionMode: {row: 'single', column: 'multiple'}, 
                                columns: [{headerText: 'Department Id', 
                                           field: 'DepartmentId', 
                                           id: 'column1'},
                                          {headerText: 'Department Name', 
                                           field: 'DepartmentName', 
                                           id: 'column2'},
                                          {headerText: 'Location Id', 
                                           field: 'LocationId', 
                                           id: 'column3'},
                                          {headerText: 'Manager Id', 
                                           field: 'ManagerId', 
                                           id: 'column4'}]}">
</table>
<br><br>

JS

require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'promise', 'ojs/ojtable', 'ojs/ojarraytabledatasource'],
function(oj, ko, $)
{   
  function viewModel()
  {
    var self = this;
    var deptArray = [{DepartmentId: 1001, DepartmentName: 'ADFPM 1001 neverending', LocationId: 200, ManagerId: 300},
        {DepartmentId: 556, DepartmentName: 'BB', LocationId: 200, ManagerId: 300},
        {DepartmentId: 10, DepartmentName: 'Administration', LocationId: 200, ManagerId: 300},
        {DepartmentId: 20, DepartmentName: 'Marketing', LocationId: 200, ManagerId: 300},
        {DepartmentId: 30, DepartmentName: 'Purchasing', LocationId: 200, ManagerId: 300},
        {DepartmentId: 40, DepartmentName: 'Human Resources1', LocationId: 200, ManagerId: 300},
        {DepartmentId: 50, DepartmentName: 'Administration2', LocationId: 200, ManagerId: 300},
        {DepartmentId: 60, DepartmentName: 'Marketing3', LocationId: 200, ManagerId: 300},
        {DepartmentId: 70, DepartmentName: 'Purchasing4', LocationId: 200, ManagerId: 300},
        {DepartmentId: 80, DepartmentName: 'Human Resources5', LocationId: 200, ManagerId: 300},
        {DepartmentId: 90, DepartmentName: 'Human Resources11', LocationId: 200, ManagerId: 300},
        {DepartmentId: 100, DepartmentName: 'Administration12', LocationId: 200, ManagerId: 300},
        {DepartmentId: 110, DepartmentName: 'Marketing13', LocationId: 200, ManagerId: 300},
        {DepartmentId: 120, DepartmentName: 'Purchasing14', LocationId: 200, ManagerId: 300},
        {DepartmentId: 130, DepartmentName: 'Human Resources15', LocationId: 200, ManagerId: 300}];
    self.datasource = new oj.ArrayTableDataSource(deptArray, {idAttribute: 'DepartmentId'});
  }
  var vm = new viewModel;

  $(document).ready
  (
    function()
    {
      ko.applyBindings(vm, document.getElementById('table'));
      $('#table').on('ojoptionchange', currentSelection);
    }
  );


    function currentSelection()
    {   
        var selectionObj = $("#table").ojTable("option", "selection");
        var selectionTxt = "";

        //console.log(selectionObj[0].startKey.row);
        alert(selectionObj[0].startKey.row);
    };
});

If it's useful, Let me know.

Om Sao
  • 7,064
  • 2
  • 47
  • 61
  • this when work for an require example but what i look for is in define bloc you can find here the exact description of the issues https://blogs.oracle.com/geertjan/selecting-a-row-in-oracle-jet-ojtable-part-1 – Ameur Baccoucha Aug 18 '17 at 13:27
  • Great!! Refer to http://jet.us.oracle.com/3.2.0/jetCookbook.html?component=table&demo=selectableTable – Om Sao Aug 18 '17 at 13:31
  • that can not solve my problem. if you can have a look at the oracle jet quick basic example and try it and you will understand the problem – Ameur Baccoucha Aug 18 '17 at 13:40
  • the link is not accessible – Ameur Baccoucha Aug 18 '17 at 13:54
  • Ok, no worries. so now your problem is solved or what specific you are struggling with ? – Om Sao Aug 18 '17 at 14:02
  • no i still blocked. the solution that you give it to me work in the example of using the 'main.js' and the 'index.html' files for all your code but what i am asking for is how to make it work in modular example when the routing is using like in the OracleJetquickbasic example. i can't add $(document).ready ( function() { ko.applyBindings(vm, document.getElementById('table')); $('#table').on('ojoptionchange', currentSelection); } ); to a define bloc is it clear now ? – Ameur Baccoucha Aug 18 '17 at 14:16
1

Ameur,

Place the HTML that Om has provided, into the view of your application. ie. dashboard.html

Take the "contents" of the viewmodel from Om's solution and place it into the dashboard.js (or whatever viewModel you are using).

Then take the ojoptionchange handler line that Om has inside of the $document.ready call, and place that inside of the handleBindingsApplied lifecycle method that should be in the dashboard.js template.

Finally, in the define block, add to the end of the arguments, the reference to these two modules:

'ojs/ojtable', 'ojs/ojarraytabledatasource'

Save both view and viewModel and let us know how it looks.

peppertech
  • 495
  • 2
  • 9
  • I should add that Om's answer is correct, it's just a matter of making it fit in an ojModule (AMD Module) approach instead of a single HTML and JS file. – peppertech Aug 19 '17 at 15:09