JSLink를 사용하여 참조 열의 하이퍼링크 사용 안함
무슨 일이야?
참조 열 사용하고 있는 리스트를 뷰에서 보면 아래 그림과 같이 표시됩니다.
참조 열의 값이 하이퍼링크가 되고 클릭하면 참조할 목록이 열립니다.
참조 리스트가 복수의 프로퍼티를 가지는 마스터 정보(고객 정보 등)이면 이 링크를 편리하게 사용할 수 있는 장면도 있습니다. 그러나 현재 열려있는 목록의 Dispform을 여는 링크와 잘못 사용자가 클릭하는 경우가 있으므로 하이퍼 링크를 추가하지 않는 문자열을 표시하는 것이 바람직 할 수 있습니다.
특히 단독 선택 항목으로 사용하는 경우는 참조처의 리스트를 열 목적이 없기 때문에 「참조열의 하이퍼링크를 무효화하고 싶다」라고 하는 요망이 나오는 것은 많습니다.
어떻게 하이퍼링크를 사용하지 않도록 설정합니까?
참조 열의 설정 항목에는 하이퍼링크를 활성화하거나 비활성화하는 항목이 없습니다.
그래서 자바스크립트나 CSS 등 어떠한 커스터마이즈가 필요합니다.
하는 방법을 여러가지 생각했습니다.
뷰의 참조 열 링크를 JavaScript로 비활성화했습니다. 하지만 페이징으로 페이지 전환하면 링크가 부활해 버렸다. CSS에서 클릭 이벤트를 무효로 하려고 했지만 IE에서 'pointer-events'가 동작하지 않는다. - wataruf01 (@wataruf01) 2019년 1월 10일
A요소의 속성으로 참조열인가 어떤가를 판정해 그 부모의 TD에 CSS에 반영하려고 했지만, CSS3에 「특정 조건에 있는 자식 요소를 가지는 부모 요소」라고 하는 셀렉터가 아니.
— wataruf01 (@wataruf01) 2019년 1월 10일
<script async=""src="https://platform.twitter.com/widgets.js"/>
결론으로
참조 열의 설정 항목에는 하이퍼링크를 활성화하거나 비활성화하는 항목이 없습니다.
그래서 자바스크립트나 CSS 등 어떠한 커스터마이즈가 필요합니다.
하는 방법을 여러가지 생각했습니다.
뷰의 참조 열 링크를 JavaScript로 비활성화했습니다. 하지만 페이징으로 페이지 전환하면 링크가 부활해 버렸다. CSS에서 클릭 이벤트를 무효로 하려고 했지만 IE에서 'pointer-events'가 동작하지 않는다. - wataruf01 (@wataruf01) 2019년 1월 10일
A요소의 속성으로 참조열인가 어떤가를 판정해 그 부모의 TD에 CSS에 반영하려고 했지만, CSS3에 「특정 조건에 있는 자식 요소를 가지는 부모 요소」라고 하는 셀렉터가 아니.
— wataruf01 (@wataruf01) 2019년 1월 10일
<script async=""src="https://platform.twitter.com/widgets.js"/>
결론으로
JSLink로 해결되었습니다.
JSLink에는 특정 "열 유형"을 지정하여 템플릿을 덮어 쓸 수있는 기능이 있습니다.
이번은 이하와 같이 「Lookup(복수치 없음의 참조열)」 「LookupMulti(복수치가 있는 참조열)」를 대상으로 했습니다.
(function () {
var ctx = {};
ctx.Templates = {};
ctx.Templates.Fields = {};
ctx.Templates.Fields.Lookup = {
"View": RemoveHyperlinkFromLookupFields
};
ctx.Templates.Fields.LookupMulti = {
"View": RemoveHyperlinkFromLookupFields
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
})();
function RemoveHyperlinkFromLookupFields(ctx) {
var field = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
if (!field || field == undefined || field == ""){return field;}
var lookupValue = field[0].lookupValue;
if (field.length >= 2) {
for (var i = 1; i < field.length; i++) {
lookupValue += "; ";
lookupValue += field[i].lookupValue;
}
}
return lookupValue;
}
이것을 어떻게 사이트에 반영합니까?
JSLink의 구현 방법은 여러 개 있습니다.
맞춤설정을 적용할 범위와 변경 관리 규칙에 따라 최적의 항목을 선택합니다.
이번에는 사이트 전체에 반영할 수 있고 가장 번거로운 구현 방법인 JavaScriptLink를 사용합니다.
- JS 파일로 JavaScriptLink에 등록
- JS 파일을 사용하여 마스터 페이지에 링크 태그 추가
- JS 파일로 웹 파트의 JSLink 속성에 URL을 입력합니다.
- 스크립트 편집기를 배치하고 소스 코드를 직접 페이지에 나열합니다.
JavaScriptLink를 사용하여 JS 파일을 사이트에 반영
JavaScriptLink 등록은 SharePoint PnP Cmdlets를 사용하여 쉽게 할 수 있습니다.
#サイトに接続する (認証画面が表示される)
Connect-PnPOnline https://(テナントURL).sharepoint.com/(管理パス)/(サイトURL)
#ScriptLinkの CustomAction を追加する
Add-PnPJavaScriptLink -Name RemoveHyperLinkFromLookupFields -Url SiteAssets/RemoveHyperLinkFromLookupFields.js -Scope Web -Sequence 0
#サイトに登録されているScriptLink を確認する
Get-PnPJavaScriptLink
Reference
이 문제에 관하여(JSLink를 사용하여 참조 열의 하이퍼링크 사용 안함), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/wataruf01/items/debadc3edbf799563350텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)