Skip to Content

SAPUI5 ObjectPageLayout routing and binding

Hi Everyone,

I'm trying the following :

on my View I choose a Extui Id, I want that when opening next View binding exists corresponding to the choosen installation.

Usually when I need to do that, I use routing such as :

"name": "View3",
"pattern": "/DonneesRelevesSet/View3/{G_CC},{G_SA},{G_Extui},{G_Anlage}",
"titleTarget": "",
"greedy": false,
"target": ["View3"]

Next step is to fill parameters when calling route :

		onPressModif: function (oEvent) {
			var oCC = oEvent.getSource().getCells()[0].getText();
			var oSA = oEvent.getSource().getCells()[8].getText();
			var oExtui = oEvent.getSource().getCells()[1].getText();
			var oAnlage = oEvent.getSource().getCells()[12].getText();
			oNavigation.navTo("View3", {
				G_CC: oCC,
				G_SA: oSA,
				G_Extui: oExtui,
				G_Anlage: oAnlage
			});
		},

Nothing extravagant.

with an usual view containing table of forms, it is easy to bind entity in onInit method but in my case, table is not recognized in controller :

onInit: function () {
			// Keeps reference to any of the created sap.m.ViewSettingsDialog-s in this sample
			this._mViewSettingsDialogs = {};
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			if (oRouter) {
				oRouter.getRoute("View3").attachMatched(this._onRouteFound, this);
				oNavigation = sap.ui.core.UIComponent.getRouterFor(this);
			}
		},
		_onRouteFound: function (oEvent) {
			var oArgument = oEvent.getParameter("arguments");
			var sCC = oArgument.G_CC;
			this.byId("LienCC").setText(sCC);
			var sSA = oArgument.G_SA;
			this.byId("SecteurActivite").setText(sSA);
			var sExtui = oArgument.G_Extui;
			this.byId("PDL").setText(sExtui);
			// alimentation données globales
			oPDL = sExtui;
			oSA = sSA;
			oInstallation = oArgument.G_Anlage;
		},

it works with those items but not table. it is certainly due to the fact that my table is in a subsection of view2 :

<layout:VerticalLayout>
				<m:Label text="Compte de contrat confirmé :"/>
				<m:Link text="Dummy" press="LinkCC" id="LienCC"/>
				<m:Label text="Secteur d'activité :"/>
				<m:Label text="Dummy" id="SecteurActivite"/>
			</layout:VerticalLayout>
		</headerContent>
		<sections>
			<ObjectPageSection title="Données du point de comptage" subSections="{DonneesPdlSet>/}">
				<subSections>
					<ObjectPageSubSection title="Point de comptage">
						<blocks>
							<Pdl:InfoPDCBlock id="InfoPDC" columnLayout="3"/>
						</blocks>
					</ObjectPageSubSection>
				</subSections>
			</ObjectPageSection>

corresponding subSections il like this :

<Table noDataText="Pas de données à afficher" id="table1" items="{DonneesPdlSet>/d/results}">
		<headerToolbar>
			<Toolbar>
				<Title text="Infos PDL" level="H1"/>
				<ToolbarSpacer/>
				<Button tooltip="Trier les entrées" icon="sap-icon://sort" press="handleSortButtonPressed"/>
				<Button tooltip="Filtrer les entrées" icon="sap-icon://filter" press="handleFilterButtonPressed"/>
			</Toolbar>
		</headerToolbar>
		<items>
			<ColumnListItem type="Active" id="item0">
				<cells>
					<Link text="{DonneesPdlSet>ExtUi}" press="linkExtUi"/>
					<Link text="{DonneesPdlSet>Haus}" press="linkHaus"/>
</cells>

			</ColumnListItem>
		</items>
		<columns>
			<Column id="column0">
				<header>
					<Label text="PDL" id="label4"/>
				</header>
			</Column>
			<Column id="column1">
				<header>
					<Label text="Object de raccordement" id="label5"/>
				</header>
			</Column>
		</columns>
	</Table>

How may I bind data dynamically to the subsection using selected Extui data ?

I tried this in afterRendering event :

			var oTable = this.byId("table1");
			if (oTable) {
				var oFilter1 = new sap.ui.model.Filter("Extui", FilterOperator.EQ, oPDL);
				var oFilter2 = new sap.ui.model.Filter("Sparte", FilterOperator.EQ, oSA);
				var filters = new sap.ui.model.Filter({
					and: true,
					filters: [
						oFilter1,
						oFilter2
					]
				});
				var binding = oTable.getBinding("items");
				binding.filter(filters);
			}

No problem appears but it doesn't works. Output table is empty.

maybe using index instead of filters ? Json data are like this :

{
	"d": {
		"results": [{
			"ExtUi": "15478954685471",
			"Haus": "6000000007",
			"Vstelle": "5000000032",
			"Sparte": "Gaz",
			"Vertrag": "300000069",
			"Anlage": "4000000063",			
			"HouseNum1": "13",
			"Street": "rue des Rosiers",
			"PostCode1": "27520",
			"City1": "GRAND BOURGTHEROULDE"
		}, {
			"ExtUi": "15478954685471",
			"Haus": "6000000007",
			"Vstelle": "5000000032",
			"Sparte": "Electricité",
			"Vertrag": "300000064",
			"Anlage": "4000000058",			
			"HouseNum1": "13",
			"Street": "rue des Rosiers",
			"PostCode1": "27520",
			"City1": "GRAND BOURGTHEROULDE"
		}]
	}
}
Thanks in advance. 
Add comment
10|10000 characters needed characters exceeded

  • Did you ever find the answer to this question? I need to do something very similar, I'm attempting to bind to an ObjectPageSection with an XML view and a filter to no avail. No, Error it just doesn't work 1.52.11

  • Follow
  • Get RSS Feed

2 Answers

  • Best Answer
    Jun 03 at 12:58 PM

    I succeeded in correcting the issue.

    the problem is the binding subSections="{DonneesPdlSet>/}">

    with that specification, data are not displayed.

    I changed for the following :

    <sections>
    					<ObjectPageSection title="Données du point de comptage" id="Section1">
    						<subSections>
    							<ObjectPageSubSection title="Point de comptage">
    								<blocks>
    									<Pdl:InfoPDCBlock id="InfoPDC" columnLayout="3"/>
    								</blocks>
    							</ObjectPageSubSection>
    						</subSections>
    					</ObjectPageSection>
    </sections>

    And binding is directly in the section of the View :

    <Table noDataText="Pas de données à afficher" id="table1" items="{path: 'DonneesPdlSet>/d/results', sorter : [{path : 'ExtUi', descending: false}]}">
    		<headerToolbar>
    			<Toolbar>
    				<Title text="Infos PDL/PCE" level="H1"/>
    <!--				<ToolbarSpacer/>
    				<Button tooltip="Trier les entrées" icon="sap-icon://sort" press="handleSortButtonPressed"/>
    				<Button tooltip="Filtrer les entrées" icon="sap-icon://filter" press="handleFilterButtonPressed"/>-->
    			</Toolbar>
    		</headerToolbar>
    		<items>
    			<ColumnListItem type="Active" id="item0">
    				<cells>
    					<Link text="{DonneesPdlSet>ExtUi}" press="linkExtUi"/>
    

    Finally DonneesPdlSet is directly declared in manifest and added as a file to the repository :

    			"DonneesPdlSet": {
    				"type": "sap.ui.model.json.JSONModel",
    				"settings": {},
    				"uri": "model/data/DonneesPdlSet.json",
    				"preload": true
    			},
    

    the file is in repository model.data.

    Add comment
    10|10000 characters needed characters exceeded

  • May 03 at 08:39 AM

    Hello,

    Have you tried to use this :

    sap.ui.getCore().byID("table1");

    Regards,

    Joseph

    Add comment
    10|10000 characters needed characters exceeded