Quantcast
Channel: SharePoint 2013 - Development and Programming forum
Viewing all articles
Browse latest Browse all 7589

How can I add a hyper link in the group header row in a list view?

$
0
0

Hi experts, 

I need to add a hyperlink in the group header row, something like below:

I tried the CSR solution following this https://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views, because I have multiple list views in my page and I only want to add the link for one of them, so I changed the baseViewId to a custom number using below code:

ExecuteOrDelayUntilScriptLoaded(function(){
//Take a copy of the existing Microsoft Definition of RenderListView
varoldRenderListView =RenderListView;
//Now redefine RenderListView with our override
RenderListView = function(ctx,webPartID){
//Check the context of the currently rendering List view
if (ctx.ListTitle =="MyListTitle"){
//Override the BaseViewID if it's the one we want.
ctx.BaseViewID =88;
}
//now call the original RenderListView
oldRenderListView(ctx,webPartID);
}
},"ClientTemplates.js");

and applying override ctx like below:

varoverrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.BaseViewID =88; //The custom Id
overrideCtx.ListTemplateType =100;
overrideCtx.Templates.Group =GroupWithLink;
overrideCtx.Templates.Fields = {
'SignOff': {
'View': Customview
},
                
};

The GroupWithLink function is like below:

functionGroupWithLink(ctx,group, groupId,listItem, listSchema,level, collapse){
ctx.CurrentItem =listItem;
varq =ctx.ctxId,
a = '<tbody id="titl';
a+= groupId+'" groupString="'+ listItem[group+ ".urlencoded"] + '"';
if (level ==2&& !collapse)a+= ' style="display:none"';
a+= '><tr><td colspan="100" nowrap="nowrap" class="ms-gb';
if (level ==2) a+="2";
a+= '">';
if (level ==2) a+="<img src="+ ListView.ImageBasePath+ '"/_layouts/15/images/blank.gif?rev=40" alt="" height="1" width="10">';
a+= '<a href="javascript:" onclick="javascript:ExpCollGroup(';
a+= "'"+groupId+ "', 'img_"+groupId+ "',event, false);return false;"+'">';
varl =null,
m = null;
if (DOM.rightToLeft) {
l = collapse ?"ms-commentcollapsertl-iconouter" : "ms-commentexpandrtl-iconouter";
m = collapse ?"ms-commentcollapsertl-icon" : "ms-commentexpandrtl-icon";
} else {
l = collapse ?"ms-commentcollapse-iconouter" : "ms-commentexpand-iconouter";
m = collapse ?"ms-commentcollapse-icon" : "ms-commentexpand-icon";
}
varp =collapse ? window.ListView.Strings.L_SPCollapse :window.ListView.Strings.L_SPExpand;
a+= '<span class="'+l+ '"><img class="'+m+ '" src="'+GetThemedImageUrl("spcommon.png");
a+= '" alt="'+p+ '" id="img_'+groupId+ '" /></span>';
varfieldSchema;
for (vargroupDisplayName = group, groupfieldSchema, k = 0; k<listSchema.Field.length;k++) {
fieldSchema = listSchema.Field[k];
if (fieldSchema.Name ==group) {
groupDisplayName = fieldSchema.DisplayName;
groupfieldSchema = fieldSchema;
break;
}
}
a+= Encoding.HtmlEncode(groupDisplayName) +"</a> : ";
if (groupfieldSchema !==null) {
varfType =groupfieldSchema.Type;
if (fType =="Number" || fType == "Currency") {
a+= listItem[fieldSchema.Name];
} elseif (fType =="DateTime"&& Boolean(listItem[fieldSchema.Name+".groupdisp"])) {
a+= listItem[fieldSchema.Name+".groupdisp"];
} elseif (fType =="User" || fType == "UserMulti") {
a+= listItem[fieldSchema.Name+".span"];
} else {
ctx.CurrentItemIdx =k;
listItem[group+".groupHeader"] = true;
a+= spMgr.RenderFieldByName(ctx,group, listItem,listSchema);
deletelistItem[group+".groupHeader"];
ctx.CurrentItemIdx = -1;
}
}
a+= ' <span style="font-weight: lighter; display: inline-block;">(';
a+= level ==2 ? listItem[group+".COUNT.group2"] : listItem[group+ ".COUNT.group"];

a+= ")</span>";

// ************ Add the link here *************

a+= "<a href='/link/to/doc/lib/"+listItem[group] +"' target='_blank' style='margin-gt;Click here to upload supporting documents</a>";

// ************ done adding the link *************

a+="</td></tr></tbody>";

// var o = listSchema.Aggregate;
// if (o !== null && !ctx.inGridMode) {
// a += RenderAggregate(ctx, groupId, listItem, listSchema, level, collapse, o);
// }
ctx.CurrentItem =null;
returna;
}

It works fine except that when I do some filtering by choose some values in the table header, the list view is stuck in "Working on it..." until I refresh the whole page, like below,

How to fix this? Or is there an easy / better way to add this hyperlink?

Thanks,

Michael


Viewing all articles
Browse latest Browse all 7589

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>