Get in touch
or send us a question?
CONTACT

Hướng dẫn customize Workflow của Garoon

Garoon là một trong những service của Cybozu, tương tự như Kintone,…

Bài toán đặt ra: Với một workflow được tạo ra theo chuẩn của service Garoon sẽ có N người có quyền approve flow. Hãy customize workflow này sao cho khi người approve là người cuối cùng thì thực hiện đăng kí thông tin vào một app kintone.

Để giải quyết bài toán đặt ra, ở đây sẽ không đi hướng dẫn cách tạo ra workflow trong Garoon nữa, giả định là chúng ta đã biết cách tạo workflow trong Garoon, và đã từng làm việc với Kintone rồi. Các step sau chỉ hướng dẫn các bước cơ bản để giải quyết bài toán trên.

Giống như làm việc với service kintone, service garoon cũng cho phép chúng ta customize các thứ thông qua viết code javascript và css. Tham khảo các Garoon JavaScript API

Chúng ta thực hiện tại file javascript [garoon_wf_customize.js] theo các steps sau:

Step 1:

Để bắt sự kiện approve trong workflow ta sử dụng API [workflow.request.approve.submit.success], đoạn code để bắt event này như sau

garoon.events.on('workflow.request.approve.submit.success', function(event) {
	console.log(JSON.stringify(event));
});

Ghi log thì ta thấy thông tin chứa trong event như sau

{
  "type": "workflow.request.approve.submit.success",
  "viewer": "APPROVER",
  "stepCode": "$2",
  "request": {
    "id": "8",
    "status": {
      "name": "In progress",
      "type": "IN_PROGRESS"
    },
    "createdAt": "2020-11-12T07:26:29Z",
    "processingStepCode": "$2",
    "name": "通勤交通費申請 ([Test] neos vn 2 - flow)",
    "number": "7",
    "isurgent": false,
    "applicant": {
      "code": "tuanpv@neoscorp.vn",
      "name": "ファン・バン・トゥン"
    },
    "items": {
      "$1": {
        "name": "Subject",
        "type": "SINGLE_LINE_TEXT",
        "value": "[Test] neos vn 2 - flow"
      },
      "$2": {
        "name": "現住所",
        "type": "MULTI_LINE_TEXT",
        "value": "So 1 dao duy anh, Ha Noi\r\n704"
      },
      "$3": {
        "name": "開始(予定)年月日",
        "type": "DATE",
        "value": "2020-11-12"
      }
    },
    "steps": {
      "$1": {
        "id": "19",
        "name": "課長",
        "requirement": "Approval (all approvers)",
        "isapprovalstep": 1,
        "processors": [
          {
            "code": "lochn@neoscorp.vn",
            "name": "フアン・ゴク・ロク",
            "result": "Approved",
            "operatedAt": "2020-11-12T07:27:28Z",
            "comment": "hjg ggjgjhgjhg"
          }
        ]
      },
      "$2": {
        "id": "20",
        "name": "部長",
        "requirement": "Approval (all approvers)",
        "isapprovalstep": 1,
        "processors": [
          {
            "code": "tuanpv@neoscorp.xn--vn",
            "name": ""
          }
        ]
      },
      "$3": {
        "id": "21",
        "name": "",
        "requirement": "acknowledgment",
        "isapprovalstep": 0,
        "processors": [
          {
            "code": "tuanpv-4e15jgoa84l12ads73jbac75hca85098m1q0c8pt4ayjpg3rpl",
            "name": "ファン・バン・トゥン"
          }
        ]
      }
    },
    "folders": [
      {
        "id": "39",
        "type": "RECEIVED"
      }
    ]
  }
}

Ta chú ý trong [request] chứa 2 thông tin quan trọng là [items] chứa thông tin form được nhập trong workflow và [steps] chứa thông
tin về các steps (bao gồm cả thứ tự) thực hiện approve workflow.
Nếu step là approve thì giá trị biến [isapprovalstep = 1] ngược lại thì [isapprovalstep = 0].
Thông tin để phán định step hiện tại đang ở đâu thì dựa vào giá trị của biến [stepCode], như thông tin trên giá trị [stepCode = “$2”]
Tức là người đang chờ approve là steps[“$2”] => Như vậy dựa vào thông tin [stepCode] và [steps] thì ta phán định được người nào là người
approve cuối cùng.

Step 2:

Thực hiên kết nối với Kintone và đăng kí thông tin

  • Để connect tới kintone và thực hiện đăng kí data thì ta sử dụng đoạn source code sau
        var kintoneAppId = 270; // kintoneのアプリID
        var kintoneSpaceId = 18;
        var body = {};
        body.app = kintoneAppId;
        body.record = {};
        body.record['Text'] = {
            value: 'applicantName test'
        };
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/k/guest/' + kintoneSpaceId + '/v1/record.json?__REQUEST_TOKEN__='  +  token);
            xhr . setRequestHeader ( 'X-Requested-With' ,  'XMLHttpRequest' ) ;
            xhr . setRequestHeader ( 'Content-Type' ,  'application/json' ) ;
            var jsonString = JSON.stringify(body);
            xhr.onload = function() {
                var res = JSON.parse(xhr.responseText);
                console.log('responseText =',res);
                if (xhr.status === 200) {
                    resolve(res);
                    return;
                } else {                
                    reject(err);
                    return;
                }
            };
            xhr.onerror = function(err) {
                reject(err);
                return;
            };
            xhr.send(jsonString);
        });

Để get token ta sử dụng API

garoon.connect.kintone.getRequestToken()

Source code cụ thể tham khảo trong file đính kèm [garoon_wf_customize.js]

Step 3:

Deploy file javascript [garoon_wf_customize.js] lên Garoon
Có 2 nơi để đưa file javascript lên, đó là đưa file javascript lên để apply cho toàn bộ các workflow, và nơi thứ 2 là appy cho từng workflow riêng lẻ.

Chúc các bạn thành công!