Auto populate data with ref to a value selection

[Dhanasupriya]

Hello

This blog gives an insight of how we can display data based on single selection once the screen is loaded. We can also perform changes and do the post based on our requirement.

Code in neo-app.json and manifest.json files for the service call.

This blog's moto is to view the details with reference to a unique value selection.

Used this service for my demo: https://services.odata.org/V2/Northwind/Northwind.svc/Orders?$expand=Order_Details

App details: On screen load, calling a fragment. Once the Order ID is selected from the drop-down, i am filling all other values.

Changes implemented: 

view.xml:

<mvc:View controllerName="practise.Data_AutoFill.controller.View1" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form"

	xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m">

	<VBox class="sapUiSmallMargin" alignItems="Center" justifyContent="Center">

		<f:SimpleForm editable="true" layout="ResponsiveGridLayout" labelSpanXL="4" labelSpanL="3" labelSpanM="4" labelSpanS="12"

			adjustLabelSpan="false" emptySpanXL="0" emptySpanL="4" emptySpanM="0" emptySpanS="0" columnsXL="2" columnsL="1" columnsM="1"

			singleContainerFullSize="false" ariaLabelledBy="Title1">

			<f:toolbar>

				<Toolbar>

					<ToolbarSpacer/>

					<Title text="{i18n>title}" level="H4" titleStyle="H4"/>

					<ToolbarSpacer/>

					<Button icon="sap-icon://journey-change" press="onFill"/>

				</Toolbar>

			</f:toolbar>

			<f:content>

				<Label text="Postal Code" design="Bold"/>

				<Text text="{oModel>/0/ShipPostalCode}"/>

				<Label text="Customer ID" design="Bold"/>

				<Text text="{oModel>/0/CustomerID}"/>

				<Label text="Address" design="Bold"/>

				<Text text="{oModel>/0/ShipAddress}"/>

				<Label text="Country" design="Bold"/>

				<Text text="{oModel>/0/ShipCountry}"/>

				<Label text="Freight" design="Bold"/>

				<Text text="{oModel>/0/Freight}"/>

				<Label text="City" design="Bold"/>

				<Text text="{oModel>/0/ShipCity}"/>

			</f:content>

		</f:SimpleForm>

	</VBox>

</mvc:View>

controller.js:

sap.ui.define([

	"sap/ui/core/mvc/Controller",

	"sap/ui/model/json/JSONModel"

], function (Controller, JSONModel) {

	"use strict";

	return Controller.extend("practise.Data_AutoFill.controller.View1", {



		onInit: function () {

			this.onFill();

			this.serviceCall();

		},



		onFill: function () {

			if (!this._fillDialog) {

				this._fillDialog = sap.ui.xmlfragment("practise.Data_AutoFill.Fragment.DataFill", this);

				this.getView().addDependent(this._fillDialog);

			}

			this._fillDialog.open();

		},



		serviceCall: function () {

			var that = this;

			this.getOwnerComponent().getModel().read("/Orders", {

				urlParameters: {

					$expand: "Order_Details"

				},

				success: function (oData, oResponse) {

					var oModel_order = new JSONModel();

					oModel_order.setData(oData);

					that.getView().setModel(oModel_order, "oModel_order");

					that.getView().getModel("oModel_order").refresh();

				}

			});

		},



		onChange: function (oEvent) {

			var orderID = oEvent.getParameter("value");

			var oModelData = this.getView().getModel("oModel_order").getData().results;

			var itemDetails = [];

			for (var i = 0; i < oModelData.length; i++) {

				if (orderID === oModelData[i].OrderID.toString()) {

					itemDetails.push(oModelData[i]);

				}

			}

			var oModel = new JSONModel();

			oModel.setData(itemDetails);

			this.getView().setModel(oModel, "oModel");

			this.getView().getModel("oModel").refresh();

			this.onCancelPress();

		},



		onCancelPress: function () {

			this._fillDialog.close();

		}



	});

});

fragment.xml:

<core:FragmentDefinition xmlns:f="sap.ui.layout.form" xmlns:cm="sap.ui.commons" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core"

	xmlns="sap.m">

	<Dialog class="sapUiNoContentPadding sapUiSizeCompact" stretchOnPhone="true" showHeader="false" contentWidth="auto" resizable="true"

		type="Standard">

		<subHeader>

			<Bar>

				<contentMiddle>

					<Label text="Basic Info" design="Bold" class="MasterData_Title"/>

				</contentMiddle>

			</Bar>

		</subHeader>

		<content>

			<f:SimpleForm editable="false" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12"

				adjustLabelSpan="false" emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"

				singleContainerFullSize="false">

				<f:content>

					<Label text="Order ID" design="Bold"/>

					<ComboBox width="100%" items="{path:'oModel_order>/results'}" id="itemId" change="onChange">

						<core:Item key="{oModel_order>OrderID}" text="{oModel_order>OrderID}"/>

					</ComboBox>

					<Label text="Customer ID" design="Bold"/>

					<Text text="{oModel>/0/CustomerID}"/>

				</f:content>

			</f:SimpleForm>

		</content>

	</Dialog>

</core:FragmentDefinition>

Screen Details:

With reference to selected Order, defaulted other fields information.



On click of below button, we can change the order and view the respective data.



As users are much delighted to see/modify the info on minimal clicks, this can be an approach.

Please don't hold on to comment.. 😛

Thank you !! 🙂