Microsoft Dynamics 365에서 JavaScript 사용

아티클
03/04/2017

게시 날짜: 2017년 1월

적용 대상: Dynamics 365 (online), Dynamics 365 (on-premises), Dynamics CRM 2016, Dynamics CRM Online

Microsoft Dynamics 365(온라인 및 온-프레미스)은 JavaScript를 사용할 많은 기회를 제공합니다.Microsoft Dynamics 365에서 사용되는 모든 JavaScript는 JavaScript 웹 리소스를 만들어 추가됩니다. 이 항목에는 JavaScript를 사용하는 개발자를 위한 정보가 있으며 Microsoft Dynamics 365 SDK 및 다른 리소스의 관련 항목에 대한 링크가 포함되어 있습니다.

이 항목의 내용

Microsoft Dynamics 365에서 JavaScript를 사용할 수 있는 영역

jQuery 사용

여러 브라우저에 대해 JavaScript 작성

JavaScript 프로그래밍 유용한 정보

Microsoft Dynamics 365에서 JavaScript 디버깅

Microsoft Dynamics 365에서 JavaScript를 사용할 수 있는 영역

JavaScript를 사용하여 양식 스크립트, 명령 모음(리본) 명령 및 웹 리소스에서 작업을 수행할 수 있습니다.

양식 스크립트

Microsoft Dynamics 365에서 JavaScript를 가장 많이 사용하는 것은 엔터티 양식 이벤트에 대해 함수를 이벤트 처리기로 추가하는 것입니다. 자세한 내용은 Microsoft Dynamics 365 양식용 코드 작성을 참조하십시오.

명령 모음(리본) 명령

Microsoft Dynamics 365 명령 모음을 사용자 지정할 경우 추가할 컨트롤에 대한 명령을 구성할 수 있습니다. 이러한 명령에는 컨트롤 활성화 여부 및 컨트롤을 사용할 때 수행할 작업을 제어하는 규칙이 있습니다. 자세한 내용은 명령 및 리본 사용자 지정을 참조하십시오.

웹 리소스

Microsoft Dynamics 365은 URL을 사용하여 액세스할 수 있는 파일의 이진 표현을 저장하는 조직 담당 엔터티를 제공합니다. 이 파일을 웹 리소스라고 합니다. 몇 가지 유형의 웹 리소스가 있습니다.JavaScript 라이브러리를 나타내는 웹 리소스를 JavaScript 웹 리소스라고 합니다. 웹 페이지(HTML) 웹 리소스를 사용하여 웹 서버에서 파일처럼 JavaScript 라이브러리가 포함된 사용자 인터페이스를 제공할 수 있습니다. 이러한 파일은 Microsoft Dynamics 365의 일부이므로 파일에 액세스하는 사용자가 이미 인증되어 있습니다. 따라서 사용자를 인증하는 코드를 작성하지 않아도 Microsoft Dynamics 365 웹 서비스를 사용할 수 있습니다. 자세한 내용은 Microsoft Dynamics 365용 웹 리소스과 웹 리소스를 사용하여 Dynamics 365 데이터 작업을 참조하십시오.

jQuery 사용

HTML 웹 리소스에 jQuery 사용
jQuery는 뛰어난 브라우저 간 라이브러리이므로 HTML 웹 리소스와 함께 사용하여 사용자 인터페이스를 제공하는 것이 좋습니다.

HTML 웹 리소스를 사용하면 현재 있는 라이브러리를 제어하고 DOM 조작에 대한 제한이 없습니다. HTML 웹 리소스 내에서 jQuery를 마음껏 사용하십시오.
양식 스크립트 또는 리본 메뉴에서 jQuery를 사용하지 않음
양식 스크립트 및 리본 명령에서 jQuery를 사용하지 않는 것이 좋습니다.

jQuery에서 제공하는 대부분의 혜택은 DOM의 브라우저 간 조작을 쉽게 사용할 수 있다는 점입니다. 양식 스크립트 및 리본 명령 내에서는 명시적으로 지원되지 않습니다. 스크립트를 제한하여 양식 스크립트 및 리본 명령에서 사용할 수 있는 Xrm.Page 및 Xrm.Utility 라이브러리를 사용합니다.Microsoft Dynamics 365에 유용한 jQuery의 다른 기능을 사용하고 $.ajax를 사용할 수 있는 기능을 포함하도록 결정할 경우 다음을 고려하십시오.
- 최상의 성능을 위해 jQuery가 필요 없을 경우 페이지에서 jQuery를 로드하지 않음
- Microsoft Dynamics 365 웹 서비스에 대한 요청을 수행하기 위해 $.ajax를 사용할 수 있지만 대안이 있습니다.$.ajax를 사용하는 대안은 브라우저 XMLHttpRequest 개체를 직접 사용하는 것입니다. jQuery $.ajax 메서드는 단지 이 개체에 대한 래퍼입니다. 기본 XMLHttpRequest 개체를 직접 사용하면 jQuery를 로드할 필요가 없습니다.
- 페이지에 로드된 각 버전의 jQuery는 다른 버전일 수 있습니다. 다른 버전의 jQuery에는 다른 동작이 있을 경우 여러 버전의 jQuery가 동일한 페이지에서 로드되면 문제가 될 수 있습니다. 이를 완화하는 기술이 있지만 jQuery 및 jQuery에 의존하는 다른 라이브러리 편집에 따라 달라집니다.추가 정보:jQuery and jQuery UI with Dynamics CRM 2011 & 2013, jQuery.noConflict()
  
  참고
  
  Microsoft Dynamics CRM Online 2015 업데이트 1부터는 응용 프로그램에서 사용되는 jQuery 인스턴스와는 다른 범위에서 양식 스크립트를 실행합니다. 즉, 코드가 jQuery.noConflict를 사용하려고 시도할 때 사용할 수 있는 jQuery의 인스턴스가 없을 수 있습니다. jQuery를 사용해야 하는 경우 jQuery.noConflict를 사용하기 전에 먼저 jQuery의 인스턴스가 존재하는지 여부를 감지해야 합니다.

여러 브라우저에 대해 JavaScript 작성

사용되는 브라우저를 모르므로 지원되는 모든 브라우저에서 사용하는 모든 스크립트가 작동하도록 해야 합니다.Internet Explorer와 다른 브라우저의 주요 차이점은 대부분 HTML 및 XML DOM 조작에 있습니다. HTML DOM 조작이 지원되지 않으므로 스크립트 논리는 지원되는 작업만 수행하고 Xrm.Page API만 사용할 경우 다른 브라우저를 지원하는 데 필요한 변경이 작을 수 있습니다.사용자 지정 코드 유효성 검사 도구를 사용하여 Internet Explorer에서만 작동하는 코드를 식별합니다.

jQuery와 같은 브라우저 간 라이브러리는 웹 리소스를 개발하는 데 좋은 솔루션이지만 양식 스크립트 및 리본 명령에는 필요하지 않습니다.추가 정보:jQuery 사용

다른 브라우저에 대한 지원

Microsoft Dynamics 365(온라인 및 온-프레미스)은 W3C 표준을 지원하므로 응용 프로그램은 이러한 표준을 지원하는 모든 플랫폼에서 최신 브라우저를 사용하여 액세스할 수 있습니다. 하지만 Microsoft Dynamics 365은 특정 브라우저 및 플랫폼 집합을 사용해서만 테스트합니다. 지원되는 플랫폼 및 브라우저 목록은 TechNet: 지원되는 웹 브라우저를 참조하십시오.

지원되지 않는 브라우저(브라우저 버전)를 사용하고 서버 이름 또는 조직과 함께 서버 이름을 URL로만 입력하면 휴대폰용 Microsoft Dynamics 365 페이지로 리디렉션됩니다.휴대폰용 Dynamics 365 페이지는 제한된 기능으로 모바일 장치에 사용되는 브라우저와 같은 대부분의 브라우저에서 제대로 작동할 수 있습니다.

JavaScript 프로그래밍 유용한 정보

다음 섹션에서는 JavaScript를 Microsoft Dynamics 365에서 사용할 경우 유용한 정보를 설명합니다.

지원되지 않는 메서드 사용 안 함

지원되지 않는 메서드 사용에 대해 설명하는 많은 예제 또는 제안을 인터넷에서 찾을 수 있습니다. 여기에는 페이지 컨트롤에 대해 문서화되지 않은 내부 함수 활용도 포함될 수 있습니다. 이러한 방법을 사용할 수 있지만 지원되지 않으므로 Microsoft Dynamics 365 이후 버전에서 계속 사용할 것을 기대할 수는 없습니다.

사용자 지정 코드 유효성 검사 도구를 사용하여 지원되지 않는 메서드를 사용하는 코드를 식별합니다.

HTML 웹 리소스 사용자 인터페이스에 대해 브라우저 간 JavaScript 라이브러리 사용

jQuery와 같은 브라우저 간 JavaScript라이브러리는 여러 브라우저를 지원해야 하는 HTML 웹 리소스를 개발하는 경우 여러 가지 이점을 제공합니다.jQuery와 같은 JavaScript 라이브러리는 Microsoft Dynamics 365가 지원하는 모든 브라우저에 대해 통합된 개발 환경을 제공합니다. 이러한 기능은 HTML 웹 리소스를 사용하여 사용자 인터페이스를 제공하는 경우 적절합니다.jQuery와 같은 JavaScript 라이브러리는 DOM(문서 개체 모델)과 상호 작용하는 일관된 방법을 제공합니다.

양식 스크립트 또는 명령에 대해 jQuery 사용하지 않음

응용 프로그램 내 어떤 페이지에 대해서도 jQuery 사용을 권장하거나 지원하지 않습니다. 여기에는 양식 스크립트 및 리본 명령도 포함됩니다.추가 정보:jQuery 사용.

CDN(콘텐츠 전송 네트워크) 라이브러리에 대한 제한 인식

CDN(콘텐츠 전송 네트워크) JavaScript 라이브러리는 공용 웹 사이트에 대해 많은 이점을 제공합니다. 이러한 라이브러리는 인터넷에서 호스팅되므로 라이브러리의 콘텐츠를 포함하는 웹 리소스를 만들 필요가 없습니다.Microsoft Dynamics 365의 경우 CDN JavaScript 라이브러리를 사용하기 전에 다음 문제를 고려해야 합니다.

Microsoft Office Outlook용 Microsoft Dynamics 365(오프라인 액세스 가능) 클라이언트의 사용자는 오프라인 작업 중에 인터넷 연결 없이 작업할 수 있는 기능이 있습니다.JavaScript 라이브러리에 대해 인터넷 연결에 종속될 경우 코드는 실패합니다.
일부 조직에서는 직원들에 대한 인터넷 액세스를 제한합니다. CDN 라이브러리 사이트에 대한 액세스를 허용하도록 네트워크를 구성하지 않으면 해당 조직에 대한 코드가 실패할 수 있습니다.

CDN 라이브러리를 사용하는 대안은 라이브러리의 콘텐츠로 스크립트(JavaScript) 웹 리소스를 만드는 것입니다. 웹 리소스는 조직 담당 엔터티이므로 Outlook용 Microsoft Dynamics 365(오프라인 액세스 가능) 사용자가 오프라인 상태일 때 동기화됩니다. 이러한 웹 리소스는 이제 응용 프로그램의 일부가 되므로 조직에서 인터넷에 대한 액세스를 제한하면 차단됩니다.

여러 브라우저에 대한 함수를 작성할 때 기능 검색 사용

jQuery와 같은 브라우저 간 라이브러리를 사용하더라도 브라우저 간 차이점에 대해 확실히 알고 있어야 합니다. 일반적으로 navigator.useragent 속성을 쿼리하여 사용되는 브라우저를 검색할 수 있습니다. 이를 브라우저 검색이라고 합니다. 브라우저 검색은 브라우저가 가진 최신 버전의 기능을 알 수 없으므로 대부분의 경우 좋은 전략은 아닙니다. 일부 브라우저에서는 다른 브라우저로 표시되도록 navigation.useragent 속성을 수정할 수 있는 기능을 제공합니다.

기능 검색은 권장되는 방법입니다. 사용할 수 있는 기능을 검색하여 사용되는 브라우저를 정확히 몰라도 지원하는 브라우저에 대한 코드 경로를 만들 수 있습니다. 기능 검색에 대한 자세한 내용은 브라우저 대신 기능을 검색하는 방법을 참조하십시오.

DOM에 액세스하지 않음

JavaScript 개발자는 코드에서 DOM(문서 개체 모델) 요소와 상호 작용하는 데 사용됩니다.window.getElementById 메서드 또는 jQuery 라이브러리를 사용할 수 있습니다.HTML 웹 리소스에서 이러한 기술을 자유롭게 사용하지만 Microsoft Dynamics 365 응용 프로그램 페이지 또는 엔터티 양식의 요소에 대한 액세스를 지원하지 않습니다. 대신 엔터티 양식 요소에 대한 액세스는 Xrm.Page 개체 모델을 통해 노출됩니다.Microsoft Dynamics 365 개발 팀은 요소의 ID 값을 포함하여 페이지가 구성되는 방법을 변경할 권한을 보유하므로 Xrm.Page 개체 모델을 사용하면 페이지가 구현되는 방식의 변경으로부터 코드를 보호합니다. 자세한 내용은 Xrm.Page 개체 모델 사용을 참조하십시오.

JavaScript 함수에 대한 고유 이름 정의

HTML 페이지의 유일한 개발자인 경우 사용할 JavaScript 함수의 이름을 쉽게 관리할 수 있습니다.Microsoft Dynamics 365에서 다른 솔루션은 함수가 사용되는 페이지에 JavaScript 함수를 추가할 수 있습니다.

한 페이지에 이름이 같은 JavaScript 함수가 두 개 있으면 정의된 첫 번째 함수를 두 번째 함수가 덮어씁니다. 따라서 JavaScript 함수에 고유한 이름을 정의해야 합니다. 자세한 내용은 스크립트 라이브러리 만들기을 참조하십시오.

비동기 데이터 액세스 메서드 사용

Microsoft Dynamics 365 웹 서비스를 사용하여 데이터에 액세스할 경우 비동기적으로 실행하도록 구성된 XMLHttpRequest를 항상 사용합니다. 그 이유는 브라우저가 단일 스레드에서 작동하기 때문입니다. 스레드가 장기 실행 프로세스를 동기적으로 실행하는 데 사용되면 브라우저가 응답을 중지합니다.

참고

동기 XMLHttpRequests는 최종 사용자 경험에 좋지 않은 영향을 주므로 브라우저의 주 스레드에서 사용되지 않습니다. 일부 브라우저는 이제 이것이 감지되면 경고를 제공합니다. 브라우저가 향후 특정 시기에 사양을 구현하는 경우 InvalidAccessError 예외가 throw 됩니다.추가 정보:http://www.w3.org/TR/XMLHttpRequest/#synchronous-flag 및 https://xhr.spec.whatwg.org/#the-open()-method

Microsoft Dynamics 365에서 JavaScript 디버깅

각 브라우저는 몇 가지 종류의 디버깅 확장을 제공합니다.Internet Explorer는 Microsoft Dynamics 365에서 스크립트를 디버깅하는 데 사용할 수 있는 개발자 도구를 제공합니다.Internet Explorer 개발자 도구는 Internet Explorer를 사용하여 페이지를 볼 때 F12를 눌러 열 수 있습니다. 자세한 내용은 F12 개발자 도구 사용을 참조하십시오.

Google Chrome의 경우 F12를 눌러 개발자 도구를 엽니다.Firebug는 Mozilla Firefox를 사용하는 웹 개발용 인기 있는 브라우저 확장입니다.Apple Safari의 경우 먼저 고급 선호 설정에서 메뉴 모음에서 개발 메뉴 표시를 선택해야 합니다. 그런 다음 개발 메뉴에서 웹 검사자 표시를 선택할 수 있습니다.

Microsoft Visual Studio를 사용할 수도 있습니다. 자세한 내용은 Microsoft Dynamics CRM 2011에서 JScript를 디버깅하는 방법을 참조하십시오.

Microsoft Dynamics 365에서 JavaScript 라이브러리를 사용하면 라이브러리에 웹 페이지가 로드됩니다. 디버깅 환경에서 특정 라이브러리를 격리하기 어려운 경우도 있습니다.Microsoft Edge에서 디버깅 도구를 사용할 경우 디버거 탭에서 왼쪽 위 모서리의 폴더 아이콘을 클릭하고 사용 가능한 스크립트를 확장하고 아래 표시된 new_myCustomJavaScript.js 웹 리소스와 같은 JavaScript 웹 리소스에 해당하는 이름을 가진 스크립트를 찾습니다. 검색 상자에 파일 이름을 입력하여 JavaScript 라이브러리를 검색할 수도 있습니다.

JavaScript 디버깅

다른 브라우저용 디버깅 도구는 유사한 기능을 가집니다. 라이브러리를 찾은 경우 중단점을 설정하고 코드를 실행 시키는 이벤트를 다시 만들어야 할 수 있습니다.

새 대화식 서비스 허브 클라이언트(Dynamics 365에 도입)에서 Dynamics 365는 페이지에 로드하지 않고 JavaScript 라이브러리의 콘텐츠를 동적으로 주입합니다. 즉 페이지를 로드할 때마다 코드가 동적 라이브러리들 중 하나에 주입되어 중단점에 도달하지 못하도록 하기 때문에 귀하는 맞춤 코드에 중단점을 설정할 수 없습니다. 이 경우 다른 기술을 사용하여 코드를 디버깅해야 합니다.추가 정보:블로그: 브라우저 개발자 도구를 사용하여 CRM에서 JavaScript 코드를 디버깅

콘솔에 메시지 기록

JavaScript를 디버깅할 때 window.alert 메서드를 사용하는 것은 여전히 응용 프로그램에서 코드 문제를 해결하는 일반적인 방법입니다. 하지만 이제 최신 브라우저는 모두 디버깅 도구에 쉽게 액세스할 수 있으므로 특히 다른 브라우저에서 디버깅 중인 응용 프로그램을 사용할 경우 효율적인 방법이 아닙니다.

대신 콘솔에 메시지를 기록하는 것이 좋습니다. 다음은 콘솔을 열면 표시할 메시지를 콘솔에 보낼 때 사용할 수 있는 라이브러리에 추가할 수 있는 작은 함수입니다.

function writeToConsole(message)
{
 if (typeof console != 'undefined') {
  console.log(message);
 }
}

경고 메서드를 사용하는 것과 달리 이 함수를 사용하는 코드를 제거하는 것을 잊을 경우 응용 프로그램을 사용하는 사용자는 메시지를 보지 못합니다.

참고 항목

클라이언트에서 Microsoft Dynamics 365 확장
웹 리소스를 사용하여 Dynamics 365 데이터 작업
서버에서 Microsoft Dynamics 365 확장
Microsoft Dynamics 365 양식용 코드 작성
명령 및 리본 사용자 지정
Microsoft Dynamics 365용 웹 리소스
Microsoft Dynamics 365 웹 API(클라이언트 쪽 JavaScript) 시작하기
Xrm.Page 개체 모델 사용
블로그: 브라우저 개발자 도구를 사용하여 CRM에서 JavaScript 코드를 디버깅

Microsoft Dynamics 365

다음을 통해 공유

Microsoft Dynamics 365에서 JavaScript 사용

이 항목의 내용

Microsoft Dynamics 365에서 JavaScript를 사용할 수 있는 영역

양식 스크립트

명령 모음(리본) 명령

웹 리소스

jQuery 사용

여러 브라우저에 대해 JavaScript 작성

다른 브라우저에 대한 지원

JavaScript 프로그래밍 유용한 정보

지원되지 않는 메서드 사용 안 함

HTML 웹 리소스 사용자 인터페이스에 대해 브라우저 간 JavaScript 라이브러리 사용

양식 스크립트 또는 명령에 대해 jQuery 사용하지 않음

CDN(콘텐츠 전송 네트워크) 라이브러리에 대한 제한 인식

여러 브라우저에 대한 함수를 작성할 때 기능 검색 사용

DOM에 액세스하지 않음

JavaScript 함수에 대한 고유 이름 정의

비동기 데이터 액세스 메서드 사용

Microsoft Dynamics 365에서 JavaScript 디버깅

콘솔에 메시지 기록

참고 항목

추가 리소스