SapUI5. Пример Master Detail Application

Вступление

Приложение показывает две таблицы sap.m.Table, в верхней (заголовок) – информация по материалу (MARA), в нижней (позиции) – наличие материала на заводе (MARC).

Я заранее подготовил oData сервис на стороне Backend системы.

Он содержит два набора данных – PRODUCT – информация из MARA, и MARC – соответственно из MARC.

Так же для того, чтобы работали sap.ui.model.Filter я использовал класс ZSERVICENAME_DPC_EXT (Расширение Data Provider Controller, которые генерируются при создании сервиса), метод COLLECTIONNAME_GET_ENTITYSET. На входе есть таблица с переданными Filters. Ее нужно использовать для формирования динамического условия запроса.

Например так.

    DATA lt_sopt TYPE TABLE OF crmselstr.
    LOOP AT it_filter_select_options INTO DATA(ls_so).
      LOOP AT ls_so-select_options INTO DATA(ls_so_line).

        APPEND INITIAL LINE TO lt_sopt ASSIGNING FIELD-SYMBOL(<ls_so>).

        <ls_so>-field = to_upper( ls_so-property ).

        <ls_so>-sign   = ls_so_line-sign.
        <ls_so>-option = ls_so_line-option.
        <ls_so>-low    = ls_so_line-low.
        <ls_so>-high   = ls_so_line-high.

        SELECT SINGLE rollname
          INTO @DATA(lv_domain)
          FROM dd03l
         WHERE tabname = 'MARC'
           AND fieldname = @<ls_so>-field.
        IF sy-subrc = 0.
          SELECT SINGLE convexit
            INTO @DATA(lv_convexit)
            FROM dd01l
           WHERE domname = @lv_domain.
          IF sy-subrc = 0.

            DATA(lv_funcname) = |CONVERSION_EXIT_{ lv_convexit }_INPUT|.
            CALL FUNCTION lv_funcname
              EXPORTING
                input  = <ls_so>-low
              IMPORTING
                output = <ls_so>-low.

          ENDIF.
        ENDIF.
      ENDLOOP.
    ENDLOOP.

    DATA lt_cond TYPE TABLE OF mcondition.
    CALL FUNCTION 'CRS_CREATE_WHERE_CONDITION'
      TABLES
        ti_range      = lt_sopt
        to_cond       = lt_cond
      EXCEPTIONS
        invalid_input = 1
        OTHERS        = 2.
    IF sy-subrc <> 0.
* Implement suitable error handling here
    ENDIF.


    SELECT * FROM marc UP TO 100 ROWS INTO TABLE @et_entityset WHERE (lt_cond) .

DATA lt_sopt TYPE TABLE OF crmselstr.

LOOP AT it_filter_select_options INTO DATA(ls_so).

LOOP AT ls_so-select_options INTO DATA(ls_so_line).

APPEND INITIAL LINE TO lt_sopt ASSIGNING FIELD-SYMBOL(<ls_so>).

<ls_so>-field = to_upper( ls_so-property ).

<ls_so>-sign = ls_so_line-sign.

<ls_so>-option = ls_so_line-option.

<ls_so>-low = ls_so_line-low.

<ls_so>-high = ls_so_line-high.

SELECT SINGLE rollname

INTO @DATA(lv_domain)

FROM dd03l

WHERE tabname = 'MARC'

AND fieldname = @<ls_so>-field.

IF sy-subrc = 0.

SELECT SINGLE convexit

INTO @DATA(lv_convexit)

FROM dd01l

WHERE domname = @lv_domain.

IF sy-subrc = 0.

DATA(lv_funcname) = |CONVERSION_EXIT_{ lv_convexit }_INPUT|.

CALL FUNCTION lv_funcname

EXPORTING

input = <ls_so>-low

IMPORTING

output = <ls_so>-low.

ENDIF.

ENDLOOP.

DATA lt_cond TYPE TABLE OF mcondition.

CALL FUNCTION 'CRS_CREATE_WHERE_CONDITION'

TABLES

ti_range = lt_sopt

to_cond = lt_cond

EXCEPTIONS

invalid_input = 1

OTHERS = 2.

IF sy-subrc <> 0.

* Implement suitable error handling here

ENDIF.

SELECT * FROM marc UP TO 100 ROWS INTO TABLE @et_entityset WHERE (lt_cond) .

JS часть

Представление

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" controllerName="zmd_app.view1">
	<Page title="Title">
		<content>
				<Panel height="50%" width="100%"> <content>
				<Table xmlns="sap.m" mode="SingleSelectMaster" itemPress="OnClick" noDataText="Drop column list items here and columns in the area above" id="HeaderTab" headerDesign="Plain" >
		            	<items>
		                	<ColumnListItem id="template1" selected="true" press="OnClick" type="Active">
		                    	<cells>
		                        	<Text text="{Matnr}" id="__text5"/>
		                        	<Text text="{Meins}" id="__text6"/></cells>
		                	</ColumnListItem>
		                </items>
		            		<columns>
		            			<Column id="__column0">
		                    		<header>
		                        		<Label text="Материал" id="__label0"/>
		                    		</header>
		                		</Column>
		                		<Column id="__column1">
		                    		<header>
		                        		<Label id="__label1" text="ЕИ"/>
		                    		</header>
		                		</Column>
		                	</columns>
		            </Table>
				</content></Panel>
					
		        <Panel height="50%" width="100%"> <content>
		         <Table showNoData="false" xmlns="sap.m" noDataText="" headerDesign="Plain">
		            		<columns>
		            			<Column >
		                    		<header>
		                        		<Label text="Материал" maxLines="0" />
		                    		</header>
		                		</Column>
		                		<Column>
		                    		<header>
		                        		<Label text="Завод" maxLines="0"/>
		                    		</header>
		                		</Column>
		                	</columns>
		            </Table>
		            
				<ScrollContainer vertical="true" focusable="true" height="95%">
					<Table items="{}" showNoData="false" xmlns="sap.m" noDataText="Drop column list items here and columns in the area above" id="ItemsTab" headerDesign="Plain">
					 

		            	<items>
		                	<ColumnListItem id="template2" counter="0"  >
		                    	<cells>
		                        	<Text text="{Matnr}"/>
		                        	<Text text="{Werks}"/></cells>
		                	</ColumnListItem>
		                </items>

		            		<columns>
		            			<Column >
		                    		<header>
<!-- 		                        		<Label text="Материал" maxLines="0" /> -->
		                    		</header>
		                		</Column>
		                		<Column>
		                    		<header>
<!-- 		                        		<Label text="Завод" maxLines="0"/> -->
		                    		</header>
		                		</Column>
		                	</columns>
		            </Table>
		         </ScrollContainer>
				</content></Panel>
			
		</content>
	</Page>
</core:View>

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" controllerName="zmd_app.view1">

<items>

<cells>

</ColumnListItem>

</items>

</header>

</Column>

</header>

</Column>

</columns>

</Table>

</content></Panel>

</header>

</Column>

</header>

</Column>

</columns>

</Table>

<items>

<cells>

</ColumnListItem>

</items>

</header>

</Column>

</header>

</Column>

</columns>

</Table>

</ScrollContainer>

</content></Panel>

</content>

</Page>

</core:View>

Очень важный момент :

Для того, чтобы можно было корректно изменять данные в модели позиций, таблицу нужно забиндить с пустым значением items

<Table items=”{}” />

Далее в контроллере.

Назначаем модели данных, биндим. И при необходимости используем фильтры.

sap.ui.controller("zmd_app.view1", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf zmd_app.view1
*/
	onInit: function() {

	    var sUrl = "http://host:port/sap/opu/odata/SAP/servicename/";
		var oModel = new sap.ui.model.odata.ODataModel(sUrl, false);
		var oJsonModelHdr = new sap.ui.model.json.JSONModel();
		oModel.read("/PRODUCT?", null, null, false, function(oData, response){
			oJsonModelHdr.setData(oData); 
		 });
		  
		var oTable = this.byId("HeaderTab");
		oTable.setModel(oJsonModelHdr);
		
		
		var oFilters = [ new sap.ui.model.Filter("Matnr", sap.ui.model.FilterOperator.EQ, "1008970") ];
//		oTable.bindItems("/results", this.byId("template1"), null, oFilters );
		oTable.bindItems("/results", this.byId("template1"), null, null );
		
		
		var oJsonModelItm = new sap.ui.model.json.JSONModel();
					
		var oTableItems = this.byId("ItemsTab");
		oTableItems.setModel(oJsonModelItm);
//		
		oTableItems.bindItems("/results", this.byId("template2"), null, null);
	},
	
	//Get Marc Positions
	OnClick: function(evt) {
		
		//Get Matnr
		var oItems = this.byId("HeaderTab").getSelectedItems();
		
		if (oItems.length !== 1) { return; }
		
		var Matnr = oItems[0].getBindingContext().getProperty("Matnr");

		//Refresh Model Data
		var oTableItems = this.byId("ItemsTab");
		var oTemplate = this.byId("template2");
		
		var ItemModel = this.byId("ItemsTab").getModel();
		
		var sUrl = "http://host:port/sap/opu/odata/SAP/servicename/";
		var oModel = new sap.ui.model.odata.ODataModel(sUrl, false);
		
		oModel.read("/MARC?", {
			context: null,
			urlParameters: null,
			async: true,
			filters: [
				new sap.ui.model.Filter("Matnr", "EQ", Matnr)
			],
			success: function(oData) {
				ItemModel.setData(oData);
			}
		});
		
	}


});

sap.ui.controller("zmd_app.view1", {

/**

* Called when a controller is instantiated and its View controls (if available) are already created.

* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.

* @memberOf zmd_app.view1

onInit: function() {

var sUrl = "http://host:port/sap/opu/odata/SAP/servicename/";

var oModel = new sap.ui.model.odata.ODataModel(sUrl, false);

var oJsonModelHdr = new sap.ui.model.json.JSONModel();

oModel.read("/PRODUCT?", null, null, false, function(oData, response){

oJsonModelHdr.setData(oData);

});

var oTable = this.byId("HeaderTab");

oTable.setModel(oJsonModelHdr);

var oFilters = [ new sap.ui.model.Filter("Matnr", sap.ui.model.FilterOperator.EQ, "1008970") ];

// oTable.bindItems("/results", this.byId("template1"), null, oFilters );

oTable.bindItems("/results", this.byId("template1"), null, null );

var oJsonModelItm = new sap.ui.model.json.JSONModel();

var oTableItems = this.byId("ItemsTab");

oTableItems.setModel(oJsonModelItm);

oTableItems.bindItems("/results", this.byId("template2"), null, null);

//Get Marc Positions

OnClick: function(evt) {

//Get Matnr

var oItems = this.byId("HeaderTab").getSelectedItems();

if (oItems.length !== 1) { return; }

var Matnr = oItems[0].getBindingContext().getProperty("Matnr");

//Refresh Model Data

var oTableItems = this.byId("ItemsTab");

var oTemplate = this.byId("template2");

var ItemModel = this.byId("ItemsTab").getModel();

var sUrl = "http://host:port/sap/opu/odata/SAP/servicename/";

var oModel = new sap.ui.model.odata.ODataModel(sUrl, false);

oModel.read("/MARC?", {

context: null,

urlParameters: null,

async: true,

filters: [

new sap.ui.model.Filter("Matnr", "EQ", Matnr)

success: function(oData) {

ItemModel.setData(oData);

}

});

}

});