SAPUI5（SAP MII）のテーブルで特定の値を強調表示する方法

トピックは専門家の非常に狭いサークル向けかもしれませんが、それでも、エンタープライズビジネスプロセスをSAP MIIシステムのSAP ERPビジネス環境に統合しようとしているHabrovskの人々の数を知りたいと思っていました。さらに、この記事はプロジェクトでは、 OpenUI5フレームワークのオープンバージョン。



彼は1年前にこの分野で働き始め、ネットワーク上にはそれほど多くの情報がなく、タスクは非常に多様であることに気付きました。 時には、標準的なアプローチでは解決できないタスクに出くわし、外に出なければなりません。 そこで、非標準の問題に対する解決策を公開することにしました-SAPUI5（ OpenUI5 ）の標準TableUオブジェクトの異なる列の異なる値を強調表示します。 何が議論されるか理解していただければ幸いです。

タスクの目的と結果を説明するために、取得した結果のスクリーンショットの例を示します。

（青と赤のブロックはセルに結合され、それらの値は同一でなければなりません）







そのため、問題の詳細な説明から始めて、それから解決策を見つけることに進みます。



タスクは次のとおりです。列の値（送信済みと確認済み）を比較するには、データベースから情報を選択する必要がありました。 値が互いに異なる場合-エンドユーザーのために簡素化し、問題の記録に注意する必要がありました。



最初に、コントローラーが作成され、モデルが定義され（messagesSearchResult）、将来的にはリクエストの結果が保存されます。 また、searchMessages変数でクエリのURLを定義します。

sap.ui.controller("controller_name.page", { models: { messagesSearchResult: null }, urls: { searchMessages: "/XMII/Illuminator?QueryTemplate=PATH/TO/query&Content-Type=text/xml" },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、初期化関数を作成します。ここで、XMLオブジェクト（新しいsap.ui.model.xml.XMLModel（））を作成し、関数を接続してリクエストの開始、終了、エラーを処理します。

  onInit: function() { this.models.messagesSearchResult = new sap.ui.model.xml.XMLModel(); this.models.messagesSearchResult.attachRequestCompleted(this._dataLoadingFinished) this.models.messagesSearchResult.attachRequestFailed(this._dataLoadingFinished) this.models.messagesSearchResult.attachRequestSent(thisLoadingStarted); },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のステップでは、メイン関数を作成します。この関数では、クエリデータをTableオブジェクトに「バインド」し、クエリデータを操作するための関数を接続します。

  searchMessages: function() { var t = this.byId('searchResultTbl'); // get Table element from page t.setModel(this.models.messagesSearchResult); // connect XML-model to Table element at page // aggregation binding data from XML-path (/Rowset/Row) to Table rows // and manipulation with data by function _addTableRows(this.models.messagesSearchResult). // At the end, loading data from query by url. (this.models.messagesSearchResult.loadData()) t.bindAggregation("rows", { path: "/Rowset/Row", factory: $.proxy(this._addTableRows(this.models.messagesSearchResult), this) }); this.models.messagesSearchResult.loadData(this.urls.searchMessages, {}}, false, "POST"); },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最後に、データを操作する機能、および「問題」データでセルを強調表示する機能。

  _addTableRows: function (oContext) { var _this = this; // save handler _this to controller var backgroundColor = '#fcdd82'; // define background-color for "problem" cells var ConfRecColumn, SentRecColumn; var TMP_REC; // Compare this field with next. // Bind property (CONF_REC) from XML-model to new TextField value and save it to temporary variable (TMP_REC). // By jQuery set attribute readonly to true ($('#' + this.getId()).attr("readonly", true)). // Set this TextField not editable (this.setEditable(false)). var ConfRecColor = new sap.ui.commons.TextField().bindProperty("value", "CONF_REC", function(cellValue){ $('#' + this.getId()).attr("readonly", true); this.setEditable(false); _this.TMP_REC = cellValue; return cellValue; }); // Compare this field with previous and highlight if doesn't match. // Bind property (SENT_REC) from XML-model to new TextField value and compare it with temporary variable (TMP_REC). // By jQuery set background-color if doesn't match ($('#' + this.getId()).parent().parent().css("background-color", backgroundColor)). // Or remove by jQuery attribute style if previous and this values is match ($('#' + this.getId()).parent().parent().removeAttr('style')). // By jQuery set attribute readonly to true ($('#' + this.getId()).attr("readonly", true)). // Set this TextField not editable (this.setEditable(false)). var SentRecColor = new sap.ui.commons.TextField().bindProperty("value", "SENT_REC", function(cellValue){ if(cellValue != _this.TMP_REC) { $('#' + this.getId()).parent().parent().css("background-color", backgroundColor); } else { $('#' + this.getId()).parent().parent().removeAttr('style'); } $('#' + this.getId()).attr("readonly", true); this.setEditable(false); return cellValue; }); this.byId('searchResultTbl').getColumns()[11].setTemplate(ConfRecColor); // set template, which we prepare above ConfRecColor this.byId('searchResultTbl').getColumns()[12].setTemplate(SentRecColor); // set template, which we prepare above SentRecColor },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最後に、リクエストの開始、終了、エラーを処理するための関数を定義します。

  _dataLoadingStarted: function() { sap.ui.core.BusyIndicator.show(); }, _dataLoadingFinished: function(oEvent) { sap.ui.core.BusyIndicator.hide(); if (oEvent.getId() == "requestFailed") { sap.ui.commons.MessageBox.alert(oEvent.getParameter('message')); } } }); // close controller body
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

既製のコントローラースクリプト： JSFiddleで

すべてのコードは詳細にコメントされています。



ハブに関する私の最初の記事が誰かにとって興味深く、役に立つことを願っています。 在庫には、非標準の問題に対する多くの解決策があります。この記事が気に入ったら、他の人と共有できてうれしいです！



PSこの記事を気に入ってくれた人に特別な感謝を申し上げたいと思います。



UPD： Vestユーザーの発言を修正し、オープンバージョンのフレームワークOpenUI5へのリンクを投稿します



UPD： Vestの要求に応じて、処理中のXMLドキュメントの構造の例を追加します。

 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <Rowsets> <Rowset> <Row> <NPP>1</NPP> <SYS_ID>1</SYS_ID> <DATE_OF_POST>14-03-2014</DATE_OF_POST> <SMENA>1</SMENA> <KOD>10000000001</KOD> <DESCR></DESCR> <SOURCE_ID>200</SOURCE_ID> <TARGET_ID>300</TARGET_ID> <PROC_ID>8</PROC_ID> <CONF_Q>1131.12</CONF_Q> <CONF_REC>22</CONF_REC> <SENT_Q>1131.12</SENT_Q> <SENT_REC>22</SENT_REC> </Row> </Rowset> </Rowsets>