JSLink：ドキュメントライブラリのタイトルでFileleafRefをレンダリングします

Question

jslinkはスライスされたパン以来最大のものです。
標準的なものに関していくつかの奇妙な問題があります、そして、私はこれらが制限されているかどうかわからないか、私は何か悪いことをしています。

ファイル名ではなく、ドキュメントのタイトルをクリック可能なリンクとして持ちたいです。これは、 ab2929329.pdf などのファイル名と Joeys Enginings のタイトルを考えると、より美しいです。

ドキュメントライブラリリストビューとJSlinkはこれを簡単にします。

(function () { 
    var overrideNameField = {}; 
    overrideNameField.Templates = {}; 
    overrideNameField.Templates.Fields = {
        "Title": { "View": overrideNameFieldTemplate } 
    }; 

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideNameField); 
})(); 

function overrideNameFieldTemplate(ctx) { 

    var title = ctx.CurrentItem.Title; 
    var fileRef = ctx.CurrentItem["FileRef"];
    var fileLeafRef = ctx.CurrentItem["FileLeafRef"];

    if (title) {
        return "<a href='"+ fileRef + "'>"+ title + "</a>"; 
    }
    else {
        return "<a href='"+ fileRef + "'>"+ fileLeafRef + "</a>"; 
    }
} 

.

それは簡単だった、それはそうではありませんでしたか？タイトルフィールドは常にリンクとしてレンダリングされます。タイトルが設定されていない場合は、デフォルトのFileLeafRefが取られます。これはあなたのビューまたはアイコンにもfileleafrefrefフィールドを持っている限り機能します（アイコンが大丈夫です）。

---

私は貪欲です。タイトルを文書へのリンクにするだけでなく、Office Web Appsを介してクリックするとメニュー（...）にファイルのプレビューが必要です。 fileleafrefrefレンダリングと同じように： "filename ..."とあなたはすべてのアクションを "..."にあります。

だから、私がしなければならないのは、上記のコードの"Title": { "View": overrideNameFieldTemplate }を"LinkFilename": { "View": overrideNameFieldTemplate }に置き換えることです。ブームそれは動作します！しかし、ここでキッカーが来る：

リストビューにTitleフィールドがある場合にのみ機能します。 Field ctx.CurrentItem.Titleを削除するとnullです。フィールドをビューに戻すと存在します。

文書のクリック可能なタイトルとドキュメントメニュー（... strong>を使用することをどのように達成することができますか？私はJSlinkを使いたいですが、XSLTを使っても構わないSharePoint Designer 2013の変更を作成することは不可能になっています。

Answer 1

In order to get the Link to Item with Menu functionality on a field other than Name (Title for lists), you can modify the CAML in Designer. Add the following to the field in the <ViewFields> element: ListItemMenu='TRUE'. For example, your title field would like like:

<FieldRef Name='Title' ListItemMenu='TRUE' />

As you noted, there's a CalloutMenu attribute that will provide the document preview.

Answer 2

I did this in another manner, by strictly using JSLink. I basically hid the Title field so it wouldn't show. I did this by overriding the header. This is what i have and should get you started:

(function () {
//   Initialize the variables for overrides objects
var overrideCtx = {};
overrideCtx.Templates = {'Header': RenderTemplateWithHiddenTitleColumn};
overrideCtx.Templates.Fields = {
    'Title': { 'View': function () { return null;} },
    'LinkFilename': {
        'View': function (renderCtx) {
            if (renderCtx != null && renderCtx.CurrentFieldValue != null)
                return renderCtx.CurrentFieldValue.toString();
            return '<a href="' + ctx.CurrentItem.FileRef + '">' + renderCtx.CurrentItem.Title + '</a>';
        }
    }
};

function RenderTemplateWithHiddenTitleColumn(renderCtx, fRenderHeaderColumnNames) {
   if (renderCtx.BaseViewID == "Callout") {
       return CalloutRenderHeaderTemplate(renderCtx);
   }
   var listSchema = renderCtx.ListSchema;
    var listData = renderCtx.ListData;
    var ret = [];

    if (fRenderHeaderColumnNames == null) {
        fRenderHeaderColumnNames = true;
    }
    ret.push(RenderTableHeader(renderCtx));
    ret.push('<thead id="');
    ret.push("js-listviewthead-" + renderCtx.wpq);
    ret.push('"><tr valign="top" class="ms-viewheadertr');
    if (fRightToLeft)
        ret.push(' ms-vhrtl');
    else
        ret.push(' ms-vhltr');
    ret.push('">');
    if (listSchema.TabularView != undefined && listSchema.TabularView == "1") {
        ret.push('<th class="ms-headerCellStyleIcon ms-vh-icon ms-vh-selectAllIcon" scope="col">');
        RenderSelectAllCbx(renderCtx, ret);
        ret.push('</th>');
    }
    if (fRenderHeaderColumnNames) {
        var fields = listSchema ? listSchema.Field : null;
        var counter = 1;

        for (var f in fields) {
            var field = fields[f];
            if (field.Name == "Title") {
                ret.push("<th></th>");
                break;
            };
            if (field.DisplayName == null)
                continue;
            if (field.GroupField != null)
                break;
            field.counter = counter++;
            ret.push(spMgr.RenderHeader(renderCtx, field));
            if (IsCSRReadOnlyTabularView(renderCtx) && (field.CalloutMenu == "TRUE" || field.listItemMenu == "TRUE"))
                ret.push("<th></th>");
        }
    }
    if (listSchema.TabularView == "1" && renderCtx.BasePermissions.ManageLists && renderCtx.ListTemplateType != 160) {
        ret.push('<th class="ms-vh-icon" scope="col" title=""><span class="ms-addcolumn-span"> </span></th>');
    }
    ret.push("</tr>");
    ret.push("</thead>");
    return ret.join('');
};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

I had to do a couple workarounds, nothing too big. I had issues with the Callout menu when overriding the header, so i simply called the default CalloutRenderHeaderTemplate function if the BaseViewID was Callout

if (renderCtx.BaseViewID == "Callout") {
   return CalloutRenderHeaderTemplate(renderCtx);

}

In the loop when rendering the columns, i simply escaped when the Title field came up:

if (field.Name == "Title") {
            ret.push("<th></th>");
            break;
};

So far its working pretty well and i haven't noticed any issues. Hope this helps!

Answer 3

Because I started with this question as a reference point, I just wanted to link to a solution I came up with in case it helps anyone else attempting this same thing.

Do not apply CSR Override in QuickEdit Mode

I built on the JSLink method but had some issues when switching from normal to QuickEdit mode.

Now I have managed to override just the bits of the header and body that hide the Title column while passing through the default render functions when switching to Quickedit.

Hopefully the script is useful in conjunction with the answers on this page for anyone grappling with this same problem :-)