양식에 사용자 지정 JavaScript 추가
참고
2022년 10월 12일부터 Power Apps 포털이 Power Pages가 됩니다. 추가 정보: Microsoft Power Pages는 이제 일반적으로 사용할 수 있습니다(블로그)
곧 Power Apps 포털 설명서를 마이그레이션하고 Power Pages 설명서와 병합할 예정입니다.
기본 양식 및 다단계 양식 단계 레코드에는 양식의 시각적 표시 또는 함수를 확장하거나 수정할 수 있도록 JavaScript 코드를 저장하는 데 사용할 수 있는 사용자 지정 JavaScript라는 필드가 포함되어 있습니다.
JavaScript의 사용자 지정 블록은 종료 양식 태그 요소 바로 앞 페이지의 하단에 추가됩니다.
양식 필드
테이블 필드의 HTML 입력 ID는 특성의 논리 이름으로 설정됩니다. jQuery로 필드 선택, 값 설정 또는 기타 클라이언트 측 조작을 쉽게 할 수 있습니다.
$(document).ready(function() {
$("#address1_stateorprovince").val("Saskatchewan");
});
중요
다단계 양식 단계 또는 기본 양식에서 사용할 모델 기반 양식에 선택 열을 추가하면 포털 페이지에 드롭다운 서버 컨트롤로 나타납니다. 사용자 정의 JavaScript를 사용하여 컨트롤에 값을 추가하면 페이지 제출 시 "잘못된 포스트백 또는 콜백 인수" 메시지가 표시됩니다.
추가 클라이언트 쪽 필드 유효성 검사
때로는 양식 내 필드의 유효성 검사를 사용자 지정해야 할 수 있습니다. 이 예에서는 선호하는 연락 방법의 다른 필드가 전자 메일로 설정되어 있는 경우에만 사용자가 이메일을 지정하게 합니다.
참고
클라이언트 쪽 필드 유효성 검사는 하위 표에서 지원되지 않습니다.
if (window.jQuery) {
(function ($) {
$(document).ready(function () {
if (typeof (Page_Validators) == 'undefined') return;
// Create new validator
var newValidator = document.createElement('span');
newValidator.style.display = "none";
newValidator.id = "emailaddress1Validator";
newValidator.controltovalidate = "emailaddress1";
newValidator.errormessage = "<a href='#emailaddress1_label' referencecontrolid='emailaddress1 ' onclick='javascript:scrollToAndFocus(\"emailaddress1 _label\",\" emailaddress1 \");return false;'>Email is a required field.</a>";
newValidator.validationGroup = ""; // Set this if you have set ValidationGroup on the form
newValidator.initialvalue = "";
newValidator.evaluationfunction = function () {
var contactMethod = $("#preferredcontactmethodcode").val();
if (contactMethod != 2) return true; // check if contact method is not 'Email'.
// only require email address if preferred contact method is email.
var value = $("#emailaddress1").val();
if (value == null || value == "") {
return false;
} else {
return true;
}
};
// Add the new validator to the page validators array:
Page_Validators.push(newValidator);
});
}(window.jQuery));
}
일반적인 유효성 검사
다음/제출 단추를 클릭하면 entityFormClientValidate라는 함수가 실행됩니다. 이 메서드를 확장하여 사용자 지정 유효성 검사 논리를 추가할 수 있습니다.
if (window.jQuery) {
(function ($) {
if (typeof (entityFormClientValidate) != 'undefined') {
var originalValidationFunction = entityFormClientValidate;
if (originalValidationFunction && typeof (originalValidationFunction) == "function") {
entityFormClientValidate = function() {
originalValidationFunction.apply(this, arguments);
// do your custom validation here
// return false; // to prevent the form submit you need to return false
// end custom validation.
return true;
};
}
}
}(window.jQuery));
}