프리젠터 목록 화면에서 선택한 레코드 전송

소개



프리젠터 목록 화면에서 선택한 레코드를 보내는 방법을 설명합니다.
(송신처의 프로그램으로 PDF장표를 작성해 돌려주는, 같은 사용을 상정하고 있습니다.)
CORS 에러로 빠졌으므로, 비망과 정보 공유를 위해 기사로 합니다.

버튼 추가



스크립트에서 목록 화면에 버튼을 추가합니다.
// ======== 初期化 ========
// 一覧表示のロード時に初期化を呼び出す
$p.events.on_grid_load = function () {
    init();
}

/* =============================================================================
 関数:init
 機能:初期化を行う
       ・ボタン追加
       ・ボタンクリック時の処理を登録
       ・XMLHttpRequestと応答処理を作成
 引数:なし
 備考:一覧画面のロード時に呼び出される
============================================================================== */
function init(){
    // ======== ボタン作成 ========
    var description = '';

    // 送信ボタンを追加
    description += '<button id="post" class="button button-icon ui-button ui-corner-all" type="button"><span class="ui-icon ui-icon-circle-arrow-n"></span>送信</button>';

    // エクスポートボタンの右にボタンを追加
    var element = document.getElementById("MainCommands");
    element.insertAdjacentHTML('beforeend', description);

    // ======== ボタンクリック時の処理を登録 ========
    // 送信ボタンクリック時の処理
    document.getElementById("post").onclick = function() {
        post();
    }
}

내보내기 버튼 오른쪽에 제출 버튼이 추가되었습니다.


송신 프로그램



그런 다음 스크립트에 제출 프로세스를 추가합니다.
이번에는 레코드 ID와 제목을 JSON 형식으로 보냅니다.
(목록 표시에 표시되지 않는 항목은 대상 프로그램에서 API를 사용하여 검색합니다)
/* =============================================================================
 関数:post
 機能:レコードIDを送信する
 引数:なし
============================================================================== */
function post(){
    // 表の行を取得
    var elements = document.getElementsByClassName("grid-row");

    // チェックが入った行を抽出
    var rows = Array.prototype.filter.call(elements, function(x) {
        return x.getElementsByClassName("grid-check")[0].checked;
    });

    if (rows.length > 0) {
        var request = [];

        for (var i=0; i<rows.length; i++){
            // レコードIDとタイトルを格納
            request[i] = {
                record_id: rows[i].getAttribute("data-id"),
                title: rows[i].children[2].textContent,
            }
        }

        // リクエスト送信
        fetch('http://hogehoge.com/cgi-bin/post/test.py', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify(request)
        }).then((response) => {
            // 返ってきたJSONを表示
            return response.json().then((json) => {
                alert(JSON.stringify(json));
            });
        });
    }
}

그러면 test.py로 JSON이 전송됩니다.

대상 프로그램



대상 프로그램을 작성합니다.
이번에는 프리젠터에서 받은 JSON을 그대로 반환합니다.

test.py
#! C:\Python\Python38\python.exe
# -*- coding: utf-8 -*-
import json
import sys, io

# 文字化け対策
sys.stdin  = io.TextIOWrapper(sys.stdin.buffer,  encoding='utf-8')
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
sys.stderr = io.TextIOWrapper(sys.stderr.buffer, encoding='utf-8')

# ヘッダ出力
header = "Content-type: text/html\n"
header += "Access-Control-Allow-Origin: http://pleasanter-server.com\n" # プリザンターのサーバを指定
header += "Access-Control-Allow-Headers: ""X-Requested-With, Origin, X-Csrftoken, Content-Type, Accept""\n"
header += "\n"
print(header)

# プリザンターからJSONを受信
data = sys.stdin.buffer.read()
params = json.loads(data.decode())

#受信したJSONをそのまま返す
print(json.dumps(params))

제출 버튼을 클릭하면 결과가 반환되었습니다!

test.py에서 Access-Control-Allow-OriginAccess-Control-Allow-Headers를 헤더로 출력하지 않으면 CORS 오류가 발생합니다.
(여기서 빠졌습니다)


요약



일람 화면으로부터 복수행을 외부에 송신해 처리하고 싶었습니다만, 드디어 실현할 수 있었습니다.

좋은 웹페이지 즐겨찾기