How to populate the ObjectDataTableAdapter with Alfresco api

cancel
Showing results for 
Search instead for 
Did you mean: 
KarekMedAM
Active Member II

How to populate the ObjectDataTableAdapter with Alfresco api

Hey,

I'm following this tutorial: https://www.alfresco.com/abn/adf/docs/tutorials/working-with-data-table/

here is my mydatatable.component.ts

import { Component, OnInit } from '@angular/core';
import { AlfrescoApiService } from '@alfresco/adf-core';
import { ObjectDataTableAdapter, ObjectDataRow } from '@alfresco/adf-core';

@Component({
  selector: 'app-mydatatable',
  templateUrl: './mydatatable.component.html',
  styleUrls: ['./mydatatable.component.scss']
})
export class MydatatableComponent implements OnInit {

  data = new ObjectDataTableAdapter([],[]);

  
  constructor(private apiService: AlfrescoApiService) {

    let api: any = this.apiService.getInstance();
  //   let api2: any = this.apiService;

  api.webScript.executeWebScript(
    'GET',
    'people',
    [],
    null,
    '/alfresco/api/-default-/public/alfresco/versions/1',
    null
 ).then(
    (response: any) => {
       let results = [];
       for (var entry of response.list.entries) {
          results.push({
             id: entry.entry.id,
             firstName: entry.entry.firstName,
             lastName: entry.entry.lastName,
             status: 'green',
             icon: 'material-icons://accessibility'
          });
       }
       this.data.setRows(results.map(item => {
          return new ObjectDataRow(item);
       }));
    }
 );

}

  ngOnInit(): void {
    
  }

  onRowClick(event: any) {
    alert('We just clicked row id: ' + event.value.obj.status);
  }

}

and mydatatable.component.html

<adf-datatable 


(rowClick)="onRowClick($event)"
  [data]="data">
  <data-columns>
    <data-column 
      key="icon" 
      type="image" 
        [sortable]="false">
      </data-column>
    <data-column 
      key="firstName" 
      title="First Name">
    </data-column>
    <data-column 
      key="lastName" 
      title="Last Name" 
      class="full-width name-column">
    </data-column>
    <data-column key="status" title="Status">
        <ng-template let-entry="$implicit">
          <span *ngIf="entry.data.getValue(entry.row, entry.col) == 'red'" style="background-color: red; width: 20px; height: 20px"></span>
          <span *ngIf="entry.data.getValue(entry.row, entry.col) == 'green'" style="background-color: green; width: 20px; height: 20px"></span>
        </ng-template>
      </data-column>

  </data-columns>
</adf-datatable>

when I compile I get nothing on the http://localhost:4200/mydatatable. However in the console I get this error:

core.js:4442 ERROR TypeError: Cannot read properties of undefined (reading 'executeWebScript')
    at new MydatatableComponent (mydatatable.component.ts:22)
    at NodeInjectorFactory.MydatatableComponent_Factory [as factory] (mydatatable.component.ts:55)
    at getNodeInjectable (core.js:4274)
    at instantiateRootComponent (core.js:8026)
    at createRootComponent (core.js:13542)
    at ComponentFactory$1.create (core.js:24101)
    at ViewContainerRef.createComponent (core.js:10205)
    at RouterOutlet.activateWith (router.js:5178)
    at RouterOutlet.ngOnInit (router.js:5114)
    at callHook (core.js:3281)

PS: when I try the same url on postman it works

What could be the problem, and how I can fix it

Thank you in advance