LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Miki_Yokohata(横畑 実樹)inSharperlight Users

【パブリッシャー】ハイブリッドレポートを作成してみる

Posted at

はじめに

今回はWEBレポートの応用編を紹介します。
プロンプトとテーブル部分はSharperlight標準のものを使用し、それにカスタムした部分を追加します。
image.png
プロンプトで絞り込んだデータが表示され、そのデータに対してユーザーがなんらかのアクションを起こせるような対話型のWebレポートとなります。
この例では、ApproveとRejectという二つのボタンを用意し、それぞれのボタンが押されればそれに対応した処理を行われるようにJavaScriptで処理を記述します。

WEBレポートの作成

Sharperlightアプリケーションメニューよりパブリッシャーを起動します。
image.png
新規ボタンで新しいWEBレポートの作成を開始します。
image.png
一般タブでは、一意のコード(グループ+コード)、タイトルおよびレポートのタイトルを記入します。
image.png
ダイアログ下部のクエリーを編集ボタンでクエリの定義を行います。
image.png
クエリビルダが開きます。
下図のようにSAP Business Oneデータモデルを使用したクエリを作成してみました。
image.png

  1. Document Draft Number、このフィルターがプロンプトとして表示される
  2. CurrentUserは、JavaScriptの中で使用したいので、プロンプトフィルター（クエリのWHERE句を形成する要素とはならないが、ユーザーに入力を促すことはできる）として定義します。更にプロンプトとして表示させたくないのでHiddenとします
  3. テーブルを構成する要素です

プレビューボタンでクエリの動作確認を行います。上手く動きました。
image.png
OKボタンでクエリを保存、さらにWEBレポートもOKボタンで保存します。
image.png

カスタムHTML + JavaScriptコードの作成

この部分の作成を行います。
image.png
HTML + JavaScriptで作成します。Visual Studio Code等のエディタで記述します。
二つのボタンとテキスト領域の定義はこのようになっています。
image.png
ボタンが押された時の処理等はこのようになっています。
image.png

  1. このコードが埋め込まれるWebレポート（先に作成したWebレポート）のクエリからフィルター情報を受け取る部分。@Companyや@DocumentDraftNumber等は、クエリのフィルター名の参照コードです
    image.png

  2. Sharperlight RESTfulサービスへクエリを送信し、データセットを受け取る部分。これはAprroveやRejectといったボタンが押された場合に、表示されているデータと同じもの＋αをSharperlightクエリで取得し、次のなんらかの処理に渡すためのコードです。例えばSharperlightのWriteback機能を利用して別のテーブルに書き込む等。今回は取得したデータを画面に表示するだけです
    image.png

  3. 2でSharperlight RESTfulサービスへクエリを送信する際のURLリクエスト構文を定義しています。パブリッシャーでこのクエリ(Webレポート)も準備します。

コード全てをここに記しておきます。

<script>
    var gPublisherGroup = "QiitaSample";
    var gStatus = '';
    var gFilterCompany = "{*Filter[@Company]}".replace(/'/g, "\\'");
    var gFilterDocumentDraftNumber = '{*Filter[@DocumentDraftNumber]}'.replace(/'/g, "\\'");
    var gDatasetLinesURL = '{*Url.Root}DataSource/?query=' + gPublisherGroup + '.Hybrid_ds_Lines' 
                    + '&fltCompany={@@COMPANY}&fltDocumentDraftNumber={@@DOCUMENTDRAFTNUMBER}'
                    + '&dfmt=jsonarray&dcat=UseNames&usid={_System.Rest.Usid}';
    
    // Callback function sets
    var getCallback = {
        success: getRequest_Success,
        failure: getRequest_fail
    };

    
    //===================================
    // Global Variabales
    //===================================
    var gDatasetLines = [];
    var gHead_Comment = "";
    var gLine_Buffer = [];

    function btApprove_click(source, mode){
        try{
            gStatus = mode;
        
            // Keep input value
            gHead_Comment = $.trim($('textarea#ApprovalComment').val());
            
            //====================================================
            // Get approved documents detail
            //====================================================
            var dsUrl = gDatasetLinesURL.replace("{@@COMPANY}", gFilterCompany).replace("{@@DOCUMENTDRAFTNUMBER}",gFilterDocumentDraftNumber);
            console.log(dsUrl);
            Sharperlight_Get(dsUrl, getCallback, "A");
        
        }catch (err){
            console.error('Error on btSubmitAll_click(): ' + err.message);
        }
    }

    function btReject_click(source, mode){
        try{
            gStatus = mode;

            // Keep input value
            gHead_Comment = $.trim($('textarea#ApprovalComment').val());
            
            //====================================================
            // Get approved documents detail
            //====================================================
            var dsUrl = gDatasetLinesURL.replace("{@@COMPANY}", gFilterCompany).replace("{@@DOCUMENTDRAFTNUMBER}",gFilterDocumentDraftNumber);
            console.log(dsUrl);
            Sharperlight_Get(dsUrl, getCallback, "R");
        
        } catch (err){
            console.error('Error on btReject_click(): ' + err.message);
        }
    }


    //====================================================
    // Request datasets
    //====================================================
    var gPostingStatus = "X";
    function Sharperlight_Get(url, cb, status){
        try {
            if (url != ""){
                gPostingStatus = status;
                var request = YAHOO.util.Connect.asyncRequest('GET', url, cb);
            }
        } catch (err) {
            console.error('Sharperlight_Get(): ' + err.message);
        }
    };
    
    // callback functions for header request
    function getRequest_Success(o) {
        console.log("getRequest_Success: " + o.responseText);
        gDatasetLines = JSON.parse(o.responseText);
        
        if (gPostingStatus == "A"){
            if (!confirm('Are you sure you would like to approve all the document(s)?')){
                return;
            }
        }else if(gPostingStatus == "R"){
            if (!confirm('Are you sure you would like to reject all the document(s)?')){
                return;
            }
        }else{
            alert("Posting Status was wrong.");
            return;
        }
        
        if (gDatasetLines.length == 0) { 
            console.log('No document records found or the data already was processed');
            window.parent.location.reload();
            return; 
        }
            
        gLine_Buffer = [];
        for(var r=0; r<gDatasetLines.length; r++){
                var rowItem = {
                    'CompanyBase': gFilterCompany,
                    'InternalNumber': gDatasetLines[r].InternalNumber,
                    'DocumentDraftNumber': gFilterDocumentDraftNumber,
                    'Answer': gPostingStatus,
                    'Authorizer': gDatasetLines[r].Authorizer,
                    'Date': gDatasetLines[r].Date,
                    'Comment': gHead_Comment
                    }
            gLine_Buffer.push(rowItem);        
        }
        
        // Post Remarks to the server
        var message = "";
        if (gLine_Buffer.length > 0){
            for (var l=0; l<gLine_Buffer.length; l++){
                message +="CompanyBase: " +  gLine_Buffer[l].CompanyBase + "</br>InternalNumber: " + gLine_Buffer[l].InternalNumber + "</br>DocumentDraftNumber: " + gLine_Buffer[l].DocumentDraftNumber + "</br>Answer: " + gLine_Buffer[l].Answer + "</br>Authorizer: " + gLine_Buffer[l].Authorizer + "</br>Date: " + gLine_Buffer[l].Date + "</br>Comment: " + gLine_Buffer[l].Comment + (l<gLine_Buffer.length ? "</br></br>" : "");
            }
            kendo.alert(message);
        }
    
    };
    
    function getRequest_fail(o){
        console.error("getRequest_fail: " + o.responseText);
    };

</script>

<table style="width:100%">
    <tr>
        <td style="width:110px;">
            <button id='btApprove' class="button button1" onClick='btApprove_click(this.id, "A")'>Approve</button>
            <button id='btReject' class="button button2" onClick='btReject_click(this.id, "R")'>Reject</button>
        </td>
    </tr>
    <tr>
        <td colspan="2"><textarea id="ApprovalComment" maxlength="1000"></textarea></td>
    </tr>
</table>


<div id="PostMessage" style="display: none">The post result message will be shown here.</div>


<script type="text/javascript">
    
    $(document).ready(function() {
        console.log("Page is ready");
    });

</script>

HTML + JavaScriptコードの埋め込み

先のHTML + JavaScriptコードをHTMLファイルとして保存します。
最初に作成したWEBレポートの定義を開きます。
オプションタブに移動しリソースの編集ボタンを押します。
image.png
リソースダイアログでは新規アイコンで新しいリソースの定義を開始します。
image.png
次に、パスのファイル検索アイコンで先ほど作成したHTMLファイルを指定します。
image.png
ファイルの指定が完了したら、参照のコピーボタンで一意のコードをクリップボードにコピーします。
リソースダイアログを閉じます。
リソースの編集ボタンが緑に変わりましたね。これでHTMLファイルがリソースとして添付されました。
ユーザー設定のスタイルのヘッダーチェックボックスをチェックし、編集ボタンを押します。
image.png
Noで先に進みます。
image.png
カスタムHTMLヘッダーダイアログが開きます。
image.png
ReportContentSectionBeginとReportContentSectionEndタグのみを残し、他は削除します。

<!--ReportContentSectionBegin-->
<!--ReportContentSectionEnd-->

BeginタグとEndタグの間に先ほどコピーしたリソースの参照コードを貼り付けます。
image.png
OKボタンで保存します。以上で埋め込み完了です。
ヘッダーの編集ボタンも緑になりました。適用ボタンで変更を保存しておきます。
image.png

クラスの定義

先に作成したHTML + JavaScriptコードで使用しているCSSを、このWebレポートに定義します。
オプションタブ、ユーザー設定のスタイルのCSSチェックボックスをチェックし、編集ボタンを押します。
以下のコードを貼り付けます。

<style type="text/css">
	body{
		font-family: Monospace;
		font-size: 17px;
	}
	.button {
		margin-bottom: 15px;	
		margin-left: 20px;	
		display: inline-block;
		padding: 8px 25px;
		font-size: 15px;
		cursor: pointer;
		text-align: center;
		text-decoration: none;
		outline: none;
		color: #fff;
		border: none;
		border-radius: 7px;
		box-shadow: 0 6px #999;
	}
	.button1{
		background-color: #2F8272;
		width:	105px;
	}
	.button1:hover {
		background-color: #225e52;
	}
	.button1:active {
		background-color: #225e52;
		box-shadow: 0 5px #666;
		transform: translateY(4px);
	}
	
	.button2{
		background-color: #ED4C32;
		width:	105px;
	}
	.button2:hover {
		background-color: #bc2710;
	}
	.button2:active {
		background-color: #bc2710;
		box-shadow: 0 5px #666;
		transform: translateY(4px);
	}

	textarea {
		width: 650px;
  		height: 75px;
  		padding: 8px 8px;
  		box-sizing: border-box;
  		border: 2px solid #ccc;
  		border-radius: 4px;
  		background-color: #f8f8f8;
  		font-size: 16px;
  		resize: vertical;
	}
	#PostMessage{
		position: relative;
    		top: -6px;
    		margin-left: -40px;
	}
	.reviewedByLabel{
		display: inline-block;
    		margin-left: 15px;
    		position: relative;
    		top: -6px;
	}
	.reviewedBy{
		display: inline-block;
    		position: relative;
    		top: -6px;
		width: 200px;
	}
	.inspactor{
		width: 200px;
		height: 25px;
	}
	.inspactorValidationError{
		background-color: #eb8584;
	}
	.originalTotalLabel{
		display: inline-block;
    		margin-left: 15px;
    		position: relative;
    		top: -6px;
	}
	.originalTotal{
		display: inline-block;
    		position: relative;
    		top: -6px;
	}
	.newTotalLabel{
		display: inline-block;
    		margin-left: 15px;
    		position: relative;
    		top: -6px;
	}
	.newTotal{
		display: inline-block;
    		position: relative;
    		top: -6px;
	}
	#dash1Z{
		position: absolute;
		left: 888px;
	}
</style>

このような感じ。
image.png
OKボタンで保存します。
CSSの編集ボタンも緑になりました。適用ボタンで変更を保存しておきます。
image.png

テーマの設定

最後に表示されるテーブルの容姿をすこし綺麗にします。
オプションタブ、ユーザー設定のスタイルのテーマチェックボックスをチェックし、編集ボタンを押します。
image.png
開いたテーマダイアログのURLパラメターテキストボックスに以下のコードを貼り付けます。

&style=tmp2

image.png
OKボタンで設定を保存します。
テーマの編集ボタンも緑になりました。適用ボタンで変更を保存します。更にOKボタンでWebレポートの定義を閉じます。
image.png

以上でハイブリッドWebレポートの作成は終了です。

動作確認

では、早速動作確認といきましょう。
WidnowsサービスあるいはSharperlightアプリケーションメニューよりSharperlightサービスを起動します。
パブリッシャーのレポート一覧より先に作成したWebレポートを選択し、右クリックメニューからレポートの表示を選択します。
image.png
お手持ちのブラウザでそのWebレポートが開きます。
Document Draft Numberフィルターは空白のまま、Submitボタンでクエリを実行します。
image.png
テーブルがHTML + JavaScript部分と共に表示されます。
image.png
Approveボタンを押すと確認メッセージが表示され、OKを押して次の情報が表示されれば正常です。
image.png
image.png

最後に

このようにデータソースへのアクセス部はSharperlightにお任せで、その他の部分の拡張に全力を注げそうですね。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?