JSLinkを使って参照列のハイパーリンクを無効にする

どういうこと？

参照列使っているリストをビューで見ると下図のように表示されます。
参照列の値がハイパーリンクになり、クリックすると参照先のリストが開きます。

参照先のリストが複数のプロパティを持っているマスタ情報（顧客情報など）であればこのリンクが便利に使える場面もあります。ですが、今現在開いてるリストのDispformを開くリンクと間違ってユーザーがクリックする場合があるので、ハイパーリンクを付加しない文字列を表示するほうが望ましい場合があります。

特に単体の選択肢項目として使う場合は参照先のリストを開く目的が無いので「参照列のハイパーリンクを無効化したい」という要望が出てくることは多いです。

どうやってハイパーリンクを無効にするのか？

参照列の設定項目にはハイパーリンクの有効or無効を切り替える項目がありません。
なので、JavaScript や CSS など何らかのカスタマイズが必要です。

やりかたを色々考えました。

ビュー上の参照列のリンクをJavaScriptで無効化した。けれどページングでページ切り替えるとリンクが復活してしまった。

CSSでクリックイベントを無効にしようとしたけれどIEで「pointer-events」が動作しない。

— wataruf01 (@wataruf01) 2019年1月10日

A要素の属性で参照列であるかどうかを判定してその親のTDにCSSに反映しようとしたけれど、CSS3に「特定の条件にある子要素を持った親要素」というセレクタがない。

— wataruf01 (@wataruf01) 2019年1月10日

結論として

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ファイルにしてマスターページにlinkタグを追加
• JSファイルにしてWebパーツの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

無事反映されました。