JSLink를 사용하여 참조 열의 하이퍼링크 사용 안함

무슨 일이야?



참조 열 사용하고 있는 리스트를 뷰에서 보면 아래 그림과 같이 표시됩니다.
참조 열의 값이 하이퍼링크가 되고 클릭하면 참조할 목록이 열립니다.

참조 리스트가 복수의 프로퍼티를 가지는 마스터 정보(고객 정보 등)이면 이 링크를 편리하게 사용할 수 있는 장면도 있습니다. 그러나 현재 열려있는 목록의 Dispform을 여는 링크와 잘못 사용자가 클릭하는 경우가 있으므로 하이퍼 링크를 추가하지 않는 문자열을 표시하는 것이 바람직 할 수 있습니다.

특히 단독 선택 항목으로 사용하는 경우는 참조처의 리스트를 열 목적이 없기 때문에 「참조열의 하이퍼링크를 무효화하고 싶다」라고 하는 요망이 나오는 것은 많습니다.





어떻게 하이퍼링크를 사용하지 않도록 설정합니까?



참조 열의 설정 항목에는 하이퍼링크를 활성화하거나 비활성화하는 항목이 없습니다.
그래서 자바스크립트나 CSS 등 어떠한 커스터마이즈가 필요합니다.

하는 방법을 여러가지 생각했습니다.

뷰의 참조 열 링크를 JavaScript로 비활성화했습니다. 하지만 페이징으로 페이지 전환하면 링크가 부활해 버렸다. CSS에서 클릭 이벤트를 무효로 하려고 했지만 IE에서 'pointer-events'가 동작하지 않는다. - 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


무사히 반영되었습니다.


좋은 웹페이지 즐겨찾기