How to use Experience Manager Ext. API

Consultant_Team

STEP

a. Tentukan Name untuk single experience manager
b. Pilih data source External API
c. Variable → tentukan variable yang akan dijadikan sebagai penampung value dari response api.
Variable ini konsepnya sama seperti column dari data manager.

Name : variable name
Type : tipe dari variable
Set Primary Key : dibuat true hanya untuk variable yang menampung value primary key

d. API → tentukan config API yang akan dipanggil ketika action : View List Data, Create Data,
View Detail Data, Update Data, Delete Data, Import Data, Export Data

Config List Data

Berikut penjelasan cara config list data:

Method dan Url disesuaikan dengan endpoint yang akan digunakan sebagai view list data. contoh disini endpoint yang digunakan method = POST

Source disini diisi menyesuaikan response api yang disetup, contoh
Response API :

{
  "error": false,
  "message": "Success Get Data",
  "data": [...]

}

maka source disini “data” , karena data yang akan ditampilkan ditampung pada variable “data”.

Header diisi juga menyesuaikan dengan api yang digunakan. Contoh api yang digunakan membutuhkan token, maka setup header “Authorization” kemudian jika token yang akan diambil ini adalah token dari user yang login maka bisa menggunakan internal function _user.token, kemudian menambahkan “Content-Type” dengan value “application/json”

Jika method yang dipilih adalah POST maka akan ada inputan “Payload” . Content Type hanya ada pilihan “RAW” kemudian Body diisi seperti contoh di atas, dengan penjelasan :

“column”: _queryType → akan diisi dengan variable yang dipilih pada dropdown di fitur search table view

“query_type”: _query → akan diisi dengan text yang diketik pada searchbox

Note:

pastikan endpoint yang digunakan memiliki format payload yang sama (khusus method POST)

Parse Variable dimaksudkan untuk menyambungkan antara variable dengan value, variable didapatkan dari variable yang sudah ditentukan di awal (step 1.c) kemudian value diketik dengan menyesuaikan variable yang ada pada response api

Note:
pastikan endpoint yang digunakan wajib memiliki format response seperti berikut (untuk method POST & GET):

{
"count": 5,
"data":[],
"error":false,
"message":"successfully get data"

}

Support Filter

Syarat untuk bisa menggunakan Filter pada table view dari experience manager Ext. API yaitu :

Body diisi seperti contoh di atas, dengan penjelasan :

“column”: _queryType → berfungsi untuk menampung isi dengan variable yang dipilih pada dropdown di fitur search table view

“query_type”: _query → berfungsi untuk menampung isi dengan text yang diketik pada searchbox

Support Group

Untuk sekarang kami belum support untuk fitur ini

Config detail

Masukan informasil endpoint detail dan header sama seperti config pada list data, kemudian masukan params (untuk endpoint method GET) atau payload (untuk endpoint method POST) dengan membawa variable.nama_variable_yang_diset_primary_key:

Note:

Pastikan pada table view tetap menampilkan column yang diset sebagai primary key
Pastikan response pada endpoint list memberikan params “id”
Pastikan pada config list data, memasukan variable yang akan dijadikan filter get data detail pada parse variable
- sample pada config list data, memasukan variable ids pada parse variable, maka pada get detail data (baik dengan pagescreen true / false) pada params / body payload mengirim value dengan : variable.ids

Kemudian lanjutkan parse variable seperti yang ada di list data, yaitu data apa saja yang akan ditampilkan pada halaman detail.

Config Export

Cara setup export di experience manager Ext. API :

set config URL/API untuk export di menu Information > API Export Data

Note :
Buat automation untuk export to excel. Berikut sample block javascript to export excel

var fileName='report.xls';
var sheetName='Data Karyawan';
var data_object = { "id": 12345, "name": "Product"};

var data=[{id:1,name:'Arief'},{id:2,name:"Budi"},{id:3,name:"Ika", tim:data_object.name}];

var headerMap={id:"ID",name:"Name", tim:"Division"};
var headerOrder = ['name','tim','id'];

_exportExcel(fileName,sheetName,data,headerMap,headerOrder);

Set config URL/API untuk search dalam export view di menu Information > API Export Data

Endpoint search harus sudah support filtering, karena params filter akan otomatis dikirim ketika search. sample visual programming support search :

var filtered_value = payload_list.body.filter;
_log(JSON.stringify(filtered_value));

var url = "https://dev-api-gateway.jojonomic.io/nocode/record/fetch?form_data_id=PXZCl7jMR&page=" + payload_list.body.page + "&limit=" + payload_list.body.limit + "&sort=" + JSON.stringify(payload_list.body.sort) + "&filter=" + JSON.stringify(filtered_value) + "&filter_operator=and";

var encoded_url = encodeURI(url);

var token = _user.token;

var response = _hitExternalAPI(encoded_url,'GET',{},{'Authorization':token});

response_list = response.body;

_log(encoded_url);

contoh payload search yang akan dikirim secara default :

{
    "form_data_id": "",
    "page": 0,
    "limit": 10000000,
    "sort": {
        "id": -1
    },
    "filter": {
        "first_name": "Marlin",
        "last_name": "Steve"
    }
}

set export view untuk menampilkan icon export di atas table view di menu export view

cukup mengisi title saja, karena sheet name, format file, column sudah ditentukan di endpoint yang dibuat dengan visual programming.