Web Ide SAPUI5 use of match-code/dropdown list

[former_member202213]

Hi Everyone,

I'm currently facing the following issue.

on my root view, I've got a dropdown list.

here is the xml of my view :

<mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:cd="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" controllerName="Oa_solaire_C13.Oa_solaire_C13.controller.Vue_accueil" displayBlock="true">
	<App id="idAppControl">
		<pages>
			<Page xmlns:action="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" title="{i18n>title}">
				<content>
				    <sap.ui.layout.form:Form xmlns:sap.ui.layout.form="sap.ui.layout.form" xmlns:action="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" editable="true" id="form0" validateFieldGroup="action" action:wiring="\{'validateFieldGroup':\{'navigation':\{'routeName':'View_form1'\}\}\}" width="400px">
				        <sap.ui.layout.form:formContainers>
				            <sap.ui.layout.form:FormContainer title="Choix du type de contrat à souscrire" id="container0">
				                <sap.ui.layout.form:formElements>
				                    <sap.ui.layout.form:FormElement label="Flux/Libellé" id="element0">
				                        <sap.ui.layout.form:fields>
				                            <Select xmlns="sap.m" id="select0" action:wiring="\{'validationSuccess':\{'navigation':\{'routeName':'View_form1'\}\}\}" validationSuccess="action" selectedKey="{TypeFlux}" items="{/ZisuRTypeFluxSet}">
				                                <items>
				                                    <core:Item xmlns:core="sap.ui.core" text="{TypeFlux}/{Designation}" id="item0" key="{TypeFlux}/{Designation}"/>
				                                    </items>
				                            </Select>
				                        </sap.ui.layout.form:fields>
				                    </sap.ui.layout.form:FormElement>
				                </sap.ui.layout.form:formElements>
				            </sap.ui.layout.form:FormContainer>
				        </sap.ui.layout.form:formContainers>
				        <sap.ui.layout.form:layout>
				            <sap.ui.layout.form:ResponsiveGridLayout id="layout0"/>
				        </sap.ui.layout.form:layout></sap.ui.layout.form:Form>
				    <Button xmlns="sap.m" text="Afficher le formulaire du flux sélectionné" id="button0" icon="sap-icon://accept" press="Open_form"/>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

in the controler i'm retrieving the value chosen in the drop list in field {TypeFlux}/{Designation}

here is how I retrieve the data :

		Open_form: function (oEvent) {
			//This code was generated by the layout editor.
			var selectValue = this.getView().byId("select0").getSelectedKey();
			var selectFlux = selectValue.split("/");
			debugger;// eslint-disable-line
			// Now Get the Router Info
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			// Tell the Router to Navigate To Route_PODetail which is linked to V_PODetail view


			switch (selectFlux[0])
			{
			case "C13":
				oRouter.navTo("View_form1", {
					SelectedItem: selectFlux[1]
				});
				break;
			case "S17":
				// Get Property of the Clicked Item. i.e. PO number of the item which was clicked
				//var selectPO = oEvent.getSource().getBindingContext().getProperty("Description");
				oRouter.navTo("View_form2", { SelectedItem: selectFlux[1]});
				break;
			}
		}

As you can see i'm trying to navigate from the root view to 2 different views depending on the value chosen.

until this step everything works fine.

i'm using standard routes to go to either view :

			"routes": [{
				"name": "Vue_accueil",
				"pattern": "",
				"titleTarget": "",
				"greedy": false,
				"target": ["Vue_accueil"]
			}, {
				"name": "View_form1",
				"pattern": "PatternView1",
				"titleTarget": "",
				"greedy": false,
				"target": ["View_form1"]
			}, {
				"name": "View_form2",
				"pattern": "PatternView2{SelectedItem}",
				"titleTarget": "",
				"greedy": false,
				"target": ["View_form2"]
			}],
			"targets": {

as far as I know, even if my two views are much alike, i have to define different patterns for my code to work.

what I'm trying to do is to use selected designation and pass it by content to the next view.

for example first value in my droplist is C13/DESIGNATION1.

i'm using C13 value to choose my routing.

and I want corresponding designation to be the title of View_form1.

if second value is choosen, I want DESIGNATION2 to be the title of View_form2.

i'm using that to pass context :

oRouter.navTo("View_form1", { SelectedItem: selectFlux[1]});

but how to retrieve it in view 1 using routing ?

thanks in advance.

kind regards,

Jean-François.

[maheshpalavalli · Accepted solution]

Hi Jean, In the second view controller, you need to register for pattern matched event and in the event handler, you can get all the arguments that you are passing from he view1.

For better understanding you can see the below walkthrough example with code.

https://ui5.sap.com/#/topic/f96d2522a5ca4382a274ae3c6d002ca0

_onRouteMatched :function(oEvent){var oArgs, oView;
			oArgs = oEvent.getParameter("arguments");

[maheshpalavalli · Accepted solution]

Your are most welcome Jean.. as you are new to ui5, I would suggest you to go through the walkthrough section in UI5 developer guide as many times as possible.. it will.help you a lot 🙂

Br,

Mahesh

[former_member202213]

Hi Mahesh,

thanks to your link and a little search, I found the solution.

i needed a binding but only for displaying my data since second screen is not attached to first in oData because I don't need it.

what i've done :

in the event on clic over the button :

				oRouter.navTo("View_form1", {
					SelectedItem: selectFlux[1]
				});

in manifest's routing :

{
				"name": "View_form1",
				"pattern": "ZisuRTypeFluxSet{SelectedItem}",
				"titleTarget": "",
				"greedy": false,
				"target": ["View_form1"]
			}

and finally in the init method of my second view :

var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("View_form1").attachMatched(this._onRouteMatched, this);

		_onRouteMatched: function (oEvent) {
			var oArgs, oView;
						debugger; // eslint-disable-line
			oArgs = oEvent.getParameter("arguments");
			oView = this.getView().byId("page0");
			oView.setTitle(oArgs.SelectedItem);
}

thanks to that the title collected in my first view is successfully displayed on the second view.

thank you very much.

Kind Regards