단계 4: 구성요소에 새 속성 표시

이 섹션이 끝나면 설정 패널에 새 속성 값을 입력하고 새 값이 반영되도록 사용자정의 구성요소가 변경되는 것을 확인할 수 있습니다. 속성 업데이트도 페이지와 함께 자동으로 저장됩니다.

render.js 파일에서 구성요소의 두 JavaScript 객체를 업데이트해야 합니다.

render.js를 편집하고 새 속성을 포함하도록 SampleComponentViewModel 구성요소를 업데이트합니다. 이 속성을 변경합니다.

self.showStoryLayout = ko.observable();

다음을 대신 사용합니다.

self.showStoryLayout = ko.observable();
self.imageBannerText = ko.observable();

값 변경사항을 가져오도록 SampleComponentViewModel을 업데이트합니다. 이 속성을 변경합니다.

self.imageWidth(customData && customData.width);

다음을 대신 사용합니다.

self.imageWidth(customData && customData.width);
self.imageBannerText(customData && customData.imageBannerText);

새 속성을 표시하도록 sampleComponentTemplate를 변경합니다. 이 속성을 변경합니다.

'<div data-bind="text: \'image width is: \' + imageWidth()"></div>' +

다음을 대신 사용합니다.

'<div data-bind="text: imageBannerText"></div>' +

Oracle Content Management 서버와 구성요소를 동기화하거나 업로드합니다.

이제 새 속성을 표시하도록 구성요소를 변경했습니다. 페이지에 인라인 프레임으로 내장된 설정 패널과 달리, 구성요소가 페이지에 직접 삽입되므로 크기가 늘어남에 따라 사용 가능한 영역이 자동으로 증가합니다.

단계 4의 결과 확인

새 속성이 표시되는지 확인하려면 다음과 같이 하십시오.

사이트 작성기가 구성요소의 변경사항을 가져올 수 있도록 사이트의 페이지를 새로고침합니다.
페이지를 편집 모드로 전환합니다.
구성요소를 페이지 위에 끌어 놓습니다.
구성요소에 대해 설정 패널을 불러옵니다.
사용자정의 설정 단추를 누릅니다.
Image Banner를 Workspace로 변경합니다.

이미지 위에 Worksapce가 나타나도록 페이지의 구성요소가 업데이트됩니다.