클라이언트 API 양식, 탭 및 섹션

Power Pages 클라이언트 API 양식, 탭, 섹션 및 컨트롤을 사용하여 페이지 요소를 검사하고 관리합니다. 이 참조에서는 표시 유형, 값 및 다중 단계 탐색을 제어하는 데 사용할 수 있는 컬렉션, 속성 및 메서드에 대해 설명합니다.

$pages.currentPage.forms

컬렉션에는 $pages.currentPage.forms 페이지의 양식 요소로 작업하는 메서드가 포함되어 있습니다.

$pages.currentPage.forms 메서드

이러한 메서드를 사용하여 양식을 나열하고 특정 양식 인스턴스를 가져옵니다.

메서드	Returns	Description
getAll	IForm[]	현재 페이지에 추가된 모든 양식을 반환합니다.
getFormById(id: string)	IForm	HTML 요소 ID로 폼을 검색합니다.
getFormByName(name: string)	IForm	이름으로 폼을 검색합니다.

$pages.currentPage.forms 메서드 예제

다음 예제에서는 모든 양식을 가져오고 ID 또는 이름으로 특정 양식을 검색하는 방법을 보여 줍니다.

Microsoft.PowerPages.onPagesClientApiReady(async function ($pages) {
    let forms = $pages.currentPage.forms.getAll();
    let form1 = $pages.currentPage.forms.getFormById('form_#1');
    let form2 = $pages.currentPage.forms.getFormByName('form_name')
});

IForm 인터페이스

인터페이스는 IForm 컨트롤 및 탭에 대한 컨테이너를 나타냅니다.

IForm 속성

다음 속성은 양식과 포함된 컨트롤 및 탭에 대해 설명합니다.

재산	Type	Description
id	string	양식의 ID입니다.
name	string	양식의 이름입니다.
controls	제어[]	폼의 모든 컨트롤입니다.
tabs	탭[]	양식의 모든 탭입니다.
isMultiStep	부울	양식이 다중 단계이면 True이고, 그렇지 않으면 false입니다. 다중 단계 양식을 참조하세요.

IForm 메서드

이러한 메서드를 사용하여 폼의 표시 여부를 쿼리하고 표시 여부를 전환합니다.

메서드	Returns	Description
getVisible	boolean	폼이 표시되면 true를 반환합니다. 그렇지 않으면 false입니다.
setVisible(isVisible: boolean)	void	폼의 표시 유형을 설정합니다.
getHtmlElement	HTMLElement	폼의 기본 HTML 요소를 반환합니다.
getControlByLogicalName(logicalName: string)	컨트롤(Control) | undefined	열 스키마 이름과 같이 지정한 논리 이름이 있는 폼의 컨트롤을 반환합니다. 일치하는 컨트롤이 없는 경우 정의되지 않은 값을 반환합니다.

IForm 예제

다음 예제에서는 ID별로 폼을 검색하고 표시 유형, 컨트롤 수 및 탭을 기록합니다.

Microsoft.PowerPages.onPagesClientApiReady(async function ($pages) {
    let form = $pages.currentPage.forms.getFormById('form_#1');

    console.log(`Form id: ${form.id} has ${form.controls.length} controls.`);

    if (form.getVisible()) {
        console.log('Form is currently visible.');
    }
    let tabs = form.tabs;
    console.log(`Form has ${tabs.length} tabs.`);

    // Look up a control by its logical name.
    let nameControl = form.getControlByLogicalName('fullname');
    if (nameControl) {
        nameControl.setValue('Jane Doe');
    }
});

다단계 양식

다중 단계 양식은 여러 기본 양식을 포함하는 컨테이너입니다.

다중 단계 양식 속성

다음 속성은 다중 단계 양식 컨테이너에 적용되며 현재 활성 단계에서 사용할 수 있는 내용을 설명합니다.

재산	Type	Description
id	string	다중 단계 양식의 ID입니다.
controls	제어[]	현재 단계의 모든 컨트롤입니다.
tabs	탭[]	현재 단계의 모든 탭.
isMultiStep	부울	양식이 다중 단계이면 True이고, 그렇지 않으면 false입니다.
nextButton	JQuery 요소	다음 단추(없는 경우 빈 개체)를 나타냅니다.
previousButton	JQuery 요소	이전 단추를 나타냅니다(없는 경우 빈 개체).

다중 단계 양식 메서드

이러한 메서드를 사용하여 가시성을 확인하고 다단계 형식의 단계 간을 이동합니다.

Name	Returns	Description
getVisible	boolean	폼이 표시되면 true를 반환합니다. 그렇지 않으면 false입니다.
setVisible(isVisible: boolean)	void	폼의 표시 유형을 설정합니다.
hasNextStep	boolean	다음 단계가 있으면 true를 반환합니다. 그렇지 않으면 false입니다.
hasPreviousStep	boolean	이전 단계가 있으면 true를 반환합니다. 그렇지 않으면 false입니다.
goToNextStep	void	다음 단계로 이동합니다. 다음 단계가 없으면 양식을 제출합니다.
goToPreviousStep	void	이전 단계로 이동합니다. 가 없으면 예외를 throw합니다.
getControlByLogicalName(logicalName: string)	컨트롤(Control) | undefined	열 스키마 이름과 같이 지정한 논리 이름을 포함하는 현재 단계의 컨트롤을 반환합니다. 일치하는 컨트롤이 없는 경우 정의되지 않은 값을 반환합니다.

다중 단계 양식 예제

이 예제에서는 다단계 폼을 검색하고 검사한 다음 다음 단계로 진행하는 방법을 보여 드립니다.

Microsoft.PowerPages.onPagesClientApiReady(async function ($pages) {
    let form = $pages.currentPage.forms.getFormById('multiform_#1');
    console.log(`Form id: ${form.id} has ${form.controls.length} controls.`);

    if (form.getVisible()) {
        console.log('Form is currently visible.');
    }

    let tabs = form.tabs;
    console.log(`Form has ${tabs.length} tabs.`);

    form.goToNextStep();
});

Tab

양식 Tab 에 하나 이상의 섹션이 포함되어 있습니다.

Tab Sections 속성

탭 내의 섹션 배열입니다.

Tab 메서드

이러한 메서드를 사용하여 탭의 표시 여부를 확인하고, 해당 이름을 검색하고, 표시되는지 여부를 전환합니다.

메서드	Returns	Description
getVisible	boolean	탭이 표시되면 true를 반환합니다. 그렇지 않으면 false입니다.
getName	string	탭의 이름을 반환합니다.
setVisible(isVisible: boolean)	void	탭의 표시 유형을 설정합니다.

Tab 예제

다음은 폼을 검색하고, 해당 탭을 열거하고, 첫 번째 탭의 이름을 기록하는 예제입니다.

Microsoft.PowerPages.onPagesClientApiReady(async function ($pages) {
    let form = $pages.currentPage.forms.getFormById('form_#1');
    let tabs = form.tabs;
    console.log(`Form has ${tabs.length} tabs.`);
    console.log(`First tab is named: ${tabs[0].getName()}`);
});

섹션

섹션은 탭 내의 컨트롤을 그룹화합니다.

Section Controls 속성

섹션 내의 컨트롤 배열입니다 .

섹션 메서드

이러한 메서드를 사용하여 섹션의 이름을 읽고 표시 유형을 제어합니다.

메서드	Returns	Description
getVisible	boolean	구역이 표시되면 true를 반환합니다. 그렇지 않으면 false입니다.
getName	string	섹션 이름을 반환합니다.
setVisible(isVisible: boolean)	void	섹션의 표시 유형을 설정합니다.

섹션 예제

다음은 폼의 첫 번째 탭에서 섹션을 검색하고 기본 세부 정보를 기록하는 예제입니다.

Microsoft.PowerPages.onPagesClientApiReady(async function ($pages) {
    let form = $pages.currentPage.forms.getFormById('form_#1');
    let sections = form.tabs[0].sections;
    console.log(`Tab has ${sections.length} section(s).`);
    console.log(`First section is named: ${sections[0].getName()}`);
});

제어

A Control 는 개별 양식 요소를 나타냅니다. 공용 제어 메서드를 사용하여 값, 표시 유형, 필수 상태 및 비활성화된 상태를 검색하거나 업데이트하고 클라이언트 쪽 유효성 검사를 추가합니다. 값 형식 및 추가 멤버는 컨트롤 형식에 따라 달라집니다.

관련 정보

• 클라이언트 API 개요
• 클라이언트 API 예제