Fiori Json 데이터 연결

Updated:

1. Project 생성

STUDYPROJECT03을 만들고, manifest.json 파일가서 VIEW ID를 지워준다. 이 과정은 새로운 프로젝트를 생성할 때 마다 해준다.

image



2. Data binding 버튼 생성

데이터 바인딩 버튼을 하나 생성해준다.

image


image


해당 버튼에 Press event를 걸어 새로운 함수를 추가해준다.

image


View controller로 가서 다음을 넣어준다.

return Controller.extend("STUDYPROJECT03.STUDYPROJECT03.controller.View1", {
		onInit: function () {},
		/**
		 *@memberOf STUDYPROJECT03.STUDYPROJECT03.controller.View1
		 */
		onPress_databind: function (oEvent) {
			//This code was generated by the layout editor.
			var JSONData = {
				initialValue: "Please make your choice:",
				selectedKey: "None",
				data:[{
					key:"A",
					test:"Apple"
				},{
					key:"B",
					test:"Ball"
				},{
					key:"C",
					test:"Cat"
				},{
					key:"D",
					test:"Dog"
				}]
			};
			var oModel = new sap.ui.model.json.JSONModel(JSONData);
			sap.ui.getCore().setModel(oModel);
			
		}

image


combo box 또한 넣어준다. view xml 레이아웃을 사용해도 되고, 직접 타이핑해도 된다.

image

image


지금까지 한 부분을 실행하고 개발자 도구 source에서 확인해보면 다음과 같다.

image


Break-point를 걸어주고 버튼을 눌러 확인해본다.

image


처음에는 undefined, 다시 하니 oModel에 데이터가 담기는 것을 확인할 수 있다. oModel이 코어에 등록되고 잘 작동함을 확인했으니 이제 값을 넣어보도록 한다.

image