웹 뷰어에서 JavaScript를 사용하여 스크립트하기

JavaScript를 사용하여 웹 뷰어 내에서 작업을 수행할 수 있습니다. 예를 들어 자신만의 사용자 인터페이스 제어를 만들거나 타사 JavaScript 라이브러리를 통해 대화식 캘린더를 표시하거나 차트를 그릴 수 있습니다. 하나의 웹 뷰어에서 JavaScript와 FileMaker 스크립트를 사용하여 서로 호출하고 정보를 전달할 수도 있습니다. 예를 들어 사용자가 웹 뷰어의 대화식 캘린더에 이벤트를 만들 때 JavaScript는 FileMaker 스크립트를 호출하여 각 이벤트에 대한 레코드를 생성할 수 있습니다.

웹 뷰어의 JavaScript에서 FileMaker 스크립트로

웹 뷰어에서 웹 페이지가 완전히 로드되면 JavaScript에서 다음 함수 중 하나를 호출하여 현재 파일에서 FileMaker 스크립트를 실행할 수 있습니다.

복사 
FileMaker.PerformScriptWithOption(스크립트, 매개 변수, 옵션);

// 동작은 option = "0"일 때 위와 같습니다.
FileMaker.PerformScript(스크립트, 매개 변수);

여기에서 정의는 다음과 같습니다.

  • 스크립트는 FileMaker 스크립트의 이름이 포함된 문자열이며, 대소문자를 구분하지 않습니다.

  • 매개 변수는 JavaScript가 FileMaker 스크립트에 전달할 수 있는 선택적 문자열로, Get(스크립트 매개 변수) 함수를 사용하여 얻을 수 있습니다.

  • option은 현재 실행 중인 FileMaker 스크립트를 처리하는 방법을 제어하는 FileMaker.PerformScriptWithOption() 함수의 선택적 매개 변수입니다(새로운 스크립트 시작 시 현재 스크립트 처리 옵션 참조).

예를 들어 FileMaker 스크립트를 호출하는 JavaScript 함수는 다음과 같습니다.

복사 
function performFileMakerScript() {
    FileMaker.PerformScriptWithOption("FileMaker 스크립트 이름", "선택적 매개 변수", "3");
}

FileMaker.PerformScriptWithOption() 함수는 비동기식으로 작동하는데, 이는 이 함수가 FileMaker 스크립트가 완료될 때까지 기다리지 않기 때문입니다. 따라서 FileMaker 스크립트는 이를 호출한 FileMaker.PerformScriptWithOption() 함수에 값을 반환하지 않습니다.

FileMaker.PerformScriptWithOption() 함수가 실행되는 시점에 FileMaker 스크립트는 현재 문맥에서 실행됩니다. 따라서 JavaScript 실행이 시작되었더라도 FileMaker.PerformScriptWithOption() 함수가 호출되기 전에 문맥이 변경되면 FileMaker 스크립트가 새 문맥에서 실행됩니다. 예를 들어 일부 상황에서는 그 사이 사용자나 스크립트가 다른 레이아웃이나 레코드로 이동할 수 있습니다. 이러한 가능성에 대처하기 위해 FileMaker.PerformScriptWithOption() 함수는 선택적 매개 변수를 사용하여 FileMaker 스크립트가 작업해야 하는 레코드의 레이아웃 및 레코드 ID 또는 기본 키와 같은 문맥 정보를 전달할 수 있습니다.

FileMaker 스크립트에서 웹 뷰어의 JavaScript로

웹 뷰어에서 JavaScript 실행 스크립트 단계는 FileMaker 스크립트에서 JavaScript 함수를 호출하고 선택적 매개 변수를 전달할 수 있습니다. 웹 뷰어에서 JavaScript 실행 스크립트 단계를 참조하십시오.

예제

이 예제에서는 웹 뷰어에서 간단한 사용자 인터페이스 요소를 만들고, 해당 값을 FileMaker 테이블에 저장된 요소로 설정하며, 사용자가 웹 뷰어에서 값을 변경하고, 새로운 값을 FileMaker 테이블로 다시 제출하는 방법을 보여줍니다.

  1. 다음과 같은 텍스트 필드를 사용하여 웹 양식이라는 이름의 테이블을 생성합니다.

    • 웹 뷰어 출처(전역 저장 장치 사용)

    • 이름

    • 등급

    • 색상

    데이터베이스 테이블 정의하기 및 필드 정의 및 변경하기를 참조하십시오.

  2. 웹 양식을 기반으로 한 레이아웃에서 다음을 통해 웹 뷰어를 추가합니다.

    • 웹 주소 웹 양식::웹 뷰어 출처

    • 웹 뷰어 콘텐츠와 상호 작용 허용 선택

    • FileMaker 스크립트 수행에 JavaScript 허용 선택

    • 대상체 이름 웹 뷰어

    레이아웃에서 웹 뷰어 작업하기 및 대상체 이름 지정하기를 참조하십시오.

  3. 같은 레이아웃에 대해 1단계에서 각 필드에 대한 필드 대상체를 추가합니다.

    레이아웃에서 필드 배치 및 제거하기를 참조하십시오.

  4. 탐색 모드에서 레코드를 추가합니다.

    레코드 추가, 복제 및 삭제하기를 참조하십시오.

  5. 웹 양식::웹 뷰어 출처 필드에서 다음 데이터 URL을 입력합니다.

    복사 
    data:text/html,
    <html>
        <head>
            <style>
                div { padding-bottom: 0.5em; }
            </style>
        </head>

        <body>
            <div>
                <label for="name">이름:<br></label>
                <input id="name" type="text" value="default">
            </div>
            <div>
                <label for="rating">등급:<br></label>
                0 <input id="rating" type="range" min="0" max="10"> 10
            </div>
            <div>
                <label for="color">색상:<br></label>
                <input id="color" type="color">
            </div>
            <button onclick="submitForm()">승인</button>
        </body>

        <script>
            function submitForm() {
                var name = document.getElementById("name").value;
                var rating = document.getElementById("rating").value; 
                var color = document.getElementById("color").value;
                var param = name + '\n' + rating + '\n' + color;
                FileMaker.PerformScriptWithOption(
                    "웹 양식에서 데이터 저장", param, "0"
                ); 
            }

            function setUserData(name, rating, color) {
                document.getElementById("name").value = name; 
                document.getElementById("rating").value = rating; 
                document.getElementById("color").value = color;
            } 
        </script>
    </html>

    이 데이터 URL은 웹 뷰어가 표시될 때마다 로드되는 HTML 및 JavaScript를 제공합니다. 웹 페이지에는 텍스트 필드의 이름, 슬라이더로 선택한 0~10까지의 등급, 팝업 색상 선택 화면에서 선택한 색상 및 제출 버튼이 있는 간단한 양식이 표시됩니다.

  6. 스크립트 작업공간에서 웹 뷰어에서 사용자 데이터 설정이라는 이름의 스크립트를 생성합니다.

    복사 
    스크립트 일시 정지/다시 시작 [ 기간(초): .001 ]
    웹 뷰어에서 JavaScript 실행 [ 대상체 이름: "웹 뷰어" ; 
        함수 이름: "setUserData" ; 
        매개 변수: 웹 양식::이름, 웹 양식::등급, 웹 양식::색상 ]

    스크립트 생성 및 편집하기를 참조하십시오.

    FileMaker WebDirect에서 잠시 일시 정지하면 웹 뷰어에서 setUserData JavaScript 함수를 호출하기 전에 웹 뷰어가 웹 페이지 로드를 완료할 수 있습니다. 상태 툴바에서 "스크립트가 일시 정지됨" 메시지를 숨기려면 툴바 보기/가리기 스크립트 단계를 사용하면 됩니다.

  7. 웹 양식에서 데이터 저장이라는 이름의 스크립트를 생성합니다.

    복사 
    변수 설정 [ $jsParameters; 값: Get(스크립트 매개 변수) ]
    필드 설정 [ 웹 양식::이름; GetValue ( $jsParameters ; 1 ) ]
    필드 설정 [ 웹 양식::등급; GetValue ( $jsParameters ; 2 ) ]
    필드 설정 [ 웹 양식::색상; GetValue ( $jsParameters ; 3 ) ]

    사용자가 웹 뷰어에서 제출 버튼을 클릭하면 웹 양식에 설정된 값이 웹 양식 테이블의 필드에 저장됩니다.

  8. 레이아웃 모드에서 6단계의 웹 뷰어 스크립트에서 사용자 데이터 설정을 실행하는 OnRecordLoad 및 OnRecordCommit스크립트 트리거를 추가하여 필드 데이터가 변경될 때 웹 뷰어를 업데이트하도록 합니다.

    버튼 정의 또는 변경하기 및 레이아웃에 대한 스크립트 트리거 설정하기를 참조하십시오.

탐색 모드에서 웹 양식의 값을 설정하고 제출 버튼을 클릭하여 예제를 시도합니다. 이제 이름, 등급 및 색상 필드의 값이 웹 양식에서 설정한 값과 일치해야 합니다. 아니면 레코드가 커밋될 때 필드 데이터에 대한 변경 사항이 웹 뷰어에 표시됩니다.

참고 

  • FileMaker 스크립트를 수행하도록 웹 뷰어를 설정할 때 FileMaker 스크립트 수행에 JavaScript 허용 옵션을 선택해야 합니다. 레이아웃에서 웹 뷰어 작업하기를 참조하십시오. 보안상의 이유로 이 옵션을 선택하지 않은 경우, FileMaker.PerformScriptWithOption() 함수는 아무것도 하지 않습니다.

  • FileMaker WebDirect는 보안을 위해 웹 브라우저에서 동일한 출처 정책의 적용을 받으므로, 웹 뷰어의 JavaScript와 FileMaker 스크립트는 웹 뷰어의 웹 페이지가 FileMaker WebDirect 웹 페이지와 출처가 동일한 경우에만 서로 호출할 수 있습니다. 웹 페이지의 출처는 URL 스키마, 호스트 이름 및 포트입니다.

  • FileMaker WebDirect에서 웹 뷰어에 대해 지정된 HTML은 위의 예제와 같이 "data:text/html,"로 시작해야 합니다. 그렇지 않으면 FileMaker.PerformScriptWithOption() 함수 호출이 실패합니다.